@harbour-enterprises/superdoc 0.23.0-next.26 → 0.23.0-next.27

package/dist/chunks/{super-editor.es-DhxK40cW.cjs → super-editor.es-DpCRbxmi.cjs}

@@ -71989,7 +71989,7 @@ const fileHalfDashedIconSvg = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="
 const commentIconSvg = '<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="M512 240c0 114.9-114.6 208-256 208c-37.1 0-72.3-6.4-104.1-17.9c-11.9 8.7-31.3 20.6-54.3 30.6C73.6 471.1 44.7 480 16 480c-6.5 0-12.3-3.9-14.8-9.9c-2.5-6-1.1-12.8 3.4-17.4c0 0 0 0 0 0s0 0 0 0s0 0 0 0c0 0 0 0 0 0l.3-.3c.3-.3 .7-.7 1.3-1.4c1.1-1.2 2.8-3.1 4.9-5.7c4.1-5 9.6-12.4 15.2-21.6c10-16.6 19.5-38.4 21.4-62.9C17.7 326.8 0 285.1 0 240C0 125.1 114.6 32 256 32s256 93.1 256 208z"/></svg>';
 const circleIconSvg = '<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="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z"/></svg>';
 const checkIconSvg$1 = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>';
-const xmarkIconSvg = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg>';
+const xMarkIconSvg = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg>';
 const upRightFromSquareIconSvg = '<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="M352 0c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9L370.7 96 201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L416 141.3l41.4 41.4c9.2 9.2 22.9 11.9 34.9 6.9s19.8-16.6 19.8-29.6l0-128c0-17.7-14.3-32-32-32L352 0zM80 32C35.8 32 0 67.8 0 112L0 432c0 44.2 35.8 80 80 80l320 0c44.2 0 80-35.8 80-80l0-112c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 112c0 8.8-7.2 16-16 16L80 448c-8.8 0-16-7.2-16-16l0-320c0-8.8 7.2-16 16-16l112 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L80 32z"/></svg>';
 const ellipsisVerticalIconSvg = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M64 360a56 56 0 1 0 0 112 56 56 0 1 0 0-112zm0-160a56 56 0 1 0 0 112 56 56 0 1 0 0-112zM120 96A56 56 0 1 0 8 96a56 56 0 1 0 112 0z"/></svg>';
 const caretUpIconSvg = '<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="M182.6 137.4c-12.5-12.5-32.8-12.5-45.3 0l-128 128c-9.2 9.2-11.9 22.9-6.9 34.9s16.6 19.8 29.6 19.8l256 0c12.9 0 24.6-7.8 29.6-19.8s2.2-25.7-6.9-34.9l-128-128z"/></svg>';
