BlockSuite API Documentation / @blocksuite/inline / InlineEditor

Class: InlineEditor<TextAttributes>

Type parameters

• TextAttributes extends BaseTextAttributes = BaseTextAttributes

Constructors

new InlineEditor(yText, ops)

new InlineEditor<TextAttributes>(yText, ops): InlineEditor<TextAttributes>

Parameters

• yText: Text

• ops: Object= {}

• ops.hooks?: Object

• ops.hooks.beforeinput?: (props) => void

• ops.hooks.compositionEnd?: (props) => void

• ops.inlineRangeProvider?: InlineRangeProvider

• ops.isEmbed?: (delta) => boolean

Returns

InlineEditor<TextAttributes>

Source

packages/framework/inline/src/inline-editor.ts:194

Properties

_attributeService

private _attributeService: AttributeService<TextAttributes>

Source

packages/framework/inline/src/inline-editor.ts:61

_deltaService

private _deltaService: DeltaService<TextAttributes>

Source

packages/framework/inline/src/inline-editor.ts:64

_disposables

private _disposables: DisposableGroup

Source

packages/framework/inline/src/inline-editor.ts:45

_eventService

private _eventService: EventService<TextAttributes>

Source

packages/framework/inline/src/inline-editor.ts:55

_eventSource

private _eventSource: null | HTMLElement = null

Source

packages/framework/inline/src/inline-editor.ts:52

_hooksService

private _hooksService: InlineHookService<TextAttributes>

Source

packages/framework/inline/src/inline-editor.ts:70

_isReadonly

private _isReadonly: boolean = false

Source

packages/framework/inline/src/inline-editor.ts:53

_mounted

private _mounted: boolean = false

Source

packages/framework/inline/src/inline-editor.ts:72

_rangeService

private _rangeService: RangeService<TextAttributes>

Source

packages/framework/inline/src/inline-editor.ts:58

_rootElement

private _rootElement: null | InlineRootElement<TextAttributes> = null

Source

packages/framework/inline/src/inline-editor.ts:51

_textService

private _textService: InlineTextService<TextAttributes>

Source

packages/framework/inline/src/inline-editor.ts:67

_yText

private readonly _yText: Text

Source

packages/framework/inline/src/inline-editor.ts:50

deleteText

deleteText: (inlineRange) => void

Parameters

• inlineRange: InlineRange

Returns

void

Source

packages/framework/inline/src/inline-editor.ts:177

focusEnd

focusEnd: () => void

Returns

void

Source

packages/framework/inline/src/inline-editor.ts:165

focusIndex

focusIndex: (index) => void

Parameters

• index: number

Returns

void

Source

packages/framework/inline/src/inline-editor.ts:167

focusStart

focusStart: () => void

Returns

void

Source

packages/framework/inline/src/inline-editor.ts:164

formatText

formatText: (inlineRange, attributes, options) => void

Parameters

• inlineRange: InlineRange

• attributes: TextAttributes

• options: Object= {}

• options.match?: (delta, deltaInlineRange) => boolean

• options.mode?: "replace" | "merge"

Returns

void

Source

packages/framework/inline/src/inline-editor.ts:180

getDeltaByRangeIndex

getDeltaByRangeIndex: (rangeIndex) => null | DeltaInsert<TextAttributes>

Here are examples of how this function computes and gets the delta.

We have such a text:

[
  {
     insert: 'aaa',
     attributes: { bold: true },
  },
  {
     insert: 'bbb',
     attributes: { italic: true },
  },
]

getDeltaByRangeIndex(0) returns { insert: 'aaa', attributes: { bold: true } }.

getDeltaByRangeIndex(1) returns { insert: 'aaa', attributes: { bold: true } }.

getDeltaByRangeIndex(3) returns { insert: 'aaa', attributes: { bold: true } }.

getDeltaByRangeIndex(4) returns { insert: 'bbb', attributes: { italic: true } }.

Parameters

• rangeIndex: number

Returns

null | DeltaInsert<TextAttributes>

Source

packages/framework/inline/src/inline-editor.ts:172

getDeltasByInlineRange

