Plugin Context - Plate

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.

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:

const MyComponent = () => {
  const { editor, plugin, type } = useEditorPlugin(MyPlugin);
  
  return <div>{type}</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:

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:

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:

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

`setOptions`

A function to set multiple options for the plugin:

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

`type`

The node type associated with the plugin:

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