Skip to content
Portable Text
This page is available as Markdown at /api/editor/interfaces/decoration.md. For the full documentation index, see /llms.txt, or the complete corpus at /llms-full.txt.

Decoration

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

A decoration registered through editor.registerDecorations, independent of any PortableTextEditable’s rangeDecorations prop. Unrelated to schema decorators (marks like strong): this Decoration is the registered counterpart of the rangeDecorations prop’s RangeDecoration.

Properties

Section titled “Properties”

id

Section titled “id”

id: string

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

Identity for reconciliation: an update call matches decorations to their previous state by id, not by array position. Unique within one registration (duplicates throw). The same id used across different registrations refers to different decorations. Unrelated to Portable Text’s _key.

range

Section titled “range”

range: object

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

The editor content range to decorate. Feed a captured editor selection straight in, for example a peer’s presence selection or the range a search match was found at. An edit that destroys the underlying content kills the decoration (a mapping with newRange: null). “No position” is omission from the array, not a nullable range.

anchor

Section titled “anchor”

anchor: EditorSelectionPoint

backward?

Section titled “backward?”

optional backward: boolean

focus

Section titled “focus”

focus: EditorSelectionPoint

render()

Section titled “render()”

render: (props) => ReactElement

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

Plain-called factory returning an element tree. No hooks in the body: state lives in components the tree mounts. Ignoring children is legal (widget decorations).

Chrome that carries no document text must be CSS generated content or a contentEditable={false} element: bare text or editable elements injected into the tree desync the caret from the document (arrow keys jump or stick around the decorated range).

The tree 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, they nest, first in array order outermost.

Parameters

Section titled “Parameters”
props
Section titled “props”

DecorationRenderProps

Returns

Section titled “Returns”

ReactElement

type

Section titled “type”

type: "range"

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

Discriminates the decoration’s anchor shape. Only 'range' exists today.