Heading uses one element type and one plugin. The required level property selects H1 through H6 rendering and Markdown depth.
BasicBlocksKit includes HeadingPlugin, the dynamic HeadingElement, all six keyboard shortcuts, and HeadingRules.markdown().
import { BasicBlocksKit } from '@/components/editor/plugins/basic-blocks-kit';
import { createPlateEditor } from 'platejs/react';
const editor = createPlateEditor({
plugins: [...BasicBlocksKit],
});import { BasicBlocksKit } from '@/components/editor/plugins/basic-blocks-kit';
import { createPlateEditor } from 'platejs/react';
const editor = createPlateEditor({
plugins: [...BasicBlocksKit],
});import { HeadingRules } from '@platejs/basic-nodes';
import { HeadingPlugin } from '@platejs/basic-nodes/react';
const plugins = [
HeadingPlugin.configure({
component: HeadingElement,
inputRules: [HeadingRules.markdown()],
}),
];import { HeadingRules } from '@platejs/basic-nodes';
import { HeadingPlugin } from '@platejs/basic-nodes/react';
const plugins = [
HeadingPlugin.configure({
component: HeadingElement,
inputRules: [HeadingRules.markdown()],
}),
];A renderer reads element.level and chooses the matching intrinsic element.
import type { PlateElementProps } from 'platejs/react';
import { HeadingPlugin } from '@platejs/basic-nodes/react';
import { PlateElement } from 'platejs/react';
export function HeadingElement(
props: PlateElementProps<typeof HeadingPlugin>
) {
const tag = `h${props.element.level}` as const;
return <PlateElement as={tag} {...props} />;
}import type { PlateElementProps } from 'platejs/react';
import { HeadingPlugin } from '@platejs/basic-nodes/react';
import { PlateElement } from 'platejs/react';
export function HeadingElement(
props: PlateElementProps<typeof HeadingPlugin>
) {
const tag = `h${props.element.level}` as const;
return <PlateElement as={tag} {...props} />;
}const value = [
{
type: 'heading',
level: 2,
children: [{ text: 'Document model' }],
},
];const value = [
{
type: 'heading',
level: 2,
children: [{ text: 'Document model' }],
},
];level is semantic Plate data. The HTML codec maps it to an h1 through h6 tag. The Markdown codec maps it to MDAST depth.
editor.plugin(HeadingPlugin).update.toggle({ level: 2 });editor.plugin(HeadingPlugin).update.toggle({ level: 2 });Calling toggle with the active level resets the selected heading to the root default block. Calling it with another level changes the level on the same heading type.
| API | Purpose |
|---|---|
| BaseHeadingPlugin | Headless heading schema, behavior, codecs, and update. |
| HeadingPlugin | React adapter for BaseHeadingPlugin. |
| HeadingRules.markdown() | One block-start rule for # through ######. |
| HeadingLevel | 1, 2, 3, 4, 5, or 6. |