@harbour-enterprises/superdoc 0.21.0 → 0.21.2

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

@@ -9,14 +9,14 @@ var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read fr
 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 _SuperToolbar_instances, initToolbarGroups_fn, _interceptedCommands, makeToolbarItems_fn, initDefaultFonts_fn, updateHighlightColors_fn, deactivateAll_fn, updateToolbarHistory_fn, runCommandWithArgumentOnly_fn;
-import { av as getDefaultExportFromCjs, V as v4, T as TextSelection$1, v as getMarkRange, ay as vClickOutside, H as findParentNode, az as getActiveFormatting, ap as isInTable, aA as readFromClipboard, aB as handleClipboardPaste, aC as getFileObject, aD as runPropertyTranslators, aE as translator, aF as translator$1, aG as translator$2, aH as translator$3, aI as translator$4, aJ as translator$5, aK as translator$6, aL as translator$7, aM as translator$8, aN as translator$9, aO as translator$a, aP as translator$b, aQ as translator$c, aR as translator$d, aS as translator$e, aT as translator$f, aU as translator$g, aV as translator$h, aW as translator$i, aX as translator$j, aY as translator$k, aZ as translator$l, a_ as translator$m, a$ as translator$n, b0 as translator$o, b1 as translator$p, a as Plugin } from "./chunks/converter-3xnF_NHq.js";
-import { b2, a5, i, a2 } from "./chunks/converter-3xnF_NHq.js";
-import { _ as _export_sfc, u as useHighContrastMode, a as getQuickFormatList, b as generateLinkedStyleString, c as getFileOpener, d as checkAndProcessImage, r as replaceSelectionWithImagePlaceholder, e as uploadAndInsertImage, y as yUndoPluginKey, f as undoDepth, h as redoDepth, S as SlashMenuPluginKey, E as Editor, i as getStarterExtensions, P as Placeholder, j as getRichTextExtensions, M as Mark, k as Extension, A as Attribute, N as Node } from "./chunks/editor-BqYH4kDD.js";
-import { n, C, o, T, l, p, m } from "./chunks/editor-BqYH4kDD.js";
+import { av as getDefaultExportFromCjs, V as v4, T as TextSelection$1, v as getMarkRange, ay as vClickOutside, H as findParentNode, az as getActiveFormatting, ap as isInTable, aA as readFromClipboard, aB as handleClipboardPaste, aC as getFileObject, aD as runPropertyTranslators, aE as translator, aF as translator$1, aG as translator$2, aH as translator$3, aI as translator$4, aJ as translator$5, aK as translator$6, aL as translator$7, aM as translator$8, aN as translator$9, aO as translator$a, aP as translator$b, aQ as translator$c, aR as translator$d, aS as translator$e, aT as translator$f, aU as translator$g, aV as translator$h, aW as translator$i, aX as translator$j, aY as translator$k, aZ as translator$l, a_ as translator$m, a$ as translator$n, b0 as translator$o, b1 as translator$p, b2 as translator$q, b3 as translator$r, b4 as translator$s, b5 as translator$t, b6 as translator$u, b7 as translator$v, b8 as translator$w, b9 as translator$x, ba as translator$y, bb as translator$z, bc as translator$A, bd as translator$B, be as translator$C, bf as translator$D, bg as translator$E, bh as translator$F, bi as translator$G, bj as translator$H, bk as translator$I, bl as translator$J, bm as translator$K, bn as translator$L, bo as translator$M, bp as translator$N, bq as translator$O, br as translator$P, bs as translator$Q, bt as translator$R, bu as translator$S, bv as translator$T, bw as translator$U, bx as translator$V, by as translator$W, bz as translator$X, bA as translator$Y, bB as translator$Z, bC as translator$_, bD as translator$$, bE as translator$10, a as Plugin } from "./chunks/converter-D7lP9y8P.js";
+import { bF, a5, i, a2 } from "./chunks/converter-D7lP9y8P.js";
+import { _ as _export_sfc, u as useHighContrastMode, a as getQuickFormatList, b as generateLinkedStyleString, c as getFileOpener, d as checkAndProcessImage, r as replaceSelectionWithImagePlaceholder, e as uploadAndInsertImage, y as yUndoPluginKey, f as undoDepth, h as redoDepth, s as shouldBypassContextMenu, S as SlashMenuPluginKey, E as Editor, i as getStarterExtensions, P as Placeholder, j as getRichTextExtensions, M as Mark, k as Extension, A as Attribute, N as Node } from "./chunks/editor-BuT5uWdz.js";
+import { n, C, o, T, l, p, m } from "./chunks/editor-BuT5uWdz.js";
 import { ref, onMounted, createElementBlock, openBlock, normalizeClass, unref, Fragment, renderList, createElementVNode, withModifiers, toDisplayString, createCommentVNode, normalizeStyle, computed, watch, withDirectives, withKeys, vModelText, createTextVNode, createVNode, h, createApp, markRaw, nextTick, onBeforeUnmount, reactive, onUnmounted, renderSlot, shallowRef, createBlock, withCtx, resolveDynamicComponent, normalizeProps, guardReactiveProps } from "vue";
