Skip to main content

Forced Layout

Allows you to enforce document structure. For example, you can require that the first line is an H1.

Installation#

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

Usage#

import React from 'react';
import {
  createNormalizeTypesPlugin,
  createTrailingBlockPlugin,
  ELEMENT_H1,
  Plate,
} from '@udecode/plate';
import { basicNodesPlugins } from './basic-nodes/basicNodesPlugins';
import { editableProps } from './common/editableProps';
import { plateUI } from './common/plateUI';
import { forcedLayoutValue } from './forced-layout/forcedLayoutValue';
import { trailingBlockPlugin } from './trailing-block/trailingBlockPlugin';
import { createMyPlugins, MyValue } from './typescript/plateTypes';

const plugins = createMyPlugins(
  [
    ...basicNodesPlugins,
    createTrailingBlockPlugin(trailingBlockPlugin),
    createNormalizeTypesPlugin({
      options: {
        rules: [{ path: [0], strictType: ELEMENT_H1 }],
      },
    }),
  ],
  {
    components: plateUI,
  }
);

export default () => (
  <Plate<MyValue>
    editableProps={editableProps}
    plugins={plugins}
    initialValue={forcedLayoutValue}
  />
);

Options#

export interface TrailingBlockPlugin extends QueryNodeOptions {
/**
* Level where the trailing node should be, the first level being 0.
*/
level?: number;
/**
* Type of the trailing block
*/
type?: string;
}
interface Rule {
/**
* Force the type of the node at the given path
*/
strictType?: string;
/**
* Type of the inserted node at the given path if `strictType` is not provided
*/
type?: string;
/**
* Path where the rule applies
*/
path: Path;
}
export interface NormalizeTypesPlugin extends ErrorHandler {
/**
* Set of rules for the types.
* For each rule, provide a `path` and either `strictType` or `type`.
* If there is no node existing at `path`:
* insert a node with `strictType`.
* If there is a node existing at `path` but its type is not `strictType` or `type`:
* set the node type to `strictType` or `type`.
*/
rules?: Rule[];
}

Source Code#

Edit this page