Plate

https://platejs.org/docs
Admin
Plate is a comprehensive toolkit for building rich-text editors in React, featuring a robust plugin...
Tokens:540,176
Snippets:5,198
Trust Score:7.5
Update:6 days ago
Show doc for...
Tokens:
Raw
### Install @platejs/basic-nodes

Source: https://platejs.org/docs/basic-blocks

Install the package for manual setup without the registry kit.

```bash
npm install @platejs/basic-nodes
```

--------------------------------

### Install and run y-webrtc signaling server

Source: https://platejs.org/docs/yjs

Installs the y-webrtc package and starts the signaling server on port 4444. Public servers work for testing, but use your own for production.

```bash
pnpm add y-webrtc
PORT=4444 node ./node_modules/y-webrtc/bin/server.js
```

--------------------------------

### Install @platejs/ai packages

Source: https://platejs.org/docs/ai

Install the required packages for manual AI setup. @platejs/suggestion is optional but required for diff-based edit suggestions.

```bash
npm install @platejs/ai @platejs/markdown @platejs/selection @ai-sdk/react ai
```

--------------------------------

### Add MDX files only

Source: https://platejs.org/docs/installation/docs

Installs MDX documentation files directly into an existing project without setting up a full site. Run from your project root. This installs MDX files in a docs/ or similar directory and skips the Fumadocs setup entirely.

```bash
# Run from your project root (wherever you want the docs)
npx shadcn@latest add @plate/docs
```

--------------------------------

### Install Resize Handle with shadcn CLI

Source: https://platejs.org/docs/components/resize-handle

Run this command to install the @plate/resize-handle component. It is the CLI installation method.

```bash
npx shadcn@latest add @plate/resize-handle
```

--------------------------------

### Install @plate/media-upload-toast via CLI

Source: https://platejs.org/docs/components/media-upload-toast

Run this command to install the Media Upload Toast component using the shadcn CLI. This is the CLI installation method, as opposed to manual installation.

```bash
npx shadcn@latest add @plate/media-upload-toast
```

--------------------------------

### Install Keyboard Input Leaf with shadcn CLI

Source: https://platejs.org/docs/components/kbd-node

Use this command to install the @plate/kbd-node package via the shadcn CLI. This is the recommended installation method.

```bash
npx shadcn@latest add @plate/kbd-node
```

--------------------------------

### Installation

Source: https://platejs.org/docs/footnote

Install the required packages for the footnote plugin.

```APIDOC
## Installation

### Command
```bash
pnpm add @platejs/footnote @platejs/markdown remark-gfm
```
```

--------------------------------

### Install DndKit with shadcn

Source: https://platejs.org/docs/dnd

Run this command to install the @plate/dnd-kit package.

```bash
npx shadcn@latest add @plate/dnd-kit
```

--------------------------------

### Install documentation files

Source: https://platejs.org/docs/installation/plate-ui

Commands to add AI documentation and Plate Plugin documentation to the local project.

```bash
# Add AI documentation
npx shadcn@latest add @plate/ai-docs

# Add Plate Plugin documentation
npx shadcn@latest add @plate/plugin-docs
```

--------------------------------

### start

Source: https://platejs.org/docs/api/slate/editor-api

Gets the start point of a location. Accepts an optional location and options to get the start point of the next node.

```APIDOC
## start

### Description
Get the start point of a location.

### Parameters
- **at** (At) - Optional - The location to get the start point from.
- **options** (EditorStartOptions) - Optional - Options for getting the start point.

### Options (EditorStartOptions)
- **next** (boolean) - Optional - Get the start point of the next node instead of the current one.

### Returns
- **Point** - The start point of the location.
```

--------------------------------

### Install Media Placeholder Element with shadcn CLI

Source: https://platejs.org/docs/components/media-placeholder-node

Install the component using the shadcn CLI command. Run this in your project directory.

```bash
npx shadcn@latest add @plate/media-placeholder-node
```

--------------------------------

### Using editor.tf and editor.api methods

Source: https://platejs.org/docs/migration/slate-to-plate

Use the namespaced API and transform surfaces in plugin code. This example shows toggling a mark, inserting text, getting the editor string, and checking if the selection is at the start.