-import { t as toolbarIcons, s as sanitizeNumber, T as Toolbar, m as magicWandIcon, p as plusIconSvg, a as trashIconSvg, l as linkIconSvg, b as tableIconSvg, c as scissorsIconSvg, d as copyIconSvg, e as pasteIconSvg, f as borderNoneIconSvg, g as arrowsToDotIconSvg, h as arrowsLeftRightIconSvg, w as wrenchIconSvg, u as useMessage, N as NSkeleton } from "./chunks/toolbar-TkaE2kKM.js";
+import { t as toolbarIcons, s as sanitizeNumber, T as Toolbar, m as magicWandIcon, p as plusIconSvg, a as trashIconSvg, l as linkIconSvg, b as tableIconSvg, c as scissorsIconSvg, d as copyIconSvg, e as pasteIconSvg, f as borderNoneIconSvg, g as arrowsToDotIconSvg, h as arrowsLeftRightIconSvg, w as wrenchIconSvg, u as useMessage, N as NSkeleton } from "./chunks/toolbar-6ZwZPyNU.js";
 import AIWriter from "./ai-writer.es.js";
-import { D } from "./chunks/docx-zipper-CZdELYi-.js";
+import { D } from "./chunks/docx-zipper-_TMbHpUQ.js";
 import { createZip } from "./file-zipper.es.js";
 var eventemitter3 = { exports: {} };
 var hasRequiredEventemitter3;
