Custom context menu

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

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.

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:

{
  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:

{
  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