Trailing Block

PreviousNext
Loading...
Files
components/demo.tsx
'use client';

import * as React from 'react';

import { Plate, usePlateEditor } from 'platejs/react';

import { EditorKit } from '@/components/editor/editor-kit';
import { Editor, EditorContainer } from '@/components/ui/editor';

import { DEMO_VALUES } from './values/demo-values';

export default function Demo({ id }: { id: string }) {
  const editor = usePlateEditor({
    plugins: EditorKit,
    value: DEMO_VALUES[id],
  });

  return (
    <Plate editor={editor}>
      <EditorContainer variant="demo">
        <Editor />
      </EditorContainer>
    </Plate>
  );
}

Features

  • Ensures a specific block type is always present at the end of the document

Manual Usage

Add Plugin

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

Configure Plugin

The plugin works out of the box with sensible defaults, but can be configured for specific use cases:

import { TrailingBlockPlugin } from 'platejs';
import { createPlateEditor } from 'platejs/react';
 
const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    TrailingBlockPlugin.configure({
      options: {
        type: 'p', // Paragraph block
        exclude: ['blockquote'], // Don't add after these types
      },
    }),
  ],
});

Configuration options:

  • type: The block type to insert as the trailing block (defaults to paragraph)
  • exclude: Array of block types that should not trigger trailing block insertion
  • allow: Array of block types that are allowed (alternative to exclude)
  • filter: Custom function to determine when to add trailing blocks

Plugins

TrailingBlockPlugin

Plugin that ensures a specific block type is always present at the end of the document or at a specified nesting level.

Key behaviors:

  • Automatically adds a trailing block when the last node doesn't match the expected type
  • Works through editor normalization to maintain document structure
  • Supports nested structures by configuring the level option
  • Prevents empty documents by ensuring at least one block exists
  • Respects filtering options to control when trailing blocks are added

Options

Collapse all

    Level where the trailing node should be added, with the first level being 0.

    • Default: 0

    Type of the trailing block to insert.

    • Default: 'p' (paragraph)

    Filter nodes matching these types. Only these types will be considered valid trailing blocks.

    • Default: [] (all types allowed)

    Filter nodes not matching these types. These types will not trigger trailing block insertion.

    • Default: [] (no types excluded)

    Custom filter function to determine if a node should trigger trailing block insertion.

Single BlockAutoformat