Configure the context menu

SuperDoc opens its document-aware menu when a user right-clicks or types / after whitespace. You can add application actions, change the slash trigger, or open the menu from your interface.

Try the context menu

Expand the Editor, then select “Select this sentence, then right-click it to open the document menu.”

1. With Add action selected, right-click the selection and choose Send selection to workflow.
2. Confirm that the line below the Editor reports the selection.
3. Choose Default and right-click the selection again. SuperDoc's actions remain, but the application action is gone.

Changing ui.contextMenu recreates the Editor from its current DOCX. Document edits remain, while the selection and open menu reset.

Add an application action

Continue with /sample.docx from the Quickstart. Append an action that appears only when the user right-clicks selected text:

import { SuperDoc, type ContextMenuConfig } from 'superdoc';
import 'superdoc/style.css';

const contextMenu = {
  sections: [
    {
      id: 'application-actions',
      items: [
        {
          id: 'send-selection-to-workflow',
          label: 'Send selection to workflow',
          showWhen: ({ hasSelection, trigger }) => trigger === 'click' && hasSelection,
          onSelect: async ({ context }) => {
            const selectedText = (await context?.selectedTextSettled)?.trim();
            if (selectedText) console.log('Workflow selection:', selectedText);
          },
        },
      ],
    },
  ],
} satisfies ContextMenuConfig;

const superdoc = new SuperDoc({
  selector: '#editor',
  document: '/sample.docx',
  ui: { contextMenu },
});

window.addEventListener('beforeunload', () => superdoc.destroy());

Vanilla also needs an Editor mount:

<div id="editor"></div>

<script type="module" src="/src/main.ts"></script>

showWhen() receives the document context captured when the menu opens. The example requires a right-click and an expanded selection, so the action stays hidden after /, a programmatic open(), or a collapsed caret.

onSelect() runs after the menu closes. Await context.selectedTextSettled when the action needs the final selection text. Use context.selectedText synchronously when the action must preserve user activation for a clipboard call, window.open(), or a file picker.

Configure the menu

Choose a group, then choose a field. Each entry shows its generated TypeScript signature and a configuration fragment you can copy.

Use showWhen() on an item for ordinary context checks. Reserve menuProvider() for changes that need the complete resolved section list.

Open the menu from your application

Set openOnSlash: false when your application owns the keyboard shortcut. Right-click still works. A button, shortcut, or other control can call superdoc.ui.contextMenu.open() at the current selection or caret:

import { SuperDoc } from 'superdoc';
import 'superdoc/style.css';

const superdoc = new SuperDoc({
  selector: '#editor',
  document: '/sample.docx',
  ui: {
    contextMenu: { openOnSlash: false },
  },
});

document.querySelector('#open-context-menu')?.addEventListener('click', () => {
  const result = superdoc.ui.contextMenu.open();
  if (!result.ok) console.warn(`Context menu did not open: ${result.reason}`);
});

window.addEventListener('beforeunload', () => superdoc.destroy());

Vanilla also needs the button and Editor mount:

<button id="open-context-menu" type="button">Open context menu</button>
<div id="editor"></div>

<script type="module" src="/src/main.ts"></script>

open() returns { ok: false, reason } when it cannot open. This includes an Editor that is not ready, a read-only document, or missing selection geometry. Call superdoc.ui.contextMenu.close() to dismiss the menu; calling close() when it is already closed is safe.

Continue with Application-owned context menus when your application should render the surface, or Content controls to configure structured fields in a DOCX.