4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T582e,--- title: Plate Plugin description: API reference for Plate plugins. --- Plate plugins are objects passed to `Plate` [plugins](/docs/api/core/plate-components#plugins) prop. ## Plugin Properties Unique identifier used by Plate to store the plugins by key in `editor.plugins`. An object of API functions provided by the plugin. These functions are accessible via `editor.api[key]`. Transform functions provided by the plugin that modify the editor state. These are accessible via `editor.tf[key]`. Extended properties used by the plugin as options. Event handlers for various editor events. Called whenever the editor content changes. Called whenever a node operation occurs (insert, remove, set, merge, split, move). ```ts type OnNodeChange = (ctx: PlatePluginContext & { node: Descendant; operation: NodeOperation; prevNode: Descendant; }) => HandlerReturnType; ``` **Parameters:** - `node`: The node after the operation - `operation`: The node operation that occurred - `prevNode`: The node before the operation **Note:** For `insert_node` and `remove_node` operations, both `node` and `prevNode` contain the same value to avoid null cases. Called whenever a text operation occurs (insert or remove text). ```ts type OnTextChange = (ctx: PlatePluginContext & { node: Descendant; operation: TextOperation; prevText: string; text: string; }) => HandlerReturnType; ``` **Parameters:** - `node`: The parent node containing the text that changed - `operation`: The text operation that occurred (`insert_text` or `remove_text`) - `prevText`: The text content before the operation - `text`: The text content after the operation Defines how the plugin injects functionality into other plugins or the editor. Properties used by Plate to inject props into any node component. An array of plugin keys to exclude from node prop injection. An array of plugin keys. Node prop injection will be excluded for any nodes that are descendants of elements with these plugin types. If true, only matches block elements. Used to restrict prop injection to block-level nodes. If true, only matches element nodes. Used to restrict prop injection to element nodes. If true, only matches leaf nodes. Used to restrict prop injection to leaf nodes. Maximum nesting level for node prop injection. Nodes deeper than this level will not receive injected props. Property that can be used by a plugin to allow other plugins to inject code. A function that returns a plugin config to be injected into other plugins `inject.plugins` specified by targetPlugins. Plugin keys used by `InjectNodeProps` and the `targetPluginToInject` function. - **Default:** `[ParagraphPlugin.key]` Defines the node-specific configuration for the plugin. Indicates if this plugin's nodes can be rendered as decorated leaf. Set to false to render node component only once per text node. - **Default:** `true` Indicates if this plugin's nodes should be rendered as elements. Indicates if this plugin's elements should be treated as inline. Indicates if this plugin's nodes should be rendered as leaves. When `true`, indicates that the plugin's elements are primarily containers for other content. This property is typically used by fragment queries to unwrap the container nodes. Defines the selection behavior at the boundaries of nodes. See [Plugin Rules](/docs/plugin-rules#rulesselection). - `'default'`: Uses Slate's default behavior - `'directional'`: Selection affinity is determined by the direction of cursor movement. Maintains inward or outward affinity based on approach - `'outward'`: Forces outward affinity. Typing at the edge of a mark will not apply the mark to new text - `'hard'`: Creates a 'hard' edge that requires two key presses to move across. Uses offset-based navigation - **Default:** `undefined` (Slate's default behavior) Indicates if this plugin's void elements should be markable. Indicates if this plugin's nodes should be selectable. - **Default:** `true` Indicates whether this element enforces strict sibling type constraints. Set to `true` when the element only allows specific siblings (e.g., `td` can only have `td` siblings, `column` can only have `column` siblings) and prevents standard text blocks like paragraphs from being inserted as siblings. Used by exit break functionality to determine appropriate exit points in nested structures. See [Exit Break](/docs/exit-break). - **Default:** `false` Action when Enter is pressed in an empty block. See [Plugin Rules](/docs/plugin-rules). - `'default'`: Default behavior - `'reset'`: Reset block to default paragraph type - `'exit'`: Exit the current block - `'lift'`: Lift the current block out of the nearest matching ancestor - `'deleteExit'`: Delete backward then exit Action when Enter is pressed at the end of an empty line. This is typically used with `rules.break.default: 'lineBreak'`. See [Plugin Rules](/docs/plugin-rules). - `'default'`: Default behavior - `'exit'`: Exit the current block - `'deleteExit'`: Delete backward then exit Default action when Enter is pressed. Defaults to splitting the block. See [Plugin Rules](/docs/plugin-rules). - `'default'`: Default behavior - `'exit'`: Exit the current block - `'lineBreak'`: Insert newline character - `'deleteExit'`: Delete backward then exit If true, the new block after splitting will be reset to the default type. See [Plugin Rules](/docs/plugin-rules). Action when Backspace is pressed at the start of the block. This applies whether the block is empty or not. See [Plugin Rules](/docs/plugin-rules). - `'default'`: Default behavior - `'lift'`: Lift the current block out of the nearest matching ancestor - `'reset'`: Reset block to default paragraph type Action when Backspace is pressed and the block is empty. See [Plugin Rules](/docs/plugin-rules). - `'default'`: Default behavior - `'reset'`: Reset block to default paragraph type Function to determine if this plugin's rules should apply to a node. Used to override behavior based on node properties beyond just type matching. **Default:** `type === node.type` **Example:** `matchRules: ({ node }) => Boolean(node.listStyleType)` Example: List plugin sets `match: ({ node }) => !!node.listStyleType` to override paragraph behavior when the paragraph is a list item. Whether to remove the node when it's empty during merge operations. See [Plugin Rules](/docs/plugin-rules). - **Default:** `false` Whether to remove nodes with empty text during normalization. See [Plugin Rules](/docs/plugin-rules). - **Default:** `false` Indicates if this plugin's elements should be treated as void. Specifies the type identifier for this plugin's nodes. - **Default:** `plugin.key` React component used to render this plugin's nodes. Override `data-slate-leaf` element attributes. Override node attributes. Override `data-slate-node="text"` element attributes. Allows overriding components and plugins by key. Replace plugin `NodeComponent` by key. Extend `PlatePlugin` by key. Enable or disable plugins. Defines how the plugin parses content. Defines serializers and deserializers for various formats. HTML parser configuration. HTML React serializer configuration. Defines how the plugin renders components. Component rendered above the Editable component but inside the Slate wrapper. Create a function that generates a parent React node for all other plugins' node components. Component rendered above the Slate wrapper. Renders a component after the Editable component. Renders a component before the Editable component. Create a function that generates a React node below all other plugins' node React node, but above their children. Renders a component after the direct children of the root element. This differs from `belowNodes` in that it's the direct child of `PlateElement` rather than wrapping the children that could be nested. This is useful when you need components relative to the root element. Renders a component below leaf nodes when `isLeaf: true` and `isDecoration: false`. Use `render.node` instead when `isDecoration: true`. Renders a component for: - Elements nodes if `isElement: true` - Below text nodes if `isLeaf: true` and `isDecoration: false` - Below leaf if `isLeaf: true` and `isDecoration: true` Specifies the HTML tag name to use when rendering the node component. Only used when no custom `component` is provided for the plugin. - **Default:** `'div'` for elements, `'span'` for leaves Defines keyboard shortcuts for the plugin. Zustand store for managing plugin options. An array of plugin keys that this plugin depends on. Enables or disables the plugin. Used by Plate to determine if the plugin should be used. Recursive plugin support to allow having multiple plugins in a single plugin. Defines the order in which plugins are registered and executed. - **Default:** `100` Property used by Plate to decorate editor ranges. Function to extend the editor instance. Used primarily for integrating legacy Slate plugins that need direct editor mutation. Only one `extendEditor` is allowed per plugin. ```ts extendEditor: ({ editor }) => { // Example: Integrating a legacy Slate plugin return withYjs(editor); } ``` Hook called when the editor is initialized. Configures which plugin functionalities should only be active when the editor is not read-only. Can be either a boolean or an object configuration: ```ts type EditOnlyConfig = { render?: boolean; // default: true handlers?: boolean; // default: true inject?: boolean; // default: true transformInitialValue?: boolean; // default: false } ``` When set to `true` (boolean): - `render`, `handlers`, and `inject.nodeProps` are only active when editor is not read-only - `transformInitialValue` remains active regardless of read-only state When set to an object: - Each property can be individually configured - Properties default to being edit-only (`true`) except `transformInitialValue` which defaults to always active (`false`) - Set a property to `false` to make it always active regardless of read-only state - For `transformInitialValue`, set to `true` to make it edit-only Examples: ```ts // All features (except transformInitialValue) are edit-only editOnly: true // transformInitialValue is edit-only, others remain edit-only by default editOnly: { transformInitialValue: true } // render is always active, others follow default behavior editOnly: { render: false } ``` ## Plugin Methods Creates a new plugin instance with updated options. ```ts (config: PlatePluginConfig, InferApi, InferTransforms> | ((ctx: PlatePluginContext) => PlatePluginConfig, InferApi, InferTransforms>)) => PlatePlugin ``` Creates a new plugin instance with additional configuration. ```ts (extendConfig: Partial | ((ctx: PlatePluginContext) => Partial)) => PlatePlugin ``` Extends an existing nested plugin or adds a new one if not found. Supports deep nesting. ```ts (key: string, extendConfig: Partial | ((ctx: PlatePluginContext) => Partial)) => PlatePlugin ``` Sets or replaces the component associated with a plugin. ```ts (component: NodeComponent) => PlatePlugin ``` Creates a new plugin instance with overridden editor methods. Provides access to original methods via `tf` and `api` parameters. Can be called multiple times to layer different overrides. ```ts overrideEditor(({ editor, tf: { deleteForward }, api: { isInline } }) => ({ transforms: { // Override transforms deleteForward(options) { deleteForward(options); }, }, api: { // Override API methods isInline(element) { return isInline(element); }, }, })) => PlatePlugin ``` - Preferred method for modifying editor behavior - Type-safe access to original methods - Clean separation between transforms and API - Can be chained multiple times Extends the plugin's API. ```ts (api: (ctx: PlatePluginContext) => Record) => PlatePlugin ``` Extends the editor's API with plugin-specific methods. ```ts (api: (ctx: PlatePluginContext) => Record) => PlatePlugin ``` Extends the plugin's transforms. ```ts (transforms: (ctx: PlatePluginContext) => Record) => PlatePlugin ``` Extends the editor's transforms with plugin-specific methods. ```ts (transforms: (ctx: PlatePluginContext) => Record) => PlatePlugin ``` Extends the plugin with selectors. ```ts (options: (ctx: PlatePluginContext) => Record) => PlatePlugin ``` ## Plugin Context The current editor instance. The current plugin instance. Function to get a specific option value. Function to get all options for the plugin. Function to set a specific option value. Function to set multiple options. For more detailed information on specific aspects of Plate plugins, refer to the individual guides on [Plugin Configuration](/docs/plugin), [Plugin Methods](/docs/plugin-methods), [Plugin Context](/docs/plugin-context), [Plugin Components](/docs/plugin-components), and [Plugin Shortcuts](/docs/plugin-shortcuts). ## Generic Types Represents the plugin configuration. This type extends `PluginConfig` which includes `key`, `options`, `api`, and `transforms`. Usage example: ```typescript type MyPluginConfig = PluginConfig< 'myPlugin', { customOption: boolean }, { getData: () => string }, { customTransform: () => void } >; const MyPlugin = createPlatePlugin({ key: 'myPlugin', // plugin implementation }); ``` 4e:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L4f",null,{"files":[{"path":"../../content/docs/api/core/plate-plugin.mdx","content":"$50","type":"registry:file","target":"content/docs/plate/api/core/plate-plugin.mdx"}],"className":"h-[70svh] min-h-80"}]]}]