Plugin Context

---
title: Plugin Context
description: 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:

```ts
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.

```ts
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:

```ts
const MyComponent = () => {
  const { editor, plugin, type } = useEditorPlugin(MyPlugin);
  
  return <div>{type}</div>;
};
```

## Plugin Context Properties

### `editor`

The current `PlateEditor` instance:

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

### `plugin`

The current plugin configuration:

```ts
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:

```ts
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:

```ts
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:

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

### `setOptions`

A function to set multiple options for the plugin:

```ts
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:

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