Plate Editor

PreviousNext

API reference for Plate editor.

Docs
platefile

Preview

Loading preview…
../../docs/api/core/plate-editor.mdx
---
title: Plate Editor
description: API reference for Plate editor.
---

A custom editor interface that extends the base **`Editor`** interface and includes additional properties and methods specific to the Plate library.

## Core Properties

<API name="Properties">
<APIAttributes>
  <APIItem name="id" type="any">
    A unique identifier for the editor.
  </APIItem>
  <APIItem name="dom" type="object">
    An object containing the DOM state of the editor.
    <APISubList>
      <APISubListItem parent="dom" name="composing" type="boolean">
        Whether the editor is currently composing text (e.g., during IME input).
      </APISubListItem>
      <APISubListItem parent="dom" name="currentKeyboardEvent" type="KeyboardEventLike | null">
        The current keyboard event being processed by the editor, or null if no event is being processed.
      </APISubListItem>
      <APISubListItem parent="dom" name="focused" type="boolean">
        Whether the editor currently has focus.
      </APISubListItem>
      <APISubListItem parent="dom" name="prevSelection" type="TRange | null">
        The previous selection range in the editor.
      </APISubListItem>
      <APISubListItem parent="dom" name="readOnly" type="boolean">
        Whether the editor is in read-only mode.
      </APISubListItem>
    </APISubList>
  </APIItem>
  <APIItem name="plugins" type="Record<string, AnyEditorPlatePlugin>">
    A record of plugins indexed by their keys.
  </APIItem>
  <APIItem name="meta" type="object">
    An object containing editor metadata, often derived from plugins or editor configuration.
    <APISubList>
      <APISubListItem parent="meta" name="components" type="Record<string, React.FC<any>>">
        Plugin components indexed by their keys.
      </APISubListItem>
      <APISubListItem parent="meta" name="node.isContainer" type="string[]">
        Plugin keys with `plugin.node.isContainer = true`.
      </APISubListItem>
      <APISubListItem parent="meta" name="isFallback" type="boolean">
        Whether the editor is a fallback editor.
        
        - **Default:** `false`
      </APISubListItem>
      <APISubListItem parent="meta" name="isNormalizing" type="boolean">
        Whether the editor is currently normalizing nodes.
        
        - **Default:** `false`
      </APISubListItem>
      <APISubListItem parent="meta" name="key" type="any">
        A key that can be used to uniquely identify the editor.
      </APISubListItem>
      <APISubListItem parent="meta" name="pluginList" type="AnyEditorPlatePlugin[]">
        An array of plugins that are currently being used by the editor.
      </APISubListItem>
      <APISubListItem parent="meta" name="shortcuts" type="Record<string, any>">
        Editor shortcuts configuration indexed by shortcut names.
      </APISubListItem>
      <APISubListItem parent="meta" name="uid" type="any">
        A stable unique identifier that remains consistent from RSC to client hydration.
      </APISubListItem>
    </APISubList>
  </APIItem>
</APIAttributes>
</API>
## API Methods

<API name="API">
<APIMethods>
  <APIItem name="getApi" type="(plugin: PlatePlugin) => EditorApi & PlatePlugin['api']">
    Retrieve the typed API for a plugin.
  </APIItem>
  <APIItem name="getTransforms" type="(plugin: PlatePlugin) => EditorTransforms & PlatePlugin['transforms']">
    Get the typed transforms for a plugin.
  </APIItem>
  <APIItem name="getPlugin" type="(plugin: PlatePlugin) => PlatePlugin">
    Retrieve the editor plugin instance by its key or base plugin.
  </APIItem>
  <APIItem name="getType" type="(plugin: PlatePlugin) => string">
    Get the node type associated with a plugin.
  </APIItem>
  <APIItem name="init" type="(options: InitOptions) => void">
    Initialize the editor value, selection, and normalization. Accepts options for auto-select, selection, normalization, value, and an `onReady` callback that provides context on initialization completion.
  </APIItem>
</APIMethods>
</API>

## Option Methods

<API name="Options">
<APIMethods>
  <APIItem name="getOption" type="(plugin: PlatePlugin, optionKey: string) => any">
    Get a specific option value for a plugin.
  </APIItem>
  <APIItem name="getOptions" type="(plugin: PlatePlugin) => any">
    Get all options for a plugin.
  </APIItem>
  <APIItem name="setOption" type="(plugin: PlatePlugin, optionKey: string, value: any) => void">
    Set a specific option value for a plugin.
  </APIItem>
  <APIItem name="setOptions" type="(plugin: PlatePlugin, options: (draft: object) => void | Partial<object>) => void">
    Set multiple options for a plugin.
  </APIItem>
  <APIItem name="getOptionsStore" type="(plugin: PlatePlugin) => any">
    Get the zustand-x options store for a plugin.
  </APIItem>
</APIMethods>
</API>

## Core Plugin APIs

### `DebugPlugin`

<API name="DebugPlugin">
<APIListAPI>
  <APIItem name="editor.api.debug.log" type="(...args: any[]) => void">
    Log a message at the 'log' level.
  </APIItem>
  <APIItem name="editor.api.debug.info" type="(...args: any[]) => void">
    Log a message at the 'info' level.
  </APIItem>
  <APIItem name="editor.api.debug.warn" type="(...args: any[]) => void">
    Log a message at the 'warn' level.
  </APIItem>
  <APIItem name="editor.api.debug.error" type="(...args: any[]) => void">
    Log a message at the 'error' level.
  </APIItem>
</APIListAPI>
</API>

### `HtmlPlugin`

<API name="HtmlPlugin">
<APIListAPI>
  <APIItem name="editor.api.html.deserialize" type="(options: { element: HTMLElement }) => Descendant[]">
    Deserialize HTML content into Plate nodes.
  </APIItem>
</APIListAPI>
</API>

### `ReactPlugin`

<API name="ReactPlugin">
<APITransforms>
  <APIItem name="editor.tf.reset" type="() => void">
    Reset the editor state while maintaining focus if the editor was focused.
  </APIItem>
</APITransforms>
</API>

### `SlateReactExtensionPlugin`

<API name="SlateReactExtensionPlugin">
<APIListAPI>
  <APIItem name="editor.api.redecorate" type="() => void">
    Redecorate the editor.
  </APIItem>
</APIListAPI>

<APITransforms>
  <APIItem name="editor.tf.setValue" type="(value: Value) => void">
    Replace the editor value. See [Controlled Value](/docs/controlled) for more information.
  </APIItem>
</APITransforms>


</API>

Installation

npx shadcn@latest add @plate/api-core-plate-editor-docs

Usage

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