---
title: Plate Utils
description: API reference for @udecode/plate-utils.
---

`@udecode/plate-utils` contains utility functions for Plate.

## Components

### PlateElement

Generic component for rendering an element.

<APIAttributes>

PlateElementProps.

<APIItem name="className" type="string" optional>
The CSS class to apply to the component.
</APIItem>
<APIItem name="editor" type="E">
The editor instance.
</APIItem>
<APIItem name="nodeProps" type="AnyObject" optional>
Additional props to pass to the component.
</APIItem>
<APIItem name="element" type="TElement">
The element node.
</APIItem>
<APIItem name="attributes" type="object">
Attributes of the element to be spread on the top-level element.
<APISubList>
<APISubListItem parent="attributes" name="data-slate-node" type="'element'">
This is always set to `'element'`.
</APISubListItem>
<APISubListItem
  parent="attributes"
  name="data-slate-inline"
  type="boolean"
  optional
/>
<APISubListItem
  parent="attributes"
  name="data-slate-void"
  type="boolean"
  optional
/>
<APISubListItem parent="attributes" name="dir" type="string" optional />
<APISubListItem parent="attributes" name="ref" type="any">
The reference to the element. If using your own reference, you must
merge it with this one.
</APISubListItem>
</APISubList>
</APIItem>
<APIItem name="children" type="any">
Necessary for rendering the node children.
</APIItem>
<APIItem name="elementToAttributes" type="(element: N) => any" optional>
Get HTML attributes from Slate element. This is an alternative to
`PlatePlugin.props`.
</APIItem>
<APIItem name="as" type="React.ElementType" optional>
The component type to render as.

- **Default:** `'div'`

</APIItem>
<APIItem name="asChild" type="boolean" optional>
If true, merges its props onto its immediate child.
</APIItem>
</APIAttributes>

### PlateLeaf

Generic component for rendering a leaf.

<APIAttributes>

PlateLeafProps.

<APIItem name="className" type="string" optional>
The CSS class to apply to the component.
</APIItem>
<APIItem name="editor" type="E">
The editor context.
</APIItem>
<APIItem name="nodeProps" type="AnyObject" optional>
Additional props to pass to the component.
</APIItem>
<APIItem name="children" type="any">
Necessary for rendering the node children.
</APIItem>
<APIItem name="leaf" type="TText">
The leaf node.
</APIItem>
<APIItem name="text" type="TText">
The text node.
</APIItem>
<APIItem name="attributes" type="object">
Attributes of the leaf to be spread on the top-level element.

<APISubList>
<APISubListItem parent="attributes" name="data-slate-leaf" type="true">
This is always set to `true`.
</APISubListItem>
</APISubList>
</APIItem>
<APIItem name="leafToAttributes" type="(leaf: N) => any" optional>
Get HTML attributes from Slate leaf. This is an alternative to `PlatePlugin.props`.
</APIItem>
<APIItem name="as" type="React.ElementType" optional>
The component type to render as.

- **Default:** `'span'`

</APIItem>
<APIItem name="asChild" type="boolean" optional>
If true, merges its props onto its immediate child.
</APIItem>
</APIAttributes>

## Hooks

### useEditorString

A hook that returns the entire text content of the editor as a string.

<APIReturns>
  <APIItem name="string" type="string">
    The concatenated text content of all text nodes in the editor.
  </APIItem>
</APIReturns>

### useMarkToolbarButtonState

Generates the state for a mark toolbar button.

<APIParameters>
  <APIItem name="nodeType" type="string">
    The type of the node to check for active marks.
  </APIItem>
  <APIItem name="clear" type="string | string[]" optional>
    Type or types of the node to clear when the mark is applied.
  </APIItem>
</APIParameters>
<APIReturns>
  <APIItem name="pressed" type="boolean">
    A boolean indicating whether the nodeType mark is active in the current
    selection.
  </APIItem>
  <APIItem name="nodeType" type="string">
    The type of the node.
  </APIItem>
  <APIItem name="clear" type="string | string[]">
    Type or types of the node to clear.
  </APIItem>
</APIReturns>

### useMarkToolbarButton

Generates the props for a mark toolbar button using the state created by **`useMarkToolbarButtonState`**.

<APIParameters>
  <APIItem name="state" type="ReturnType<typeof useMarkToolbarButtonState>">
    The state for the mark toolbar button generated by
    `useMarkToolbarButtonState`.
  </APIItem>
</APIParameters>
<APIReturns>
  <APIItem name="props" type="object">
    Properties of the toolbar button including `pressed` status and `onClick`
    function.
    <APISubList>
      <APISubListItem parent="props" name="pressed" type="boolean">
        A boolean indicating whether the mark toolbar button is active.
      </APISubListItem>
      <APISubListItem
        parent="props"
        name="onClick"
        type="React.MouseEventHandler<HTMLButtonElement>"
      >
        A function that handles the onClick event of the button, toggling the
        mark and focusing the editor.
      </APISubListItem>
    </APISubList>
  </APIItem>
</APIReturns>

### usePlaceholderState

Generates the state for a placeholder in an editor.

