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

Access context of another plugin for cross-plugin communication.

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

useEditorPlugin

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

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

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

Set specific option value for plugin:

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

setOptions

Set multiple options for plugin:

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

useOption

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

Node type associated with plugin:

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