```ts
editor.tf.toggleMark('bold');
editor.tf.insertText('Hello');
 
const text = editor.api.string([]);
 
if (editor.selection) {
  const isStart = editor.api.isStart(editor.selection.anchor, []);
}
```

--------------------------------

### Install List Classic Kit with shadcn

Source: https://platejs.org/docs/list-classic

Run this command to add the @plate/list-classic-kit package to your project.

```bash
npx shadcn@latest add @plate/list-classic-kit
```

--------------------------------

### start

Source: https://platejs.org/docs/api/slate/range

Gets the start point of a range.

```APIDOC
## start

### Description
Get the start point of a range.

### Parameters
- **range** (TRange) - The range to get the start point from.

### Returns
- **Point** - The start point of the range.
```

--------------------------------

### Install @plate/media-video-node via CLI

Source: https://platejs.org/docs/components/media-video-node

Run this command to install the Media Video Element component using the shadcn CLI.

```bash
npx shadcn@latest add @plate/media-video-node
```

--------------------------------

### Install MediaKit with shadcn

Source: https://platejs.org/docs/media

Run this command to add the @plate/media-kit package to your project.

```bash
npx shadcn@latest add @plate/media-kit
```

--------------------------------

### Install @platejs/footnote with pnpm

Source: https://platejs.org/docs/footnote

Install the footnote plugin along with @platejs/markdown and remark-gfm using pnpm. This is the first step in manual setup.

```bash
pnpm add @platejs/footnote @platejs/markdown remark-gfm
```

--------------------------------

### Install Excalidraw Kit

Source: https://platejs.org/docs/excalidraw

Run this command to install the Excalidraw kit, which includes the ExcalidrawPlugin and the ExcalidrawElement registry.

```bash
npx shadcn@latest add @plate/excalidraw-kit
```

--------------------------------

### Start the docs app (bun)

Source: https://platejs.org/docs/performance

Starts the docs app using bun. Required before running the benchmark.

```bash
bun run --filter www dev
```

--------------------------------

### Reset callouts at start with delete rule

Source: https://platejs.org/docs/plugin-rules

Configures CalloutPlugin to reset callouts when Backspace is pressed at the start. Includes before and after examples showing the transformation from `<callout>` to `<p>`.

```tsx
import { CalloutPlugin } from '@platejs/callout/react';

const plugins = [
  // ...otherPlugins,
  CalloutPlugin.configure({
    rules: {
      delete: { start: 'reset' },
    },
  }),
];
```

```tsx
<callout>
  |Callout content
</callout>
```

```tsx
<p>
  |Callout content
</p>
```

--------------------------------

### Install the base editor kit

Source: https://platejs.org/docs/installation/rsc

Run this command to install the copied base editor kit, which includes BaseEditorKit, static node components, and the editor-static UI component for server rendering.

```bash
npx shadcn@latest add @plate/editor-base-kit
```

--------------------------------

### Configure H1Plugin with delete start reset

Source: https://platejs.org/docs/editing-behavior

Use `start: 'reset'` for formatted text blocks that should become paragraphs before merging into the previous block. This example configures the H1Plugin with a delete rule that resets the block when the cursor is at the start.

```tsx
import { H1Plugin } from '@platejs/basic-nodes/react';

export const AppH1Plugin = H1Plugin.configure({
  rules: {
    delete: {
      start: 'reset',
    },
  },
});
```

--------------------------------

### Install and Configure AlignKit with TextAlignPlugin

Source: https://platejs.org/docs/text-align

Install the AlignKit component and define it with TextAlignPlugin configured to target headings, paragraphs, images, and media embeds. The plugin injects node props for alignment with a default value of 'start' and valid values including 'start', 'left', 'center', 'right', 'end', and 'justify'.

```bash
npx shadcn@latest add @plate/align-kit
```

```tsx
'use client';
 
import { TextAlignPlugin } from '@platejs/basic-styles/react';
import { KEYS } from 'platejs';
 
export const AlignKit = [
  TextAlignPlugin.configure({
    inject: {
      nodeProps: {
        defaultNodeValue: 'start',
        nodeKey: 'align',
        styleKey: 'textAlign',
        validNodeValues: ['start', 'left', 'center', 'right', 'end', 'justify'],
      },
      targetPlugins: [...KEYS.heading, KEYS.p, KEYS.img, KEYS.mediaEmbed],
    },
  }),
];
```

