feat: toolbar to headless api (state and execute)

Author: artem-harbour

apps/docs/modules/toolbar/built-in.mdx

@@ -484,12 +484,12 @@ const superdoc = new SuperDoc({
 
 ### `setZoom`
 
-Set the editor zoom level programmatically.
+Set the editor zoom level programmatically through the owning `SuperDoc` instance.
 
 <CodeGroup>
 
 ```javascript Usage
-toolbar.setZoom(150); // 150%
+superdoc.setZoom(150); // 150%
 ```
 
 ```javascript Full Example
@@ -501,8 +501,7 @@ const superdoc = new SuperDoc({
   document: yourFile,
   toolbar: '#toolbar',
   onReady: (superdoc) => {
-    const toolbar = superdoc.toolbar;
-    toolbar.setZoom(150); // 150%
+    superdoc.setZoom(150); // 150%
   },
 });
 ```
@@ -536,38 +535,6 @@ const superdoc = new SuperDoc({
 
 </CodeGroup>
 
-## Events
-
-### `superdoc-command`
-
-Fired when a SuperDoc-level command is executed (zoom, document mode).
-
-<CodeGroup>
-
-```javascript Usage
-toolbar.on('superdoc-command', ({ item, argument }) => {
-  console.log(`Command: ${item.command}, arg: ${argument}`);
-});
-```
-
-```javascript Full Example
-import { SuperDoc } from 'superdoc';
-import 'superdoc/style.css';
-
-const superdoc = new SuperDoc({
-  selector: '#editor',
-  document: yourFile,
-  toolbar: '#toolbar',
-  onReady: (superdoc) => {
-    const toolbar = superdoc.toolbar;
-    toolbar.on('superdoc-command', ({ item, argument }) => {
-      console.log(`Command: ${item.command}, arg: ${argument}`);
-    });
-  },
-});
-```
-
-</CodeGroup>
 
 ### `exception`
 

packages/super-editor/src/editors/v1/components/toolbar/constants.js

@@ -53,3 +53,131 @@ export const TOOLBAR_FONT_SIZES = [
   { label: '72', key: '72pt', props: { 'data-item': 'btn-fontSize-option' } },
   { label: '96', key: '96pt', props: { 'data-item': 'btn-fontSize-option' } },
 ];
+
+export const HEADLESS_TOOLBAR_COMMANDS = [
+  'bold',
+  'italic',
+  'underline',
+  'strikethrough',
+  'font-size',
+  'font-family',
+  'text-color',
+  'highlight-color',
+  'link',
+  'text-align',
+  'line-height',
+  'linked-style',
+  'bullet-list',
+  'numbered-list',
+  'indent-increase',
+  'indent-decrease',
+  'undo',
+  'redo',
+  'ruler',
+  'zoom',
+  'document-mode',
+  'clear-formatting',
+  'copy-format',
+  'track-changes-accept-selection',
+  'track-changes-reject-selection',
+  'image',
+  'table-insert',
+  'table-add-row-before',
+  'table-add-row-after',
+  'table-delete-row',
+  'table-add-column-before',
+  'table-add-column-after',
+  'table-delete-column',
+  'table-delete',
+  'table-merge-cells',
+  'table-split-cell',
+  'table-remove-borders',
+  'table-fix',
+];
+
+export const HEADLESS_ITEM_MAP = {
+  undo: 'undo',
+  redo: 'redo',
+  bold: 'bold',
+  italic: 'italic',
+  underline: 'underline',
+  strike: 'strikethrough',
+  acceptTrackedChangeBySelection: 'track-changes-accept-selection',
+  rejectTrackedChangeOnSelection: 'track-changes-reject-selection',
+  ruler: 'ruler',
+  zoom: 'zoom',
+  documentMode: 'document-mode',
+  link: 'link',
+  fontFamily: 'font-family',
+  fontSize: 'font-size',
+  list: 'bullet-list',
+  numberedlist: 'numbered-list',
+  table: 'table-insert',
+  image: 'image',
+  color: 'text-color',
+  highlight: 'highlight-color',
+  textAlign: 'text-align',
+  lineHeight: 'line-height',
+  linkedStyles: 'linked-style',
+  indentleft: 'indent-decrease',
+  indentright: 'indent-increase',
+  clearFormatting: 'clear-formatting',
+  copyFormat: 'copy-format',
+};
+
+export const TABLE_ACTION_COMMAND_IDS = [
+  'table-add-row-before',
+  'table-add-row-after',
+  'table-delete-row',
+  'table-add-column-before',
+  'table-add-column-after',
+  'table-delete-column',
+  'table-delete',
+  'table-merge-cells',
+  'table-split-cell',
+  'table-remove-borders',
+  'table-fix',
+];
+
+export const TABLE_ACTION_COMMAND_MAP = {
+  addRowBefore: 'table-add-row-before',
+  addRowAfter: 'table-add-row-after',
+  deleteRow: 'table-delete-row',
+  addColumnBefore: 'table-add-column-before',
+  addColumnAfter: 'table-add-column-after',
+  deleteColumn: 'table-delete-column',
+  deleteTable: 'table-delete',
+  deleteCellAndTableBorders: 'table-remove-borders',
+  mergeCells: 'table-merge-cells',
+  splitCell: 'table-split-cell',
+  fixTables: 'table-fix',
+};
+
+export const HEADLESS_EXECUTE_ITEMS = new Set([
+  'undo',
+  'redo',
+  'clearFormatting',
+  'copyFormat',
+  'ruler',
+  'list',
+  'numberedlist',
+  'acceptTrackedChangeBySelection',
+  'rejectTrackedChangeOnSelection',
+  'indentleft',
+  'indentright',
+  'textAlign',
+  'lineHeight',
+  'linkedStyles',
+  'table',
+  'color',
+  'highlight',
+  'bold',
+  'italic',
+  'underline',
+  'strike',
+  'image',
+  'fontFamily',
+  'fontSize',
+  'documentMode',
+  'zoom',
+]);

packages/super-editor/src/editors/v1/components/toolbar/defaultItems.js

@@ -697,14 +697,6 @@ export const makeDefaultItems = ({
     },
   });
 
-  // const overflowOptions = useToolbarItem({
-  //   type: 'options',
-  //   name: 'overflowOptions',
-  //   preCommand(self, argument) {
-  //     self.parentItem.active = false;
-  //   },
-  // });
-
   // zoom
   const zoom = useToolbarItem({
     type: 'dropdown',
@@ -767,20 +759,6 @@ export const makeDefaultItems = ({
     },
   });
 
-  // Track changes test buttons
-  const toggleTrackChanges = useToolbarItem({
-    type: 'button',
-    disabled: false,
-    name: 'toggleTrackChanges',
-    tooltip: toolbarTexts.trackChanges,
-    command: 'toggleTrackChanges',
-    icon: toolbarIcons.trackChanges,
-    group: 'left',
-    attributes: {
-      ariaLabel: 'Track changes',
-    },
-  });
-
   const acceptTrackedChangeBySelection = useToolbarItem({
     type: 'button',
     disabled: false,
@@ -807,32 +785,6 @@ export const makeDefaultItems = ({
     },
   });
 
-  const toggleTrackChangesOriginal = useToolbarItem({
-    type: 'button',
-    disabled: false,
-    name: 'toggleTrackChangesShowOriginal',
-    tooltip: toolbarTexts.trackChangesOriginal,
-    command: 'toggleTrackChangesShowOriginal',
-    icon: toolbarIcons.trackChangesOriginal,
-    group: 'left',
-    attributes: {
-      ariaLabel: 'Toggle tracked changes show original',
-    },
-  });
-
-  const toggleTrackChangesFinal = useToolbarItem({
-    type: 'button',
-    disabled: false,
-    name: 'toggleTrackChangesShowFinal',
-    tooltip: toolbarTexts.trackChangesFinal,
-    command: 'toggleTrackChangesShowFinal',
-    icon: toolbarIcons.trackChangesFinal,
-    group: 'left',
-    attributes: {
-      ariaLabel: 'Toggle tracked changes show final',
-    },
-  });
-
   const clearFormatting = useToolbarItem({
     type: 'button',
     name: 'clearFormatting',
@@ -1059,13 +1011,8 @@ export const makeDefaultItems = ({
   let toolbarItems = [
     undo,
     redo,
-
-    // Dev - tracked changes
-    // toggleTrackChanges,
     acceptTrackedChangeBySelection,
     rejectTrackedChangeOnSelection,
-    // toggleTrackChangesOriginal,
-    // toggleTrackChangesFinal,
 
     zoom,
     fontButton,
@@ -1119,8 +1066,8 @@ export const makeDefaultItems = ({
     toolbarItems = toolbarItems.filter((item) => !filterItems.includes(item.name.value));
   }
 
-  // Track changes test buttons
-  const devItems = [toggleTrackChanges, toggleTrackChangesOriginal, toggleTrackChangesFinal];
+  // Track changes accept/reject are hidden outside dev mode for viewers.
+  const devItems = [];
   if (!isDev) {
     if (role === 'viewer') {
       devItems.push(...[acceptTrackedChangeBySelection, rejectTrackedChangeOnSelection]);

packages/super-editor/src/editors/v1/components/toolbar/helpers/general.js

@@ -0,0 +1,26 @@
+import { encodeMarksFromRPr } from '@core/super-converter/styles.js';
+
+export const getParagraphFontFamilyFromProperties = (paragraphProps, convertedXml = {}) => {
+  const fontFamilyProps = paragraphProps?.runProperties?.fontFamily;
+  if (!fontFamilyProps) return null;
+  const [markDef] = encodeMarksFromRPr({ fontFamily: fontFamilyProps }, convertedXml);
+  return markDef?.attrs?.fontFamily ?? null;
+};
+
+export const findElementBySelector = (selector) => {
+  let el = null;
+
+  if (selector) {
+    if (selector.startsWith('#') || selector.startsWith('.')) {
+      el = document.querySelector(selector);
+    } else {
+      el = document.getElementById(selector);
+    }
+
+    if (!el) {
+      return null;
+    }
+  }
+
+  return el;
+};