Skip to content

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

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:

  1. long text auto wrap in span element
  2. 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:

  1. long text auto wrap in span element
  2. 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)

  1. 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
  2. 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}
  3. 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:280


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


_onYTextChange()

private _onYTextChange(_, transaction): void

Parameters

_: YTextEvent

transaction: Transaction

Returns

void

Source

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


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


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


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