> For the complete documentation index, see [llms.txt](/llms.txt).
> The full corpus is at [llms-full.txt](/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`.

:::caution[Beta]
This API should not be used in production and may be trimmed from a public release.
:::

## Properties

### 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`.

:::caution[Beta]
This API should not be used in production and may be trimmed from a public release.
:::

***

### 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`.

:::caution[Beta]
This API should not be used in production and may be trimmed from a public release.
:::

#### anchor

> **anchor**: [`EditorSelectionPoint`](/api/editor/type-aliases/editorselectionpoint/)

#### backward?

> `optional` **backward**: `boolean`

#### focus

> **focus**: [`EditorSelectionPoint`](/api/editor/type-aliases/editorselectionpoint/)

***

### 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.

:::caution[Beta]
This API should not be used in production and may be trimmed from a public release.
:::

#### Parameters

##### props

[`DecorationRenderProps`](/api/editor/interfaces/decorationrenderprops/)

#### Returns

`ReactElement`

***

### type

> **type**: `"range"`

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

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

:::caution[Beta]
This API should not be used in production and may be trimmed from a public release.
:::