Plate Utils

API reference for @platejs/utils.

@platejs/utils contains Plate's first-party plugin identity catalog and small utility plugins. @platejs/utils/react adds the selection-fragment property hook and block placeholder plugin used by registry UI.

Installation

pnpm add @platejs/utils

pnpm add @platejs/utils

Application code usually imports this surface from platejs and platejs/react. Direct package imports are useful inside packages that should not depend on the umbrella platejs package.

Import Paths

Plate Controller React Utils

On This Page

Installation Import Paths Plugin Identities Schema-Derived Types Utility Plugins And Kits React Hooks React Plugins Related APIs

Build your editor

Production-ready AI template and reusable components.

Import	Re-exports	Use
`@platejs/utils`	`PLUGINS`, utility plugins	First-party names and headless utility behavior.
`@platejs/utils/react`	`useSelectionFragmentProp`, `BlockPlaceholderPlugin`	Registry controls and React-only utility behavior.
`platejs`	`@platejs/utils`	App-level imports for identities and utility plugins.
`platejs/react`	`@platejs/utils/react`	App-level imports for React hooks and `BlockPlaceholderPlugin`.

Export	Contains	Use
`PLUGINS`	First-party capability names such as `paragraph`, `codeBlock`, `bold`, and `fixedToolbar`	Plugin lookup, dependencies, targets, and copied registry plugin references. Persisted identities come from `editor.plugin(Plugin).schema.type`, `editor.plugin(Plugin).schema.key`, generated schema handles, or explicit document literals.
`PluginName`	Union of all values in `PLUGINS`	APIs that accept any first-party plugin identity.

Use one identity

const value = [
  {
    type: 'paragraph',
    children: [{ bold: true, text: 'Hello' }],
  },
];

Use one identity

const value = [
  {
    type: 'paragraph',
    children: [{ bold: true, text: 'Hello' }],
  },
];

Configure a target identity

import { PLUGINS, TrailingBlockPlugin } from 'platejs';
 
export const trailingBlock = TrailingBlockPlugin.configure({
  initialState: {
    type: 'paragraph',
  },
});

Configure a target identity

import { PLUGINS, TrailingBlockPlugin } from 'platejs';
 
export const trailingBlock = TrailingBlockPlugin.configure({
  initialState: {
    type: 'paragraph',
  },
});

Use an owner-derived element type

import type { ImageElement } from '@platejs/media';
 
export function getImageUrl(element: ImageElement) {
  return element.url;
}

Use an owner-derived element type

import type { ImageElement } from '@platejs/media';
 
export function getImageUrl(element: ImageElement) {
  return element.url;
}

Derive an editor value

import type { ValueOf } from 'platejs';
import type { Editor } from '@/components/editor/plugins.generated';
 
type MyValue = ValueOf<Editor>;

Derive an editor value

import type { ValueOf } from 'platejs';
import type { Editor } from '@/components/editor/plugins.generated';
 
type MyValue = ValueOf<Editor>;

Export	Name	Behavior
`ExitBreakPlugin`	`PLUGINS.exitBreak`	Adds transaction commands around `insertExitBreak`.
`NormalizeTypesPlugin`	`PLUGINS.normalizeTypes`	Normalizes configured root paths to a required `type` or `strictType`.
`SingleBlockPlugin`	`PLUGINS.singleBlock`	Forces the editor value into one block and turns hard breaks into soft breaks.
`SingleLinePlugin`	`PLUGINS.singleLine`	Forces one block and strips line-break characters from text nodes.
`TrailingBlockPlugin`	`PLUGINS.trailingBlock`	Ensures a trailing block exists at the configured level and type.
`withTrailingBlock`	Override editor helper	Implements the trailing block normalization logic used by `TrailingBlockPlugin`.

Hook	Returns	Use
`useSelectionFragmentProp(options?)`	`unknown`	Reads a property from the selected fragment.

Plugin	Name	Behavior
`BlockPlaceholderPlugin`	`PLUGINS.blockPlaceholder`	Tracks the current empty block and injects `placeholder` and optional `className` props into matching block components.

components/editor/block-placeholder.tsx

import { PLUGINS } from "platejs";
import { BlockPlaceholderPlugin } from "platejs/react";
 
export const blockPlaceholderPlugin = BlockPlaceholderPlugin.configure({
  initialState: {
    placeholders: {
      [PLUGINS.paragraph]: "Type something...",
    },
    query: ({ path }) => path.length === 1,
  },
});

components/editor/block-placeholder.tsx

import { PLUGINS } from "platejs";
import { BlockPlaceholderPlugin } from "platejs/react";
 
export const blockPlaceholderPlugin = BlockPlaceholderPlugin.configure({
  initialState: {
    placeholders: {
      [PLUGINS.paragraph]: "Type something...",
    },
    query: ({ path }) => path.length === 1,
  },
});