RangeDecoration

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, string | JSXElementConstructor<any>>

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, string | JSXElementConstructor<any>>

Example

(rangeComponentProps: PropsWithChildren) => (
   <SearchResultHighlight>
     {rangeComponentProps.children}
   </SearchResultHighlight>
 )

Defined in

packages/editor/src/types/editor.ts:521

onMoved()?

optional onMoved: (details) => void

A optional callback that will be called when the range decoration potentially moves according to user edits.

Parameters

details

RangeDecorationOnMovedDetails

Returns

void

Defined in

packages/editor/src/types/editor.ts:529

payload?

optional payload: Record<string, unknown>

A custom payload that can be set on the range decoration

Defined in

packages/editor/src/types/editor.ts:533

selection

selection: EditorSelection

The editor content selection range

Defined in

packages/editor/src/types/editor.ts:525