Plugin Context

Understanding and utilizing the Plugin Context in Plate plugins.

The Plugin Context is an object available in all plugin methods, providing access to the editor instance, plugin configuration, and utility functions.

Accessing Plugin Context

Plugin Methods

The Plugin Context is available as the first parameter in all plugin methods:

const MyPlugin = createPlatePlugin({
  key: 'myPlugin',
  handlers: {
    onKeyDown: (ctx) => {
      // ctx is the Plugin Context
      console.info(ctx.editor, ctx.plugin);
    },
  },
});

getEditorPlugin

This function is particularly useful when you need to access the context of another plugin. It allows for cross-plugin communication and interaction, enabling more complex and interconnected plugin behaviors.

Access context of another plugin for cross-plugin communication.

const MyPlugin = createPlatePlugin({
  key: 'myPlugin',
  handlers: {
    onKeyDown: ({ editor }) => {
      const linkCtx = getEditorPlugin(LinkPlugin);
    },
  },
});

useEditorPlugin

In React components, you can use the useEditorPlugin hook to access the Plugin Context:

React hook to access Plugin Context:

const MyComponent = () => {
  const { editor, plugin, useOption, type } = useEditorPlugin(MyPlugin);
  
  return <div>{useOption('myOption')}</div>;
};

Plugin Context Properties

editor

The current PlateEditor instance:

const MyPlugin = createPlatePlugin({
  key: 'myPlugin',
  handlers: {
    onChange: ({ editor }) => {
      console.info('Editor value:', editor.children);
    },
  },
});

plugin

The current plugin configuration:

const MyPlugin = createPlatePlugin({
  key: 'myPlugin',
  handlers: {
    onKeyDown: ({ plugin }) => {
      console.info('Plugin key:', plugin.key);
    },
  },
});

getOption

A function to get a specific option value for the plugin:

Get specific option value for plugin:

const MyPlugin = createPlatePlugin({
  key: 'myPlugin',
  options: { myOption: 'default' },
  handlers: {
    onClick: ({ getOption }) => {
      const myOption = getOption('myOption');
      console.info('My option value:', myOption);
    },
  },
});

getOptions

A function to get all options for the plugin:

Get all options for plugin:

const MyPlugin = createPlatePlugin({
  key: 'myPlugin',
  options: { option1: 'value1', option2: 'value2' },
  handlers: {
    onClick: ({ getOptions }) => {
      const options = getOptions();
      console.info('All options:', options);
    },
  },
});

setOption

A function to set a specific option value for the plugin:

Set specific option value for plugin:

const MyPlugin = createPlatePlugin({
  key: 'myPlugin',
  options: { count: 0 },
  handlers: {
    onClick: ({ setOption }) => {
      setOption('count', 1);
    },
  },
});

setOptions

A function to set multiple options for the plugin:

Set multiple options for plugin:

const MyPlugin = createPlatePlugin({
  key: 'myPlugin',
  options: { option1: 'value1', option2: 'value2' },
  handlers: {
    onClick: ({ setOptions }) => {
      setOptions({
        option1: 'newValue1',
        option2: 'newValue2',
      });
    },
  },
});

useOption

A hook to subscribe to a specific option value in a React component:

Hook to subscribe to specific option value:

const MyPlugin = createPlatePlugin({
  key: 'myPlugin',
  options: { count: 0 },
  useHooks: ({ useOption }) => {
    const count = useOption('count');
    return <div>Count: {count}</div>;
  },
});

type

The node type associated with the plugin:

Node type associated with plugin:

const MyPlugin = createPlatePlugin({
  key: 'myPlugin',
  node: { type: 'myNodeType' },
  handlers: {
    onKeyDown: ({ type }) => {
      console.info('Node type:', type);
    },
  },
});