CustomAction>= v1.9.0

CustomAction:

{
  id: string;
  label: string;
  description?: string;
  shortcuts?: string[];
  icon?: string;
  isEnabled?: () => boolean;
  handler: () => void | Promise<void>;
}

Custom actions allow you to add your own functionality to the editor. Unlike BuiltInAction, custom actions must provide a handler function.

Example

import { defaultActions } from '@nutrient-sdk/document-authoring';

// Add a custom action with keyboard shortcut
editor.setActions([
  ...defaultActions,
  {
    id: 'custom.insert-signature',
    label: 'Insert Signature',
    shortcuts: ['Mod+Shift+S'],
    handler: () => {
      editor.insertTextAtCursor('\n\nBest regards,\nJohn Doe');
    },
  },
]);

// Add a custom action with custom icon
editor.setActions([
  ...defaultActions,
  {
    id: 'custom.save',
    label: 'Save Document',
    icon: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiPi4uLjwvc3ZnPg==',
    handler: async () => {
      const doc = await editor.currentDocument().saveDocument();
      await fetch('/api/save', {
        method: 'POST',
        body: JSON.stringify(doc),
      });
    },
  },
]);

// Add a conditional action (disabled when no cursor/selection)
editor.setActions([
  ...defaultActions,
  {
    id: 'custom.insert-date',
    label: "Insert Today's Date",
    isEnabled: () => editor.hasActiveCursor(),
    handler: () => {
      const date = new Date().toLocaleDateString();
      editor.insertTextAtCursor(date);
    },
  },
]);

See

• BuiltInAction for built-in actions with default implementations.
• ToolbarActionItem for adding custom actions to the toolbar.

Properties

id

id: string

Unique identifier for this action (must not be a BuiltInActionId)

---

label

label: string

---

description?

optional description: string

---

shortcuts?

optional shortcuts: string[]

Keyboard shortcuts for the action. Use “Cmd” as the modifier key - it will be resolved to:

• “Ctrl” on Windows/Linux (for keyboard handling)
• ”⌘” on Mac (for keyboard handling)
• “Ctrl” or ”⌘” for display based on platform

Examples:

• “Cmd+B” becomes “Ctrl+B” on Windows, “⌘B” on Mac
• “Cmd+Shift+P” becomes “Ctrl+Shift+P” on Windows, ”⌘⇧P” on Mac

---

icon?

optional icon: string

Icon as data URI (e.g., data:image/svg+xml;base64,… or data:image/png;base64,…). Only data:image/ URIs are allowed for security.

---

isEnabled()?

optional isEnabled: () => boolean

Optional function to determine if this action should be enabled

Returns

boolean

---

handler()

handler: () => void | Promise<void>

Handler function that executes when the action is triggered (required for custom actions)

Returns

void | Promise<void>