--------------------------------

### Install @plate/basic-blocks-base-kit

Source: https://platejs.org/docs/horizontal-rule

Run this command to add the @plate/basic-blocks-base-kit package via shadcn.

```bash
npx shadcn@latest add @plate/basic-blocks-base-kit
```

--------------------------------

### Install EquationToolbar with CLI

Source: https://platejs.org/docs/components/equation-toolbar-button

Install the @plate/equation-toolbar-button component using the shadcn CLI.

```bash
npx shadcn@latest add @plate/equation-toolbar-button
```

--------------------------------

### RangeAPI.edges

Source: https://platejs.org/docs/api/slate/range

Gets the start and end points of a range. Returns a tuple of points.

```APIDOC
## RangeAPI.edges

### Description
Get the start and end points of a range.

### Parameters
- **range** (TRange) - Required - The range to get edges from.
- **options** (RangeEdgesOptions) - Optional - Options for retrieving edges.

### Options
- **reverse** (boolean) - Optional - If true, returns points in reverse order.

### Returns
- **[Point, Point]** - A tuple of points representing the start and end points.
```

--------------------------------

### Install version-history-demo component

Source: https://platejs.org/docs/examples/version-history

Command to add the version-history-demo component using shadcn.

```bash
npx shadcn@latest add @plate/version-history-demo
```

--------------------------------

### Start the docs app (npm)

Source: https://platejs.org/docs/performance

Starts the docs app using npm. Required before running the benchmark.

```bash
npm run dev --workspace www
```

--------------------------------

### Default affinity at start of mark

Source: https://platejs.org/docs/plugin-rules

Example of cursor position at the start of a bold mark with default affinity. Typing would not apply bold formatting to new text.

```tsx
<p>
  <text>Normal text|</text><text bold>Bold text</text>
</p>
```

--------------------------------

### Configure custom plugin with delete start lift

Source: https://platejs.org/docs/editing-behavior

Use `start: 'lift'` for nested blocks that should move out one ancestor level. This example creates a custom plugin for quote items with a delete rule that lifts the block when the cursor is at the start.

```tsx
import { createPlatePlugin } from 'platejs/react';

export const QuoteItemPlugin = createPlatePlugin({
  key: 'quote_item',
  node: {
    isElement: true,
  },
  rules: {
    delete: {
      start: 'lift',
    },
  },
});
```

--------------------------------

### Install @plate/media-audio-node with shadcn CLI

Source: https://platejs.org/docs/components/media-audio-node

Run this command to install the Media Audio Node component. It uses the shadcn CLI to add the package.

```bash
npx shadcn@latest add @plate/media-audio-node
```

--------------------------------

### List items with start reset delete rule

Source: https://platejs.org/docs/plugin-rules

Configures ListPlugin to reset list items on Backspace at start, with a match function that targets list items with a listStyleType. Shows before and after examples.

```tsx
import { ListPlugin } from '@platejs/list/react';

const plugins = [
  // ...otherPlugins,
  ListPlugin.configure({
    rules: {
      delete: { start: 'reset' },
      match: ({ rule, node }) => {
        return rule === 'delete.start' && Boolean(node.listStyleType);
      },
    },
  }),
];
```

```tsx
<p listStyleType="disc">
  |List item content
</p>
```

```tsx
<p>
  |List item content
</p>
```

--------------------------------

### point

Source: https://platejs.org/docs/api/slate/editor-api

Gets the start or end point of a location. Accepts an optional location and options to specify which edge to use.

```APIDOC
## point

### Description
Get the `start` or `end` (default is `start`) point of a location.

### Parameters
- **at** (At) - Optional - The location to get the point from. Defaults to current selection.
- **options** (EditorPointOptions) - Optional - Options for getting the point.

### Options (EditorPointOptions)
- **edge** ('start' | 'end') - Optional - Which edge of the location to get the point from.

### Returns
- **Point** - The point at the specified location and edge.
```

--------------------------------

### Install ListKit with npx

