Skip to content
Portable Text Editor

RangeDecoration

Defined in: packages/editor/src/types/editor.ts:507

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:521

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:529

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

Parameters

details

RangeDecorationOnMovedDetails

Returns

void

payload?

optional payload: Record<string, unknown>

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

A custom payload that can be set on the range decoration

selection

selection: EditorSelection

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

The editor content selection range