getDeltasByInlineRange: (inlineRange) => DeltaEntry<TextAttributes>[]

Here are examples of how this function computes and gets the deltas.

We have such a text:

[
  {
     insert: 'aaa',
     attributes: { bold: true },
  },
  {
     insert: 'bbb',
     attributes: { italic: true },
  },
  {
     insert: 'ccc',
     attributes: { underline: true },
  },
]

getDeltasByInlineRange({ index: 0, length: 0 }) returns

[{ insert: 'aaa', attributes: { bold: true }, }, { index: 0, length: 3, }]]

getDeltasByInlineRange({ index: 0, length: 1 }) returns

[{ insert: 'aaa', attributes: { bold: true }, }, { index: 0, length: 3, }]]

getDeltasByInlineRange({ index: 0, length: 4 }) returns

[{ insert: 'aaa', attributes: { bold: true }, }, { index: 0, length: 3, }],
 [{ insert: 'bbb', attributes: { italic: true }, }, { index: 3, length: 3, }]]

getDeltasByInlineRange({ index: 3, length: 1 }) returns

[{ insert: 'aaa', attributes: { bold: true }, }, { index: 0, length: 3, }],
 [{ insert: 'bbb', attributes: { italic: true }, }, { index: 3, length: 3, }]]

getDeltasByInlineRange({ index: 3, length: 3 }) returns

[{ insert: 'aaa', attributes: { bold: true }, }, { index: 0, length: 3, }],
 [{ insert: 'bbb', attributes: { italic: true }, }, { index: 3, length: 3, }]]

getDeltasByInlineRange({ index: 3, length: 4 }) returns

[{ insert: 'aaa', attributes: { bold: true }, }, { index: 0, length: 3, }],
 [{ insert: 'bbb', attributes: { italic: true }, }, { index: 3, length: 3, }],
 [{ insert: 'ccc', attributes: { underline: true }, }, { index: 6, length: 3, }]]

Parameters

• inlineRange: InlineRange

Returns

DeltaEntry<TextAttributes>[]

Source

packages/framework/inline/src/inline-editor.ts:171

getFormat

getFormat: (inlineRange, loose) => TextAttributes

Parameters

• inlineRange: InlineRange

• loose: boolean= false

Returns

TextAttributes

Source

packages/framework/inline/src/inline-editor.ts:150

getInlineRange

getInlineRange: () => null | InlineRange

Returns

null | InlineRange

Source

packages/framework/inline/src/inline-editor.ts:155

getInlineRangeFromElement

getInlineRangeFromElement: (element) => null | InlineRange

Parameters

• element: Element

Returns

null | InlineRange

Source

packages/framework/inline/src/inline-editor.ts:156

getLine

getLine: (rangeIndex) => readonly [VLine, number]

Parameters

• rangeIndex: number

Returns

readonly [VLine, number]

Source

packages/framework/inline/src/inline-editor.ts:159

getNativeSelection

getNativeSelection: () => null | Selection

Returns

null | Selection

Source

packages/framework/inline/src/inline-editor.ts:157

getTextPoint

getTextPoint: (rangeIndex) => TextPoint

Parameters

• rangeIndex: number

Returns

TextPoint

Source

packages/framework/inline/src/inline-editor.ts:158

inlineRangeProvider

readonly inlineRangeProvider: null | InlineRangeProvider

Source

packages/framework/inline/src/inline-editor.ts:75

insertLineBreak

insertLineBreak: (inlineRange) => void

Parameters

• inlineRange: InlineRange

Returns

void

Source

packages/framework/inline/src/inline-editor.ts:179

insertText

insertText: (inlineRange, text, attributes) => void

Parameters

• inlineRange: InlineRange

• text: string

• attributes: TextAttributes= undefined

Returns

void

Source

packages/framework/inline/src/inline-editor.ts:178

isEmbed

readonly isEmbed: (delta) => boolean

Parameters

• delta: DeltaInsert<TextAttributes>

Returns

boolean

Source

packages/framework/inline/src/inline-editor.ts:74

isFirstLine

isFirstLine: (inlineRange) => boolean

There are two cases to have the second line:

