Single Block

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

import * as React from 'react';

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

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

export default function SingleBlockDemo() {
  const [isSingleBlock, setIsSingleBlock] = React.useState(true);

  const editor = usePlateEditor(
    {
      plugins: [
        ...EditorKit,
        isSingleBlock ? SingleBlockPlugin : SingleLinePlugin,
      ],
      value: [
        {
          children: [
            {
              text: `Try typing or pasting text with multiple lines. ${
                isSingleBlock
                  ? String.raw`With Single Block mode, line breaks become soft breaks (\n).`
                  : 'With Single Line mode, all line breaks are removed.'
              }`,
            },
          ],
          type: 'p',
        },
      ],
    },
    [isSingleBlock]
  );

  return (
    <div className="space-y-4">
      <Plate editor={editor}>
        <div className="flex items-center space-x-2 p-2">
          <Checkbox
            id="single-block-mode"
            checked={isSingleBlock}
            onCheckedChange={(checked) =>
              setIsSingleBlock(checked === 'indeterminate' ? false : checked)
            }
          />
          <Label htmlFor="single-block-mode">
            {String.raw`Single Block Mode (allows line breaks as \n)`}
          </Label>
        </div>

        <EditorContainer variant="demo">
          <Editor />
        </EditorContainer>
      </Plate>
    </div>
  );
}

Features

  • SingleLinePlugin: Restricts editor to a single line of text with all line breaks removed
  • SingleBlockPlugin: Restricts editor to a single block with line breaks converted to soft breaks
  • Prevents creation of multiple blocks through normalization
  • Filters out line break characters from pasted content
  • Suitable for titles, labels, comments, or constrained text inputs

Manual Usage

Add Plugins

import { SingleLinePlugin, SingleBlockPlugin } from 'platejs';
import { createPlateEditor } from 'platejs/react';
 
const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    SingleLinePlugin, // For single-line text
    // OR
    SingleBlockPlugin, // For single-block text with soft breaks
  ],
});

Plugins

SingleLinePlugin

Plugin that restricts editor content to a single line of text by removing all line breaks and merging multiple blocks.

Key behaviors:

  • Prevents insertBreak and insertSoftBreak operations
  • Filters out line break characters
  • Merges multiple blocks into the first block without separators

SingleBlockPlugin

Plugin that restricts editor content to a single block while preserving line breaks.

Key behaviors:

  • Converts insertBreak to insertSoftBreak
  • Merges multiple blocks into the first block with \n separators
  • Preserves existing line break characters in text content
Exit BreakTrailing Block