Plate
PlateEditorsTemplates
GitHub16kGitHub
DiscordDiscord
    • Stream
    • Copilot
  • Comments
  • Discussion
  • Suggestions
    • Basic Blocks
      • Blockquote
      • Heading
      • Horizontal Rule
    • Callout
    • Code Block
    • Column
    • Date
    • Equation
    • Link
    • Media
    • MentionElement
    • Table
    • Table of Contents
    • Footnote
    • Details
  • Marks
    • Bold
    • Italic
    • Underline
    • Code
    • Highlight
    • Keyboard Input
    • Strikethrough
    • Subscript
    • Superscript
      • Font
      • Line Height
      • Text Align
    • Indent
    • List
      • Exit Break
      • Single Block
      • Trailing Block
    • Autoformat
    • Block Menu
    • Block Placeholder
    • Combobox
      • Emoji
      • MentionElement
      • Slash Command
    • Drag & Drop
    • Navigation Feedback
    • Tabbable
    • Toolbar
    • Yjs
    • Multi SelectEditor
    • CSV
    • DOCX
    • HTML
    • Markdown

Trailing Block

PreviousNext

Keep a required block at the end of an editor or nested level.

Single BlockForced Layout

Trailing Block inserts a required block when the last node at a target level is missing or has the wrong type. The standard registry editor plugins include TrailingBlockPlugin so full Plate editors always end with a paragraph. Single-block and single-line editors disable it because they intentionally keep one root block.

Features

  • Default trailing type from the editor paragraph plugin.
  • Empty-editor protection.
  • Root or nested target level.
  • Optional last-node matching through initialState.match.
  • Custom insertion wrapper through initialState.insert.
  • Included in the standard registry editor plugins.
Report an issue

Fast path

Single BlockAutoformat

On This Page

FeaturesFast pathOwnershipConfigure the typeMatch the previous blockNested levelBehaviorAPI Reference
Build your editor
Production-ready AI template and reusable components.
Get all-access

Add TrailingBlockPlugin when users need a safe place to continue typing after blocks such as headings, tables, media, or columns.

import { TrailingBlockPlugin } from 'platejs';
import { createEditor } from 'platejs/react';
 
export const editor = createEditor({
  plugins: [TrailingBlockPlugin],
});
import { TrailingBlockPlugin } from 'platejs';
import { createEditor } from 'platejs/react';
 
export const editor = createEditor({
  plugins: [TrailingBlockPlugin],
});

TrailingBlockPlugin defaults to the editor's paragraph type.

Ownership

LayerOwnerWhat It Does
TrailingBlockPluginplatejsOwns the correction that checks and inserts the trailing block.
tx.nodes.last([], { level })Plate transactionFinds the last node at the configured depth.
NodeApi.matches(...)platejsApplies the optional last-node match.
editor.ts pluginsRegistryAdd TrailingBlockPlugin after editing plugins.

There is no dedicated trailing-block UI. The plugin is a normalizer.

Configure the type

Use type when the trailing block should be something other than the default paragraph.

import {
  BaseParagraphPlugin,
  ElementApi,
  TrailingBlockPlugin,
} from 'platejs';
 
export const trailingBlockPlugin = TrailingBlockPlugin.configure(
  ({ editor }) => ({
    initialState: {
      type: editor.plugin(BaseParagraphPlugin).schema.type,
    },
  })
);
import {
  BaseParagraphPlugin,
  ElementApi,
  TrailingBlockPlugin,
} from 'platejs';
 
export const trailingBlockPlugin = TrailingBlockPlugin.configure(
  ({ editor }) => ({
    initialState: {
      type: editor.plugin(BaseParagraphPlugin).schema.type,
    },
  })
);

The default is already editor.plugin(BaseParagraphPlugin).schema.type, so most editors can use the plugin directly.

Match the previous block

Use match to limit insertion based on the current last block.

import { HeadingPlugin } from 'platejs/react';
import {
  BaseHeadingPlugin,
  BaseParagraphPlugin,
  TrailingBlockPlugin,
} from 'platejs';
 
export const trailingBlockPlugins = [
  HeadingPlugin,
  TrailingBlockPlugin.configure(({ editor }) => ({
    initialState: {
      match: (node) =>
        ElementApi.isElement(node) &&
        node.type === editor.plugin(BaseHeadingPlugin).schema.type,
      type: editor.plugin(BaseParagraphPlugin).schema.type,
    },
  })),
] as const;
import { HeadingPlugin } from 'platejs/react';
import {
  BaseHeadingPlugin,
  BaseParagraphPlugin,
  TrailingBlockPlugin,
} from 'platejs';
 
export const trailingBlockPlugins = [
  HeadingPlugin,
  TrailingBlockPlugin.configure(({ editor }) => ({
    initialState: {
      match: (node) =>
        ElementApi.isElement(node) &&
        node.type === editor.plugin(BaseHeadingPlugin).schema.type,
      type: editor.plugin(BaseParagraphPlugin).schema.type,
    },
  })),
] as

Install the referenced H1 capability beside the configured plugin. A trailing paragraph is then inserted when the last block is an H1. Without match, any last block whose type differs from the trailing type can trigger insertion.

Nested level

level changes where the plugin looks for the last node.

levelTarget
0Last root block.
1Last child inside the last root-level container.
TrailingBlockPlugin.configure({
  initialState: {
    level: 1,
    type: 'paragraph',
  },
});
TrailingBlockPlugin.configure({
  initialState: {
    level: 1,
    type: 'paragraph',
  },
});

Use nested levels when a constrained container must always end with a text block.

Behavior

CaseResult
Empty editorInserts a block at [0].
Last node already matches typeFalls through to the base normalizeNode.
Last node has another type and matches initialState.matchInserts the trailing block at PathApi.next(lastChildPath).
Last node does not match initialState.matchDoes not insert.

The correction inserts { children: [{ text: '' }], type: trailingType } through the active transaction.

API Reference

APIPackageUse
TrailingBlockPluginplatejsNormalizer that ensures a trailing block exists.
TrailingBlockPluginState.typeplatejsBlock type to insert. Defaults to the editor paragraph type.
TrailingBlockPluginState.levelplatejsDepth used by tx.nodes.last. Defaults to 0.
TrailingBlockPluginState.insertplatejsCustom wrapper around the generated insertion.
TrailingBlockPluginState.matchplatejs node matchLimits insertion to matching last nodes.
const
;