# Add actions to the context menu

> Keep SuperDoc's document actions and add application actions for the current selection.



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

## Try the context menu [#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.

> **Interactive editor: Try the context menu**
>
> Sample: [open the fixture](/fixtures/context-menu-sample.docx).
>
> Preset: `context-menu`.
>
> Context-menu configurations available in the interactive Editor:
>
> - **Menu — `ui.contextMenu`:** choose **Default** or **Add action**. Add action keeps SuperDoc’s menu items and appends **Send selection to workflow** when text is selected.
>
> Changing the menu configuration recreates the Editor from its current DOCX. Document edits remain; transient selection and menu state reset.
>
> Local DOCX selection: disabled.


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 [#add-an-application-action]

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

**Vanilla — `src/main.ts`**

```ts
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());

```

**React — `src/App.tsx`**

```tsx
import { SuperDocEditor, type SuperDocEditorProps } from '@superdoc/react';
import type { ContextMenuConfig } from 'superdoc';
import '@superdoc/react/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 editorConfig = {
  ui: { contextMenu },
} satisfies Pick<SuperDocEditorProps, 'ui'>;

export default function App() {
  return <SuperDocEditor document='/sample.docx' ui={editorConfig.ui} />;
}

```


Vanilla also needs an Editor mount:

```html
<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](/editor/custom-ui/context-menus) when your application should render the complete
menu surface.