Plate Utilities

Plate-owned utility functions, types, identities, and plugins.

platejs contains Plate's shared framework utilities and plugin identities. platejs/react contains React-only hooks and utility plugins.

Installation

pnpm add platejs @tanstack/react-virtual

pnpm add platejs @tanstack/react-virtual

Import headless utilities from platejs and React utilities from platejs/react.

Import paths

Plate Controller Resizable

On This Page

Installation Import paths Shared utilities 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	Exports	Use
`platejs`	URL helpers, shared object types, `PLUGINS`, utility plugins	Framework-wide headless contracts and first-party identities.
`platejs/react`	Ref/effect hooks, `useSelectionFragmentProp`, `BlockPlaceholderPlugin`	React-only framework and registry behavior.

Export	Contract
`isDefined(value)`	Narrows `null` and `undefined` out of a value.
`isUrl(value)`	Loosely validates URL strings with a recognized protocol and domain.
`sanitizeUrl(url, options)`	Rejects disallowed schemes and returns a normalized URL, internal path, fragment, or `null`.
`IS_APPLE`	Reports whether the current browser user agent is macOS.
`AnyObject`	String-keyed object whose values are intentionally unchecked.
`UnknownObject`	String-keyed object whose values require narrowing.
`Nullable<T>`	Adds `null` to every property of `T`.

validate-link.ts

import { isUrl, sanitizeUrl } from 'platejs';
 
export function getSafeLink(value: string) {
  if (!isUrl(value)) return null;
 
  return sanitizeUrl(value, {
    allowedSchemes: ['http', 'https'],
  });
}

validate-link.ts

import { isUrl, sanitizeUrl } from 'platejs';
 
export function getSafeLink(value: string) {
  if (!isUrl(value)) return null;
 
  return sanitizeUrl(value, {
    allowedSchemes: ['http', 'https'],
  });
}

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
`useComposedRef(...refs)`	`React.RefCallback<T>`	Assigns one node to callback refs and ref objects, including React 19 cleanup callbacks.
`useIsomorphicLayoutEffect`	React effect hook	Uses `useLayoutEffect` in the browser and `useEffect` during SSR.
`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,
  },
});