Add actions to the context menu

Add an application action to the built-in context menu when a workflow starts from document content.

Try the context menu

Expand the Editor and select the sentence in the sample:

1. Right-click with Add action selected, then choose Send selection to workflow.
2. Change Menu to Default, select the sentence, and right-click again.
3. Confirm that SuperDoc's document actions remain while the application action no longer appears.

Changing the menu configuration reloads the current DOCX because ui.contextMenu is a startup option. Document edits remain; the selection and open menu reset.

Add an application action

Continue with /sample.docx from the Quickstart. Keep SuperDoc's menu items, then append an action that appears only when text is selected:

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

const contextMenu = {
  includeDefaultItems: true,
  customItems: [
    {
      id: 'application-actions',
      items: [
        {
          id: 'send-selection-to-workflow',
          label: 'Send selection to workflow',
          showWhen: ({ hasSelection }) => 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. onSelect() receives the settled selection text and the Document API surface for work that should change the DOCX. The example logs the selected text; replace that line with your application action.

includeDefaultItems: true keeps SuperDoc's actions. Set it to false only when the configured menu should contain application items alone.

Use Application-owned context menus when your application should render the complete menu surface.