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

Properties

attributeService

readonly attributeService: AttributeService<TextAttributes>

Defined in

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

deleteText()

deleteText: (inlineRange) => void

Parameters

• inlineRange: InlineRange

Returns

void

Defined in

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

deltaService

readonly deltaService: DeltaService<TextAttributes>

Defined in

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

disposables

readonly disposables: DisposableGroup

Defined in

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

eventService

readonly eventService: EventService<TextAttributes>

Defined in

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

focusEnd()

focusEnd: () => void

Returns

void

Defined in

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

focusIndex()

focusIndex: (index) => void

Parameters

• index: number

Returns

void

Defined in

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

focusStart()

focusStart: () => void

Returns

void

Defined in

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

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

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

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

getFormat()

getFormat: (inlineRange, loose) => TextAttributes

Parameters

• inlineRange: InlineRange

• loose: boolean = false

Returns

TextAttributes

Defined in

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

getInlineRangeFromElement()

getInlineRangeFromElement: (element) => null | InlineRange

Parameters

• element: Element

Returns

null | InlineRange

Defined in

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

getLine()

getLine: (rangeIndex) => null | object

Parameters

• rangeIndex: number

Returns

null | object

Defined in

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

getNativeRange()

getNativeRange: () => null | Range

Returns

null | Range

Defined in

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

getNativeSelection()

getNativeSelection: () => null | Selection

Returns

null | Selection

Defined in

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

getTextPoint()

getTextPoint: (rangeIndex) => null | TextPoint

Parameters

• rangeIndex: number

Returns

null | TextPoint

Defined in

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

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

insertLineBreak()

insertLineBreak: (inlineRange) => void

Parameters

• inlineRange: InlineRange

Returns

void

Defined in

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

insertText()

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

Parameters

• inlineRange: InlineRange

• text: string

• attributes: TextAttributes = ...

Returns

void

Defined in

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

isEmbed()

readonly isEmbed: (delta) => boolean

Parameters

• delta: DeltaInsert<TextAttributes>

Returns

boolean

Defined in

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

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

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

isValidInlineRange()

isValidInlineRange: (inlineRange) => boolean

Parameters

• inlineRange: null | InlineRange

Returns

boolean

Defined in

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

mapDeltasInInlineRange()

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

Type Parameters

• Result

Parameters

• inlineRange: InlineRange

• callback

Returns

Result[]

Defined in

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

normalizeAttributes()

normalizeAttributes: (textAttributes?) => undefined | TextAttributes

Parameters

• textAttributes?: TextAttributes

Returns

undefined | TextAttributes

Defined in

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

rangeService

readonly rangeService: RangeService<TextAttributes>

Defined in

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

render()

render: () => void

Returns

void

Defined in

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

renderService

readonly renderService: RenderService<TextAttributes>

Defined in

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

rerenderWholeEditor()

rerenderWholeEditor: () => void

Returns

void

Defined in

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

resetMarks()

resetMarks: () => void

Returns

void

Defined in

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

resetText()

resetText: (inlineRange) => void

Parameters

• inlineRange: InlineRange

Returns

void

Defined in

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

selectAll()

selectAll: () => void

Returns

void

Defined in

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

setAttributeRenderer()

setAttributeRenderer: (renderer) => void

Parameters

• renderer: AttributeRenderer<TextAttributes>

Returns

void

Defined in

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

setAttributeSchema()

setAttributeSchema: (schema) => void

Parameters

• schema: ZodType<TextAttributes, ZodTypeDef, unknown>

Returns

void

Defined in

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

setInlineRange()

setInlineRange: (inlineRange) => void

Parameters

• inlineRange: null | InlineRange

Returns

void

Defined in

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

setMarks()

setMarks: (marks) => void

Parameters

• marks: TextAttributes

Returns

void

Defined in

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

setText()

setText: (text, attributes) => void

Parameters

• text: string

• attributes: TextAttributes = ...

Returns

void

Defined in

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

slots

readonly slots: object

inlineRangeSync

inlineRangeSync: Slot<null | Range>

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>

renderComplete

renderComplete: Slot<void>

textChange

textChange: Slot<void>

unmounted

unmounted: Slot<void>

Defined in

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

