BlockSuite API Documentation / @blocksuite/inline / InlineEditor
Class: InlineEditor<TextAttributes>
Type parameters
• TextAttributes extends BaseTextAttributes
= BaseTextAttributes
Constructors
new InlineEditor(yText, ops)
new InlineEditor<
TextAttributes
>(yText
,ops
):InlineEditor
<TextAttributes
>
Parameters
• yText: Text
• ops= {}
• ops.hooks?
• ops.hooks.beforeinput?
• ops.hooks.compositionEnd?
• ops.inlineRangeProvider?: InlineRangeProvider
• ops.isEmbed?
Returns
InlineEditor
<TextAttributes
>
Source
packages/framework/inline/src/inline-editor.ts:194
Properties
_attributeService
private
_attributeService:AttributeService
<TextAttributes
>
Source
packages/framework/inline/src/inline-editor.ts:61
_deltaService
private
_deltaService:DeltaService
<TextAttributes
>
Source
packages/framework/inline/src/inline-editor.ts:64
_disposables
private
_disposables:DisposableGroup
Source
packages/framework/inline/src/inline-editor.ts:45
_eventService
private
_eventService:EventService
<TextAttributes
>
Source
packages/framework/inline/src/inline-editor.ts:55
_eventSource
private
_eventSource:null
|HTMLElement
=null
Source
packages/framework/inline/src/inline-editor.ts:52
_hooksService
private
_hooksService:InlineHookService
<TextAttributes
>
Source
packages/framework/inline/src/inline-editor.ts:70
_isReadonly
private
_isReadonly:boolean
=false
Source
packages/framework/inline/src/inline-editor.ts:53
_mounted
private
_mounted:boolean
=false
Source
packages/framework/inline/src/inline-editor.ts:72
_rangeService
private
_rangeService:RangeService
<TextAttributes
>
Source
packages/framework/inline/src/inline-editor.ts:58
_rootElement
private
_rootElement:null
|InlineRootElement
<TextAttributes
> =null
Source
packages/framework/inline/src/inline-editor.ts:51
_textService
private
_textService:InlineTextService
<TextAttributes
>
Source
packages/framework/inline/src/inline-editor.ts:67
_yText
private
readonly
_yText:Text
Source
packages/framework/inline/src/inline-editor.ts:50
deleteText()
deleteText: (
inlineRange
) =>void
Parameters
• inlineRange: InlineRange
Returns
void
Source
packages/framework/inline/src/inline-editor.ts:177
focusEnd()
focusEnd: () =>
void
Returns
void
Source
packages/framework/inline/src/inline-editor.ts:165
focusIndex()
focusIndex: (
index
) =>void
Parameters
• index: number
Returns
void
Source
packages/framework/inline/src/inline-editor.ts:167
focusStart()
focusStart: () =>
void
Returns
void
Source
packages/framework/inline/src/inline-editor.ts:164
formatText()
formatText: (
inlineRange
,attributes
,options
) =>void
Parameters
• inlineRange: InlineRange
• attributes: TextAttributes
• options= {}
• options.match?
• options.mode?: "replace"
| "merge"
Returns
void
Source
packages/framework/inline/src/inline-editor.ts:180
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
>
Source
packages/framework/inline/src/inline-editor.ts:172
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
>[]
Source
packages/framework/inline/src/inline-editor.ts:171
getFormat()
getFormat: (
inlineRange
,loose
) =>TextAttributes
Parameters
• inlineRange: InlineRange
• loose: boolean
= false
Returns
TextAttributes
Source
packages/framework/inline/src/inline-editor.ts:150
getInlineRange()
getInlineRange: () =>
null
|InlineRange
Returns
null
| InlineRange
Source
packages/framework/inline/src/inline-editor.ts:155
getInlineRangeFromElement()
getInlineRangeFromElement: (
element
) =>null
|InlineRange
Parameters
• element: Element
Returns
null
| InlineRange
Source
packages/framework/inline/src/inline-editor.ts:156
getLine()
getLine: (
rangeIndex
) =>object
Parameters
• rangeIndex: number
Returns
object
line
line:
VLine
lineIndex
lineIndex:
number
rangeIndexRelatedToLine
rangeIndexRelatedToLine:
number
Source
packages/framework/inline/src/inline-editor.ts:159
getNativeSelection()
getNativeSelection: () =>
null
|Selection
Returns
null
| Selection
Source
packages/framework/inline/src/inline-editor.ts:157
getTextPoint()
getTextPoint: (
rangeIndex
) =>TextPoint
Parameters
• rangeIndex: number
Returns
Source
packages/framework/inline/src/inline-editor.ts:158
inlineRangeProvider
readonly
inlineRangeProvider:null
|InlineRangeProvider
Source
packages/framework/inline/src/inline-editor.ts:75
insertLineBreak()
insertLineBreak: (
inlineRange
) =>void
Parameters
• inlineRange: InlineRange
Returns
void
Source
packages/framework/inline/src/inline-editor.ts:179
insertText()
insertText: (
inlineRange
,text
,attributes
) =>void
Parameters
• inlineRange: InlineRange
• text: string
• attributes: TextAttributes
= undefined
Returns
void
Source
packages/framework/inline/src/inline-editor.ts:178
isEmbed()
readonly
isEmbed: (delta
) =>boolean
Parameters
• delta: DeltaInsert
<TextAttributes
>
Returns
boolean
Source
packages/framework/inline/src/inline-editor.ts:74
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
Source
packages/framework/inline/src/inline-editor.ts:161
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
Source
packages/framework/inline/src/inline-editor.ts:162
isNormalizedDeltaSelected()
isNormalizedDeltaSelected: (
normalizedDeltaIndex
,inlineRange
) =>boolean
Parameters
• normalizedDeltaIndex: number
• inlineRange: InlineRange
Returns
boolean
Source
packages/framework/inline/src/inline-editor.ts:174
isValidInlineRange()
isValidInlineRange: (
inlineRange
) =>boolean
Parameters
• inlineRange: null
| InlineRange
Returns
boolean
Source
packages/framework/inline/src/inline-editor.ts:160
mapDeltasInInlineRange()
mapDeltasInInlineRange: <
Result
>(inlineRange
,callback
,normalize
) =>Result
[]
Type parameters
• Result
Parameters
• inlineRange: InlineRange
• callback
• normalize: boolean
= false
Returns
Result
[]
Source
packages/framework/inline/src/inline-editor.ts:173
resetMarks()
resetMarks: () =>
void
Returns
void
Source
packages/framework/inline/src/inline-editor.ts:149
resetText()
resetText: (
inlineRange
) =>void
Parameters
• inlineRange: InlineRange
Returns
void
Source
packages/framework/inline/src/inline-editor.ts:181
selectAll()
selectAll: () =>
void
Returns
void
Source
packages/framework/inline/src/inline-editor.ts:166
setAttributeRenderer()
setAttributeRenderer: (
renderer
) =>void
Parameters
• renderer: AttributeRenderer
<TextAttributes
>
Returns
void
Source
packages/framework/inline/src/inline-editor.ts:147
setAttributeSchema()
setAttributeSchema: (
schema
) =>void
Parameters
• schema: ZodType
<TextAttributes
, ZodTypeDef
, unknown
>
Returns
void
Source
packages/framework/inline/src/inline-editor.ts:146
setInlineRange()
setInlineRange: (
inlineRange
,sync
) =>void
the inline ranage is synced to the native selection asynchronically if sync is true, the native selection will be synced immediately
Parameters
• inlineRange: null
| InlineRange
• sync: boolean
= true
Returns
void
Source
packages/framework/inline/src/inline-editor.ts:163
setMarks()
setMarks: (
marks
) =>void
Parameters
• marks: TextAttributes
Returns
void
Source
packages/framework/inline/src/inline-editor.ts:148
setText()
setText: (
text
,attributes
) =>void
Parameters
• text: string
• attributes: TextAttributes
= undefined
Returns
void
Source
packages/framework/inline/src/inline-editor.ts:182
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
>
Source
packages/framework/inline/src/inline-editor.ts:77
syncInlineRange()
syncInlineRange: () =>
void
sync the dom selection from inline ranage for this Editor
Returns
void
Source
packages/framework/inline/src/inline-editor.ts:168
toDomRange()
toDomRange: (
inlineRange
) =>null
|Range
calculate the dom selection from inline ranage for this Editor
Parameters
• inlineRange: InlineRange
Returns
null
| Range
Source
packages/framework/inline/src/inline-editor.ts:153
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
Source
packages/framework/inline/src/inline-editor.ts:154
getTextNodesFromElement()
static
getTextNodesFromElement: (element
) =>Text
[]
Parameters
• element: Element
Returns
Text
[]
Source
packages/framework/inline/src/inline-editor.ts:43
nativePointToTextPoint()
static
nativePointToTextPoint: (node
,offset
) =>TextPoint
|null
Parameters
• node: unknown
• offset: number
Returns
TextPoint
| null
Source
packages/framework/inline/src/inline-editor.ts:41
textPointToDomPoint()
static
textPointToDomPoint: (text
,offset
,rootElement
) =>DomPoint
|null
Parameters
• text: Text
• offset: number
• rootElement: HTMLElement
Returns
DomPoint
| null
Source
packages/framework/inline/src/inline-editor.ts:42
Accessors
attributeService
get
attributeService():AttributeService
<TextAttributes
>
Returns
AttributeService
<TextAttributes
>
Source
packages/framework/inline/src/inline-editor.ts:129
deltaService
get
deltaService():DeltaService
<TextAttributes
>
Returns
DeltaService
<TextAttributes
>
Source
packages/framework/inline/src/inline-editor.ts:133
disposables
get
disposables():DisposableGroup
Returns
DisposableGroup
Source
packages/framework/inline/src/inline-editor.ts:46
eventService
get
eventService():EventService
<TextAttributes
>
Returns
EventService
<TextAttributes
>
Source
packages/framework/inline/src/inline-editor.ts:121
eventSource
get
eventSource():HTMLElement
Returns
HTMLElement
Source
packages/framework/inline/src/inline-editor.ts:116
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
Source
packages/framework/inline/src/inline-editor.ts:185
isComposing
get
isComposing():boolean
Returns
boolean
Source
packages/framework/inline/src/inline-editor.ts:190
isReadonly
get
isReadonly():boolean
Returns
boolean
Source
packages/framework/inline/src/inline-editor.ts:280
marks
get
marks():null
|TextAttributes
Returns
null
| TextAttributes
Source
packages/framework/inline/src/inline-editor.ts:142
mounted
get
mounted():boolean
Returns
boolean
Source
packages/framework/inline/src/inline-editor.ts:137
rangeService
get
rangeService():RangeService
<TextAttributes
>
Returns
RangeService
<TextAttributes
>
Source
packages/framework/inline/src/inline-editor.ts:125
rootElement
get
rootElement():InlineRootElement
<TextAttributes
>
Returns
InlineRootElement
<TextAttributes
>
Source
packages/framework/inline/src/inline-editor.ts:111
yText
get
yText():Text
Returns
Source
packages/framework/inline/src/inline-editor.ts:95
yTextDeltas
get
yTextDeltas():any
Returns
any
Source
packages/framework/inline/src/inline-editor.ts:107
yTextLength
get
yTextLength():number
Returns
number
Source
packages/framework/inline/src/inline-editor.ts:103
yTextString
get
yTextString():string
Returns
string
Source
packages/framework/inline/src/inline-editor.ts:99
Methods
_bindYTextObserver()
private
_bindYTextObserver():void
Returns
void
Source
packages/framework/inline/src/inline-editor.ts:347
_onYTextChange()
private
_onYTextChange(_
,transaction
):void
Parameters
• _: YTextEvent
• transaction: Transaction
Returns
void
Source
packages/framework/inline/src/inline-editor.ts:299
mount()
mount(
rootElement
,eventSource
,isReadonly
):void
Parameters
• rootElement: HTMLElement
• eventSource: HTMLElement
= rootElement
• isReadonly: boolean
= false
Returns
void
Source
packages/framework/inline/src/inline-editor.ts:230
requestUpdate()
requestUpdate(
syncInlineRange
):void
Parameters
• syncInlineRange: boolean
= true
Returns
void
Source
packages/framework/inline/src/inline-editor.ts:264
rerenderWholeEditor()
rerenderWholeEditor():
void
Returns
void
Source
packages/framework/inline/src/inline-editor.ts:284
setReadonly()
setReadonly(
isReadonly
):void
Parameters
• isReadonly: boolean
Returns
void
Source
packages/framework/inline/src/inline-editor.ts:273
transact()
transact(
fn
):void
Parameters
• fn
Returns
void
Source
packages/framework/inline/src/inline-editor.ts:290
unmount()
unmount():
void
Returns
void
Source
packages/framework/inline/src/inline-editor.ts:253
waitForUpdate()
waitForUpdate():
Promise
<void
>
Returns
Promise
<void
>
Source
packages/framework/inline/src/inline-editor.ts:268