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:198
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:121
inlineRangeProvider
readonly
inlineRangeProvider:InlineRangeProvider
Defined in
packages/framework/inline/src/inline-editor.ts:151
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:196
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
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:167
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 Editorthe inline ranage of second Editor is
aaaaaa b|bbbb|b cccccc
{index: 1, length: 4}
, the others are null - anchor and focus one in this Editor, one in another Editor2.1 the inline ranage of first Editor is
aaa|aaa aaaaaa bbbbb|b or bbbbb|b cccccc cc|cccc
{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 Editorthe inline range of first Editor is
aa|aaaa bbbbbb cccc|cc
{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:183
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:185
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:127
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:122
inlineRange$
get
inlineRange$():Signal
<null
|InlineRange
>
Returns
Signal
<null
| InlineRange
>
Defined in
packages/framework/inline/src/inline-editor.ts:157
inlineRangeProviderOverride
get
inlineRangeProviderOverride():boolean
Returns
boolean
Defined in
packages/framework/inline/src/inline-editor.ts:148
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:132
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:137
rendering
get
rendering():boolean
Returns
boolean
Defined in
packages/framework/inline/src/inline-editor.ts:117
rootElement
get
rootElement():InlineRootElement
<TextAttributes
>
Returns
InlineRootElement
<TextAttributes
>
Defined in
packages/framework/inline/src/inline-editor.ts:142
yTextDeltas
get
yTextDeltas():any
Returns
any
Defined in
packages/framework/inline/src/inline-editor.ts:186
yTextLength
get
yTextLength():number
Returns
number
Defined in
packages/framework/inline/src/inline-editor.ts:189
yTextString
get
yTextString():string
Returns
string
Defined in
packages/framework/inline/src/inline-editor.ts:192
Methods
getInlineRange()
getInlineRange():
null
|InlineRange
Returns
null
| InlineRange
Defined in
packages/framework/inline/src/inline-editor.ts:163
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:237
setInlineRange()
setInlineRange(
inlineRange
):void
Parameters
• inlineRange: null
| InlineRange
Returns
void
Defined in
packages/framework/inline/src/inline-editor.ts:160
setReadonly()
setReadonly(
isReadonly
):void
Parameters
• isReadonly: boolean
Returns
void
Defined in
packages/framework/inline/src/inline-editor.ts:275
transact()
transact(
fn
):void
Parameters
• fn
Returns
void
Defined in
packages/framework/inline/src/inline-editor.ts:289
unmount()
unmount():
void
Returns
void
Defined in
packages/framework/inline/src/inline-editor.ts:264