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

Properties

_attributeService

private _attributeService: AttributeService<TextAttributes>

Source

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

_deltaService

private _deltaService: DeltaService<TextAttributes>

Source

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

_disposables

private _disposables: DisposableGroup

Source

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

_eventService

private _eventService: EventService<TextAttributes>

Source

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

_eventSource

private _eventSource: null | HTMLElement = null

Source

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

_hooksService

private _hooksService: InlineHookService<TextAttributes>

Source

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

_isReadonly

private _isReadonly: boolean = false

Source

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

_mounted

private _mounted: boolean = false

Source

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

_rangeService

private _rangeService: RangeService<TextAttributes>

Source

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

_rootElement

private _rootElement: null | InlineRootElement<TextAttributes> = null

Source

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

_textService

private _textService: InlineTextService<TextAttributes>

Source

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

_yText

private readonly _yText: Text

Source

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

deleteText()

deleteText: (inlineRange) => void

Parameters

• inlineRange: InlineRange

Returns

void

Source

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

focusEnd()

focusEnd: () => void

Returns

void

Source

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

focusIndex()

focusIndex: (index) => void

Parameters

• index: number

Returns

void

Source

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

focusStart()

focusStart: () => void

Returns

void

Source

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

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

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

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

getFormat()

getFormat: (inlineRange, loose) => TextAttributes

Parameters

• inlineRange: InlineRange

• loose: boolean= false

Returns

TextAttributes

Source

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

getInlineRange()

getInlineRange: () => null | InlineRange

Returns

null | InlineRange

Source

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

getInlineRangeFromElement()

getInlineRangeFromElement: (element) => null | InlineRange

Parameters

• element: Element

Returns

null | InlineRange

Source

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

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

getNativeSelection()

getNativeSelection: () => null | Selection

Returns

null | Selection

Source

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

getTextPoint()

getTextPoint: (rangeIndex) => TextPoint

Parameters

• rangeIndex: number

Returns

TextPoint

Source

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

inlineRangeProvider

readonly inlineRangeProvider: null | InlineRangeProvider

Source

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

insertLineBreak()

insertLineBreak: (inlineRange) => void

Parameters

• inlineRange: InlineRange

Returns

void

Source

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

insertText()

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

Parameters

• inlineRange: InlineRange

• text: string

• attributes: TextAttributes= undefined

Returns

void

Source

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

isEmbed()

readonly isEmbed: (delta) => boolean

Parameters

• delta: DeltaInsert<TextAttributes>

Returns

boolean

Source

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

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

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

isNormalizedDeltaSelected()

isNormalizedDeltaSelected: (normalizedDeltaIndex, inlineRange) => boolean

Parameters

• normalizedDeltaIndex: number

• inlineRange: InlineRange

Returns

boolean

Source

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

isValidInlineRange()

isValidInlineRange: (inlineRange) => boolean

Parameters

• inlineRange: null | InlineRange

Returns

boolean

Source

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

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

resetMarks()

resetMarks: () => void

Returns

void

Source

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

resetText()

resetText: (inlineRange) => void

Parameters

• inlineRange: InlineRange

Returns

void

Source

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

selectAll()

selectAll: () => void

Returns

void

Source

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

setAttributeRenderer()

setAttributeRenderer: (renderer) => void

Parameters

• renderer: AttributeRenderer<TextAttributes>

Returns

void

Source

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

setAttributeSchema()

setAttributeSchema: (schema) => void

Parameters

• schema: ZodType<TextAttributes, ZodTypeDef, unknown>

Returns

void

Source

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

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

setMarks()

setMarks: (marks) => void

Parameters

• marks: TextAttributes

Returns

void

Source

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

setText()

setText: (text, attributes) => void

Parameters

• text: string

• attributes: TextAttributes= undefined

Returns

void

Source

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

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

syncInlineRange()

syncInlineRange: () => void

sync the dom selection from inline ranage for this Editor

Returns

void

Source

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

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

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

getTextNodesFromElement()

static getTextNodesFromElement: (element) => Text[]

Parameters

• element: Element

Returns

Text[]

Source

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

nativePointToTextPoint()

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

Parameters

• node: unknown

• offset: number

Returns

TextPoint | null

Source

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

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

Accessors

attributeService

get attributeService(): AttributeService<TextAttributes>

Returns

AttributeService<TextAttributes>

Source

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

deltaService

get deltaService(): DeltaService<TextAttributes>

Returns

DeltaService<TextAttributes>

Source

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

disposables

get disposables(): DisposableGroup

Returns

DisposableGroup

Source

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

eventService

get eventService(): EventService<TextAttributes>

Returns

EventService<TextAttributes>

Source

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

eventSource

get eventSource(): HTMLElement

Returns

HTMLElement

Source

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

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

isComposing

get isComposing(): boolean

Returns

boolean

Source

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

isReadonly

get isReadonly(): boolean

Returns

boolean

Source

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

marks

get marks(): null | TextAttributes

Returns

null | TextAttributes

Source

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

mounted

get mounted(): boolean

Returns

boolean

Source

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

rangeService

get rangeService(): RangeService<TextAttributes>

Returns

RangeService<TextAttributes>

Source

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

rootElement

get rootElement(): InlineRootElement<TextAttributes>

Returns

InlineRootElement<TextAttributes>

Source

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

yText

get yText(): Text

Returns

Text

Source

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

yTextDeltas

get yTextDeltas(): any

Returns

any

Source

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

yTextLength

get yTextLength(): number

Returns

number

Source

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

yTextString

get yTextString(): string

Returns

string

Source

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

Methods

_bindYTextObserver()

private _bindYTextObserver(): void

Returns

void

Source

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

_onYTextChange()

private _onYTextChange(_, transaction): void

Parameters

• _: YTextEvent

• transaction: Transaction

Returns

void

Source

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

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

requestUpdate()

requestUpdate(syncInlineRange): void

Parameters

• syncInlineRange: boolean= true

Returns

void

Source

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

rerenderWholeEditor()

rerenderWholeEditor(): void

Returns

void

Source

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

setReadonly()

setReadonly(isReadonly): void

Parameters

• isReadonly: boolean

Returns

void

Source

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

transact()

transact(fn): void

Parameters

• fn

Returns

void

Source

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

unmount()

unmount(): void

Returns

void

Source

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

waitForUpdate()

waitForUpdate(): Promise<void>

Returns

Promise<void>

Source

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

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