@harbour-enterprises/superdoc 0.6.6 → 0.6.8

package/dist/super-editor/super-editor.es.js

@@ -8,14 +8,14 @@ var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot
 var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
 var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _interceptedCommands, _SuperToolbar_instances, makeToolbarItems_fn, initDefaultFonts_fn, deactivateAll_fn, updateToolbarHistory_fn, runCommandWithArgumentOnly_fn;
-import { _ as _export_sfc, a as getQuickFormatList, b as generateLinkedStyleString, I as ImagePlaceholderPluginKey, f as findPlaceholder, c as findParentNode, d as getActiveFormatting, u as undoDepth, r as redoDepth, E as Editor, e as getStarterExtensions, P as Placeholder, h as getRichTextExtensions } from "./chunks/editor-DDFPZgN6.js";
-import { j, l, i, k } from "./chunks/editor-DDFPZgN6.js";
-import { J as getDefaultExportFromCjs, v as v4, T as TextSelection, L as vClickOutside } from "./chunks/converter-Db6kOZVK.js";
-import { B } from "./chunks/converter-Db6kOZVK.js";
-import { ref, computed, onMounted, createElementBlock, openBlock, Fragment, renderList, withModifiers, createElementVNode, createCommentVNode, normalizeStyle, unref, getCurrentInstance, watch, withDirectives, withKeys, normalizeClass, vModelText, createTextVNode, toDisplayString, h, createApp, reactive, onUnmounted, shallowRef, onBeforeUnmount, createBlock, createVNode } from "vue";
-import { t as toolbarIcons, s as sanitizeNumber, T as Toolbar, N as NSkeleton } from "./chunks/toolbar-B1D1-QVR.js";
-import { D } from "./chunks/docx-zipper-CU9-L2k_.js";
+var _interceptedCommands, _SuperToolbar_instances, makeToolbarItems_fn, initDefaultFonts_fn, updateHighlightColors_fn, deactivateAll_fn, updateToolbarHistory_fn, runCommandWithArgumentOnly_fn;
+import { _ as _export_sfc, a as getQuickFormatList, b as generateLinkedStyleString, I as ImagePlaceholderPluginKey, f as findPlaceholder, c as findParentNode, d as getActiveFormatting, u as undoDepth, r as redoDepth, E as Editor, e as getStarterExtensions, P as Placeholder, h as getRichTextExtensions } from "./chunks/editor-DFibABN8.js";
+import { j, l, i, k } from "./chunks/editor-DFibABN8.js";
+import { J as getDefaultExportFromCjs, v as v4, T as TextSelection, L as vClickOutside } from "./chunks/converter-D38BagOs.js";
+import { B } from "./chunks/converter-D38BagOs.js";
+import { ref, createElementBlock, openBlock, createElementVNode, unref, getCurrentInstance, computed, watch, onMounted, createCommentVNode, withDirectives, withKeys, normalizeClass, withModifiers, vModelText, createTextVNode, toDisplayString, Fragment, renderList, normalizeStyle, createVNode, h, createApp, reactive, onUnmounted, shallowRef, onBeforeUnmount, createBlock } from "vue";
+import { t as toolbarIcons, s as sanitizeNumber, T as Toolbar, N as NSkeleton } from "./chunks/toolbar-D5mDT387.js";
+import { D } from "./chunks/docx-zipper-OU0T3wnQ.js";
 import { createZip } from "./file-zipper.es.js";
 var eventemitter3 = { exports: {} };
 (function(module) {
@@ -316,81 +316,12 @@ const useToolbarItem = (options) => {
     onDeactivate
   };
 };
-const _hoisted_1$7 = { class: "option-grid-ctn" };
-const _hoisted_2$5 = ["onClick"];
+const _hoisted_1$8 = { class: "alignment-buttons" };
+const _hoisted_2$5 = ["innerHTML"];
 const _hoisted_3$4 = ["innerHTML"];
-const _hoisted_4$3 = ["innerHTML"];
-const _sfc_main$8 = {
-  __name: "IconGrid",
-  props: {
-    icons: {
-      type: Array,
-      required: true
-    },
-    activeColor: {
-      type: Object,
-      required: false
-    }
-  },
-  emits: ["select", "clickoutside"],
-  setup(__props, { emit: __emit }) {
-    const emit = __emit;
-    const props = __props;
-    const handleClick = (option) => {
-      emit("select", option.value);
-    };
-    const isActive = computed(() => (option) => {
-      if (!props.activeColor.value) return false;
-      return props.activeColor.value === option.value;
-    });
-    const getCheckStyle = (color, optionIndex) => {
-      const lightColors = ["#FFFFFF", "#FAFF09"];
-      if (optionIndex === 5 || lightColors.includes(color)) return { color: "#000" };
-      return { color: "#FFF" };
-    };
-    onMounted(() => {
-      const isMatrix = props.icons.every((row) => Array.isArray(row));
-      if (!isMatrix) throw new Error("icon props must be 2d array");
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$7, [
-        (openBlock(true), createElementBlock(Fragment, null, renderList(__props.icons, (row, rowIndex) => {
-          return openBlock(), createElementBlock("div", {
-            class: "option-row",
-            key: rowIndex
-          }, [
-            (openBlock(true), createElementBlock(Fragment, null, renderList(row, (option, optionIndex) => {
-              return openBlock(), createElementBlock("div", {
-                class: "option",
-                key: optionIndex,
-                onClick: withModifiers(($event) => handleClick(option), ["stop", "prevent"])
-              }, [
-                createElementVNode("div", {
-                  class: "option__icon",
-                  innerHTML: option.icon,
-                  style: normalizeStyle(option.style)
-                }, null, 12, _hoisted_3$4),
-                isActive.value(option) ? (openBlock(), createElementBlock("div", {
-                  key: 0,
-                  class: "option__check",
-                  innerHTML: unref(toolbarIcons).colorOptionCheck,
-                  style: normalizeStyle(getCheckStyle(option.value, optionIndex))
-                }, null, 12, _hoisted_4$3)) : createCommentVNode("", true)
-              ], 8, _hoisted_2$5);
-            }), 128))
-          ]);
-        }), 128))
-      ]);
-    };
-  }
-};
-const IconGrid = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__scopeId", "data-v-c5c5fefc"]]);
-const _hoisted_1$6 = { class: "alignment-buttons" };
-const _hoisted_2$4 = ["innerHTML"];
-const _hoisted_3$3 = ["innerHTML"];
 const _hoisted_4$2 = ["innerHTML"];
 const _hoisted_5$2 = ["innerHTML"];
-const _sfc_main$7 = {
+const _sfc_main$9 = {
   __name: "AlignmentButtons",
   emits: ["select"],
   setup(__props, { emit: __emit }) {
@@ -399,17 +330,17 @@ const _sfc_main$7 = {
       emit("select", alignment2);
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$6, [
+      return openBlock(), createElementBlock("div", _hoisted_1$8, [
         createElementVNode("div", {
           class: "button-icon",
           onClick: _cache[0] || (_cache[0] = ($event) => select("left")),
           innerHTML: unref(toolbarIcons).alignLeft
-        }, null, 8, _hoisted_2$4),
+        }, null, 8, _hoisted_2$5),
         createElementVNode("div", {
           class: "button-icon",
           onClick: _cache[1] || (_cache[1] = ($event) => select("center")),
           innerHTML: unref(toolbarIcons).alignCenter
-        }, null, 8, _hoisted_3$3),
+        }, null, 8, _hoisted_3$4),
         createElementVNode("div", {
           class: "button-icon",
           onClick: _cache[2] || (_cache[2] = ($event) => select("right")),
@@ -424,13 +355,13 @@ const _sfc_main$7 = {
     };
   }
 };
-const AlignmentButtons = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__scopeId", "data-v-d6fae878"]]);
-const _hoisted_1$5 = { class: "link-input-ctn" };
-const _hoisted_2$3 = {
+const AlignmentButtons = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-d6fae878"]]);
+const _hoisted_1$7 = { class: "link-input-ctn" };
+const _hoisted_2$4 = {
   key: 0,
   class: "link-title"
 };
-const _hoisted_3$2 = {
+const _hoisted_3$3 = {
   key: 1,
   class: "link-title"
 };
@@ -449,7 +380,7 @@ const _hoisted_12 = {
   key: 4,
   class: "input-row go-to-anchor clickable"
 };
-const _sfc_main$6 = {
+const _sfc_main$8 = {
   __name: "LinkInput",
   props: {
     initialText: {
@@ -528,8 +459,8 @@ const _sfc_main$6 = {
       if (props.showInput) focusInput();
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$5, [
-        !__props.href ? (openBlock(), createElementBlock("div", _hoisted_2$3, "Add link")) : isAnchor.value ? (openBlock(), createElementBlock("div", _hoisted_3$2, "Page anchor")) : (openBlock(), createElementBlock("div", _hoisted_4$1, "Edit link")),
+      return openBlock(), createElementBlock("div", _hoisted_1$7, [
+        !__props.href ? (openBlock(), createElementBlock("div", _hoisted_2$4, "Add link")) : isAnchor.value ? (openBlock(), createElementBlock("div", _hoisted_3$3, "Page anchor")) : (openBlock(), createElementBlock("div", _hoisted_4$1, "Edit link")),
         __props.showInput && !isAnchor.value ? (openBlock(), createElementBlock("div", _hoisted_5$1, [
           createElementVNode("div", _hoisted_6$1, [
             createElementVNode("div", {
@@ -581,15 +512,15 @@ const _sfc_main$6 = {
     };
   }
 };
-const LinkInput = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-6990d5b2"]]);
-const _hoisted_1$4 = { class: "document-mode" };
-const _hoisted_2$2 = ["onClick"];
-const _hoisted_3$1 = { class: "document-mode-column icon-column" };
+const LinkInput = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__scopeId", "data-v-6990d5b2"]]);
+const _hoisted_1$6 = { class: "document-mode" };
+const _hoisted_2$3 = ["onClick"];
+const _hoisted_3$2 = { class: "document-mode-column icon-column" };
 const _hoisted_4 = ["innerHTML"];
 const _hoisted_5 = { class: "document-mode-column text-column" };
 const _hoisted_6 = { class: "document-mode-type" };
 const _hoisted_7 = { class: "document-mode-description" };
-const _sfc_main$5 = {
+const _sfc_main$7 = {
   __name: "DocumentMode",
   props: {
     options: {
@@ -603,13 +534,13 @@ const _sfc_main$5 = {
       emit("select", item);
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$4, [
+      return openBlock(), createElementBlock("div", _hoisted_1$6, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(__props.options, (option) => {
           return openBlock(), createElementBlock("div", {
             class: normalizeClass(["option-item", { disabled: option.disabled }]),
             onClick: ($event) => handleClick(option)
           }, [
-            createElementVNode("div", _hoisted_3$1, [
+            createElementVNode("div", _hoisted_3$2, [
               createElementVNode("div", {
                 class: "icon-column__icon",
                 innerHTML: option.icon
@@ -619,19 +550,19 @@ const _sfc_main$5 = {
               createElementVNode("div", _hoisted_6, toDisplayString(option.label), 1),
               createElementVNode("div", _hoisted_7, toDisplayString(option.description), 1)
             ])
-          ], 10, _hoisted_2$2);
+          ], 10, _hoisted_2$3);
         }), 256))
       ]);
     };
   }
 };
-const DocumentMode = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-f86e1477"]]);
-const _hoisted_1$3 = {
+const DocumentMode = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__scopeId", "data-v-f86e1477"]]);
+const _hoisted_1$5 = {
   key: 0,
   class: "linked-style-buttons"
 };
-const _hoisted_2$1 = ["onClick"];
-const _sfc_main$4 = {
+const _hoisted_2$2 = ["onClick"];
+const _sfc_main$6 = {
   __name: "LinkedStyle",
   props: {
     editor: {
@@ -647,7 +578,7 @@ const _sfc_main$4 = {
       emit("select", style);
     };
     return (_ctx, _cache) => {
-      return props.editor ? (openBlock(), createElementBlock("div", _hoisted_1$3, [
+      return props.editor ? (openBlock(), createElementBlock("div", _hoisted_1$5, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(unref(getQuickFormatList)(__props.editor), (style) => {
           return openBlock(), createElementBlock("div", {
             class: "style-item",
@@ -657,13 +588,229 @@ const _sfc_main$4 = {
               class: "style-name",
               style: normalizeStyle(unref(generateLinkedStyleString)(style, null, false))
             }, toDisplayString(style.definition.attrs.name), 5)
-          ], 8, _hoisted_2$1);
+          ], 8, _hoisted_2$2);
         }), 256))
       ])) : createCommentVNode("", true);
     };
   }
 };
-const LinkedStyle = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-97e3296a"]]);
+const LinkedStyle = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-97e3296a"]]);
+const _hoisted_1$4 = ["onClick"];
+const _hoisted_2$1 = ["innerHTML"];
+const _hoisted_3$1 = ["innerHTML"];
+const _sfc_main$5 = {
+  __name: "IconGridRow",
+  props: {
+    icons: {
+      type: Array,
+      required: true
+    },
+    activeColor: {
+      type: Object,
+      required: false
+    }
+  },
+  emits: ["select"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    const props = __props;
+    const isActive = computed(() => (option) => {
+      if (!props.activeColor.value) return false;
+      return props.activeColor.value.toUpperCase() === option.value;
+    });
+    const getCheckStyle = (color, optionIndex) => {
+      const lightColors = ["#FFFFFF", "#FAFF09"];
+      if (optionIndex === 5 || lightColors.includes(color)) return { color: "#000" };
+      return { color: "#FFF" };
+    };
+    const handleClick = (option) => {
+      emit("select", option.value);
+    };
+    onMounted(() => {
+      const isMatrix = props.icons.every((row) => Array.isArray(row));
+      if (!isMatrix) throw new Error("icon props must be 2d array");
+    });
+    return (_ctx, _cache) => {
+      return openBlock(true), createElementBlock(Fragment, null, renderList(__props.icons, (row, rowIndex) => {
+        return openBlock(), createElementBlock("div", {
+          class: "option-row",
+          key: rowIndex
+        }, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(row, (option, optionIndex) => {
+            return openBlock(), createElementBlock("div", {
+              class: "option",
+              key: optionIndex,
+              onClick: withModifiers(($event) => handleClick(option), ["stop", "prevent"])
+            }, [
+              createElementVNode("div", {
+                class: "option__icon",
+                innerHTML: option.icon,
+                style: normalizeStyle(option.style)
+              }, null, 12, _hoisted_2$1),
+              isActive.value(option) ? (openBlock(), createElementBlock("div", {
+                key: 0,
+                class: "option__check",
+                innerHTML: unref(toolbarIcons).colorOptionCheck,
+                style: normalizeStyle(getCheckStyle(option.value, optionIndex))
+              }, null, 12, _hoisted_3$1)) : createCommentVNode("", true)
+            ], 8, _hoisted_1$4);
+          }), 128))
+        ]);
+      }), 128);
+    };
+  }
+};
+const IconGridRow = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-6a2a9a40"]]);
+const _hoisted_1$3 = { class: "option-grid-ctn" };
+const _sfc_main$4 = {
+  __name: "IconGrid",
+  props: {
+    icons: {
+      type: Array,
+      required: true
+    },
+    customIcons: {
+      type: Array,
+      required: false
+    },
+    activeColor: {
+      type: Object,
+      required: false
+    }
+  },
+  emits: ["select", "clickoutside"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    const handleSelect = (option) => {
+      emit("select", option);
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$3, [
+        createVNode(IconGridRow, {
+          icons: __props.icons,
+          "active-color": __props.activeColor,
+          onSelect: handleSelect
+        }, null, 8, ["icons", "active-color"]),
+        __props.customIcons.flat().length ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+          _cache[0] || (_cache[0] = createElementVNode("span", { class: "option-grid-ctn__subtitle" }, "Custom colors", -1)),
+          createVNode(IconGridRow, {
+            icons: __props.customIcons,
+            "active-color": __props.activeColor,
+            onSelect: handleSelect
+          }, null, 8, ["icons", "active-color"])
+        ], 64)) : createCommentVNode("", true)
+      ]);
+    };
+  }
+};
+const IconGrid = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-fa2949d8"]]);
+const closeDropdown$1 = (dropdown) => {
+  dropdown.expand.value = false;
+};
+const makeColorOption = (color, label = null) => {
+  return {
+    label,
+    icon: toolbarIcons.colorOption,
+    value: color,
+    style: {
+      color,
+      boxShadow: "0 0 5px 1px rgba(0, 0, 0, 0.1)",
+      borderRadius: "50%"
+    }
+  };
+};
+const renderColorOptions = (superToolbar, button, customIcons = []) => {
+  const handleSelect = (e) => {
+    button.iconColor.value = e;
+    superToolbar.emitCommand({ item: button, argument: e });
+    closeDropdown$1(button);
+  };
+  return h("div", {}, [
+    h(IconGrid, {
+      icons,
+      customIcons,
+      activeColor: button.iconColor,
+      onSelect: handleSelect
+    })
+  ]);
+};
+const icons = [
+  [
+    makeColorOption("#111111"),
+    makeColorOption("#333333"),
+    makeColorOption("#5C5C5C"),
+    makeColorOption("#858585"),
+    makeColorOption("#ADADAD"),
+    makeColorOption("#D6D6D6"),
+    makeColorOption("#FFFFFF")
+  ],
+  [
+    makeColorOption("#860028"),
+    makeColorOption("#D2003F"),
+    makeColorOption("#DB3365"),
+    makeColorOption("#E4668C"),
+    makeColorOption("#ED99B2"),
+    makeColorOption("#F6CCD9"),
+    makeColorOption("#FF004D")
+  ],
+  [
+    makeColorOption("#83015E"),
+    makeColorOption("#CD0194"),
+    makeColorOption("#D734A9"),
+    makeColorOption("#E167BF"),
+    makeColorOption("#EB99D4"),
+    makeColorOption("#F5CCEA"),
+    makeColorOption("#FF00A8")
+  ],
+  [
+    makeColorOption("#8E220A"),
+    makeColorOption("#DD340F"),
+    makeColorOption("#E45C3F"),
+    makeColorOption("#EB856F"),
+    makeColorOption("#F1AE9F"),
+    makeColorOption("#F8D6CF"),
+    makeColorOption("#FF7A00")
+  ],
+  [
+    makeColorOption("#947D02"),
+    makeColorOption("#E7C302"),
+    makeColorOption("#ECCF35"),
+    makeColorOption("#F1DB67"),
+    makeColorOption("#F5E79A"),
+    makeColorOption("#FAF3CC"),
+    makeColorOption("#FAFF09")
+  ],
+  [
+    makeColorOption("#055432"),
+    makeColorOption("#07834F"),
+    makeColorOption("#399C72"),
+    makeColorOption("#6AB595"),
+    makeColorOption("#9CCDB9"),
+    makeColorOption("#CDE6DC"),
+    makeColorOption("#05F38F")
+  ],
+  [
+    makeColorOption("#063E7E"),
+    makeColorOption("#0A60C5"),
+    makeColorOption("#3B80D1"),
+    makeColorOption("#6CA0DC"),
+    makeColorOption("#9DBFE8"),
+    makeColorOption("#CEDFF3"),
+    makeColorOption("#00E0FF")
+  ],
+  [
+    makeColorOption("#3E027A"),
+    makeColorOption("#6103BF"),
+    makeColorOption("#8136CC"),
+    makeColorOption("#A068D9"),
+    makeColorOption("#C09AE6"),
+    makeColorOption("#DFCDF2"),
+    makeColorOption("#A91DFF")
+  ]
+];
+const getAvailableColorOptions = () => {
+  return icons.flat().map((item) => item.value);
+};
 const closeDropdown = (dropdown) => {
   dropdown.expand.value = false;
 };
@@ -787,6 +934,28 @@ const makeDefaultItems = (superToolbar, isDev = false, windowWidth, role, toolba
     icon: toolbarIcons2.underline,
     tooltip: "Underline"
   });
+  const highlight = useToolbarItem({
+    type: "dropdown",
+    name: "highlight",
+    icon: toolbarIcons2.highlight,
+    hideLabel: true,
+    markName: "highlight",
+    labelAttr: "color",
+    tooltip: "Highlight color",
+    command: "setHighlight",
+    suppressActiveHighlight: true,
+    options: [
+      {
+        key: "color",
+        type: "render",
+        render: () => renderColorOptions(superToolbar, highlight)
+      }
+    ],
+    onActivate: ({ color }) => {
+      highlight.iconColor.value = color || "";
+    },
+    onDeactivate: () => highlight.iconColor.value = ""
+  });
   const colorButton = useToolbarItem({
     type: "dropdown",
     name: "color",
@@ -801,7 +970,7 @@ const makeDefaultItems = (superToolbar, isDev = false, windowWidth, role, toolba
       {
         key: "color",
         type: "render",
-        render: () => renderColorOptions(colorButton)
+        render: () => renderColorOptions(superToolbar, colorButton)
       }
     ],
     onActivate: ({ color }) => {
@@ -809,106 +978,6 @@ const makeDefaultItems = (superToolbar, isDev = false, windowWidth, role, toolba
     },
     onDeactivate: () => colorButton.iconColor.value = "#000"
   });
-  const makeColorOption = (color, label = null) => {
-    return {
-      label,
-      icon: toolbarIcons2.colorOption,
-      value: color,
-      style: {
-        color,
-        boxShadow: "0 0 5px 1px rgba(0, 0, 0, 0.1)",
-        borderRadius: "50%"
-      }
-    };
-  };
-  const icons = [
-    [
-      makeColorOption("#111111"),
-      makeColorOption("#333333"),
-      makeColorOption("##5C5C5C"),
-      makeColorOption("#858585"),
-      makeColorOption("#ADADAD"),
-      makeColorOption("#D6D6D6"),
-      makeColorOption("#FFFFFF")
-    ],
-    [
-      makeColorOption("#860028"),
-      makeColorOption("#D2003F"),
-      makeColorOption("#DB3365"),
-      makeColorOption("#E4668C"),
-      makeColorOption("#ED99B2"),
-      makeColorOption("#F6CCD9"),
-      makeColorOption("#FF004D")
-    ],
-    [
-      makeColorOption("#83015E"),
-      makeColorOption("#CD0194"),
-      makeColorOption("#D734A9"),
-      makeColorOption("#E167BF"),
-      makeColorOption("#EB99D4"),
-      makeColorOption("#F5CCEA"),
-      makeColorOption("#FF00A8")
-    ],
-    [
-      makeColorOption("#8E220A"),
-      makeColorOption("#DD340F"),
-      makeColorOption("#E45C3F"),
-      makeColorOption("#EB856F"),
-      makeColorOption("#F1AE9F"),
-      makeColorOption("#F8D6CF"),
-      makeColorOption("#FF7A00")
-    ],
-    [
-      makeColorOption("#947D02"),
-      makeColorOption("#E7C302"),
-      makeColorOption("#ECCF35"),
-      makeColorOption("#F1DB67"),
-      makeColorOption("#F5E79A"),
-      makeColorOption("#FAF3CC"),
-      makeColorOption("#FAFF09")
-    ],
-    [
-      makeColorOption("#055432"),
-      makeColorOption("#07834F"),
-      makeColorOption("#399C72"),
-      makeColorOption("#6AB595"),
-      makeColorOption("#9CCDB9"),
-      makeColorOption("#CDE6DC"),
-      makeColorOption("#05F38F")
-    ],
-    [
-      makeColorOption("#063E7E"),
-      makeColorOption("#0A60C5"),
-      makeColorOption("#3B80D1"),
-      makeColorOption("#6CA0DC"),
-      makeColorOption("#9DBFE8"),
-      makeColorOption("#CEDFF3"),
-      makeColorOption("#00E0FF")
-    ],
-    [
-      makeColorOption("#3E027A"),
-      makeColorOption("#6103BF"),
-      makeColorOption("#8136CC"),
-      makeColorOption("#A068D9"),
-      makeColorOption("#C09AE6"),
-      makeColorOption("#DFCDF2"),
-      makeColorOption("#A91DFF")
-    ]
-  ];
-  function renderColorOptions(colorButton2) {
-    const handleSelect = (e) => {
-      colorButton2.iconColor.value = e;
-      superToolbar.emitCommand({ item: colorButton2, argument: e });
-      closeDropdown(colorButton2);
-    };
-    return h("div", {}, [
-      h(IconGrid, {
-        icons,
-        activeColor: colorButton2.iconColor,
-        onSelect: handleSelect
-      })
-    ]);
-  }
   const link = useToolbarItem({
     type: "dropdown",
     name: "link",
@@ -1323,6 +1392,7 @@ const makeDefaultItems = (superToolbar, isDev = false, windowWidth, role, toolba
     italic,
     underline,
     colorButton,
+    highlight,
     separator,
     link,
     image,
@@ -1568,6 +1638,9 @@ class SuperToolbar extends EventEmitter {
       setColor: ({ item, argument }) => {
         __privateMethod(this, _SuperToolbar_instances, runCommandWithArgumentOnly_fn).call(this, { item, argument });
       },
+      setHighlight: ({ item, argument }) => {
+        __privateMethod(this, _SuperToolbar_instances, runCommandWithArgumentOnly_fn).call(this, { item, argument });
+      },
       toggleRuler: ({ item, argument }) => {
         this.superdoc.toggleRuler();
       },
@@ -1703,6 +1776,7 @@ class SuperToolbar extends EventEmitter {
   updateToolbarState() {
     __privateMethod(this, _SuperToolbar_instances, updateToolbarHistory_fn).call(this);
     __privateMethod(this, _SuperToolbar_instances, initDefaultFonts_fn).call(this);
+    __privateMethod(this, _SuperToolbar_instances, updateHighlightColors_fn).call(this);
     if (!this.activeEditor || this.documentMode === "viewing") {
       __privateMethod(this, _SuperToolbar_instances, deactivateAll_fn).call(this);
       return;
@@ -1757,8 +1831,8 @@ class SuperToolbar extends EventEmitter {
 }
 _interceptedCommands = new WeakMap();
 _SuperToolbar_instances = new WeakSet();
-makeToolbarItems_fn = function(superToolbar, icons, isDev = false) {
-  const { defaultItems, overflowItems } = makeDefaultItems(superToolbar, isDev, window.innerWidth, this.role, icons);
+makeToolbarItems_fn = function(superToolbar, icons2, isDev = false) {
+  const { defaultItems, overflowItems } = makeDefaultItems(superToolbar, isDev, window.innerWidth, this.role, icons2);
   this.toolbarItems = defaultItems;
   this.overflowItems = overflowItems;
 };
@@ -1770,6 +1844,27 @@ initDefaultFonts_fn = function() {
   const fontFamilyItem = this.toolbarItems.find((item) => item.name.value === "fontFamily");
   if (fontFamilyItem) fontFamilyItem.defaultLabel.value = typeface;
 };
+updateHighlightColors_fn = function() {
+  if (!this.activeEditor || !this.activeEditor.converter) return;
+  if (!this.activeEditor.converter.docHiglightColors.size) return;
+  const highlightItem = this.toolbarItems.find((item) => item.name.value === "highlight");
+  const pickerColorOptions = getAvailableColorOptions();
+  const perChunk = 7;
+  const result = Array.from(this.activeEditor.converter.docHiglightColors).reduce((resultArray, item, index) => {
+    const chunkIndex = Math.floor(index / perChunk);
+    if (!resultArray[chunkIndex]) {
+      resultArray[chunkIndex] = [];
+    }
+    if (!pickerColorOptions.includes(item)) resultArray[chunkIndex].push(makeColorOption(item));
+    return resultArray;
+  }, []);
+  const option = {
+    key: "color",
+    type: "render",
+    render: () => renderColorOptions(this, highlightItem, result)
+  };
+  highlightItem.nestedOptions.value = [option];
+};
 deactivateAll_fn = function() {
   this.activeEditor = null;
   this.toolbarItems.forEach((item) => {