@harbour-enterprises/superdoc 0.6.6 → 0.6.8

package/dist/chunks/{super-editor.es-BL0SUzqA.js → super-editor.es-C2Mpe7zw.js}

@@ -49525,6 +49525,39 @@ const getContentTypesFromXml = (contentTypesXml) => {
   const defaults = xmlDoc.querySelectorAll("Default");
   return Array.from(defaults).map((item) => item.getAttribute("Extension"));
 };
+const getHexColorFromDocxSystem = (docxColor) => {
+  const colorMap = /* @__PURE__ */ new Map([
+    ["yellow", "#ffff00"],
+    ["green", "#00ff00"],
+    ["blue", "#0000FFFF"],
+    ["cyan", "#00ffff"],
+    ["magenta", "#ff00ff"],
+    ["red", "#ff0000"],
+    ["darkYellow", "#808000FF"],
+    ["darkGreen", "#008000FF"],
+    ["darkBlue", "#000080"],
+    ["darkCyan", "#008080FF"],
+    ["darkMagenta", "#800080FF"],
+    ["darkGray", "#808080FF"],
+    ["darkRed", "#800000FF"],
+    ["lightGray", "#C0C0C0FF"],
+    ["black", "#000"]
+  ]);
+  return colorMap.get(docxColor) || null;
+};
+function isValidHexColor(color) {
+  if (!color || typeof color !== "string") return false;
+  switch (color.length) {
+    case 3:
+      return /^[0-9A-F]{3}$/i.test(color);
+    case 6:
+      return /^[0-9A-F]{6}$/i.test(color);
+    case 8:
+      return /^[0-9A-F]{8}$/i.test(color);
+    default:
+      return false;
+  }
+}
 function generateDocxRandomId(length = 8) {
   const characters = "0123456789abcdef";
   let id = [];
@@ -50432,7 +50465,10 @@ function translateMark(mark) {
       markElement.attributes["w:line"] = linesToTwips(attrs.lineHeight);
       break;
     case "highlight":
-      markElement.attributes["w:val"] = attrs.color;
+      markElement.attributes["w:fill"] = attrs.color.substring(1);
+      markElement.attributes["w:color"] = "auto";
+      markElement.attributes["w:val"] = "clear";
+      markElement.name = "w:shd";
       break;
   }
   return markElement;
@@ -51343,7 +51379,7 @@ function getMarkValue(markType, attributes, docx) {
     underline: () => attributes["w:val"],
     bold: () => attributes?.["w:val"] || null,
     italic: () => attributes?.["w:val"] || null,
-    highlight: () => attributes?.["w:val"] || null
+    highlight: () => getHighLightValue(attributes)
   };
   if (!(markType in markValueMapper)) {
     console.debug("❗️❗️ No value mapper for:", markType, "Attributes:", attributes);
@@ -51378,6 +51414,11 @@ function getLineHeightValue(attributes) {
   if (!value || value === "0") return null;
   return `${twipsToLines(value)}`;
 }
+function getHighLightValue(attributes) {
+  if (attributes["w:fill"]) return `#${attributes["w:fill"]}`;
+  if (isValidHexColor(attributes?.["w:val"])) return `#${attributes["w:val"]}`;
+  return getHexColorFromDocxSystem(attributes?.["w:val"]) || null;
+}
 function parseProperties(node2, docx) {
   const marks = [];
   const unknownMarks = [];
@@ -52442,7 +52483,7 @@ function importCommentData({ docx }) {
   if (!comments) return;
   const { elements } = comments;
   if (!elements || !elements.length) return;
-  const { elements: allComments } = elements[0];
+  const { elements: allComments = [] } = elements[0];
   const extractedComments = allComments.map((el) => {
     const { attributes } = el;
     const commentId = attributes["w:id"];
@@ -52646,6 +52687,10 @@ const createNodeListHandler = (nodeHandlers) => {
                 converter?.telemetry?.trackStatistic("attributes", innerItemContext);
               });
             }
+            const hasHighlightMark = nodes[0]?.marks?.find((mark) => mark.type === "highlight");
+            if (hasHighlightMark) {
+              converter?.docHiglightColors.add(hasHighlightMark.attrs.color.toUpperCase());
+            }
           }
           if (nodes) {
             nodes.forEach((node2) => {
@@ -52796,6 +52841,7 @@ const _SuperConverter = class _SuperConverter2 {
     this.media = params2?.media || {};
     this.addedMedia = {};
     this.comments = [];
+    this.docHiglightColors = /* @__PURE__ */ new Set([]);
     this.xml = params2?.xml;
     this.declaration = null;
     this.numbering = null;
@@ -52847,7 +52893,7 @@ const _SuperConverter = class _SuperConverter2 {
       return;
     }
   }
-  static updateDocumentVersion(docx = this.convertedXml, version2 = "0.6.6") {
+  static updateDocumentVersion(docx = this.convertedXml, version2 = "0.6.8") {
     const customLocation = "docProps/custom.xml";
     if (!docx[customLocation]) {
       docx[customLocation] = generateCustomXml();
@@ -53061,7 +53107,8 @@ __publicField$2(_SuperConverter, "markTypes", [
   { name: "w:ind", type: "textIndent", mark: "textStyle", property: "textIndent" },
   { name: "w:spacing", type: "lineHeight", mark: "textStyle", property: "lineHeight" },
   { name: "link", type: "link", mark: "link", property: "href" },
-  { name: "w:highlight", type: "highlight", mark: "highlight", property: "color" }
+  { name: "w:highlight", type: "highlight", mark: "highlight", property: "color" },
+  { name: "w:shd", type: "highlight", mark: "highlight", property: "color" }
 ]);
 __publicField$2(_SuperConverter, "propertyTypes", Object.freeze({
   "w:pPr": "paragraphProperties",
@@ -53087,7 +53134,7 @@ function storeSuperdocVersion(docx) {
 function generateCustomXml() {
   return DEFAULT_CUSTOM_XML;
 }
-function generateSuperdocVersion(version2 = "0.6.6") {
+function generateSuperdocVersion(version2 = "0.6.8") {
   return {
     type: "element",
     name: "property",
@@ -66909,7 +66956,7 @@ const _Editor = class _Editor2 extends EventEmitter$1 {
    * @returns {Y.Doc | undefined} Updated Y.Doc if any, otherwise undefined
    */
   processCollaborationMigrations() {
-    console.debug("[checkVersionMigrations] Current editor version", "0.6.6");
+    console.debug("[checkVersionMigrations] Current editor version", "0.6.8");
     if (!this.options.ydoc) return;
     const metaMap = this.options.ydoc.getMap("meta");
     let docVersion = metaMap.get("version");
@@ -71029,7 +71076,7 @@ const Highlight = Mark.create({
   //prettier-ignore
   addCommands() {
     return {
-      setHighlight: () => ({ commands: commands2 }) => commands2.setMark(this.name),
+      setHighlight: (color) => ({ commands: commands2 }) => commands2.setMark(this.name, { color }),
       unsetHighlight: () => ({ commands: commands2 }) => commands2.unsetMark(this.name),
       toggleHighlight: () => ({ commands: commands2 }) => commands2.toggleMark(this.name)
     };
@@ -74278,8 +74325,8 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const _hoisted_1$9 = ["onClick", "onMouseenter"];
-const _sfc_main$a = {
+const _hoisted_1$a = ["onClick", "onMouseenter"];
+const _sfc_main$b = {
   __name: "Mentions",
   props: {
     users: {
@@ -74350,13 +74397,13 @@ const _sfc_main$a = {
             class: normalizeClass(["user-row", { selected: activeUserIndex.value === index2 }])
           }, [
             createBaseVNode("span", null, toDisplayString(user.name), 1)
-          ], 42, _hoisted_1$9);
+          ], 42, _hoisted_1$a);
         }), 128))
       ], 544);
     };
   }
 };
-const Mentions = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__scopeId", "data-v-8f2b4e6b"]]);
+const Mentions = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-8f2b4e6b"]]);
 const popoverPluginKey = new PluginKey("popoverPlugin");
 const PopoverPlugin = Extension.create({
   name: "popoverPlugin",
@@ -74971,6 +75018,7 @@ const caretUpIconSvg = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320
 const caretDownIconSvg = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z"/></svg>';
 const rulerSvg = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M177.9 494.1c-18.7 18.7-49.1 18.7-67.9 0L17.9 401.9c-18.7-18.7-18.7-49.1 0-67.9l50.7-50.7 48 48c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6l-48-48 41.4-41.4 48 48c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6l-48-48 41.4-41.4 48 48c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6l-48-48 41.4-41.4 48 48c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6l-48-48 50.7-50.7c18.7-18.7 49.1-18.7 67.9 0l92.1 92.1c18.7 18.7 18.7 49.1 0 67.9L177.9 494.1z"/></svg>';
 const paintbrushSvg = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M339.3 367.1c27.3-3.9 51.9-19.4 67.2-42.9L568.2 74.1c12.6-19.5 9.4-45.3-7.6-61.2S517.7-4.4 499.1 9.6L262.4 187.2c-24 18-38.2 46.1-38.4 76.1L339.3 367.1zm-19.6 25.4l-116-104.4C143.9 290.3 96 339.6 96 400c0 3.9 .2 7.8 .6 11.6C98.4 429.1 86.4 448 68.8 448L64 448c-17.7 0-32 14.3-32 32s14.3 32 32 32l144 0c61.9 0 112-50.1 112-112c0-2.5-.1-5-.2-7.5z"/></svg>';
+const highlighterIcon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M315 315l158.4-215L444.1 70.6 229 229 315 315zm-187 5s0 0 0 0l0-71.7c0-15.3 7.2-29.6 19.5-38.6L420.6 8.4C428 2.9 437 0 446.2 0c11.4 0 22.4 4.5 30.5 12.6l54.8 54.8c8.1 8.1 12.6 19 12.6 30.5c0 9.2-2.9 18.2-8.4 25.6L334.4 396.5c-9 12.3-23.4 19.5-38.6 19.5L224 416l-25.4 25.4c-12.5 12.5-32.8 12.5-45.3 0l-50.7-50.7c-12.5-12.5-12.5-32.8 0-45.3L128 320zM7 466.3l63-63 70.6 70.6-31 31c-4.5 4.5-10.6 7-17 7L24 512c-13.3 0-24-10.7-24-24l0-4.7c0-6.4 2.5-12.5 7-17z"/></svg>\n';
 const toolbarIcons = {
   undo: rotateLeftIconSvg,
   redo: rotateRightIconSvg,
@@ -75009,7 +75057,8 @@ const toolbarIcons = {
   dropdownCaretUp: caretUpIconSvg,
   dropdownCaretDown: caretDownIconSvg,
   ruler: rulerSvg,
-  paintbrush: paintbrushSvg
+  paintbrush: paintbrushSvg,
+  highlight: highlighterIcon
 };
 const _hoisted_1$4$1 = { class: "toolbar-icon" };
 const _hoisted_2$3$1 = ["innerHTML"];
@@ -75033,6 +75082,10 @@ const _sfc_main$5$1 = {
     const props = __props;
     const getBarColor = computed(() => {
       if (props.name === "color") return { backgroundColor: props.color || "#111111" };
+      if (props.name === "highlight") return { backgroundColor: props.color || "transparent" };
+    });
+    const hasColorBar = computed(() => {
+      return ["color", "highlight"].includes(props.name);
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$4$1, [
@@ -75040,7 +75093,7 @@ const _sfc_main$5$1 = {
           class: normalizeClass(["toolbar-icon__icon", [`toolbar-icon__icon--${props.name}`]]),
           innerHTML: __props.icon
         }, null, 10, _hoisted_2$3$1),
-        props.name === "color" ? (openBlock(), createElementBlock("div", {
+        hasColorBar.value ? (openBlock(), createElementBlock("div", {
           key: 0,
           class: "color-bar",
           style: normalizeStyle(getBarColor.value)
@@ -75049,14 +75102,14 @@ const _sfc_main$5$1 = {
     };
   }
 };
-const ToolbarButtonIcon = /* @__PURE__ */ _export_sfc(_sfc_main$5$1, [["__scopeId", "data-v-16bc31dc"]]);
+const ToolbarButtonIcon = /* @__PURE__ */ _export_sfc(_sfc_main$5$1, [["__scopeId", "data-v-fff4aa3f"]]);
 const _hoisted_1$3$1 = {
   key: 1,
   class: "button-label"
 };
 const _hoisted_2$2$1 = { key: 2 };
 const _hoisted_3$1$1 = ["placeholder", "onKeydown", "id"];
-const _hoisted_4$4 = ["placeholder", "onKeydown", "id"];
+const _hoisted_4$3 = ["placeholder", "onKeydown", "id"];
 const _hoisted_5$3 = ["innerHTML"];
 const _sfc_main$4$1 = {
   __name: "ToolbarButton",
@@ -75174,7 +75227,7 @@ const _sfc_main$4$1 = {
               autoccomplete: "off",
               ref_key: "inlineInput",
               ref: inlineInput
-            }, null, 40, _hoisted_4$4)), [
+            }, null, 40, _hoisted_4$3)), [
               [vModelText, inlineTextInput.value]
             ])
           ])) : createCommentVNode("", true),
@@ -84586,7 +84639,7 @@ const NSkeleton = defineComponent({
     return child;
   }
 });
-const _hoisted_1$8 = { key: 0 };
+const _hoisted_1$9 = { key: 0 };
 const _hoisted_2$6 = { key: 0 };
 const _sfc_main$1$1 = {
   __name: "ButtonGroup",
@@ -84703,7 +84756,7 @@ const _sfc_main$1$1 = {
                 }, null, 8, ["toolbar-item", "onTextSubmit", "onButtonClick"])
               ]),
               default: withCtx(() => [
-                item.tooltip ? (openBlock(), createElementBlock("div", _hoisted_1$8, [
+                item.tooltip ? (openBlock(), createElementBlock("div", _hoisted_1$9, [
                   createTextVNode(toDisplayString(item.tooltip) + " ", 1),
                   item.disabled.value ? (openBlock(), createElementBlock("span", _hoisted_2$6, "(disabled)")) : createCommentVNode("", true)
                 ])) : createCommentVNode("", true)
@@ -84722,7 +84775,7 @@ const _sfc_main$1$1 = {
   }
 };
 const ButtonGroup = /* @__PURE__ */ _export_sfc(_sfc_main$1$1, [["__scopeId", "data-v-2fd1a367"]]);
-const _sfc_main$9 = {
+const _sfc_main$a = {
   __name: "Toolbar",
   emits: ["command", "toggle", "select"],
   setup(__props, { emit: __emit }) {
@@ -84777,7 +84830,7 @@ const _sfc_main$9 = {
     };
   }
 };
-const Toolbar = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-5c1cafc5"]]);
+const Toolbar = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__scopeId", "data-v-5c1cafc5"]]);
 async function createZip(blobs, fileNames) {
   const zip = new JSZip();
   blobs.forEach((blob, index2) => {
@@ -84796,7 +84849,7 @@ var __accessCheck = (obj, member, msg2) => member.has(obj) || __typeError("Canno
 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;
+var _interceptedCommands, _SuperToolbar_instances, makeToolbarItems_fn, initDefaultFonts_fn, updateHighlightColors_fn, deactivateAll_fn, updateToolbarHistory_fn, runCommandWithArgumentOnly_fn;
 var eventemitter3 = { exports: {} };
 (function(module2) {
   var has = Object.prototype.hasOwnProperty, prefix2 = "~";
@@ -85096,81 +85149,12 @@ const useToolbarItem = (options2) => {
     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 isActive2 = 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$1, null, renderList(__props.icons, (row, rowIndex) => {
-          return openBlock(), createElementBlock("div", {
-            class: "option-row",
-            key: rowIndex
-          }, [
-            (openBlock(true), createElementBlock(Fragment$1, null, renderList(row, (option, optionIndex) => {
-              return openBlock(), createElementBlock("div", {
-                class: "option",
-                key: optionIndex,
-                onClick: withModifiers(($event) => handleClick(option), ["stop", "prevent"])
-              }, [
-                createBaseVNode("div", {
-                  class: "option__icon",
-                  innerHTML: option.icon,
-                  style: normalizeStyle(option.style)
-                }, null, 12, _hoisted_3$4),
-                isActive2.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 }) {
@@ -85179,17 +85163,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, [
         createBaseVNode("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),
         createBaseVNode("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),
         createBaseVNode("div", {
           class: "button-icon",
           onClick: _cache[2] || (_cache[2] = ($event) => select("right")),
@@ -85204,13 +85188,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"
 };
@@ -85229,7 +85213,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: {
@@ -85308,8 +85292,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, [
           createBaseVNode("div", _hoisted_6$1, [
             createBaseVNode("div", {
@@ -85361,15 +85345,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: {
@@ -85383,13 +85367,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$1, null, renderList(__props.options, (option) => {
           return openBlock(), createElementBlock("div", {
             class: normalizeClass(["option-item", { disabled: option.disabled }]),
             onClick: ($event) => handleClick(option)
           }, [
-            createBaseVNode("div", _hoisted_3$1, [
+            createBaseVNode("div", _hoisted_3$2, [
               createBaseVNode("div", {
                 class: "icon-column__icon",
                 innerHTML: option.icon
@@ -85399,19 +85383,19 @@ const _sfc_main$5 = {
               createBaseVNode("div", _hoisted_6, toDisplayString(option.label), 1),
               createBaseVNode("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: {
@@ -85427,7 +85411,7 @@ const _sfc_main$4 = {
       emit("select", style2);
     };
     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$1, null, renderList(unref(getQuickFormatList)(__props.editor), (style2) => {
           return openBlock(), createElementBlock("div", {
             class: "style-item",
@@ -85437,13 +85421,229 @@ const _sfc_main$4 = {
               class: "style-name",
               style: normalizeStyle(unref(generateLinkedStyleString)(style2, null, false))
             }, toDisplayString(style2.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 isActive2 = 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$1, null, renderList(__props.icons, (row, rowIndex) => {
+        return openBlock(), createElementBlock("div", {
+          class: "option-row",
+          key: rowIndex
+        }, [
+          (openBlock(true), createElementBlock(Fragment$1, null, renderList(row, (option, optionIndex) => {
+            return openBlock(), createElementBlock("div", {
+              class: "option",
+              key: optionIndex,
+              onClick: withModifiers(($event) => handleClick(option), ["stop", "prevent"])
+            }, [
+              createBaseVNode("div", {
+                class: "option__icon",
+                innerHTML: option.icon,
+                style: normalizeStyle(option.style)
+              }, null, 12, _hoisted_2$1),
+              isActive2.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$1, { key: 0 }, [
+          _cache[0] || (_cache[0] = createBaseVNode("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;
 };
@@ -85567,6 +85767,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",
@@ -85581,7 +85803,7 @@ const makeDefaultItems = (superToolbar, isDev = false, windowWidth, role, toolba
       {
         key: "color",
         type: "render",
-        render: () => renderColorOptions(colorButton)
+        render: () => renderColorOptions(superToolbar, colorButton)
       }
     ],
     onActivate: ({ color }) => {
@@ -85589,106 +85811,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",
@@ -86103,6 +86225,7 @@ const makeDefaultItems = (superToolbar, isDev = false, windowWidth, role, toolba
     italic,
     underline,
     colorButton,
+    highlight,
     separator,
     link,
     image,
@@ -86348,6 +86471,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();
       },
@@ -86483,6 +86609,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;
@@ -86537,8 +86664,8 @@ class SuperToolbar extends EventEmitter {
 }
 _interceptedCommands = /* @__PURE__ */ new WeakMap();
 _SuperToolbar_instances = /* @__PURE__ */ 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;
 };
@@ -86550,6 +86677,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, index2) => {
+    const chunkIndex = Math.floor(index2 / 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) => {
@@ -87170,4 +87318,4 @@ export {
   helpers as k,
   index as l
 };
-//# sourceMappingURL=super-editor.es-BL0SUzqA.js.map
+//# sourceMappingURL=super-editor.es-C2Mpe7zw.js.map