API reference for Plate plugins.

Plate plugins are objects passed to Plate plugins prop.


Collapse all

    Property used by Plate to store the plugins by key in editor.pluginsByKey.

    • Unique in the editor.
    • Naming convention:
    • all Plate element keys start with ELEMENT_.
    • all Plate mark keys start with MARK_.

    Property used by Plate to render a slate element or leaf.

    • React component with element of leaf props.

    Property used by Plate to decorate editor ranges.

    export type Decorate<
      P = PluginOptions,
      V extends Value = Value,
      E extends PlateEditor<V> = PlateEditor<V>
    > = (
      editor: PlateEditor<V>,
      plugin: WithPlatePlugin<P, V, E>
    ) => (entry: ENodeEntry<V>) => Range[] | undefined;

    Properties used by the HTML deserializer core plugin for each HTML element.

    Handlers called whenever the corresponding event occurs in the editor.

    • Handlers can also be passed as Plate props. These are called after the plugins handlers.
    • Event handlers can return a boolean flag to specify whether the event can be treated as being handled.
    • If it returns true, the next handlers will not be called.

    This attribute extends most textarea handlers like:

    • onCopy,
    • onPaste,
    • onFocus,
    • onBlur,
    • onDOMBeforeInput,
    • onKeyDown,
    • ...
    type Handler<
      P = PluginOptions,
      V extends Value,
      E extends PlateEditor = PlateEditor
    > = (editor: E, plugin: WithPlatePlugin) => (event: Event) => boolean | void;

    Property used by Plate to render nodes of this type as elements, i.e. renderElement.

    Property used by inlineVoid core plugin to set elements of this type as inline.

    Property used by Plate to render nodes of this type as leaves, i.e. renderLeaf.

    Property used by inlineVoid core plugin to set elements of this type as void.

    Property used by markableVoid core plugin to set void elements of this type as markable.

    Normalize value before passing it into the editor.

    Extended properties used by any plugin as options.

    • Its type is the second generic type of PlatePlugin.

    Property used by Plate to deeply override plugins by key.

    Recursive plugin support to allow having multiple plugins in a single plugin.

    • Plate eventually flattens all the plugins into the editor.

    Property used by Plate to override node component props.

    • If function, its returning value will be shallow merged to the old props, with the old props as parameter.
    • If object, its value will be shallow merged to the old props.
    object |
      ((props: PlateRenderElementProps & PlateRenderLeafProps) =>
        object | undefined);

    Render a component above Editable.

    Render a component above Slate.

    Render a component after Editable.

    Render a component before Editable.

    Property used by serializeHtml util to replace renderElement and renderLeaf when serializing a node of this type.

      className?: string;
      editor: PlateEditor;
      nodeProps?: AnyObject;
      children: any;
        | {
            'data-slate-node': 'element';
            'data-slate-inline'?: true;
            'data-slate-void'?: true;
            dir?: 'rtl';
            ref: any;
        | {
            'data-slate-leaf': true;
      element: TElement;
      leaf: TText;
      text: TText;

    Recursive plugin merging.

    • Can be used to derive plugin fields from editor and plugin.
    • The returned value will be deeply merged to the plugin.
    (editor: PlateEditor, plugin: WithPlatePlugin) => Partial<PlatePlugin> | void;

    Property used by Plate to render a node by type.

    • It requires slate element properties to have a type property with the plugin type as value.
    • Example: { type: 'p' } where plugin type is 'p'.
    • It requires slate leaf properties to have the plugin type value as key and true as value.
    • Example: { bold: true } where plugin type is 'bold'.
    • Default: is plugin key.

    Use any React hooks here. Each plugin useHooks will be called in a React component.

    (editor: PlateEditor, plugin: WithPlatePlugin) => void

    Editor method overriders.

    (editor: PlateEditor, plugin: WithPlatePlugin) => PlateEditor;