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:

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

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

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

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

Class: InlineEditor<TextAttributes> ​

Type Parameters ​

TextAttributes ​

Constructors ​

new InlineEditor() ​

Parameters ​

yText ​

ops ​

hooks? ​

hooks.beforeinput? ​

hooks.compositionEnd? ​

inlineRangeProvider? ​

isEmbed? ​

vLineRenderer? ​

Returns ​

Properties ​

attributeService ​

deleteText() ​

Parameters ​

inlineRange ​

Returns ​

deltaService ​

disposables ​

eventService ​

focusEnd() ​

Returns ​

focusIndex() ​

Parameters ​

index ​

Returns ​

focusStart() ​

Returns ​

formatText() ​

Parameters ​

inlineRange ​

attributes ​

options ​

match? ​

mode? ​

Returns ​

getDeltaByRangeIndex() ​

Parameters ​

rangeIndex ​

Returns ​

getDeltasByInlineRange() ​

Parameters ​

inlineRange ​

Returns ​

getFormat() ​

Parameters ​

inlineRange ​

loose ​

Returns ​

getInlineRangeFromElement() ​

Parameters ​

element ​

Returns ​

getLine() ​

Parameters ​

rangeIndex ​

Returns ​

getNativeRange() ​

Returns ​

getNativeSelection() ​

Returns ​

getTextPoint() ​

Parameters ​

rangeIndex ​

Returns ​

hooksService ​

inlineRangeProvider ​

insertLineBreak() ​

Parameters ​

inlineRange ​

Returns ​

insertText() ​

Parameters ​

inlineRange ​

text ​

attributes ​

Class: InlineEditor<TextAttributes>

Type Parameters

TextAttributes

Constructors

new InlineEditor()

Parameters

yText

ops

hooks?

hooks.beforeinput?

hooks.compositionEnd?

inlineRangeProvider?

isEmbed?

vLineRenderer?

Returns

Properties

attributeService

deleteText()

Parameters

inlineRange

Returns

deltaService

disposables

eventService

focusEnd()

Returns

focusIndex()

Parameters

index

Returns

focusStart()

Returns

formatText()

Parameters

inlineRange

attributes

options

match?

mode?

Returns

getDeltaByRangeIndex()

Parameters

rangeIndex

Returns

getDeltasByInlineRange()

Parameters

inlineRange

Returns

getFormat()

Parameters

inlineRange

loose

Returns

getInlineRangeFromElement()

Parameters

element

Returns

getLine()

Parameters

rangeIndex

Returns

getNativeRange()

Returns

getNativeSelection()

Returns

getTextPoint()

Parameters

rangeIndex

Returns

hooksService

inlineRangeProvider

insertLineBreak()

Parameters

inlineRange

Returns

insertText()

Parameters

inlineRange

text

attributes