# Custom context menu

> Add your own actions to the right-click menu - clauses, AI rewrites, API calls, anything.

2026-01-10 · Missy Fox

Your users already right-click. Now that right-click can trigger your app's actions, not just the editor's.

## The problem

Every document-heavy product has workflow-specific actions: insert a clause, flag for review, link to a CRM record, run an AI rewrite. Without context menu support, those actions end up scattered across toolbars, side panels, and keyboard shortcuts — places users have to hunt for while their cursor is already on the exact text they want to act on.

## Custom context menu items

You can now inject your own actions directly into the right-click menu. Define a section with items, each with a label and an action handler. Your actions appear alongside the built-in options.

```typescript
const superdoc = new SuperDoc({
  modules: {
    contextMenu: {
      includeDefaultItems: true,
      customItems: [
        {
          id: 'workflow-actions',
          items: [
            {
              id: 'insertClause',
              label: 'Insert Clause',
              icon: '<svg>...</svg>',
              action: (editor, context) => {
                openClausePicker();
              },
            },
            {
              id: 'flagReview',
              label: 'Flag for Review',
              action: (editor, context) => {
                createReviewTask(context.selectedText);
              },
            },
          ],
        },
      ],
    },
  },
});
```

## Context-aware actions

The `action` handler receives the editor instance and a rich context object, so your actions can respond to exactly where and what the user is working with:

```typescript
{
  id: 'aiRewrite',
  label: 'Rewrite with AI',
  showWhen: (context) => context.hasSelection,
  action: async (editor, context) => {
    const rewritten = await rewriteWithAI(context.selectedText);
    editor.commands.insertContentAt(
      { from: context.selectionStart, to: context.selectionEnd },
      rewritten
    );
  },
}
```

The context includes:


| Property                          | What it tells you                             |
| --------------------------------- | --------------------------------------------- |
| `selectedText`                    | The text the user highlighted                 |
| `hasSelection`                    | Whether anything is selected                  |
| `selectionStart` / `selectionEnd` | Position range of the selection               |
| `isInTable`                       | Cursor is inside a table                      |
| `isInList`                        | Cursor is inside a list                       |
| `isTrackedChange`                 | Cursor is on a tracked change                 |
| `documentMode`                    | Current mode: editing, viewing, or suggesting |
| `trigger`                         | How the menu opened: `click` or `slash`       |


## Conditional visibility

Use `showWhen` to control when items appear. Show actions only when they're relevant:

```typescript
{
  id: 'tableActions',
  items: [
    {
      id: 'mergeCell',
      label: 'Merge Selected Cells',
      showWhen: (context) => context.isCellSelection,
      action: (editor) => editor.commands.mergeCells(),
    },
  ],
}
```

## Use cases

The context menu is the right place for actions that depend on *where* the user is in the document:

- **Legal**: Insert standard clauses, mark sections for attorney review
- **Healthcare**: Link text to patient records, flag compliance issues
- **Content teams**: Send a paragraph to an AI rewriter, add editorial comments
- **Any workflow**: Trigger API calls, open modals, run commands — anything your `action` handler can do

## Get started

Add `contextMenu` to your `modules` configuration. Set `includeDefaultItems: true` to keep the built-in options alongside your custom ones.

[Read the docs]([https://docs.superdoc.dev/modules/context-menu#custom-items](https://docs.superdoc.dev/modules/context-menu#custom-items))

&nbsp;