RangeDecoration
Defined in: packages/editor/src/types/editor.ts:502
A range decoration is a UI affordance that wraps a given selection range in the editor with a custom component. This can be used to highlight search results, mark validation errors on specific words, draw user presence and similar.
Properties
component()
component: (
props
) =>ReactElement
<any
>
Defined in: packages/editor/src/types/editor.ts:516
A component for rendering the range decoration. The component will receive the children (text) of the range decoration as its children.
Parameters
props
children
ReactNode
Returns
ReactElement
<any
>
Example
(rangeComponentProps: PropsWithChildren) => ( <SearchResultHighlight> {rangeComponentProps.children} </SearchResultHighlight> )
onMoved()?
optional
onMoved: (details
) =>void
Defined in: packages/editor/src/types/editor.ts:524
A optional callback that will be called when the range decoration potentially moves according to user edits.
Parameters
details
Returns
void
payload?
optional
payload:Record
<string
,unknown
>
Defined in: packages/editor/src/types/editor.ts:528
A custom payload that can be set on the range decoration
selection
selection:
EditorSelection
Defined in: packages/editor/src/types/editor.ts:520
The editor content selection range