Skip to content

BlockSuite API Documentation / @blocksuite/inline / InlineEditor

Class: InlineEditor<TextAttributes>

Defined in: packages/framework/inline/src/inline-editor.ts:38

Type Parameters

TextAttributes

TextAttributes extends BaseTextAttributes = BaseTextAttributes

Constructors

new InlineEditor()

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

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

Parameters

yText

YText

ops
hooks?

{ beforeinput: (props) => void; compositionEnd: (props) => void; }

hooks.beforeinput?

(props) => void

hooks.compositionEnd?

(props) => void

inlineRangeProvider?

InlineRangeProvider

isEmbed?

(delta) => boolean

vLineRenderer?

(vLine) => TemplateResult

Returns

InlineEditor<TextAttributes>

Properties

attributeService

readonly attributeService: AttributeService<TextAttributes>

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


deleteText()

deleteText: (inlineRange) => void

Defined in: packages/framework/inline/src/inline-editor.ts:63

Parameters

inlineRange

InlineRange

Returns

void


deltaService

readonly deltaService: DeltaService<TextAttributes>

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


disposables

readonly disposables: DisposableGroup

Defined in: packages/framework/inline/src/inline-editor.ts:47


eventService

readonly eventService: EventService<TextAttributes>

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


focusEnd()

focusEnd: () => void

Defined in: packages/framework/inline/src/inline-editor.ts:81

Returns

void


focusIndex()

focusIndex: (index) => void

Defined in: packages/framework/inline/src/inline-editor.ts:82

Parameters

index

number

Returns

void


focusStart()

focusStart: () => void

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

Returns

void


formatText()

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

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

Parameters

inlineRange

InlineRange

attributes

TextAttributes

options
match?

(delta, deltaInlineRange) => boolean

mode?

"replace" | "merge"

Returns

void


getDeltaByRangeIndex()

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

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

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>


getDeltasByInlineRange()

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

Defined in: packages/framework/inline/src/inline-editor.ts:73

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


getFormat()

getFormat: (inlineRange, loose) => TextAttributes

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

Parameters

inlineRange

InlineRange

loose

boolean = false

Returns

TextAttributes


getInlineRangeFromElement()

getInlineRangeFromElement: (element) => null | InlineRange

Defined in: packages/framework/inline/src/inline-editor.ts:84

Parameters

element

Element

Returns

null | InlineRange


getLine()

getLine: (rangeIndex) => null | { line: VLine; lineIndex: number; rangeIndexRelatedToLine: number; }

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

Parameters

rangeIndex

number

Returns

null | { line: VLine; lineIndex: number; rangeIndexRelatedToLine: number; }


getNativeRange()

getNativeRange: () => null | Range

Defined in: packages/framework/inline/src/inline-editor.ts:93

Returns

null | Range


getNativeSelection()

getNativeSelection: () => null | Selection

Defined in: packages/framework/inline/src/inline-editor.ts:94

Returns

null | Selection


getTextPoint()

getTextPoint: (rangeIndex) => null | TextPoint

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

Parameters

rangeIndex

number

Returns

null | TextPoint


hooksService

readonly hooksService: InlineHookService<TextAttributes>

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


inlineRangeProvider

readonly inlineRangeProvider: InlineRangeProvider

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


insertLineBreak()

insertLineBreak: (inlineRange) => void

Defined in: packages/framework/inline/src/inline-editor.ts:65

Parameters

inlineRange

InlineRange

Returns

void


insertText()

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

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

Parameters

inlineRange

InlineRange

text

string

attributes

TextAttributes = ...

Returns

void


isEmbed()

readonly isEmbed: (delta) => boolean

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

Parameters

delta

DeltaInsert<TextAttributes>

Returns

boolean


isFirstLine()

isFirstLine: (inlineRange) => boolean

Defined in: packages/framework/inline/src/inline-editor.ts:85

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


isLastLine()

isLastLine: (inlineRange) => boolean

Defined in: packages/framework/inline/src/inline-editor.ts:86

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


isValidInlineRange()

isValidInlineRange: (inlineRange) => boolean

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

Parameters

inlineRange

null | InlineRange

Returns

boolean


mapDeltasInInlineRange()

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

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

Type Parameters

Result

Result

Parameters

inlineRange

InlineRange

callback

(delta, rangeIndex, deltaIndex) => Result

Returns

Result[]


normalizeAttributes()

normalizeAttributes: (textAttributes?) => undefined | TextAttributes

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

Parameters

textAttributes?

TextAttributes

Returns

undefined | TextAttributes


rangeService

readonly rangeService: RangeService<TextAttributes>

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


render()

render: () => void

Defined in: packages/framework/inline/src/inline-editor.ts:113

Returns

void


renderService

readonly renderService: RenderService<TextAttributes>

Defined in: packages/framework/inline/src/inline-editor.ts:109


rerenderWholeEditor()

rerenderWholeEditor: () => void

Defined in: packages/framework/inline/src/inline-editor.ts:112

Returns

void


resetMarks()

resetMarks: () => void

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

Returns

void


resetText()

resetText: (inlineRange) => void

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

Parameters

inlineRange

InlineRange

Returns

void


selectAll()

selectAll: () => void

Defined in: packages/framework/inline/src/inline-editor.ts:88

Returns

void


setAttributeRenderer()

setAttributeRenderer: (renderer) => void

Defined in: packages/framework/inline/src/inline-editor.ts:54

