Single Block

PreviousNext

Restrict an editor to one root block or one line of text.

DemoTrailing Block

Single Block provides two input constraints: one root block with soft breaks, or one line with no breaks. Both plugins disable TrailingBlockPlugin while enabled and collapse extra root blocks during normalization.

Loading…

Features

  • SingleBlockPlugin keeps one root block and converts Enter to a soft break.
  • SingleLinePlugin keeps one root block and removes all line break characters.
  • Root normalization merges extra blocks into the first block.
  • Both plugins disable TrailingBlockPlugin.
  • Demo toggle for switching between single-block and single-line behavior.

Fast Path

Use SingleBlockPlugin when the field may contain line breaks.

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

Use SingleLinePlugin when the field must be plain one-line text.

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

Ownership

LayerOwnerWhat It Does
SingleBlockPluginplatejs / @platejs/utilsKeeps one root block and preserves line breaks as text.
SingleLinePluginplatejs / @platejs/utilsKeeps one root block and strips line break characters.
TrailingBlockPlugin@platejs/utilsDisabled by both plugins through override.enabled.
single-block-demoRegistry exampleLets users toggle between single-block and single-line mode.

These plugins are editor constraints, not schema validation. They rewrite editor content during normalization.

Behavior

PluginEnterSoft BreakExtra Root BlocksExisting Text Breaks
SingleBlockPluginCalls editor.tf.insertSoftBreak().Preserved as \n.Merged into the first block with \n separators.Preserved.
SingleLinePluginNo-op.No-op.Merged into the first block with no separator.Removes \r, \n, \r\n, \u2028, and \u2029.

Use single-block mode for descriptions, comments, or titles that may wrap across lines. Use single-line mode for labels, slugs, short titles, and command inputs.

Normalization

Both plugins override normalizeNode.

CaseResult
Root has one blockLeaves the value alone.
Root has multiple blocks with SingleBlockPluginInserts \n at the start of each next block, then merges it into the first block.
Root has multiple blocks with SingleLinePluginMerges each next block into the first block without a separator.
Text node contains line separators with SingleLinePluginReplaces the text with the filtered one-line string.

The merge happens inside editor.tf.withoutNormalizing, so the root collapse finishes as one normalization pass.

Demo Toggle

The registry example switches plugins from a checkbox.

import { SingleBlockPlugin, SingleLinePlugin } from 'platejs';
 
const plugins = [
  isSingleBlock ? SingleBlockPlugin : SingleLinePlugin,
];
import { SingleBlockPlugin, SingleLinePlugin } from 'platejs';
 
const plugins = [
  isSingleBlock ? SingleBlockPlugin : SingleLinePlugin,
];

Single Block Mode keeps pasted lines as \n. Turning it off switches to single-line mode and removes line breaks.

API Reference

APIPackageUse
SingleBlockPluginplatejs / @platejs/utilsOne root block with soft breaks preserved.
SingleLinePluginplatejs / @platejs/utilsOne root block with all line breaks removed.
KEYS.singleBlockplatejs / @platejs/utilsPlugin key for SingleBlockPlugin.
KEYS.singleLineplatejs / @platejs/utilsPlugin key for SingleLinePlugin.
override.enabled.trailingBlockPlugin overrideSet to false by both plugins.