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

• ops = {}

• ops.hooks?

• ops.hooks.beforeinput?

• ops.hooks.compositionEnd?

• ops.inlineRangeProvider?: InlineRangeProvider

• ops.isEmbed?

• ops.vLineRenderer?

Returns

InlineEditor<TextAttributes>

Defined in

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

Properties

deleteText()

deleteText: (inlineRange) => void

Parameters

• inlineRange: InlineRange

Returns

void

Defined in

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

focusEnd()

focusEnd: () => void

Returns

void

Defined in

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

focusIndex()

focusIndex: (index) => void

Parameters

• index: number

Returns

void

Defined in

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

focusStart()

focusStart: () => void

Returns

void

Defined in

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

formatText()

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

Parameters

• inlineRange: InlineRange

• attributes: TextAttributes

• options = {}

• options.match?

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

Returns

void

Defined in

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

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>

Defined in

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

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

Defined in

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

getFormat()

getFormat: (inlineRange, loose) => TextAttributes

Parameters

• inlineRange: InlineRange

• loose: boolean = false

Returns

TextAttributes

Defined in

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

getInlineRange()

getInlineRange: () => null | InlineRange

Returns

null | InlineRange

Defined in

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

getInlineRangeFromElement()

getInlineRangeFromElement: (element) => null | InlineRange

Parameters

• element: Element

Returns

null | InlineRange

Defined in

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

getLine()

getLine: (rangeIndex) => null | object

Parameters

• rangeIndex: number

Returns

null | object

Defined in

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

getNativeSelection()

getNativeSelection: () => null | Selection

Returns

null | Selection

Defined in

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

getTextPoint()

getTextPoint: (rangeIndex) => null | TextPoint

Parameters

• rangeIndex: number

Returns

null | TextPoint

Defined in

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

inlineRangeProvider

readonly inlineRangeProvider: null | InlineRangeProvider

Defined in

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

insertLineBreak()

insertLineBreak: (inlineRange) => void

Parameters

• inlineRange: InlineRange

Returns

void

Defined in

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

insertText()

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

Parameters

• inlineRange: InlineRange

• text: string

• attributes: TextAttributes = ...

Returns

void

Defined in

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

isEmbed()

readonly isEmbed: (delta) => boolean

Parameters

• delta: DeltaInsert<TextAttributes>

Returns

boolean

Defined in

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

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

Defined in

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

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

Defined in

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

isValidInlineRange()

isValidInlineRange: (inlineRange) => boolean

Parameters

• inlineRange: null | InlineRange

Returns

boolean

Defined in

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

mapDeltasInInlineRange()

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

Type Parameters

• Result

Parameters

• inlineRange: InlineRange

• callback

Returns

Result[]

Defined in

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

resetMarks()

resetMarks: () => void

Returns

void

Defined in

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

resetText()

resetText: (inlineRange) => void

Parameters

• inlineRange: InlineRange

Returns

void

Defined in

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

selectAll()

selectAll: () => void

Returns

void

Defined in

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

setAttributeRenderer()

setAttributeRenderer: (renderer) => void

Parameters

• renderer: AttributeRenderer<TextAttributes>

Returns

void

Defined in

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

setAttributeSchema()

setAttributeSchema: (schema) => void

Parameters

• schema: ZodType<TextAttributes, ZodTypeDef, unknown>

Returns

void

Defined in

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

setInlineRange()

setInlineRange: (inlineRange, sync) => void

the inline range is synced to the native selection asynchronously if sync is true, the native selection will be synced immediately

Parameters

• inlineRange: null | InlineRange

• sync: boolean = true

Returns

void

Defined in

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

setMarks()

setMarks: (marks) => void

Parameters

• marks: TextAttributes

Returns

void

Defined in

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

setText()

setText: (text, attributes) => void

Parameters

• text: string

• attributes: TextAttributes = ...

Returns

void

Defined in

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

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>

Defined in

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

syncInlineRange()

syncInlineRange: () => void

sync the dom selection from inline ranage for this Editor

Returns

void

Defined in

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

toDomRange()

toDomRange: (inlineRange) => null | Range

calculate the dom selection from inline ranage for this Editor

Parameters

• inlineRange: InlineRange

Returns

null | Range

Defined in

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

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

Defined in

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

vLineRenderer

readonly vLineRenderer: null | (vLine) => TemplateResult

Defined in

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

getTextNodesFromElement()

static getTextNodesFromElement: (element) => Text[]

Parameters

• element: Element

Returns

Text[]

Defined in

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

nativePointToTextPoint()

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

Parameters

• node: unknown

• offset: number

Returns

TextPoint | null

Defined in

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

textPointToDomPoint()

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

Parameters

• text: Text

• offset: number

• rootElement: HTMLElement

Returns

DomPoint | null

Defined in

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

Accessors

attributeService

get attributeService(): AttributeService<TextAttributes>

Returns

AttributeService<TextAttributes>