Source: https://platejs.org/docs/list

Install the ListKit package using the shadcn CLI.

```bash
npx shadcn@latest add @plate/list-kit
```

--------------------------------

### Install Media Toolbar with shadcn CLI

Source: https://platejs.org/docs/components/media-toolbar

Run this command to install the @plate/media-toolbar component using the shadcn CLI.

```bash
npx shadcn@latest add @plate/media-toolbar
```

--------------------------------

### getFragment

Source: https://platejs.org/docs/api/slate/editor-api

Returns the fragment at the current selection. Used when cutting or copying, as an example, to get the fragment at the current selection.

```APIDOC
## `getFragment`

### Description
Returns the fragment at the current selection. Used when cutting or copying, as an example, to get the fragment at the current selection.

### Parameters
- **at** (At) - Optional - The location to get the fragment from. Defaults to current selection.

### Returns
- **ElementOrTextIn<V>[]** - The fragment at the current selection.
```

--------------------------------

### editor.api.block() usage examples

Source: https://platejs.org/docs/api/slate/editor-api

Shows various ways to call editor.api.block() to get blocks at different locations or above the selection.

```ts
editor.api.block() // Get block above selection
editor.api.block({ above: true }) // Get block above selection
editor.api.block({ at: [0, 0] }) // Get block at [0, 0]
editor.api.block({ at: [0, 0], above: true }) // Get block at [0]
editor.api.block({ highest: true }) // Get highest block at selection
```

--------------------------------

### Start the docs app (pnpm)

Source: https://platejs.org/docs/performance

Starts the docs app using pnpm. Required before running the benchmark.

```bash
pnpm --filter www dev
```

--------------------------------

### Create Fumadocs App

Source: https://platejs.org/docs/installation/docs

Initializes a new Fumadocs app using pnpm. During setup, enter 'docs' as the name and choose preferred options; defaults work well. The wizard creates a 'docs' directory with all necessary files.

```bash
pnpm create fumadocs-app
```

--------------------------------

### createMarkInputRule usage example

Source: https://platejs.org/docs/plugin-input-rules

Creates a mark input rule for bold text using '**' as start and '*' as end, triggered by '*'. The rule applies to inline marks.

```typescript
import { createMarkInputRule } from 'platejs';

createMarkInputRule({
  start: '**',
  end: '*',
  trigger: '*',
});
```

--------------------------------

### Get the selection using getSelection

Source: https://platejs.org/docs/playwright

Use getSelection to retrieve the current selection in the editor. The example asserts that the selection matches an expected anchor and focus.

```TypeScript
const selection = await getSelection(page, editorHandle);

expect(selection).toBe({
  anchor: { path: [0, 0], offset: 0 },
  focus: { path: [0, 0], offset: 7 },
});
```

--------------------------------

### Install @platejs/docx and @platejs/juice with pnpm

Source: https://platejs.org/docs/docx

Manual installation command for the DOCX and Juice plugins using pnpm.

```bash
pnpm add @platejs/docx @platejs/juice
```

--------------------------------

### Get the type of a node using getTypeAtPath

Source: https://platejs.org/docs/playwright

Use getTypeAtPath to retrieve the type of a node at a given path. The example asserts that the first node is an 'h1'.

```TypeScript
const firstNodeType = await getTypeAtPath(page, editorHandle, [0]);
expect(firstNodeType).toBe('h1');
```

--------------------------------

### Initialize new project with Plate preset

Source: https://platejs.org/docs/installation/mcp

Initializes a new shadcn project with the Plate preset.

```bash
npx shadcn@latest init --preset https://platejs.org/init
```

--------------------------------

### Select transform usage examples

Source: https://platejs.org/docs/api/slate/editor-transforms

Shows three ways to call editor.tf.select: with a location, with an edge option set to 'end', and with an edge option set to 'start'.

```TypeScript
editor.tf.select(at)
editor.tf.select(at, { edge: 'end' })
editor.tf.select(at, { edge: 'start' })
```

--------------------------------

### Scroll container setup with useEditorContainerRef

Source: https://platejs.org/docs/toc

If the scrolling element is the editor container, pass useEditorContainerRef() as the ref prop. This example shows an EditorContainer component that wraps children with the ref.

