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.
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, 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:
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',
});
},
},
});
useOption
A hook to subscribe to a specific option value in a React component:
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:
const MyPlugin = createPlatePlugin({
key: 'myPlugin',
node: { type: 'myNodeType' },
handlers: {
onKeyDown: ({ type }) => {
console.info('Node type:', type);
},
},
});