ToolbarConfigNEW

ToolbarConfig:

{
  items?: ToolbarItem[];
}

Toolbar configuration

Example

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

// Add custom action and toolbar button
editor.setActions([
  ...defaultActions,
  {
    id: 'custom.save',
    label: 'Save',
    handler: async () => {
      const doc = await editor.currentDocument().saveDocument();
      await fetch('/api/save', { method: 'POST', body: JSON.stringify(doc) });
    },
  },
]);
editor.setToolbarConfig({
  ...defaultToolbarConfig,
  items: [
    ...defaultToolbarConfig.items,
    { type: 'separator', id: 'sep-custom' },
    { type: 'action', id: 'save-btn', actionId: 'custom.save' },
  ],
});

// Create a minimal toolbar with essential formatting
editor.setToolbarConfig({
  ...defaultToolbarConfig,
  items: [
    { type: 'built-in', id: 'undo', builtInType: 'undo' },
    { type: 'built-in', id: 'redo', builtInType: 'redo' },
    { type: 'separator', id: 'sep-1' },
    { type: 'built-in', id: 'bold', builtInType: 'bold' },
    { type: 'built-in', id: 'italic', builtInType: 'italic' },
    { type: 'built-in', id: 'underline', builtInType: 'underline' },
    { type: 'separator', id: 'sep-2' },
    { type: 'built-in', id: 'align-left', builtInType: 'align-left' },
    { type: 'built-in', id: 'align-center', builtInType: 'align-center' },
    { type: 'built-in', id: 'align-right', builtInType: 'align-right' },
  ],
});

// Customize default toolbar by filtering/adding items
const customItems = [
  ...defaultToolbarConfig.items.filter((item) => item.id !== 'download-menu'),
  { type: 'separator', id: 'custom-sep' },
  { type: 'action', id: 'save-btn', actionId: 'custom.save' },
];
editor.setToolbarConfig({ ...defaultToolbarConfig, items: customItems });

See

• ToolbarItem for the different types of toolbar items.
• UIOptions.toolbar for setting toolbar during editor creation.

Properties

items?

optional items: ToolbarItem[]

Array of toolbar items to display