Parameters

renderer

AttributeRenderer<TextAttributes>

Returns

void


setAttributeSchema()

setAttributeSchema: (schema) => void

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

Parameters

schema

ZodType<TextAttributes, ZodTypeDef, unknown>

Returns

void


setMarks()

setMarks: (marks) => void

Defined in: packages/framework/inline/src/inline-editor.ts:56

Parameters

marks

TextAttributes

Returns

void


setText()

setText: (text, attributes) => void

Defined in: packages/framework/inline/src/inline-editor.ts:68

Parameters

text

string

attributes

TextAttributes = ...

Returns

void


slots

readonly slots: object

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

inlineRangeSync

inlineRangeSync: Subject<null | Range>

inputting

inputting: Subject<void>

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

keydown

keydown: Subject<KeyboardEvent>

Triggered only when the inlineRange is not null.

mounted

mounted: Subject<void>

renderComplete

renderComplete: Subject<void>

textChange

textChange: Subject<void>

unmounted

unmounted: Subject<void>


syncInlineRange()

syncInlineRange: (inlineRange?) => void

Defined in: packages/framework/inline/src/inline-editor.ts:89

sync the dom selection from inline range for this Editor

Parameters

inlineRange?

null | InlineRange

Returns

void


textService

readonly textService: InlineTextService<TextAttributes>

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


toDomRange()

toDomRange: (inlineRange) => null | Range

Defined in: packages/framework/inline/src/inline-editor.ts:90

calculate the dom selection from inline ranage for this Editor

Parameters

inlineRange

InlineRange

Returns

null | Range


toInlineRange()

toInlineRange: (range) => null | InlineRange

Defined in: packages/framework/inline/src/inline-editor.ts:91

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


vLineRenderer

readonly vLineRenderer: null | (vLine) => TemplateResult

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


waitForUpdate()

waitForUpdate: () => Promise<void>

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

Returns

Promise<void>


yText

readonly yText: YText

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


getTextNodesFromElement()

static getTextNodesFromElement: (element) => Text[]

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

Parameters

element

Element

Returns

Text[]


nativePointToTextPoint()

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

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

Parameters

node

unknown

offset

number

Returns

null | TextPoint


textPointToDomPoint()

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

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

Parameters

text

Text

offset

number

rootElement

HTMLElement

Returns

null | DomPoint

Accessors

embedDeltas

Get Signature

get embedDeltas(): DeltaInsert<TextAttributes>[]

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

Returns

DeltaInsert<TextAttributes>[]


eventSource

Get Signature

get eventSource(): null | HTMLElement

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

Returns

null | HTMLElement


hooks

Get Signature

get hooks(): object

Defined in: packages/framework/inline/src/inline-editor.ts:119

Returns

object

beforeinput()?

optional beforeinput: (props) => void

Parameters
props

BeforeinputHookCtx<TextAttributes>

Returns

void

compositionEnd()?

optional compositionEnd: (props) => void

Parameters
props

CompositionEndHookCtx<TextAttributes>

Returns

void


inlineRange$

Get Signature

get inlineRange$(): Signal<null | InlineRange>

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

Returns

Signal<null | InlineRange>


inlineRangeProviderOverride

Get Signature

get inlineRangeProviderOverride(): boolean

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

Returns

boolean


isComposing

Get Signature

get isComposing(): boolean

Defined in: packages/framework/inline/src/inline-editor.ts:105

Returns

boolean


isReadonly

Get Signature

get isReadonly(): boolean

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

Returns

boolean


lastEndRelativePosition

Get Signature

get lastEndRelativePosition(): null | RelativePosition

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

Returns

null | RelativePosition


lastStartRelativePosition

Get Signature

get lastStartRelativePosition(): null | RelativePosition

Defined in: packages/framework/inline/src/inline-editor.ts:96

Returns

null | RelativePosition


marks

Get Signature

get marks(): null | TextAttributes

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

Returns

null | TextAttributes


mounted

Get Signature

get mounted(): boolean

Defined in: packages/framework/inline/src/inline-editor.ts:134

Returns

boolean


rendering

Get Signature

get rendering(): boolean

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

Returns

boolean


rootElement

Get Signature

get rootElement(): null | InlineRootElement<TextAttributes>

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

Returns

null | InlineRootElement<TextAttributes>


yTextDeltas

Get Signature

get yTextDeltas(): any

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

Returns

any


yTextLength

Get Signature

get yTextLength(): number

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

Returns

number


yTextString

Get Signature

get yTextString(): string

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

Returns

string

Methods

getInlineRange()

getInlineRange(): null | InlineRange

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

Returns

null | InlineRange


mount()

mount(rootElement, eventSource, isReadonly): void

Defined in: packages/framework/inline/src/inline-editor.ts:234

Parameters

rootElement

HTMLElement

eventSource

HTMLElement = rootElement

isReadonly

boolean = false

Returns

void


setInlineRange()

setInlineRange(inlineRange): void

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

Parameters

inlineRange

null | InlineRange

Returns

void


setReadonly()

setReadonly(isReadonly): void

Defined in: packages/framework/inline/src/inline-editor.ts:274

Parameters

isReadonly

boolean

Returns

void


transact()

transact(fn): void

Defined in: packages/framework/inline/src/inline-editor.ts:288

Parameters

fn

() => void

Returns

void


unmount()

unmount(): void

Defined in: packages/framework/inline/src/inline-editor.ts:261

Returns

void