Docs
Forced Layout

Forced Layout

Strict document structure.

🌳 Blocks

Easily create headings of various levels, from H1 to H6, to structure your content and make it more organized.
Create blockquotes to emphasize important information or highlight quotes from external sources.
// Use code blocks to showcase code snippets
function greet() {
  console.info('Hello World!');
}
Each block is a React component in which you can manage the state:
    Create a "banana language" translation plugin
    Create a "detect sarcasm" plugin (good luck with that)
    Create an AI auto-complete plugin

🔗 Link

Add hyperlinks within your text to reference external sources or provide additional information using the Link plugin.
Effortlessly create hyperlinks using the toolbar or by pasting a URL while selecting the desired text.

🌱 Marks

Add style and emphasis to your text using the mark plugins, which offers a variety of formatting options.
Make text bold, italic, underlined, or apply a combination of these styles for a visually striking effect.
Add strikethrough to indicate deleted or outdated content.
Write code snippets with inline code formatting for easy readability.

Features

  • Automatically ensures the use of specified elements as required to maintain document structure (e.g., first block should be an H1 element).

Installation

npm install @udecode/plate-normalizers @udecode/plate-trailing-block

Usage

import { NormalizersPlugin } from '@udecode/plate-normalizers/react';
import { TrailingBlockPlugin } from '@udecode/plate-trailing-block/react';
import { ParagraphPlugin } from '@udecode/plate-common/react';
import { HEADING_KEYS } from '@udecode/plate-heading/react';
 
const plugins = [
  // ...otherPlugins
  TrailingBlockPlugin.configure({ options: { type: ParagraphPlugin.key } }),
  NormalizersPlugin.configure({
    options: {
      rules: [{ path: [0], strictType: 'h1' }],
    },
  }),
];

Plugins

TrailingBlockPlugin

Options

Collapse all

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

    • Default: 0

    Type of the trailing block.

    • Default: editor.getType(ParagraphPlugin)

The TrailingBlockPlugin also extends QueryNodeOptions, which includes additional options for querying nodes.

NormalizeTypesPlugin

Options

Collapse all

    An array of rule objects for normalizing types.

    • Default: []

Rule

Attributes

Collapse all

    Path where the rule applies.

    Force the type of the node at the given path.

    Type of the inserted node at the given path if strictType is not provided.

FontHighlight