RangeDecoration

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

A UI affordance that wraps a selection range in the editor with a custom component, for example to highlight search results, mark validation errors on specific words, or draw user presence.

Properties

component()

component: (props) => ReactElement<any>

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

The component that renders the range decoration. It receives the decorated text as its children.

The component can render more than once for one decoration: the range is split into segments at formatting boundaries and where it overlaps other decorations, and each segment gets its own wrapper. Where decorations overlap, their components nest, first in array order outermost.

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

Called when edits move the decorated range. The details carry the new selection (null when the range is lost) and whether the edit was local or remote.

Parameters

details

RangeDecorationOnMovedDetails

Returns

void

---

payload?

optional payload: Record<string, unknown>

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

A custom payload that can be set on the range decoration.

---

selection

selection: EditorSelection

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

The editor content selection range to decorate.