Skip to content
Portable Text Editor

RangeDecoration

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

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

Section titled “Properties”

component()

Section titled “component()”

component: (props) => ReactElement<any>

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

A component for rendering the range decoration. The component will receive the children (text) of the range decoration as its children.

Parameters

Section titled “Parameters”
props
Section titled “props”
children?
Section titled “children?”

ReactNode

Returns

Section titled “Returns”

ReactElement<any>

Example

Section titled “Example”
(rangeComponentProps: PropsWithChildren) => (
   <SearchResultHighlight>
     {rangeComponentProps.children}
   </SearchResultHighlight>
 )

onMoved()?

Section titled “onMoved()?”

optional onMoved: (details) => void

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

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

Parameters

Section titled “Parameters”
details
Section titled “details”

RangeDecorationOnMovedDetails

Returns

Section titled “Returns”

void

payload?

Section titled “payload?”

optional payload: Record<string, unknown>

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

A custom payload that can be set on the range decoration

selection

Section titled “selection”

selection: EditorSelection

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

The editor content selection range