long text auto wrap in span element
soft break

Parameters

• inlineRange: null | InlineRange

Returns

boolean

Source

packages/framework/inline/src/inline-editor.ts:161

isLastLine

isLastLine: (inlineRange) => boolean

There are two cases to have the second line:

long text auto wrap in span element
soft break

Parameters

• inlineRange: null | InlineRange

Returns

boolean

Source

packages/framework/inline/src/inline-editor.ts:162

isNormalizedDeltaSelected

isNormalizedDeltaSelected: (normalizedDeltaIndex, inlineRange) => boolean

Parameters

• normalizedDeltaIndex: number

• inlineRange: InlineRange

Returns

boolean

Source

packages/framework/inline/src/inline-editor.ts:174

isValidInlineRange

isValidInlineRange: (inlineRange) => boolean

Parameters

• inlineRange: null | InlineRange

Returns

boolean

Source

packages/framework/inline/src/inline-editor.ts:160

mapDeltasInInlineRange

mapDeltasInInlineRange: <Result>(inlineRange, callback, normalize) => Result[]

Type parameters

• Result

Parameters

• inlineRange: InlineRange

• callback: (delta, rangeIndex, deltaIndex) => Result

• normalize: boolean= false

Returns

Result[]

Source

packages/framework/inline/src/inline-editor.ts:173

resetMarks

resetMarks: () => void

Returns

void

Source

packages/framework/inline/src/inline-editor.ts:149

resetText

resetText: (inlineRange) => void

Parameters

• inlineRange: InlineRange

Returns

void

Source

packages/framework/inline/src/inline-editor.ts:181

selectAll

selectAll: () => void

Returns

void

Source

packages/framework/inline/src/inline-editor.ts:166

setAttributeRenderer

setAttributeRenderer: (renderer) => void

Parameters

• renderer: AttributeRenderer<TextAttributes>

Returns

void

Source

packages/framework/inline/src/inline-editor.ts:147

setAttributeSchema

setAttributeSchema: (schema) => void

Parameters

• schema: ZodType<TextAttributes, ZodTypeDef, unknown>

Returns

void

Source

packages/framework/inline/src/inline-editor.ts:146

setInlineRange

setInlineRange: (inlineRange, sync) => void

the inline ranage is synced to the native selection asynchronically if sync is true, the native selection will be synced immediately

Parameters

• inlineRange: null | InlineRange

• sync: boolean= true

Returns

void

Source

packages/framework/inline/src/inline-editor.ts:163

setMarks

setMarks: (marks) => void

Parameters

• marks: TextAttributes

Returns

void

Source

packages/framework/inline/src/inline-editor.ts:148

setText

setText: (text, attributes) => void

Parameters

• text: string

• attributes: TextAttributes= undefined

Returns

void

Source

packages/framework/inline/src/inline-editor.ts:182

slots

readonly slots: Object

Type declaration

inlineRangeApply

inlineRangeApply: Slot<Range>

inlineRangeUpdate

inlineRangeUpdate: Slot<InlineRangeUpdatedProp>

inputting

inputting: Slot<void>

Corresponding to the compositionUpdate and beforeInput events, and triggered only when the inlineRange is not null.

keydown

keydown: Slot<KeyboardEvent>

Triggered only when the inlineRange is not null.

mounted

mounted: Slot<void>

render

render: Slot<void>

renderComplete

renderComplete: Slot<void>

textChange

textChange: Slot<void>

unmounted

unmounted: Slot<void>

Source

packages/framework/inline/src/inline-editor.ts:77

syncInlineRange

syncInlineRange: () => void

sync the dom selection from inline ranage for this Editor

Returns

void

Source

packages/framework/inline/src/inline-editor.ts:168

toDomRange

toDomRange: (inlineRange) => null | Range

calculate the dom selection from inline ranage for this Editor

Parameters

• inlineRange: InlineRange

Returns

null | Range

Source

packages/framework/inline/src/inline-editor.ts:153

toInlineRange

toInlineRange: (range) => null | InlineRange

calculate the inline ranage from dom selection for this Editor there are three cases when the inline ranage of this Editor is not null: (In the following, "|" mean anchor and focus, each line is a separate Editor)

