> For the complete documentation index, see [llms.txt](/llms.txt).
> The full corpus is at [llms-full.txt](/llms-full.txt).

# RangeDecoration

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

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.

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

## Properties

### component()

> **component**: (`props`) => `ReactElement`\<`any`\>

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

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

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

#### Parameters

##### props

###### children?

`ReactNode`

#### Returns

`ReactElement`\<`any`\>

#### Example

```ts
(rangeComponentProps: PropsWithChildren) => (
   <SearchResultHighlight>
     {rangeComponentProps.children}
   </SearchResultHighlight>
 )
```

***

### onMoved()?

> `optional` **onMoved**: (`details`) => `void`

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

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

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

#### Parameters

##### details

[`RangeDecorationOnMovedDetails`](/api/editor/interfaces/rangedecorationonmoveddetails/)

#### Returns

`void`

***

### payload?

> `optional` **payload**: `Record`\<`string`, `unknown`\>

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

A custom payload that can be set on the range decoration

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

***

### selection

> **selection**: [`EditorSelection`](/api/editor/type-aliases/editorselection/)

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

The editor content selection range

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