Plate Utils

PreviousNext

API reference for @platejs/utils.

Docs
platefile

Preview

Loading preview…
../../docs/api/utils.mdx
---
title: Plate Utils
description: API reference for @platejs/utils.
---

`@platejs/utils` contains utility functions for Plate.

## Hooks

### `useEditorString`

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

### `useMarkToolbarButtonState`

Generates the state for a mark toolbar button.

<API name="useMarkToolbarButtonState">
<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 type="object">
  <APIItem name="pressed" type="boolean">
    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[]" optional>
    The type or types to clear when toggling this mark.
  </APIItem>
</APIReturns>
</API>

### `useMarkToolbarButton`

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

<API name="useMarkToolbarButton">
<APIParameters>
  <APIItem name="state" type="ReturnType<typeof useMarkToolbarButtonState>">
    The state for the mark toolbar button generated by `useMarkToolbarButtonState`.
  </APIItem>
</APIParameters>

<APIReturns type="object">
  <APIItem name="props" type="object">
    <APISubList>
      <APISubListItem parent="props" name="pressed" type="boolean">
        Whether the mark toolbar button is active.
      </APISubListItem>
      <APISubListItem parent="props" name="onClick" type="React.MouseEventHandler<HTMLButtonElement>">
        Toggles the mark and focuses the editor.
      </APISubListItem>
    </APISubList>
  </APIItem>
</APIReturns>
</API>

### `useRemoveNodeButton`

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

<API name="useRemoveNodeButton">
<APIParameters>
  <APIItem name="element" type="TElement">
    The node element to be removed.
  </APIItem>
</APIParameters>

<APIReturns type="object">
  <APIItem name="props" type="object">
    <APISubList>
      <APISubListItem parent="props" name="onClick" type="() => void">
        Removes the node and focuses the editor.
      </APISubListItem>
    </APISubList>
  </APIItem>
</APIReturns>
</API>

Installation

npx shadcn@latest add @plate/api-utils-docs

Usage

Usage varies by registry entry. Refer to the registry docs or source files below for details.