Plate Plugin

API reference for Plate plugins.

Plate plugins are objects passed to Plate plugins prop.

Generic Types

The PlatePlugin interface uses one generic type:

Attributes

Collapse all

    Represents the plugin configuration. This type extends PluginConfig which includes key, options, api, and transforms.

Usage example:

type MyPluginConfig = PluginConfig<
  'myPlugin',
  { customOption: boolean },
  { getData: () => string },
  { customTransform: () => void }
>;
 
const MyPlugin = createPlatePlugin<MyPluginConfig>({
  key: 'myPlugin',
  // plugin implementation
});

Plugin Properties

Attributes

Collapse all

    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, including onChange.

    Defines how the plugin injects functionality into other plugins or the editor.

    Defines the node-specific configuration for the plugin.

    Allows overriding components and plugins by key.

    Defines how the plugin parses content.

    Defines serializers and deserializers for various formats.

    Defines how the plugin renders components.

    Defines keyboard shortcuts for the plugin.

    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.

    extendEditor: ({ editor }) => {
  // Example: Integrating a legacy Slate plugin
  return withYjs(editor);
}

    Hook called when the editor is initialized.

Plugin Methods

Attributes

Collapse all

    Creates a new plugin instance with updated options.

    (config: PlatePluginConfig<C['key'], InferOptions<C>, InferApi<C>, InferTransforms<C>> | ((ctx: PlatePluginContext<C>) => PlatePluginConfig<C['key'], InferOptions<C>, InferApi<C>, InferTransforms<C>>)) => PlatePlugin<C>

    Creates a new plugin instance with additional configuration.

    (extendConfig: Partial<PlatePlugin> | ((ctx: PlatePluginContext<AnyPluginConfig>) => Partial<PlatePlugin>)) => PlatePlugin

    Extends an existing nested plugin or adds a new one if not found. Supports deep nesting.

    (key: string, extendConfig: Partial<PlatePlugin> | ((ctx: PlatePluginContext<AnyPluginConfig>) => Partial<PlatePlugin>)) => PlatePlugin

    Sets or replaces the component associated with a plugin.

    (component: NodeComponent) => PlatePlugin<C>

    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.

    overrideEditor(({ editor, tf: { deleteForward }, api: { isInline } }) => ({
  transforms: {
    // Override transforms
    deleteForward(options) {
      deleteForward(options);
    },
  },
  api: {
    // Override API methods
    isInline(element) {
      return isInline(element);
    },
  },
})) => PlatePlugin<C>
    • 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.

    (api: (ctx: PlatePluginContext) => Record<string, Function>) => PlatePlugin

    Extends the editor's API with plugin-specific methods.

    (api: (ctx: PlatePluginContext) => Record<string, Function>) => PlatePlugin

    Extends the plugin's transforms.

    (transforms: (ctx: PlatePluginContext) => Record<string, Function>) => PlatePlugin

    Extends the editor's transforms with plugin-specific methods.

    (transforms: (ctx: PlatePluginContext) => Record<string, Function>) => PlatePlugin

    Extends the plugin options with selectors.

    (options: (ctx: PlatePluginContext) => Record<string, any>) => PlatePlugin

Plugin Context

Most plugin functions receive a PlatePluginContext object as their first parameter. This object includes:

Attributes

Collapse all

    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.

    Hook to subscribe to a specific option value in a React component.

For more detailed information on specific aspects of Plate plugins, refer to the individual guides on Plugin Configuration, Plugin Methods, Plugin Context, Plugin Components, and Plugin Shortcuts.