@@ -2584,7 +2584,7 @@ class SuperToolbar extends EventEmitter {
         if (!argument) return;
         item.onActivate({ zoom: argument });
         this.emit("superdoc-command", { item, argument });
-        const layers = document.querySelector(this.superdoc.config.selector)?.querySelector(".layers");
+        const layers = this.superdoc.element?.querySelector(".layers");
         if (!layers) return;
         const isMobileDevice = typeof screen.orientation !== "undefined";
         const isSmallScreen = window.matchMedia("(max-width: 834px)").matches;
@@ -3208,6 +3208,115 @@ runCommandWithArgumentOnly_fn = function({ item, argument, noArgumentCallback =
     this.updateToolbarState();
   }
 };
+const onMarginClickCursorChange = (event, editor) => {
+  const y = event.clientY;
+  const x = event.clientX;
+  const { view } = editor;
+  const editorRect = view.dom.getBoundingClientRect();
+  let coords = {
+    left: 0,
+    top: y
+  };
+  let isRightMargin = false;
+  if (x > editorRect.right) {
+    coords.left = editorRect.left + editorRect.width - 1;
+    isRightMargin = true;
+  } else if (x < editorRect.left) {
+    coords.left = editorRect.left;
+  }
+  const pos = view.posAtCoords(coords)?.pos;
+  if (pos) {
+    let cursorPos = pos;
+    if (isRightMargin) {
+      const $pos = view.state.doc.resolve(pos);
+      const charOffset = $pos.textOffset;
+      const node = view.state.doc.nodeAt(pos);
+      const text = node?.text;
+      const charAtPos = text?.charAt(charOffset);
+      cursorPos = node?.isText && charAtPos !== " " ? pos - 1 : pos;
+    }
+    const transaction = view.state.tr.setSelection(TextSelection$1.create(view.state.doc, cursorPos));
+    view.dispatch(transaction);
+    view.focus();
+  }
+};
+const checkNodeSpecificClicks = (editor, event, popoverControls) => {
+  if (!editor) return;
+  if (selectionHasNodeOrMark(editor.view.state, "link", { requireEnds: true })) {
+    popoverControls.component = LinkInput;
+    popoverControls.position = {
+      left: `${event.clientX - editor.element.getBoundingClientRect().left}px`,
+      top: `${event.clientY - editor.element.getBoundingClientRect().top + 15}px`
+    };
+    popoverControls.props = {
+      showInput: true
+    };
+    popoverControls.visible = true;
+  }
+};
+function selectionHasNodeOrMark(state, name, options = {}) {
+  const { requireEnds = false } = options;
+  const $from = state.selection.$from;
+  const $to = state.selection.$to;
+  if (requireEnds) {
+    for (let d = $from.depth; d > 0; d--) {
+      if ($from.node(d).type.name === name) {
+        return true;
+      }
+    }
+    for (let d = $to.depth; d > 0; d--) {
+      if ($to.node(d).type.name === name) {
+        return true;
+      }
+    }
+  } else {
+    for (let d = $from.depth; d > 0; d--) {
+      if ($from.node(d).type.name === name) {
+        return true;
+      }
+    }
+  }
+  const markType = state.schema.marks[name];
+  if (markType) {
+    const { from, to, empty } = state.selection;
+    if (requireEnds) {
+      const fromMarks = markType.isInSet($from.marks());
+      const toMarks = markType.isInSet($to.marks());
+      if (fromMarks || toMarks) {
+        return true;
+      }
+      if (empty && markType.isInSet(state.storedMarks || $from.marks())) {
+        return true;
+      }
+    } else {
+      if (empty) {
+        if (markType.isInSet(state.storedMarks || $from.marks())) {
+          return true;
+        }
+      } else {
+        let hasMark = false;
+        state.doc.nodesBetween(from, to, (node) => {
+          if (markType.isInSet(node.marks)) {
+            hasMark = true;
+            return false;
+          }
+        });
+        if (hasMark) return true;
+      }
+    }
+  }
+  return false;
+}
+function moveCursorToMouseEvent(event, editor) {
+  const { view } = editor;
+  const coords = { left: event.clientX, top: event.clientY };
+  const pos = view.posAtCoords(coords)?.pos;
+  if (typeof pos === "number") {
+    const tr = view.state.tr.setSelection(TextSelection$1.create(view.state.doc, pos));
+    view.dispatch(tr);
+    view.focus();
+  }
+}
 const ICONS = {
   addRowBefore: plusIconSvg,
   addRowAfter: plusIconSvg,
@@ -3407,6 +3516,30 @@ const getPropsByItemId = (itemId, props) => {
       return baseProps;
   }
 };
+function normalizeClipboardContent(rawClipboardContent) {
+  if (!rawClipboardContent) {
+    return {
+      html: null,
+      text: null,
+      hasContent: false,
+      raw: null
+    };
+  }
+  const html = typeof rawClipboardContent.html === "string" ? rawClipboardContent.html : null;
+  const text = typeof rawClipboardContent.text === "string" ? rawClipboardContent.text : null;
+  const hasHtml = !!html && html.trim().length > 0;
+  const hasText = !!text && text.length > 0;
+  const isObject = typeof rawClipboardContent === "object" && rawClipboardContent !== null;
+  const fragmentSize = typeof rawClipboardContent.size === "number" ? rawClipboardContent.size : null;
+  const nestedSize = isObject && rawClipboardContent.content && typeof rawClipboardContent.content.size === "number" ? rawClipboardContent.content.size : null;
+  const hasFragmentContent = (fragmentSize ?? nestedSize ?? 0) > 0;
+  return {
+    html,
+    text,
+    hasContent: hasHtml || hasText || hasFragmentContent,
+    raw: rawClipboardContent
+  };
+}
 async function getEditorContext(editor, event) {
   const { view } = editor;
   const { state } = view;
@@ -3422,123 +3555,144 @@ async function getEditorContext(editor, event) {
     pos = from;
     node = state.doc.nodeAt(pos);
   }
-  const clipboardContent = await readFromClipboard(state);
+  const rawClipboardContent = await readFromClipboard(state);
+  const clipboardContent = normalizeClipboardContent(rawClipboardContent);
+  const structureFromResolvedPos = pos !== null ? getStructureFromResolvedPos(state, pos) : null;
+  const isInTable2 = structureFromResolvedPos?.isInTable ?? selectionHasNodeOrMark(state, "table", { requireEnds: true });
+  const isInList = structureFromResolvedPos?.isInList ?? (selectionHasNodeOrMark(state, "bulletList", { requireEnds: false }) || selectionHasNodeOrMark(state, "orderedList", { requireEnds: false }));
+  const isInSectionNode = structureFromResolvedPos?.isInSectionNode ?? selectionHasNodeOrMark(state, "documentSection", { requireEnds: true });
+  const currentNodeType = node?.type?.name || null;
+  const activeMarks = [];
+  if (event && pos !== null) {
+    const $pos = state.doc.resolve(pos);
+    if ($pos.marks && typeof $pos.marks === "function") {
+      $pos.marks().forEach((mark) => activeMarks.push(mark.type.name));
+    }
+    if (node && node.marks) {
+      node.marks.forEach((mark) => activeMarks.push(mark.type.name));
+    }
+  } else {
+    state.storedMarks?.forEach((mark) => activeMarks.push(mark.type.name));
+    state.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 = state.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 cursorCoords = pos ? view.coordsAtPos(pos) : null;
+  const cursorPosition = cursorCoords ? {
+    x: cursorCoords.left,
+    y: cursorCoords.top
+  } : null;
   return {
-    editor,
+    // Selection info
     selectedText,
+    hasSelection: !empty,
+    selectionStart: from,
+    selectionEnd: to,
+    // Document structure
+    isInTable: isInTable2,
+    isInList,
+    isInSectionNode,
+    currentNodeType,
+    activeMarks,
+    // Document state
+    isTrackedChange,
+    trackedChangeId,
+    documentMode: editor.options?.documentMode || "editing",
+    canUndo: computeCanUndo(editor, state),
+    canRedo: computeCanRedo(editor, state),
+    isEditable: editor.isEditable,
+    // Clipboard
+    clipboardContent,
+    // Position and trigger info
+    cursorPosition,
     pos,
     node,
     event,
-    clipboardContent
+    // Editor reference for advanced use cases
+    editor
   };
 }
-const onMarginClickCursorChange = (event, editor) => {
-  const y = event.clientY;
-  const x = event.clientX;
-  const { view } = editor;
-  const editorRect = view.dom.getBoundingClientRect();
-  let coords = {
-    left: 0,
-    top: y
-  };
-  let isRightMargin = false;
-  if (x > editorRect.right) {
-    coords.left = editorRect.left + editorRect.width - 1;
-    isRightMargin = true;
-  } else if (x < editorRect.left) {
-    coords.left = editorRect.left;
+function computeCanUndo(editor, state) {
+  if (typeof editor?.can === "function") {
+    try {
+      const can = editor.can();
+      if (can && typeof can.undo === "function") {
+        return !!can.undo();
+      }
+    } catch (error) {
+      console.warn("[SlashMenu] Unable to determine undo availability via editor.can():", error);
+    }
   }
-  const pos = view.posAtCoords(coords)?.pos;
-  if (pos) {
-    let cursorPos = pos;
-    if (isRightMargin) {
-      const $pos = view.state.doc.resolve(pos);
-      const charOffset = $pos.textOffset;
-      const node = view.state.doc.nodeAt(pos);
-      const text = node?.text;
-      const charAtPos = text?.charAt(charOffset);
-      cursorPos = node?.isText && charAtPos !== " " ? pos - 1 : pos;
+  if (isCollaborationEnabled(editor)) {
+    try {
+      const undoManager = yUndoPluginKey.getState(state)?.undoManager;
+      return !!undoManager && undoManager.undoStack.length > 0;
+    } catch (error) {
+      console.warn("[SlashMenu] Unable to determine undo availability via y-prosemirror:", error);
     }
-    const transaction = view.state.tr.setSelection(TextSelection$1.create(view.state.doc, cursorPos));
-    view.dispatch(transaction);
-    view.focus();
   }
-};
-const checkNodeSpecificClicks = (editor, event, popoverControls) => {
-  if (!editor) return;
-  if (selectionHasNodeOrMark(editor.view.state, "link", { requireEnds: true })) {
-    popoverControls.component = LinkInput;
-    popoverControls.position = {
-      left: `${event.clientX - editor.element.getBoundingClientRect().left}px`,
-      top: `${event.clientY - editor.element.getBoundingClientRect().top + 15}px`
-    };
-    popoverControls.props = {
-      showInput: true
-    };
-    popoverControls.visible = true;
+  try {
+    return undoDepth(state) > 0;
+  } catch (error) {
+    console.warn("[SlashMenu] Unable to determine undo availability via history plugin:", error);
+    return false;
   }
-};
-function selectionHasNodeOrMark(state, name, options = {}) {
-  const { requireEnds = false } = options;
-  const $from = state.selection.$from;
-  const $to = state.selection.$to;
-  if (requireEnds) {
-    for (let d = $from.depth; d > 0; d--) {
-      if ($from.node(d).type.name === name) {
-        return true;
-      }
-    }
-    for (let d = $to.depth; d > 0; d--) {
-      if ($to.node(d).type.name === name) {
-        return true;
-      }
-    }
-  } else {
-    for (let d = $from.depth; d > 0; d--) {
-      if ($from.node(d).type.name === name) {
-        return true;
+}
+function computeCanRedo(editor, state) {
+  if (typeof editor?.can === "function") {
+    try {
+      const can = editor.can();
+      if (can && typeof can.redo === "function") {
+        return !!can.redo();
       }
+    } catch (error) {
+      console.warn("[SlashMenu] Unable to determine redo availability via editor.can():", error);
     }
   }
-  const markType = state.schema.marks[name];
-  if (markType) {
-    const { from, to, empty } = state.selection;
-    if (requireEnds) {
-      const fromMarks = markType.isInSet($from.marks());
-      const toMarks = markType.isInSet($to.marks());
-      if (fromMarks || toMarks) {
-        return true;
-      }
-      if (empty && markType.isInSet(state.storedMarks || $from.marks())) {
-        return true;
-      }
-    } else {
-      if (empty) {
-        if (markType.isInSet(state.storedMarks || $from.marks())) {
-          return true;
-        }
-      } else {
-        let hasMark = false;
-        state.doc.nodesBetween(from, to, (node) => {
-          if (markType.isInSet(node.marks)) {
-            hasMark = true;
-            return false;
-          }
-        });
-        if (hasMark) return true;
-      }
+  if (isCollaborationEnabled(editor)) {
+    try {
+      const undoManager = yUndoPluginKey.getState(state)?.undoManager;
+      return !!undoManager && undoManager.redoStack.length > 0;
+    } catch (error) {
+      console.warn("[SlashMenu] Unable to determine redo availability via y-prosemirror:", error);
     }
   }
-  return false;
+  try {
+    return redoDepth(state) > 0;
+  } catch (error) {
+    console.warn("[SlashMenu] Unable to determine redo availability via history plugin:", error);
+    return false;
+  }
 }
-function moveCursorToMouseEvent(event, editor) {
-  const { view } = editor;
-  const coords = { left: event.clientX, top: event.clientY };
-  const pos = view.posAtCoords(coords)?.pos;
-  if (typeof pos === "number") {
-    const tr = view.state.tr.setSelection(TextSelection$1.create(view.state.doc, pos));
-    view.dispatch(tr);
-    view.focus();
+function isCollaborationEnabled(editor) {
+  return Boolean(editor?.options?.collaborationProvider && editor?.options?.ydoc);
+}
+function getStructureFromResolvedPos(state, pos) {
+  try {
+    const $pos = state.doc.resolve(pos);
+    const ancestors = /* @__PURE__ */ new Set();
+    for (let depth = $pos.depth; depth > 0; depth--) {
+      ancestors.add($pos.node(depth).type.name);
+    }
+    const isInList = ancestors.has("bulletList") || ancestors.has("orderedList");
+    const isInTable2 = ancestors.has("table") || ancestors.has("tableRow") || ancestors.has("tableCell") || ancestors.has("tableHeader");
+    const isInSectionNode = ancestors.has("documentSection");
+    return {
+      isInTable: isInTable2,
+      isInList,
+      isInSectionNode
+    };
+  } catch (error) {
+    console.warn("[SlashMenu] Unable to resolve position for structural context:", error);
+    return null;
   }
 }
 const isModuleEnabled = (editorOptions, moduleName) => {
@@ -3552,8 +3706,52 @@ const isModuleEnabled = (editorOptions, moduleName) => {
       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") {
+    try {
+      sections = slashMenuConfig.menuProvider(context, sections) || sections;
+    } catch (error) {
+      console.warn("[SlashMenu] Error in custom menuProvider:", error);
+    }
+  }
+  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, 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 = [
@@ -3690,12 +3888,13 @@ function getItems(context) {
       ]
     }
   ];
-  const filteredSections = sections.map((section) => {
+  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(trigger)) return false;
-      if (item.requiresClipboard && !clipboardContent) 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;
@@ -3705,7 +3904,8 @@ function getItems(context) {
       items: filteredItems
     };
   }).filter((section) => section.items.length > 0);
-  return filteredSections;
+  const finalSections = filterCustomItems(filteredSections, context);
+  return finalSections;
 }
 const _hoisted_1$3 = { class: "slash-menu-items" };
 const _hoisted_2$1 = {
@@ -3740,6 +3940,7 @@ const _sfc_main$4 = {
     const menuRef = ref(null);
     const sections = ref([]);
     const selectedId = ref(null);
+    const currentContext = ref(null);
     const handleEditorUpdate = () => {
       if (!props.editor?.isEditable && isOpen.value) {
         closeMenu({ restoreCursor: false });
@@ -3785,6 +3986,44 @@ const _sfc_main$4 = {
         selectedId.value = newItems[0].id;
       }
     });
+    const customItemRefs = /* @__PURE__ */ new Map();
+    const setCustomItemRef = (el, item) => {
+      if (el && item.render) {
+        customItemRefs.set(item.id, { element: el, item });
+        nextTick(() => {
+          renderCustomItem(item.id);
+        });
+      }
+    };
+    const renderCustomItem = async (itemId) => {
+      const refData = customItemRefs.get(itemId);
+      if (!refData || refData.element.hasCustomContent) return;
+      const { element, item } = refData;
+      try {
+        if (!currentContext.value) {
+          currentContext.value = await getEditorContext(props.editor);
+        }
+        const context = currentContext.value;
+        const customElement = item.render(context);
+        if (customElement instanceof HTMLElement) {
+          element.innerHTML = "";
+          element.appendChild(customElement);
+          element.hasCustomContent = true;
+        }
+      } catch (error) {
+        console.warn(`[SlashMenu] Error rendering custom item ${itemId}:`, error);
+        element.innerHTML = `<span>${item.label || "Custom Item"}</span>`;
+        element.hasCustomContent = true;
+      }
+    };
+    const cleanupCustomItems = () => {
+      customItemRefs.forEach((refData) => {
+        if (refData.element) {
+          refData.element.hasCustomContent = false;
+        }
+      });
+      customItemRefs.clear();
+    };
     const handleGlobalKeyDown = (event) => {
       if (event.key === "Escape") {
         event.preventDefault();
@@ -3830,27 +4069,27 @@ const _sfc_main$4 = {
     };
     const handleRightClick = async (event) => {
       const readOnly = !props.editor?.isEditable;
-      const isHoldingCtrl = event.ctrlKey;
-      if (readOnly || isHoldingCtrl) {
+      if (readOnly || shouldBypassContextMenu(event)) {
         return;
       }
       event.preventDefault();
+      const context = await getEditorContext(props.editor, event);
+      currentContext.value = context;
+      sections.value = getItems({ ...context, trigger: "click" });
+      selectedId.value = flattenedItems.value[0]?.id || null;
+      searchQuery.value = "";
       props.editor.view.dispatch(
         props.editor.view.state.tr.setMeta(SlashMenuPluginKey, {
           type: "open",
-          pos: props.editor.view.state.selection.from,
+          pos: context?.pos ?? props.editor.view.state.selection.from,
           clientX: event.clientX,
           clientY: event.clientY
         })
       );
-      searchQuery.value = "";
-      const context = await getEditorContext(props.editor, event);
-      sections.value = getItems({ ...context, trigger: "click" });
-      selectedId.value = flattenedItems.value[0]?.id || null;
     };
     const executeCommand = async (item) => {
       if (props.editor) {
-        item.action ? await item.action(props.editor) : null;
+        item.action ? await item.action(props.editor, currentContext.value) : null;
         if (item.component) {
           menuRef.value;
           const componentProps = getPropsByItemId(item.id, props);
@@ -3868,7 +4107,7 @@ const _sfc_main$4 = {
     const closeMenu = (options = { restoreCursor: true }) => {
       if (props.editor?.view) {
         const pluginState = SlashMenuPluginKey.getState(props.editor.view.state);
-        const { anchorPos } = pluginState;
+        const anchorPos = pluginState?.anchorPos;
         props.editor.view.dispatch(
           props.editor.view.state.tr.setMeta(SlashMenuPluginKey, {
             type: "close"
@@ -3881,6 +4120,8 @@ const _sfc_main$4 = {
           props.editor.view.dispatch(tr);
           props.editor.view.focus();
         }
+        cleanupCustomItems();
+        currentContext.value = null;
         isOpen.value = false;
         searchQuery.value = "";
         sections.value = [];
@@ -3897,19 +4138,29 @@ const _sfc_main$4 = {
         isOpen.value = true;
         menuPosition.value = event.menuPosition;
         searchQuery.value = "";
-        const context = await getEditorContext(props.editor);
-        sections.value = getItems({ ...context, trigger: "slash" });
-        selectedId.value = flattenedItems.value[0]?.id || null;
+        if (!currentContext.value) {
+          const context = await getEditorContext(props.editor);
+          currentContext.value = context;
+          sections.value = getItems({ ...context, trigger: "slash" });
+          selectedId.value = flattenedItems.value[0]?.id || null;
+        } else if (sections.value.length === 0) {
+          const trigger = currentContext.value.event?.type === "contextmenu" ? "click" : "slash";
+          sections.value = getItems({ ...currentContext.value, trigger });
+          selectedId.value = flattenedItems.value[0]?.id || null;
+        }
       });
       props.editor.view.dom.addEventListener("contextmenu", handleRightClick);
       props.editor.on("slashMenu:close", () => {
+        cleanupCustomItems();
         isOpen.value = false;
         searchQuery.value = "";
+        currentContext.value = null;
       });
     });
     onBeforeUnmount(() => {
       document.removeEventListener("keydown", handleGlobalKeyDown);
       document.removeEventListener("mousedown", handleGlobalOutsideClick);
+      cleanupCustomItems();
       if (props.editor) {
         try {
           props.editor.off("slashMenu:open");
@@ -3956,12 +4207,19 @@ const _sfc_main$4 = {
                   class: normalizeClass(["slash-menu-item", { "is-selected": item.id === selectedId.value }]),
                   onClick: ($event) => executeCommand(item)
                 }, [
-                  item.icon ? (openBlock(), createElementBlock("span", {
+                  item.render ? (openBlock(), createElementBlock("div", {
                     key: 0,
-                    class: "slash-menu-item-icon",
-                    innerHTML: item.icon
-                  }, null, 8, _hoisted_4)) : createCommentVNode("", true),
-                  createElementVNode("span", null, toDisplayString(item.label), 1)
+                    ref_for: true,
+                    ref: (el) => setCustomItemRef(el, item),
+                    class: "slash-menu-custom-item"
+                  }, null, 512)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                    item.icon ? (openBlock(), createElementBlock("span", {
+                      key: 0,
+                      class: "slash-menu-item-icon",
+                      innerHTML: item.icon
+                    }, null, 8, _hoisted_4)) : createCommentVNode("", true),
+                    createElementVNode("span", null, toDisplayString(item.label), 1)
+                  ], 64))
                 ], 10, _hoisted_3$1);
               }), 128))
             ], 64);
@@ -4656,34 +4914,76 @@ const _sfc_main = {
   }
 };
 const SuperInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-4d5cff52"]]);
+const additionalHandlers = Object.freeze({
+  "mc:AlternateContent": translator$10,
+  "w:b": translator$$,
+  "w:bidiVisual": translator$_,
+  "w:bookmarkEnd": translator$Z,
+  "w:bookmarkStart": translator$Y,
+  "w:bottom": translator$X,
+  "w:br": translator$W,
+  "w:cantSplit": translator$V,
+  "w:cnfStyle": translator$U,
+  "w:color": translator$T,
+  "w:divId": translator$S,
+  "w:drawing": translator$R,
+  "w:end": translator$Q,
+  "w:gridAfter": translator$P,
+  "w:gridBefore": translator$O,
+  "w:gridCol": translator$N,
+  "w:hidden": translator$M,
+  "w:highlight": translator$L,
+  "w:hyperlink": translator$K,
+  "w:i": translator$J,
+  "w:insideH": translator$I,
+  "w:insideV": translator$H,
+  "w:jc": translator$G,
+  "w:left": translator$F,
+  "w:p": translator$E,
+  "w:r": translator$D,
+  "w:rFonts": translator$C,
+  "w:rPr": translator$B,
+  "w:rStyle": translator$A,
+  "w:right": translator$z,
+  "w:sdt": translator$y,
+  "w:shd": translator$x,
+  "w:start": translator$w,
+  "w:strike": translator$v,
+  "w:sz": translator$u,
+  "w:szCs": translator$t,
+  "w:tab": translator$s,
+  "w:tbl": translator$r,
+  "w:tblBorders": translator$q,
+  "w:tblCaption": translator$p,
+  "w:tblCellMar": translator$o,
+  "w:tblCellSpacing": translator$n,
+  "w:tblDescription": translator$m,
+  "w:tblGrid": translator$l,
+  "w:tblHeader": translator$k,
+  "w:tblInd": translator$j,
+  "w:tblLayout": translator$i,
+  "w:tblLook": translator$h,
+  "w:tblOverlap": translator$g,
+  "w:tblPr": translator$f,
+  "w:tblStyle": translator$e,
+  "w:tblStyleColBandSize": translator$d,
+  "w:tblStyleRowBandSize": translator$c,
+  "w:tblW": translator$b,
+  "w:tblpPr": translator$a,
+  "w:tc": translator$9,
+  "w:top": translator$8,
+  "w:tr": translator$7,
+  "w:trHeight": translator$6,
+  "w:trPr": translator$5,
+  "w:u": translator$4,
+  "w:wAfter": translator$3,
+  "w:wBefore": translator$2,
+  "wp:anchor": translator$1,
+  "wp:inline": translator
+});
 const baseHandlers = {
   ...runPropertyTranslators,
-  "w:br": translator$p,
-  "w:cantSplit": translator$o,
-  "w:cnfStyle": translator$n,
-  "w:divId": translator$m,
-  "w:gridAfter": translator$l,
-  "w:gridBefore": translator$k,
-  "w:hidden": translator$j,
-  "w:hyperlink": translator$i,
-  "w:jc": translator$h,
-  "w:p": translator$g,
-  "w:r": translator$f,
-  "w:rPr": translator$e,
-  "w:sdt": translator$d,
-  "w:tab": translator$c,
-  "w:tblCellSpacing": translator$b,
-  "w:tblHeader": translator$a,
-  "w:tc": translator$9,
-  "w:tr": translator$8,
-  "w:trHeight": translator$7,
-  "w:trPr": translator$6,
-  "w:wAfter": translator$5,
-  "w:wBefore": translator$4,
-  "wp:anchor": translator$3,
-  "wp:inline": translator$2,
-  "w:bookmarkStart": translator$1,
-  "w:bookmarkEnd": translator
+  ...additionalHandlers
 };
 const registeredHandlers = Object.freeze(baseHandlers);
 const Extensions = {
@@ -4696,7 +4996,7 @@ const Extensions = {
 export {
   AIWriter,
   n as AnnotatorHelpers,
-  b2 as BasicUpload,
+  bF as BasicUpload,
   C as CommentsPluginKey,
   D as DocxZipper,
   Editor,