From zbeyens. The source code is available on GitHub.

Plate
PlatePliteEditorsTemplates
GitHub16kGitHub
DiscordDiscord
  • Introduction
  • Installation
    • Plate UI
      • Next.js
      • React
    • Manual
    • RSC
    • Node.js
    • Local Docs
    • MCP
  • Releases

Forced Layout

PreviousNext

Path-based normalization for required document structure.

Trailing BlockSingle BlockPlugin Rules

Forced Layout is the NormalizeTypesPlugin pattern for pinning document positions to required node types. Use it for fixed slots such as "the first block is an H1." Use Trailing Block when the requirement is "the document always ends with a paragraph."

Features

  • Path-indexed normalization rules.
  • strictType for rewriting an existing node to a required type.
  • type for inserting a missing node without rewriting an existing node.
  • Root-only normalization pass.
  • Automatic missing-node insertion through the plugin correction transaction.
  • onError callback when insertion fails.
  • Conditional enabling through normal plugin enabled configuration.
Report an issue

Fast Path

Exit BreakSingle Block

On This Page

FeaturesFast PathOwnershipRule SemanticsError HandlingChoosing The Right UtilityPlayground ToggleAPI Reference
Build your editor
Production-ready AI template and reusable components.
Get all-access

Add NormalizeTypesPlugin when specific paths must exist or hold a specific block type.

import { HeadingPlugin } from '@platejs/basic-nodes/react';
import { NormalizeTypesPlugin, PLUGINS } from 'platejs';
import { createPlateEditor } from 'platejs/react';
 
export const editor = createPlateEditor({
  plugins: [
    HeadingPlugin,
    NormalizeTypesPlugin.configure(({ editor }) => ({
      initialState: {
        rules: [
          {
            path: [0],
            strictType: editor.plugin(PLUGINS.heading).schema.type,
          },
          {
            path: [1],
            type: editor.plugin(PLUGINS.paragraph).schema.type,
          },
        ],
      },
    })),
  ],
});
import { HeadingPlugin } from '@platejs/basic-nodes/react';
import { NormalizeTypesPlugin, PLUGINS } from 'platejs';
import { createPlateEditor } from 'platejs/react';
 
export const editor = createPlateEditor({
  plugins: [
    HeadingPlugin,
    NormalizeTypesPlugin.configure(({ editor }) => ({
      initialState: {
        rules: [
          {
            path: [0],
            strictType: editor.plugin(PLUGINS.heading).schema.type,
          },
          {
            path: [1],
            type: editor.plugin(

This keeps the first block as an H1 and inserts a paragraph at path [1] when that node is missing.

Ownership

LayerOwnerWhat It Does
NormalizeTypesPluginplatejs / @platejs/utilsStores rules and onError, then overrides normalization.
NormalizeTypesPlugin.corrections@platejs/utilsRuns the configured path rules when root children change.
tx.nodes.get(path)Plite transactionReads the node at the configured path.
tx.nodes.insert / tx.nodes.setPlite transactionInserts missing nodes or corrects a strict type.
Playground demoRegistry exampleEnables a first-block H1 rule when the playground id is forced-layout.

There is no ForcedLayoutPlugin and no forced-layout. The public plugin is NormalizeTypesPlugin.

Rule Semantics

NormalizeTypesPlugin runs its root-level correction when root children change. It evaluates every configured rule in order during that correction.

Rule ShapeExisting NodeMissing Node
{ path, strictType }If the node is an element with a different type, Plate sets its type to strictType and preserves children.Plate inserts { type: strictType, children: [{ text: '' }] }.
{ path, type }Plate leaves the node alone.Plate inserts { type, children: [{ text: '' }] }.

Use strictType for required slots. Use type for optional slots that should be filled only when empty.

Error Handling

If inserting a missing node fails, the correction calls onError(error) and leaves the failed rule unchanged.

import { NormalizeTypesPlugin } from 'platejs';
 
export const requiredTitle = NormalizeTypesPlugin.configure({
  initialState: {
    onError: (error) => {
      console.error(error);
    },
    rules: [{ path: [0], strictType: 'h1' }],
  },
});
import { NormalizeTypesPlugin } from 'platejs';
 
export const requiredTitle = NormalizeTypesPlugin.configure({
  initialState: {
    onError: (error) => {
      console.error(error);
    },
    rules: [{ path: [0], strictType: 'h1' }],
  },
});

Keep onError small. A normalization callback should report or collect the failure, not mutate the same path again.

Choosing The Right Utility

NeedUse
First block must be a titleNormalizeTypesPlugin with strictType.
A missing slot should be insertedNormalizeTypesPlugin with type.
Editor may only contain one root blockSingle Block.
Editor must end with a paragraphTrailing Block.
Pressing Enter should exit or reset a blockPlugin Rules.

Forced layout is for absolute paths. It is not a schema engine for every possible nested node shape.

Playground Toggle

The registry playground demonstrates this pattern by enabling the plugin only for the forced-layout example id.

NormalizeTypesPlugin.configure({
  enabled: id === 'forced-layout',
  initialState: {
    rules: [{ path: [0], strictType: 'h1' }],
  },
});
NormalizeTypesPlugin.configure({
  enabled: id === 'forced-layout',
  initialState: {
    rules: [{ path: [0], strictType: 'h1' }],
  },
});

That example keeps the first playground block as an H1 while leaving the rest of the editor to normal Plate behavior.

API Reference

APIPackageUse
NormalizeTypesPluginplatejs / @platejs/utilsPath-based type normalization plugin.
NormalizeTypesPluginState.rules@platejs/utilsOrdered list of path rules. Defaults to [].
Rule.path@platejs/utilsPlite Path where the rule applies.
Rule.strictType@platejs/utilsRequired type for an existing or missing node.
Rule.type@platejs/utilsType for a missing node only.
NormalizeTypesPluginState.onError@platejs/utilsCalled when inserting a missing node throws.
PLUGINS
.paragraph).schema.type,
},
],
},
})),
],
});