@@ -72044,7 +72044,7 @@ const toolbarIcons = {
   colorOption: circleIconSvg,
   colorOptionCheck: checkIconSvg$1,
   linkInput: linkIconSvg,
-  removeLink: xmarkIconSvg,
+  removeLink: xMarkIconSvg,
   openLink: upRightFromSquareIconSvg,
   overflow: ellipsisVerticalIconSvg,
   dropdownCaretUp: caretUpIconSvg,
@@ -85883,7 +85883,9 @@ const ICONS = {
   copy: copyIconSvg,
   paste: pasteIconSvg,
   addDocumentSection: plusIconSvg,
-  removeDocumentSection: trashIconSvg
+  removeDocumentSection: trashIconSvg,
+  trackChangesAccept: checkIconSvg$1,
+  trackChangesReject: xMarkIconSvg
 };
 const TEXTS = {
   addRowBefore: "Insert row above",
@@ -85906,7 +85908,9 @@ const TEXTS = {
   copy: "Copy",
   paste: "Paste",
   removeDocumentSection: "Remove section",
-  createDocumentSection: "Create section"
+  createDocumentSection: "Create section",
+  trackChangesAccept: "Accept change",
+  trackChangesReject: "Reject change"
 };
 const tableActionsOptions = [
   {
@@ -86110,34 +86114,37 @@ async function getEditorContext(editor, event) {
   const isInSectionNode = structureFromResolvedPos?.isInSectionNode ?? selectionHasNodeOrMark(state2, "documentSection", { requireEnds: true });
   const currentNodeType = node?.type?.name || null;
   const activeMarks = [];
+  let trackedChangeId = null;
   if (event && pos !== null) {
     const $pos = state2.doc.resolve(pos);
-    if ($pos.marks && typeof $pos.marks === "function") {
-      $pos.marks().forEach((mark) => activeMarks.push(mark.type.name));
+    const processMark = (mark) => {
+      if (!activeMarks.includes(mark.type.name)) {
+        activeMarks.push(mark.type.name);
+      }
+      if (!trackedChangeId && (mark.type.name === "trackInsert" || mark.type.name === "trackDelete" || mark.type.name === "trackFormat")) {
+        trackedChangeId = mark.attrs.id;
+      }
+    };
+    for (let depth = 0; depth <= $pos.depth; depth++) {
+      const nodeAtDepth = $pos.node(depth);
+      if (nodeAtDepth && nodeAtDepth.marks) {
+        nodeAtDepth.marks.forEach(processMark);
+      }
     }
-    if (node && node.marks) {
-      node.marks.forEach((mark) => activeMarks.push(mark.type.name));
+    if (state2.storedMarks) {
+      state2.storedMarks.forEach(processMark);
     }
   } else {
     state2.storedMarks?.forEach((mark) => activeMarks.push(mark.type.name));
     state2.selection.$head.marks().forEach((mark) => activeMarks.push(mark.type.name));
   }
-  const isTrackedChange = activeMarks.includes("trackInsert") || activeMarks.includes("trackDelete");
-  let trackedChangeId = null;
-  if (isTrackedChange && event && pos !== null) {
-    const $pos = state2.doc.resolve(pos);
-    const marksAtPos = $pos.marks();
-    const trackedMark = marksAtPos.find((mark) => mark.type.name === "trackInsert" || mark.type.name === "trackDelete");
-    if (trackedMark) {
-      trackedChangeId = trackedMark.attrs.id;
-    }
-  }
+  const isTrackedChange = activeMarks.includes("trackInsert") || activeMarks.includes("trackDelete") || activeMarks.includes("trackFormat");
   const cursorCoords = pos ? view.coordsAtPos(pos) : null;
   const cursorPosition = cursorCoords ? {
     x: cursorCoords.left,
     y: cursorCoords.top
   } : null;
-  return {
+  const context = {
     // Selection info
     selectedText,
     hasSelection: !empty2,
@@ -86163,9 +86170,11 @@ async function getEditorContext(editor, event) {
     pos,
     node,
     event,
+    trigger: event ? "click" : "slash",
     // Editor reference for advanced use cases
     editor
   };
+  return context;
 }
 function computeCanUndo(editor, state2) {
   if (typeof editor?.can === "function") {
@@ -86246,160 +86255,209 @@ const isModuleEnabled = (editorOptions, moduleName) => {
   switch (moduleName) {
     case "ai":
       return !!editorOptions?.isAiEnabled;
-    // Example for future use cases
-    // case 'comments':
-    // return !!editorOptions?.isCommentsEnabled;
     default:
       return true;
   }
 };
-function applyCustomMenuConfiguration(defaultSections, context) {
-  const { editor } = context;
-  const slashMenuConfig = editor.options?.slashMenuConfig;
-  if (!slashMenuConfig) {
-    return defaultSections;
-  }
-  let sections = [];
-  if (slashMenuConfig.includeDefaultItems !== false) {
-    sections = [...defaultSections];
-  }
-  if (slashMenuConfig.customItems && Array.isArray(slashMenuConfig.customItems)) {
-    sections = [...sections, ...slashMenuConfig.customItems];
-  }
-  if (typeof slashMenuConfig.menuProvider === "function") {
+const shouldShowItem = (item, context) => {
+  if (typeof item.showWhen === "function") {
     try {
-      sections = slashMenuConfig.menuProvider(context, sections) || sections;
+      return item.showWhen(context);
     } catch (error) {
-      console.warn("[SlashMenu] Error in custom menuProvider:", error);
+      console.warn("[SlashMenu] showWhen error for item", item.id, ":", error);
+      return false;
     }
   }
-  return sections;
-}
-function filterCustomItems(sections, context) {
-  return sections.map((section) => {
-    const filteredItems = section.items.filter((item) => {
-      if (typeof item.showWhen === "function") {
-        try {
-          return item.showWhen(context);
-        } catch (error) {
-          console.warn(`[SlashMenu] Error in showWhen for item ${item.id}:`, error);
-          return false;
-        }
-      }
-      return true;
-    });
-    return {
-      ...section,
-      items: filteredItems
-    };
-  }).filter((section) => section.items.length > 0);
-}
-function getItems(context) {
-  const { editor, selectedText, trigger: trigger2, clipboardContent } = context;
-  const clipboardHasContent = Boolean(
-    clipboardContent?.hasContent || clipboardContent?.html || clipboardContent?.text || typeof clipboardContent?.size === "number" && clipboardContent.size > 0 || clipboardContent && typeof clipboardContent?.content?.size === "number" && clipboardContent.content.size > 0 || clipboardContent?.raw && typeof clipboardContent.raw.size === "number" && clipboardContent.raw.size > 0 || clipboardContent?.raw && typeof clipboardContent.raw?.content?.size === "number" && clipboardContent.raw.content.size > 0
-  );
-  const isInTable2 = selectionHasNodeOrMark(editor.view.state, "table", { requireEnds: true });
-  const isInSectionNode = selectionHasNodeOrMark(editor.view.state, "documentSection", { requireEnds: true });
-  const sections = [
+};
+function getItems(context, customItems = [], includeDefaultItems = true) {
+  const { selectedText, editor } = context;
+  if (arguments.length === 1 && editor?.options?.slashMenuConfig) {
+    customItems = editor.options.slashMenuConfig.items || editor.options.slashMenuConfig.customItems || [];
+    includeDefaultItems = editor.options.slashMenuConfig.includeDefaultItems !== false;
+  }
+  const enhancedContext = {
+    ...context,
+    isInTable: context.isInTable ?? false,
+    isInSectionNode: context.isInSectionNode ?? false,
+    isTrackedChange: context.isTrackedChange ?? false,
+    clipboardContent: context.clipboardContent ?? { hasContent: false },
+    selectedText: context.selectedText ?? "",
+    hasSelection: context.hasSelection ?? Boolean(context.selectedText)
+  };
+  const defaultSections = [
     {
       id: "ai-content",
+      isDefault: true,
       items: [
         {
           id: "insert-text",
           label: selectedText ? TEXTS.replaceText : TEXTS.insertText,
           icon: ICONS.ai,
           component: AIWriter,
+          isDefault: true,
           action: (editor2) => {
             if (editor2?.commands && typeof editor2.commands?.insertAiMark === "function") {
               editor2.commands.insertAiMark();
             }
           },
-          allowedTriggers: [TRIGGERS.slash, TRIGGERS.click],
-          requiresModule: "ai"
+          showWhen: (context2) => {
+            const { trigger: trigger2 } = context2;
+            const allowedTriggers = [TRIGGERS.slash, TRIGGERS.click];
+            return allowedTriggers.includes(trigger2) && isModuleEnabled(context2.editor?.options, "ai");
+          }
+        }
+      ]
+    },
+    {
+      id: "track-changes",
+      isDefault: true,
+      items: [
+        {
+          id: "track-changes-accept",
+          icon: ICONS.trackChangesAccept,
+          label: TEXTS.trackChangesAccept,
+          isDefault: true,
+          action: (editor2, context2) => {
+            if (context2?.trackedChangeId) {
+              editor2.commands.acceptTrackedChangeById(context2.trackedChangeId);
+            } else {
+              editor2.commands.acceptTrackedChangeBySelection();
+            }
+          },
+          showWhen: (context2) => {
+            const { trigger: trigger2, isTrackedChange } = context2;
+            return trigger2 === TRIGGERS.click && isTrackedChange;
+          }
+        },
+        {
+          id: "track-changes-reject",
+          label: TEXTS.trackChangesReject,
+          icon: ICONS.trackChangesReject,
+          isDefault: true,
+          action: (editor2, context2) => {
+            if (context2?.trackedChangeId) {
+              editor2.commands.rejectTrackedChangeById(context2.trackedChangeId);
+            } else {
+              editor2.commands.rejectTrackedChangeOnSelection();
+            }
+          },
+          showWhen: (context2) => {
+            const { trigger: trigger2, isTrackedChange } = context2;
+            return trigger2 === TRIGGERS.click && isTrackedChange;
+          }
         }
       ]
     },
     {
       id: "document-sections",
+      isDefault: true,
       items: [
         {
           id: "insert-document-section",
           label: TEXTS.createDocumentSection,
           icon: ICONS.addDocumentSection,
+          isDefault: true,
           action: (editor2) => {
             editor2.commands.createDocumentSection();
           },
-          allowedTriggers: [TRIGGERS.click]
+          showWhen: (context2) => {
+            const { trigger: trigger2 } = context2;
+            return trigger2 === TRIGGERS.click;
+          }
         },
         {
           id: "remove-section",
           label: TEXTS.removeDocumentSection,
           icon: ICONS.removeDocumentSection,
+          isDefault: true,
           action: (editor2) => {
             editor2.commands.removeSectionAtSelection();
           },
-          allowedTriggers: [TRIGGERS.click],
-          requiresSectionParent: true
+          showWhen: (context2) => {
+            const { trigger: trigger2, isInSectionNode } = context2;
+            return trigger2 === TRIGGERS.click && isInSectionNode;
+          }
         }
       ]
     },
     {
       id: "general",
+      isDefault: true,
       items: [
         {
           id: "insert-link",
           label: TEXTS.insertLink,
           icon: ICONS.link,
           component: LinkInput,
-          allowedTriggers: [TRIGGERS.click]
+          isDefault: true,
+          showWhen: (context2) => {
+            const { trigger: trigger2 } = context2;
+            return trigger2 === TRIGGERS.click;
+          }
         },
         {
           id: "insert-table",
           label: TEXTS.insertTable,
           icon: ICONS.table,
           component: TableGrid,
-          allowedTriggers: [TRIGGERS.slash, TRIGGERS.click]
+          isDefault: true,
+          showWhen: (context2) => {
+            const { trigger: trigger2, isInTable: isInTable2 } = context2;
+            const allowedTriggers = [TRIGGERS.slash, TRIGGERS.click];
+            return allowedTriggers.includes(trigger2) && !isInTable2;
+          }
         },
         {
           id: "edit-table",
           label: TEXTS.editTable,
           icon: ICONS.table,
           component: TableActions,
-          allowedTriggers: [TRIGGERS.slash, TRIGGERS.click],
-          requiresTableParent: true
+          isDefault: true,
+          showWhen: (context2) => {
+            const { trigger: trigger2, isInTable: isInTable2 } = context2;
+            const allowedTriggers = [TRIGGERS.slash, TRIGGERS.click];
+            return allowedTriggers.includes(trigger2) && isInTable2;
+          }
         }
       ]
     },
     {
       id: "clipboard",
+      isDefault: true,
       items: [
         {
           id: "cut",
           label: TEXTS.cut,
           icon: ICONS.cut,
+          isDefault: true,
           action: (editor2) => {
             editor2.view.focus();
             document.execCommand("cut");
           },
-          allowedTriggers: [TRIGGERS.click],
-          requiresSelection: true
+          showWhen: (context2) => {
+            const { trigger: trigger2, selectedText: selectedText2 } = context2;
+            return trigger2 === TRIGGERS.click && selectedText2;
+          }
         },
         {
           id: "copy",
           label: TEXTS.copy,
           icon: ICONS.copy,
+          isDefault: true,
           action: (editor2) => {
             editor2.view.focus();
             document.execCommand("copy");
           },
-          allowedTriggers: [TRIGGERS.click],
-          requiresSelection: true
+          showWhen: (context2) => {
+            const { trigger: trigger2, selectedText: selectedText2 } = context2;
+            return trigger2 === TRIGGERS.click && selectedText2;
+          }
         },
         {
           id: "paste",
           label: TEXTS.paste,
           icon: ICONS.paste,
+          isDefault: true,
           action: async (editor2) => {
             try {
               const clipboardItems = await navigator.clipboard.read();
@@ -86413,7 +86471,7 @@ function getItems(context) {
                   text = await (await item.getType("text/plain")).text();
                 }
               }
-              const handled = handleClipboardPaste({ editor: editor2, view: editor2.view }, html, text);
+              const handled = handleClipboardPaste({ editor: editor2, view: editor2.view }, html);
               if (!handled) {
                 const dataTransfer = new DataTransfer();
                 if (html) dataTransfer.setData("text/html", html);
@@ -86429,30 +86487,52 @@ function getItems(context) {
               console.warn("Failed to paste:", error);
             }
           },
-          allowedTriggers: [TRIGGERS.click, TRIGGERS.slash],
-          requiresClipboard: true
+          showWhen: (context2) => {
+            const { trigger: trigger2, clipboardContent } = context2;
+            const allowedTriggers = [TRIGGERS.click, TRIGGERS.slash];
+            const hasContent = clipboardContent?.hasContent || clipboardContent?.size > 0 || clipboardContent?.content?.size > 0;
+            return allowedTriggers.includes(trigger2) && hasContent;
+          }
         }
       ]
     }
   ];
-  let allSections = applyCustomMenuConfiguration(sections, context);
-  const filteredSections = allSections.map((section) => {
-    const filteredItems = section.items.filter((item) => {
-      if (item.requiresModule && !isModuleEnabled(editor?.options, item.requiresModule)) return false;
-      if (item.requiresSelection && !selectedText) return false;
-      if (!item.allowedTriggers.includes(trigger2)) return false;
-      if (item.requiresClipboard && !clipboardHasContent) return false;
-      if (item.requiresTableParent && !isInTable2 || item.id === "insert-table" && isInTable2) return false;
-      if (item.requiresSectionParent && !isInSectionNode) return false;
-      return true;
+  let allSections = [];
+  if (includeDefaultItems) {
+    allSections = [...defaultSections];
+  }
+  if (customItems.length > 0) {
+    customItems.forEach((customSection) => {
+      const existingSectionIndex = allSections.findIndex((section) => section.id === customSection.id);
+      if (existingSectionIndex !== -1) {
+        allSections[existingSectionIndex].items = [
+          ...allSections[existingSectionIndex].items,
+          ...customSection.items.map((item) => ({ ...item, isDefault: false }))
+        ];
+      } else {
+        allSections.push({
+          ...customSection,
+          isDefault: false,
+          items: customSection.items.map((item) => ({ ...item, isDefault: false }))
+        });
+      }
     });
+  }
+  if (editor?.options?.slashMenuConfig?.menuProvider) {
+    try {
+      allSections = editor.options.slashMenuConfig.menuProvider(enhancedContext, allSections) || allSections;
+    } catch (error) {
+      console.warn("[SlashMenu] menuProvider error:", error);
+    }
+  }
+  const filteredSections = allSections.map((section) => {
+    const filteredItems = section.items.filter((item) => shouldShowItem(item, enhancedContext));
     return {
       ...section,
       items: filteredItems
     };
   }).filter((section) => section.items.length > 0);
-  const finalSections = filterCustomItems(filteredSections, context);
-  return finalSections;
+  return filteredSections;
 }
 const _hoisted_1$3 = { class: "slash-menu-items" };
 const _hoisted_2$1 = {
@@ -86535,13 +86615,28 @@ const _sfc_main$4 = {
     });
     const customItemRefs = /* @__PURE__ */ new Map();
     const setCustomItemRef = (el, item) => {
-      if (el && item.render) {
+      if (el) {
         customItemRefs.set(item.id, { element: el, item });
         vue.nextTick(() => {
           renderCustomItem(item.id);
         });
       }
     };
+    const defaultRender = (context) => {
+      const item = context.item || context.currentItem;
+      const container = document.createElement("div");
+      container.className = "slash-menu-default-content";
+      if (item.icon) {
+        const iconSpan = document.createElement("span");
+        iconSpan.className = "slash-menu-item-icon";
+        iconSpan.innerHTML = item.icon;
+        container.appendChild(iconSpan);
+      }
+      const labelSpan = document.createElement("span");
+      labelSpan.textContent = item.label;
+      container.appendChild(labelSpan);
+      return container;
+    };
     const renderCustomItem = async (itemId) => {
       const refData = customItemRefs.get(itemId);
       if (!refData || refData.element.hasCustomContent) return;
@@ -86550,8 +86645,9 @@ const _sfc_main$4 = {
         if (!currentContext.value) {
           currentContext.value = await getEditorContext(props.editor);
         }
-        const context = currentContext.value;
-        const customElement = item.render(context);
+        const contextWithItem = { ...currentContext.value, currentItem: item };
+        const renderFunction = item.render || defaultRender;
+        const customElement = renderFunction(contextWithItem);
         if (customElement instanceof HTMLElement) {
           element.innerHTML = "";
           element.appendChild(customElement);
@@ -86559,7 +86655,9 @@ const _sfc_main$4 = {
         }
       } catch (error) {
         console.warn(`[SlashMenu] Error rendering custom item ${itemId}:`, error);
-        element.innerHTML = `<span>${item.label || "Custom Item"}</span>`;
+        const fallbackElement = defaultRender({ ...currentContext.value || {}, currentItem: item });
+        element.innerHTML = "";
+        element.appendChild(fallbackElement);
         element.hasCustomContent = true;
       }
     };
@@ -86754,19 +86852,20 @@ const _sfc_main$4 = {
                   class: vue.normalizeClass(["slash-menu-item", { "is-selected": item.id === selectedId.value }]),
                   onClick: ($event) => executeCommand(item)
                 }, [
-                  item.render ? (vue.openBlock(), vue.createElementBlock("div", {
-                    key: 0,
+                  vue.createBaseVNode("div", {
                     ref_for: true,
                     ref: (el) => setCustomItemRef(el, item),
                     class: "slash-menu-custom-item"
-                  }, null, 512)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
-                    item.icon ? (vue.openBlock(), vue.createElementBlock("span", {
-                      key: 0,
-                      class: "slash-menu-item-icon",
-                      innerHTML: item.icon
-                    }, null, 8, _hoisted_4)) : vue.createCommentVNode("", true),
-                    vue.createBaseVNode("span", null, vue.toDisplayString(item.label), 1)
-                  ], 64))
+                  }, [
+                    !item.render ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+                      item.icon ? (vue.openBlock(), vue.createElementBlock("span", {
+                        key: 0,
+                        class: "slash-menu-item-icon",
+                        innerHTML: item.icon
+                      }, null, 8, _hoisted_4)) : vue.createCommentVNode("", true),
+                      vue.createBaseVNode("span", null, vue.toDisplayString(item.label), 1)
+                    ], 64)) : vue.createCommentVNode("", true)
+                  ], 512)
                 ], 10, _hoisted_3$1);
               }), 128))
             ], 64);

package/dist/style.css

@@ -2080,7 +2080,7 @@ on the right if it is inside shape textbox.
 .slash-menu {
   position: absolute;
   z-index: 50;
-  width: 175px;
+  width: 180px;
   color: #47484a;
   background: white;
   box-shadow:
@@ -2153,6 +2153,11 @@ on the right if it is inside shape textbox.
   align-items: center;
   width: 100%;
 }
+.slash-menu-default-content {
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
 .popover {
   background: white;
   border-radius: 6px;

package/dist/super-editor/chunks/{toolbar-UX3FTiEj.js → toolbar-Bq8miKER.js}

@@ -72,7 +72,7 @@ const fileHalfDashedIconSvg = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="
 const commentIconSvg = '<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="M512 240c0 114.9-114.6 208-256 208c-37.1 0-72.3-6.4-104.1-17.9c-11.9 8.7-31.3 20.6-54.3 30.6C73.6 471.1 44.7 480 16 480c-6.5 0-12.3-3.9-14.8-9.9c-2.5-6-1.1-12.8 3.4-17.4c0 0 0 0 0 0s0 0 0 0s0 0 0 0c0 0 0 0 0 0l.3-.3c.3-.3 .7-.7 1.3-1.4c1.1-1.2 2.8-3.1 4.9-5.7c4.1-5 9.6-12.4 15.2-21.6c10-16.6 19.5-38.4 21.4-62.9C17.7 326.8 0 285.1 0 240C0 125.1 114.6 32 256 32s256 93.1 256 208z"/></svg>';
 const circleIconSvg = '<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="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z"/></svg>';
 const checkIconSvg = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>';
-const xmarkIconSvg = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg>';
+const xMarkIconSvg = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg>';
 const upRightFromSquareIconSvg = '<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="M352 0c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9L370.7 96 201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L416 141.3l41.4 41.4c9.2 9.2 22.9 11.9 34.9 6.9s19.8-16.6 19.8-29.6l0-128c0-17.7-14.3-32-32-32L352 0zM80 32C35.8 32 0 67.8 0 112L0 432c0 44.2 35.8 80 80 80l320 0c44.2 0 80-35.8 80-80l0-112c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 112c0 8.8-7.2 16-16 16L80 448c-8.8 0-16-7.2-16-16l0-320c0-8.8 7.2-16 16-16l112 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L80 32z"/></svg>';
 const ellipsisVerticalIconSvg = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M64 360a56 56 0 1 0 0 112 56 56 0 1 0 0-112zm0-160a56 56 0 1 0 0 112 56 56 0 1 0 0-112zM120 96A56 56 0 1 0 8 96a56 56 0 1 0 112 0z"/></svg>';
 const caretUpIconSvg = '<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="M182.6 137.4c-12.5-12.5-32.8-12.5-45.3 0l-128 128c-9.2 9.2-11.9 22.9-6.9 34.9s16.6 19.8 29.6 19.8l256 0c12.9 0 24.6-7.8 29.6-19.8s2.2-25.7-6.9-34.9l-128-128z"/></svg>';
@@ -127,7 +127,7 @@ const toolbarIcons = {
   colorOption: circleIconSvg,
   colorOptionCheck: checkIconSvg,
   linkInput: linkIconSvg,
-  removeLink: xmarkIconSvg,
+  removeLink: xMarkIconSvg,
   openLink: upRightFromSquareIconSvg,
   overflow: ellipsisVerticalIconSvg,
   dropdownCaretUp: caretUpIconSvg,
@@ -10161,18 +10161,20 @@ export {
   NSkeleton as N,
   Toolbar as T,
   trashIconSvg as a,
-  tableIconSvg as b,
-  scissorsIconSvg as c,
-  copyIconSvg as d,
-  pasteIconSvg as e,
-  borderNoneIconSvg as f,
-  arrowsToDotIconSvg as g,
-  arrowsLeftRightIconSvg as h,
+  borderNoneIconSvg as b,
+  arrowsToDotIconSvg as c,
+  arrowsLeftRightIconSvg as d,
+  checkIconSvg as e,
+  tableIconSvg as f,
+  scissorsIconSvg as g,
+  copyIconSvg as h,
+  pasteIconSvg as i,
   linkIconSvg as l,
   magicWandIcon as m,
   plusIconSvg as p,
   sanitizeNumber as s,
   toolbarIcons as t,
   useMessage as u,
-  wrenchIconSvg as w
+  wrenchIconSvg as w,
+  xMarkIconSvg as x
 };

package/dist/super-editor/style.css

@@ -1706,7 +1706,7 @@ on the right if it is inside shape textbox.
 .slash-menu {
   position: absolute;
   z-index: 50;
-  width: 175px;
+  width: 180px;
   color: #47484a;
   background: white;
   box-shadow:
@@ -1779,6 +1779,11 @@ on the right if it is inside shape textbox.
   align-items: center;
   width: 100%;
 }
+.slash-menu-default-content {
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
 .popover {
   background: white;
   border-radius: 6px;

package/dist/super-editor/super-editor/src/components/slash-menu/constants.d.ts

@@ -18,6 +18,8 @@ export namespace ICONS {
     export { pasteIconSvg as paste };
     export { plusIconSvg as addDocumentSection };
     export { trashIconSvg as removeDocumentSection };
+    export { checkIconSvg as trackChangesAccept };
+    export { xMarkIconSvg as trackChangesReject };
 }
 export namespace TEXTS {
     let addRowBefore: string;
@@ -41,6 +43,8 @@ export namespace TEXTS {
     let paste: string;
     let removeDocumentSection: string;
     let createDocumentSection: string;
+    let trackChangesAccept: string;
+    let trackChangesReject: string;
 }
 export const tableActionsOptions: ({
     label: string;