anchor and focus are in this Editor
```
aaaaaa
b|bbbb|b
cccccc
```
the inline ranage of second Editor is {index: 1, length: 4}, the others are null
anchor and focus one in this Editor, one in another Editor
```
aaa|aaa    aaaaaa
bbbbb|b or bbbbb|b
cccccc     cc|cccc
```
2.1 the inline ranage of first Editor is {index: 3, length: 3}, the second is {index: 0, length: 5}, the third is null 2.2 the inline ranage of first Editor is null, the second is {index: 5, length: 1}, the third is {index: 0, length: 2}
anchor and focus are in another Editor
```
aa|aaaa
bbbbbb
cccc|cc
```
the inline range of first Editor is {index: 2, length: 4}, the second is {index: 0, length: 6}, the third is {index: 0, length: 4}

Parameters

• range: Range

Returns

null | InlineRange

Source

packages/framework/inline/src/inline-editor.ts:154

getTextNodesFromElement

static getTextNodesFromElement: (element) => Text[] = getTextNodesFromElement

Parameters

• element: Element

Returns

Text[]

Source

packages/framework/inline/src/inline-editor.ts:43

nativePointToTextPoint

static nativePointToTextPoint: (node, offset) => TextPoint | null = nativePointToTextPoint

Parameters

• node: unknown

• offset: number

Returns

TextPoint | null

Source

packages/framework/inline/src/inline-editor.ts:41

textPointToDomPoint

static textPointToDomPoint: (text, offset, rootElement) => DomPoint | null = textPointToDomPoint

Parameters

• text: Text

• offset: number

• rootElement: HTMLElement

Returns

DomPoint | null

Source

packages/framework/inline/src/inline-editor.ts:42

Accessors

attributeService

get attributeService(): AttributeService<TextAttributes>

Returns

AttributeService<TextAttributes>

Source

packages/framework/inline/src/inline-editor.ts:129

deltaService

get deltaService(): DeltaService<TextAttributes>

Returns

DeltaService<TextAttributes>

Source

packages/framework/inline/src/inline-editor.ts:133

disposables

get disposables(): DisposableGroup

Returns

DisposableGroup

Source

packages/framework/inline/src/inline-editor.ts:46

eventService

get eventService(): EventService<TextAttributes>

Returns

EventService<TextAttributes>

Source

packages/framework/inline/src/inline-editor.ts:121

eventSource

get eventSource(): HTMLElement

Returns

HTMLElement

Source

packages/framework/inline/src/inline-editor.ts:116

hooks

get hooks(): Object

Returns

Object

beforeinput?
beforeinput?: (props) => void
Parameters
• props: BeforeinputHookCtx<TextAttributes>
Returns
void
compositionEnd?
compositionEnd?: (props) => void
Parameters
• props: CompositionEndHookCtx<TextAttributes>
Returns
void

Source

packages/framework/inline/src/inline-editor.ts:185

isComposing

get isComposing(): boolean

Returns

boolean

Source

packages/framework/inline/src/inline-editor.ts:190

isReadonly

get isReadonly(): boolean

Returns

boolean

Source

packages/framework/inline/src/inline-editor.ts:277

marks

get marks(): null | TextAttributes

Returns

null | TextAttributes

Source

packages/framework/inline/src/inline-editor.ts:142

mounted

get mounted(): boolean

Returns

boolean

Source

packages/framework/inline/src/inline-editor.ts:137

rangeService

get rangeService(): RangeService<TextAttributes>

Returns

RangeService<TextAttributes>

Source

packages/framework/inline/src/inline-editor.ts:125

rootElement

get rootElement(): InlineRootElement<TextAttributes>

Returns

InlineRootElement<TextAttributes>

Source

packages/framework/inline/src/inline-editor.ts:111

yText

get yText(): Text

Returns

Text

Source

packages/framework/inline/src/inline-editor.ts:95

yTextDeltas

get yTextDeltas(): any

Returns

any

Source

packages/framework/inline/src/inline-editor.ts:107

yTextLength

get yTextLength(): number

