Toolbar

const superdoc = new SuperDoc({
  selector: '#editor',
  document: 'contract.docx',
  toolbar: '#toolbar'  // Simple toolbar with defaults
});

modules: {
  toolbar: {
    customButtons: [{
      type: 'button',
      name: 'myButton',
      tooltip: 'My Custom Button',
      icon: '<svg>...</svg>',
      group: 'center',
      command: ({ item, argument, option }) => {
        superdoc.activeEditor.commands.myCommand();
      }
    }]
  }
}

customButtons: [{
  type: 'dropdown',
  name: 'templates',
  tooltip: 'Insert Template',
  icon: templateIcon,
  hasCaret: true,
  options: [
    { label: 'Contract', key: 'contract' },
    { label: 'Invoice', key: 'invoice' }
  ],
  command: ({ option }) => {
    if (option) loadTemplate(option.key);
  }
}]

customButtons: [{
  type: 'button',
  name: 'darkMode',
  tooltip: 'Toggle Dark Mode',
  icon: moonIcon,
  activeIcon: sunIcon,
  active: false,
  command: ({ item }) => {
    const isActive = !item.active.value;
    item.active.value = isActive;
    setDarkMode(isActive);
  }
}]

command: ({ item, argument, option }) => {
  const editor = superdoc.activeEditor;
  
  // Color button passes hex
  if (item.name === 'color') {
    editor.commands.setColor(argument); // #FF0000
  }
  
  // Dropdown passes selected option
  if (option) {
    handleOption(option.key);
  }
}

// Text formatting
command: 'toggleBold'
command: 'toggleItalic'
command: 'toggleUnderline'

// Paragraph
command: 'setTextAlign'
command: 'toggleBulletList'

// Special handlers
command: 'setZoom'         // Handled by SuperDoc
command: 'setDocumentMode' // Changes editing state

modules: {
  toolbar: {
    icons: {
      bold: '<svg viewBox="0 0 24 24">...</svg>',
      italic: '<svg viewBox="0 0 24 24">...</svg>',
      // Function for dynamic icons
      darkMode: () => isDark ? sunIcon : moonIcon
    }
  }
}

fonts: [
  // System fonts
  { label: 'Arial', key: 'Arial' },
  { label: 'Times', key: 'Times New Roman' },
  
  // Custom web font
  {
    label: 'Brand Font',
    key: 'BrandFont, sans-serif',
    fontWeight: 400,
    props: {
      style: { fontFamily: 'BrandFont' }
    }
  }
]

modules: {
  toolbar: {
    responsiveToContainer: true, // Size based on container
    hideButtons: true            // Auto-hide on small screens
  }
}

modules: {
  toolbar: {
    groups: {
      left: ['undo', 'redo', 'search'],
      center: ['addComment', 'acceptChange', 'rejectChange'],
      right: ['documentMode', 'export']
    },
    customButtons: [{
      name: 'approve',
      icon: checkIcon,
      tooltip: 'Approve Document',
      group: 'right',
      command: () => approveDocument()
    }]
  }
}

modules: {
  toolbar: {
    groups: {
      center: [
        'bold', 'italic',
        'link', 'image',
        'list', 'numberedlist'
      ]
    },
    excludeItems: ['zoom', 'ruler', 'pageBreak']
  }
}

modules: {
  toolbar: {
    customButtons: [{
      type: 'dropdown',
      name: 'aiTools',
      icon: aiIcon,
      tooltip: 'AI Tools',
      options: [
        { label: 'Improve Writing', key: 'improve' },
        { label: 'Fix Grammar', key: 'grammar' },
        { label: 'Make Concise', key: 'concise' }
      ],
      command: ({ option }) => {
        const selection = editor.getSelectedText();
        aiProcess(option.key, selection);
      }
    }]
  }
}

// Get toolbar instance
const toolbar = superdoc.toolbar;

// Get specific button
const boldButton = toolbar.getToolbarItemByName('bold');

// Update button state
boldButton.active.value = true;
boldButton.disabled.value = false;

// Update entire toolbar
toolbar.updateToolbarState();

toolbar.on('superdoc-command', ({ item, argument }) => {
  console.log(`Command: ${item.command}`);
  console.log(`Argument: ${argument}`);
});

toolbar.on('state-update', () => {
  const boldActive = toolbar
    .getToolbarItemByName('bold')
    .active.value;
    
  updateUIIndicator(boldActive);
});

:root {
  --toolbar-height: 48px;
  --toolbar-bg: white;
  --toolbar-border: #e0e0e0;
  --toolbar-button-size: 32px;
  --toolbar-button-hover: #f5f5f5;
  --toolbar-button-active: #e3f2fd;
}

[data-theme="dark"] {
  --toolbar-bg: #1e1e1e;
  --toolbar-border: #444;
  --toolbar-button-hover: #2a2a2a;
}

// Check selector exists
if (!document.querySelector('#toolbar')) {
  console.error('Toolbar container not found');
}

// Wait for ready event
superdoc.once('ready', () => {
  console.log(superdoc.toolbar); // Now available
});

// Check role permissions
if (superdoc.config.role === 'viewer') {
  // Editing buttons disabled
}

// Check editor connection
if (!superdoc.activeEditor) {
  // No editor to execute commands on
}