syncInlineRange()

syncInlineRange: (inlineRange?) => void

sync the dom selection from inline range for this Editor

Parameters

• inlineRange?: null | InlineRange

Returns

void

Defined in

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

textService

readonly textService: InlineTextService<TextAttributes>

Defined in

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

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

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

vLineRenderer

readonly vLineRenderer: null | (vLine) => TemplateResult

Defined in

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

waitForUpdate()

waitForUpdate: () => Promise<void>

Returns

Promise<void>

Defined in

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

yText

readonly yText: YText

Defined in

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

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

embedDeltas

get embedDeltas(): DeltaInsert<TextAttributes>[]

Returns

DeltaInsert<TextAttributes>[]

Defined in

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

eventSource

get eventSource(): null | HTMLElement

Returns

null | HTMLElement

Defined in

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

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

inlineRange$

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

Returns

Signal<null | InlineRange>

Defined in

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

inlineRangeProviderOverride

get inlineRangeProviderOverride(): boolean

Returns

boolean

Defined in

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

isComposing

get isComposing(): boolean

Returns

boolean

Defined in

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

isReadonly

get isReadonly(): boolean

Returns

boolean

Defined in

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

lastEndRelativePosition

get lastEndRelativePosition(): null | RelativePosition

Returns

null | RelativePosition

Defined in

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

lastStartRelativePosition

get lastStartRelativePosition(): null | RelativePosition

Returns

null | RelativePosition

Defined in

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

marks

get marks(): null | TextAttributes

Returns

null | TextAttributes

Defined in

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

mounted

get mounted(): boolean

Returns

boolean

Defined in

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

rootElement

get rootElement(): InlineRootElement<TextAttributes>

Returns

InlineRootElement<TextAttributes>

Defined in

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

yTextDeltas

get yTextDeltas(): any

Returns

any

Defined in

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

yTextLength

get yTextLength(): number

Returns

number

Defined in

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

yTextString

get yTextString(): string

Returns

string

Defined in

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

Methods

getInlineRange()

getInlineRange(): null | InlineRange

Returns

null | InlineRange

Defined in

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

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

setReadonly()

setReadonly(isReadonly): void

Parameters

• isReadonly: boolean

Returns

void

Defined in

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

transact()

transact(fn): void

Parameters

• fn

Returns

void

Defined in

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

unmount()

unmount(): void

Returns

void

Defined in

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

Class: InlineEditor<TextAttributes> ​

Type Parameters ​

Constructors ​

new InlineEditor() ​

Parameters ​

Returns ​

Defined in ​

Properties ​

attributeService ​

Defined in ​

deleteText() ​

Parameters ​

Returns ​

Defined in ​

deltaService ​

Defined in ​

disposables ​

Defined in ​

eventService ​

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 ​

getInlineRangeFromElement() ​

Parameters ​

Returns ​

Defined in ​

getLine() ​

Parameters ​

Returns ​

Defined in ​

getNativeRange() ​

Returns ​

Defined in ​

getNativeSelection() ​

Returns ​

Defined in ​

getTextPoint() ​

Parameters ​

Returns ​

Defined in ​

hooksService ​

Defined in ​

inlineRangeProvider ​

Defined in ​

insertLineBreak() ​

Parameters ​

Returns ​

Defined in ​

insertText() ​

Parameters ​

Returns ​

Defined in ​

isEmbed() ​

Parameters ​

Returns ​

Defined in ​

Class: InlineEditor<TextAttributes>

Type Parameters

Constructors

new InlineEditor()

Parameters

Returns

Defined in

Properties

attributeService

Defined in

deleteText()

Parameters

Returns

Defined in

deltaService

Defined in

disposables

Defined in

eventService

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

getInlineRangeFromElement()

Parameters

Returns

Defined in

getLine()

Parameters

Returns

Defined in

getNativeRange()

Returns

Defined in

getNativeSelection()

Returns

Defined in

getTextPoint()

Parameters

Returns

Defined in

hooksService

Defined in

inlineRangeProvider

Defined in

insertLineBreak()

Parameters

Returns

Defined in

insertText()

Parameters

Returns

Defined in

isEmbed()

Parameters

Returns

Defined in