BlockSuite API Documentation / @blocksuite/inline / InlineEditor

Class: InlineEditor<TextAttributes>

Type parameters

• TextAttributes extends BaseTextAttributes = BaseTextAttributes

Constructors

new InlineEditor()

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

Parameters

• yText: Text

• ops= {}

• ops.hooks?

• ops.hooks.beforeinput?

• ops.hooks.compositionEnd?

• ops.inlineRangeProvider?: InlineRangeProvider

• ops.isEmbed?

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= {}

• options.match?

• 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) => object

Parameters

• rangeIndex: number

Returns

object

line

line: VLine

lineIndex

lineIndex: number

rangeIndexRelatedToLine

rangeIndexRelatedToLine: 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

• 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

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[]

Parameters

• element: Element

Returns

Text[]

Source

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

nativePointToTextPoint()

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

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

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()?

optional beforeinput: (props) => void

Parameters

• props: BeforeinputHookCtx<TextAttributes>

Returns

void

compositionEnd()?

optional 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:287

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:354

_onYTextChange()

private _onYTextChange(_, transaction): void

Parameters

• _: YTextEvent

• transaction: Transaction

Returns

void

Source

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

mount()

mount(rootElement, eventSource, isReadonly): void

Parameters

• rootElement: HTMLElement

• eventSource: HTMLElement= rootElement

• isReadonly: boolean= false

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:264

rerenderWholeEditor()

rerenderWholeEditor(): void

Returns

void

Source

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

setReadonly()

setReadonly(isReadonly): void

Parameters

• isReadonly: boolean

Returns

void

Source

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

transact()

transact(fn): void

Parameters

• fn

Returns

void

Source

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

unmount()

unmount(): void

Returns

void

Source

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

waitForUpdate()

waitForUpdate(): Promise<void>

Returns

Promise<void>

Source

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

Class: InlineEditor<TextAttributes> ​

Type parameters ​

Constructors ​

new InlineEditor() ​

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 ​

line ​

lineIndex ​

rangeIndexRelatedToLine ​

Source ​

getNativeSelection() ​

Returns ​

Source ​

getTextPoint() ​

Class: InlineEditor<TextAttributes>

Type parameters

Constructors

new InlineEditor()

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

line

lineIndex

rangeIndexRelatedToLine

Source

getNativeSelection()

Returns

Source

getTextPoint()