<APIParameters>
  <APIItem name="hideOnBlur" type="boolean" optional>
    If true, the placeholder is hidden when the editor is not focused.

    - **Default:** `true`

  </APIItem>
  <APIItem name="query" type="QueryNodeOptions" optional>
    Options to query the node. If defined, the placeholder is only shown if the
    node matches the query.
  </APIItem>
  <APIItem name="element" type="PlateElementProps">
    The element in which the placeholder is to be displayed.
  </APIItem>
</APIParameters>
<APIReturns>
  <APIItem name="enabled" type="boolean">
    A boolean indicating whether the placeholder should be displayed or not.
  </APIItem>
</APIReturns>

### useRemoveNodeButton

Generates the props for a button that, when clicked, removes a node from the editor.

<APIParameters>
  <APIItem name="element" type="TElement">
    The node element to be removed when the button is clicked.
  </APIItem>
</APIParameters>
<APIReturns>
  <APIItem name="props" type="object">
    Properties of the remove node button including the `onClick` function.
    <APISubList>
      <APISubListItem parent="props" name="onClick" type="() => void">
        A function that handles the onClick event of the button, removing the
        node and focusing the editor.
      </APISubListItem>
    </APISubList>
  </APIItem>
</APIReturns>

## Queries

### isType

Checks whether a node matches the provided type.

<APIParameters>
  <APIItem name="editor" type="PlateEditor<V>">
    The editor in which the node is present.
  </APIItem>
  <APIItem name="node" type="any">
    The node to be checked.
  </APIItem>
  <APIItem name="key" type="string | string[]" optional>
    The type or types to match the node against. Can be a string or an array of
    strings.
  </APIItem>
</APIParameters>
<APIReturns>
  A boolean indicating whether the node's type matches the provided type or
  types.
</APIReturns>

## Transforms

### resetEditorChildren

Replaces the children of an editor with default blocks.

<APIParameters>
  <APIItem name="editor" type="PlateEditor<V>">
    The editor whose children are to be replaced.
  </APIItem>
  <APIItem
    name="options"
    type="Omit<ReplaceNodeChildrenOptions<ElementOf<E>, V>, 'at' | 'nodes'>"
    optional
  >
    Options for replacing the children of the node. Excludes `at` and `nodes`
    options.
  </APIItem>
</APIParameters>

### selectEditor

Selects an editor at a target location or an edge (start, end).

<APIParameters>
  <APIItem name="editor" type="TEditor<V>">
    The editor to be selected.
  </APIItem>
  <APIItem name="at" type="Location" optional>
    Specific location to select.
    - If `edge` is not defined, this option is considered.
  </APIItem>
  <APIItem name="edge" type="'start' | 'end'" optional>
    Select the start or end of the editor.
    - Overrides `at` option if defined.
  </APIItem>
  <APIItem name="focus" type="boolean" optional>
    If true, focuses the React editor before selecting markdown Copy code.

    - **Default:** `false`

  </APIItem>
</APIParameters>
<APIReturns>
  No explicit return, but selects and potentially focuses the editor.
</APIReturns>

### moveSelectionByOffset

Moves the selection by offset based on the keyboard arrow keys.

<APIParameters>
  <APIItem name="editor" type="PlateEditor">
    The editor instance.
  </APIItem>
  <APIItem name="options" type="object" optional>
    Options for moving the selection by offset. This is an optional parameter.
    <APISubList>
      <APISubListItem parent="options" name="query" type="function" optional>
        A query function to enable the behavior.
      </APISubListItem>
      <APISubListItem parent="options" name="event" type="KeyboardEvent">
        The keyboard event that triggered the move.
      </APISubListItem>
    </APISubList>
  </APIItem>
</APIParameters>

### selectSiblingNodePoint

Selects a point from the previous or next sibling node of the specified node.

<APIParameters>
  <APIItem name="editor" type="TEditor">
    The editor instance.
  </APIItem>
  <APIItem name="options" type="object" optional>
    Options for selecting a sibling node's point.
    <APISubList>
      <APISubListItem parent="options" name="at" type="Path" optional>
        The path of the reference node. If not provided, `node` must be specified.
      </APISubListItem>
      <APISubListItem parent="options" name="reverse" type="boolean" optional>
        Whether to select the previous sibling instead of the next.
        - `false`: Select the start point of the next sibling node.
        - `true`: Select the end point of the previous sibling node.
        - **Default:** `false`
      </APISubListItem>
      <APISubListItem parent="options" name="focus" type="boolean" optional>
        Whether to focus the editor after selection.
        - **Default:** `true`
      </APISubListItem>
      <APISubListItem parent="options" name="node" type="TNode" optional>
        The reference node. Used to find the path if `at` is not provided.
      </APISubListItem>
    </APISubList>
  </APIItem>
</APIParameters>

## Utils

### defaultsDeepToNodes

Recursively merges a source object into children nodes using a query.

<APIParameters>
  <APIItem name="options" type="Omit<ApplyDeepToNodesOptions<N>, 'apply'>">
    Options for the function, excluding the 'apply' option.
  </APIItem>
</APIParameters>
<APIReturns>
  No explicit return, but it modifies the children nodes based on the provided
  options.
</APIReturns>