```tsx
// Below <Plate> component
function EditorContainer({ children }: { children: React.ReactNode }) {
  const containerRef = useEditorContainerRef();
 
  return <div ref={containerRef}>{children}</div>;
}
```

--------------------------------

### Access plugin API and transforms with TablePlugin

Source: https://platejs.org/docs/editor-methods

Use editor.getApi and editor.getTransforms with a plugin to get typed APIs and transforms. The example creates a table cell and inserts a table row.

```ts
import { TablePlugin } from '@platejs/table/react';

const api = editor.getApi(TablePlugin);
const tf = editor.getTransforms(TablePlugin);

const cell = api.create.tableCell();

tf.insert.tableRow();
```

--------------------------------

### Install ToggleKit with shadcn CLI

Source: https://platejs.org/docs/toggle

Run this command to install the ToggleKit package and its dependencies.

```bash
npx shadcn@latest add @plate/toggle-kit
```

--------------------------------

### Install TabbableKit with shadcn CLI

Source: https://platejs.org/docs/tabbable

Run this command to add the TabbableKit package to your project. It includes the pre-configured TabbablePlugin with smart query logic.

```bash
npx shadcn@latest add @plate/tabbable-kit
```

--------------------------------

### isAt usage examples

Source: https://platejs.org/docs/api/slate/editor-api

Shows how to use editor.api.isAt with various options to check if a range or point is at a specific position. Options include text, block, blocks, start, end, and word.

```TypeScript
// For ranges:
editor.api.isAt({ text: true }) // Check if range is in a single text node
editor.api.isAt({ block: true }) // Check if range is in a single block
editor.api.isAt({ blocks: true }) // Check if range is across multiple blocks
editor.api.isAt({ start: true }) // Check if range starts at block start
editor.api.isAt({ end: true }) // Check if range ends at block end

// For points:
editor.api.isAt({ word: true }) // Check relative to word boundaries
editor.api.isAt({ start: true }) // Check if at start
editor.api.isAt({ end: true }) // Check if at end
```

--------------------------------

### Access plugin type with useEditorPlugin

Source: https://platejs.org/docs/api/core/plate-editor

Use useEditorPlugin to get the editor instance and call editor.getType(ParagraphPlugin.key) to resolve the node type for a plugin key. The example renders the type in a span.

```tsx
import { ParagraphPlugin, useEditorPlugin } from 'platejs/react';

export function ParagraphType() {
  const { editor } = useEditorPlugin(ParagraphPlugin);

  return <span>{editor.getType(ParagraphPlugin.key)}</span>;
}
```

--------------------------------

### Example prompts for AI after MCP configuration

Source: https://platejs.org/docs/installation/docs

These bash commands are example prompts to ask your AI after configuring the MCP server. They are shown in a callout.

```bash
"Help me understand how the Plate AI plugin works"
"How to create a custom plugin?"
"What's new in the latest Plate version?"
```

--------------------------------

### Exit Break Example: Code Block

Source: https://platejs.org/docs/exit-break

Shows the exit point (top-level block) and starting position. When exit break is triggered, a new paragraph is inserted as a sibling to the ancestor with isStrictSiblings: false.

```markup
<codeblock>                              // ← Exit point (top-level block)
  <codeline>code|</codeline>             // ← Starting position
</codeblock>
<p>|</p>                                 // ← New paragraph inserted here
```

--------------------------------

### Install List Classic Plugin via CLI

Source: https://platejs.org/docs/components/list-classic-node

Use this command to install the @plate/list-classic-node package via the CLI.

```bash
npx shadcn@latest add @plate/list-classic-node
```

--------------------------------

### Scroll container setup with useEditorScrollRef

Source: https://platejs.org/docs/toc

If the scrolling element is an ancestor of the editor container, pass useEditorScrollRef() as the ref prop. This example shows a Layout component that uses the ref on a main element wrapping the editor.

```tsx
// Below <Plate> component
function Layout() {
  const scrollRef = useEditorScrollRef();
 
  return (
    <main ref={scrollRef}>
      <EditorContainer>
        <PlateContent />
      </EditorContainer>
    </main>
  );
}
```
Tokens:
Raw