Returns

number

Source

packages/framework/inline/src/inline-editor.ts:103

yTextString

get yTextString(): string

Returns

string

Source

packages/framework/inline/src/inline-editor.ts:99

Methods

_bindYTextObserver()

private _bindYTextObserver(): void

Returns

void

Source

packages/framework/inline/src/inline-editor.ts:344

_onYTextChange()

private _onYTextChange(_, transaction): void

Parameters

• _: YTextEvent

• transaction: Transaction

Returns

void

Source

packages/framework/inline/src/inline-editor.ts:296

mount()

mount(rootElement, eventSource): void

Parameters

• rootElement: HTMLElement

• eventSource: HTMLElement= rootElement

Returns

void

Source

packages/framework/inline/src/inline-editor.ts:230

requestUpdate()

requestUpdate(syncInlineRange): void

Parameters

• syncInlineRange: boolean= true

Returns

void

Source

packages/framework/inline/src/inline-editor.ts:262

rerenderWholeEditor()

rerenderWholeEditor(): void

Returns

void

Source

packages/framework/inline/src/inline-editor.ts:281

setReadonly()

setReadonly(isReadonly): void

Parameters

• isReadonly: boolean

Returns

void

Source

packages/framework/inline/src/inline-editor.ts:271

transact()

transact(fn): void

Parameters

• fn: () => void

Returns

void

Source

packages/framework/inline/src/inline-editor.ts:287

unmount()

unmount(): void

Returns

void

Source

packages/framework/inline/src/inline-editor.ts:251

waitForUpdate()

waitForUpdate(): Promise<void>

Returns

Promise<void>

Source

packages/framework/inline/src/inline-editor.ts:266

Generated using TypeDoc and typedoc-plugin-markdown.

Class: InlineEditor<TextAttributes> ​

Type parameters ​

Constructors ​

new InlineEditor(yText, ops) ​

Parameters ​

Returns ​

Source ​

Properties ​

_attributeService ​

Source ​

_deltaService ​

Source ​

_disposables ​

Source ​

_eventService ​

Source ​

_eventSource ​

Source ​

_hooksService ​

Source ​

_isReadonly ​

Source ​

_mounted ​

Source ​

_rangeService ​

Source ​

_rootElement ​

Source ​

_textService ​

Source ​

_yText ​

Source ​

deleteText ​

Parameters ​

Returns ​

Source ​

focusEnd ​

Returns ​

Source ​

focusIndex ​

Parameters ​

Returns ​

Source ​

focusStart ​

Returns ​

Source ​

formatText ​

Parameters ​

Returns ​

Source ​

getDeltaByRangeIndex ​

Parameters ​

Returns ​

Source ​

getDeltasByInlineRange ​

Parameters ​

Returns ​

Source ​

getFormat ​

Parameters ​

Returns ​

Source ​

getInlineRange ​

Returns ​

Source ​

getInlineRangeFromElement ​

Parameters ​

Returns ​

Source ​

getLine ​

Parameters ​

Returns ​

Source ​

getNativeSelection ​

Returns ​

Source ​

getTextPoint ​

Parameters ​

Returns ​

Source ​

Class: InlineEditor<TextAttributes>

Type parameters

Constructors

new InlineEditor(yText, ops)

Parameters

Returns

Source

Properties

_attributeService

Source

_deltaService

Source

_disposables

Source

_eventService

Source

_eventSource

Source

_hooksService

Source

_isReadonly

Source

_mounted

Source

_rangeService

Source

_rootElement

Source

_textService

Source

_yText

Source

deleteText

Parameters

Returns

Source

focusEnd

Returns

Source

focusIndex

Parameters

Returns

Source

focusStart

Returns

Source

formatText

Parameters

Returns

Source

getDeltaByRangeIndex

Parameters

Returns

Source

getDeltasByInlineRange

Parameters

Returns

Source

getFormat

Parameters

Returns

Source

getInlineRange

Returns

Source

getInlineRangeFromElement

Parameters

Returns

Source

getLine

Parameters

Returns

Source

getNativeSelection

Returns

Source

getTextPoint

Parameters

Returns

Source