Defined in

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

deltaService

get deltaService(): DeltaService<TextAttributes>

Returns

DeltaService<TextAttributes>

Defined in

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

disposables

get disposables(): DisposableGroup

Returns

DisposableGroup

Defined in

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

eventService

get eventService(): EventService<TextAttributes>

Returns

EventService<TextAttributes>

Defined in

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

eventSource

get eventSource(): null | HTMLElement

Returns

null | HTMLElement

Defined in

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

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

Defined in

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

isComposing

get isComposing(): boolean

Returns

boolean

Defined in

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

isReadonly

get isReadonly(): boolean

Returns

boolean

Defined in

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

marks

get marks(): null | TextAttributes

Returns

null | TextAttributes

Defined in

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

mounted

get mounted(): boolean

Returns

boolean

Defined in

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

rangeService

get rangeService(): RangeService<TextAttributes>

Returns

RangeService<TextAttributes>

Defined in

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

rootElement

get rootElement(): InlineRootElement<TextAttributes>

Returns

InlineRootElement<TextAttributes>

Defined in

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

yText

get yText(): YText

Returns

YText

Defined in

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

yTextDeltas

get yTextDeltas(): any

Returns

any

Defined in

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

yTextLength

get yTextLength(): number

Returns

number

Defined in

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

yTextString

get yTextString(): string

Returns

string

Defined in

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

Methods

mount()

mount(rootElement, eventSource, isReadonly): void

Parameters

• rootElement: HTMLElement

• eventSource: HTMLElement = rootElement

• isReadonly: boolean = false

Returns

void

Defined in

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

requestUpdate()

requestUpdate(syncInlineRange): void

Parameters

• syncInlineRange: boolean = true

Returns

void

Defined in

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

rerenderWholeEditor()

rerenderWholeEditor(): void

Returns

void

Defined in

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

setReadonly()

setReadonly(isReadonly): void

Parameters

• isReadonly: boolean

Returns

void

Defined in

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

transact()

transact(fn): void

Parameters

• fn

Returns

void

Defined in

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

unmount()

unmount(): void

Returns

void

Defined in

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

waitForUpdate()

waitForUpdate(): Promise<void>

Returns

Promise<void>

Defined in

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

Class: InlineEditor<TextAttributes> ​

Type Parameters ​

Constructors ​

new InlineEditor() ​

Parameters ​

Returns ​

Defined in ​

Properties ​

deleteText() ​

Parameters ​

Returns ​

Defined in ​

focusEnd() ​

Returns ​

Defined in ​

focusIndex() ​

Parameters ​

Returns ​

Defined in ​

focusStart() ​

Returns ​

Defined in ​

formatText() ​

Parameters ​

Returns ​

Defined in ​

getDeltaByRangeIndex() ​

Parameters ​

Returns ​

Defined in ​

getDeltasByInlineRange() ​

Parameters ​

Returns ​

Defined in ​

getFormat() ​

Parameters ​

Returns ​

Defined in ​

getInlineRange() ​

Returns ​

Defined in ​

getInlineRangeFromElement() ​

Parameters ​

Returns ​

Defined in ​

getLine() ​

Parameters ​

Returns ​

Defined in ​

getNativeSelection() ​

Returns ​

Defined in ​

getTextPoint() ​

Parameters ​

Returns ​

Defined in ​

inlineRangeProvider ​

Defined in ​

insertLineBreak() ​

Parameters ​

Returns ​

Defined in ​

insertText() ​

Parameters ​

Returns ​

Defined in ​

isEmbed() ​

Parameters ​

Returns ​

Defined in ​

isFirstLine() ​

Parameters ​

Returns ​

Defined in ​

isLastLine() ​

Parameters ​

Returns ​

Defined in ​

isValidInlineRange() ​

Parameters ​

Class: InlineEditor<TextAttributes>

Type Parameters

Constructors

new InlineEditor()

Parameters

Returns

Defined in

Properties

deleteText()

Parameters

Returns

Defined in

focusEnd()

Returns

Defined in

focusIndex()

Parameters

Returns

Defined in

focusStart()

Returns

Defined in

formatText()

Parameters

Returns

Defined in

getDeltaByRangeIndex()

Parameters

Returns

Defined in

getDeltasByInlineRange()

Parameters

Returns

Defined in

getFormat()

Parameters

Returns

Defined in

getInlineRange()

Returns

Defined in

getInlineRangeFromElement()

Parameters

Returns

Defined in

getLine()

Parameters

Returns

Defined in

getNativeSelection()

Returns

Defined in

getTextPoint()

Parameters

Returns

Defined in

inlineRangeProvider

Defined in

insertLineBreak()

Parameters

Returns

Defined in

insertText()

Parameters

Returns

Defined in

isEmbed()

Parameters

Returns

Defined in

isFirstLine()

Parameters

Returns

Defined in

isLastLine()

Parameters

Returns

Defined in

isValidInlineRange()

Parameters