@harbour-enterprises/superdoc 0.14.0-next.2 → 0.14.0-next.21

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 { ab as getDefaultExportFromCjs, J as v4, ae as vClickOutside, T as TextSelection, a as Plugin } from "./chunks/converter-2R-ZXcMD.js";
-import { X } from "./chunks/converter-2R-ZXcMD.js";
-import { _ as _export_sfc, u as useHighContrastMode, a as getQuickFormatList, b as generateLinkedStyleString, f as findParentNode, c as getFileOpener, s as startImageUpload, d as getActiveFormatting, i as isInTable, e as undoDepth, r as redoDepth, E as Editor, h as getStarterExtensions, P as Placeholder, j as getRichTextExtensions, M as Mark, k as Extension, A as Attribute, N as Node } from "./chunks/editor-DYjOoB1N.js";
-import { o, C, T, m, q, p, l, n } from "./chunks/editor-DYjOoB1N.js";
-import { ref, onMounted, createElementBlock, openBlock, normalizeClass, unref, Fragment, renderList, createElementVNode, withModifiers, getCurrentInstance, computed, watch, createCommentVNode, withDirectives, withKeys, vModelText, createTextVNode, toDisplayString, normalizeStyle, createVNode, h, createApp, reactive, onUnmounted, shallowRef, onBeforeUnmount, createBlock } from "vue";
-import { t as toolbarIcons, s as sanitizeNumber, T as Toolbar, N as NSkeleton } from "./chunks/toolbar-WyGfV3qj.js";
+import { ab as getDefaultExportFromCjs, J as v4, ae as vClickOutside, af as readFromClipboard, T as TextSelection, ag as serializeSelectionToClipboard, ah as writeToClipboard, a as Plugin } from "./chunks/converter-BnCzxu5M.js";
+import { X } from "./chunks/converter-BnCzxu5M.js";
+import { _ as _export_sfc, u as useHighContrastMode, a as getQuickFormatList, b as generateLinkedStyleString, f as findParentNode, c as getFileOpener, s as startImageUpload, d as getActiveFormatting, i as isInTable, e as undoDepth, r as redoDepth, S as SlashMenuPluginKey, E as Editor, h as getStarterExtensions, P as Placeholder, j as getRichTextExtensions, M as Mark, k as Extension, A as Attribute, N as Node } from "./chunks/editor-DD4MGOZb.js";
+import { o, C, T, m, q, p, l, n } from "./chunks/editor-DD4MGOZb.js";
+import { ref, onMounted, createElementBlock, openBlock, normalizeClass, unref, Fragment, renderList, createElementVNode, withModifiers, toDisplayString, createCommentVNode, normalizeStyle, computed, createTextVNode, createVNode, h, withDirectives, withKeys, vModelText, createApp, markRaw, watch, 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, l as linkIconSvg, a as tableIconSvg, b as scissorsIconSvg, c as copyIconSvg, p as pasteIconSvg, N as NSkeleton } from "./chunks/toolbar-BCtZctWE.js";
 import AIWriter from "./ai-writer.es.js";
-import { D } from "./chunks/docx-zipper-D1Hg-x9a.js";
+import { D } from "./chunks/docx-zipper-BPw_B6hI.js";
 import { createZip } from "./file-zipper.es.js";
 var eventemitter3 = { exports: {} };
 (function(module) {
@@ -177,28 +177,6 @@ var eventemitter3 = { exports: {} };
 })(eventemitter3);
 var eventemitter3Exports = eventemitter3.exports;
 const EventEmitter = /* @__PURE__ */ getDefaultExportFromCjs(eventemitter3Exports);
-function getScrollableParent(element) {
-  let currentElement = element;
-  while (currentElement) {
-    const overflowY = window.getComputedStyle(currentElement).overflowY;
-    if (/(auto|scroll)/.test(overflowY) && currentElement.scrollHeight > currentElement.clientHeight) {
-      return currentElement;
-    }
-    currentElement = currentElement.parentElement;
-  }
-  return document.scrollingElement || document.documentElement;
-}
-function scrollToElement(targetElement, options = { behavior: "smooth", block: "start" }) {
-  if (!targetElement) return;
-  const container = getScrollableParent(targetElement);
-  const containerRect = container.getBoundingClientRect();
-  const targetRect = targetElement.getBoundingClientRect();
-  const offsetTop = targetRect.top - containerRect.top + container.scrollTop;
-  container.scrollTo({
-    top: options.block === "start" ? offsetTop : offsetTop - container.clientHeight + targetElement.offsetHeight,
-    behavior: options.behavior
-  });
-}
 const useToolbarItem = (options) => {
   const types = ["button", "options", "separator", "dropdown", "overflow"];
   if (!types.includes(options.type)) {
@@ -327,8 +305,8 @@ const useToolbarItem = (options) => {
     onDeactivate
   };
 };
-const _hoisted_1$b = ["onClick", "innerHTML", "aria-label", "onKeydown"];
-const _sfc_main$c = {
+const _hoisted_1$c = ["onClick", "innerHTML", "aria-label", "onKeydown"];
+const _sfc_main$e = {
   __name: "AlignmentButtons",
   emits: ["select"],
   setup(__props, { emit: __emit }) {
@@ -413,183 +391,20 @@ const _sfc_main$c = {
             ref_key: "alignmentButtonsRefs",
             ref: alignmentButtonsRefs,
             onKeydown: withModifiers((event) => handleKeyDown(event, index), ["prevent"])
-          }, null, 40, _hoisted_1$b);
+          }, null, 40, _hoisted_1$c);
         }), 64))
       ], 2);
     };
   }
 };
-const AlignmentButtons = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["__scopeId", "data-v-3f28435a"]]);
-const _hoisted_1$a = {
-  key: 0,
-  class: "link-title"
-};
-const _hoisted_2$8 = {
-  key: 1,
-  class: "link-title"
-};
-const _hoisted_3$6 = {
-  key: 2,
-  class: "link-title"
-};
-const _hoisted_4$2 = { key: 3 };
-const _hoisted_5$2 = { class: "input-row" };
-const _hoisted_6$1 = ["innerHTML"];
-const _hoisted_7 = ["onKeydown"];
-const _hoisted_8 = ["innerHTML"];
-const _hoisted_9 = { class: "input-row link-buttons" };
-const _hoisted_10 = ["innerHTML"];
-const _hoisted_11 = {
-  key: 4,
-  class: "input-row go-to-anchor clickable"
-};
-const _sfc_main$b = {
-  __name: "LinkInput",
-  props: {
-    initialText: {
-      type: String,
-      default: ""
-    },
-    href: {
-      type: String,
-      default: ""
-    },
-    showInput: {
-      type: Boolean,
-      default: true
-    },
-    showLink: {
-      type: Boolean,
-      default: true
-    },
-    goToAnchor: {
-      type: Function,
-      default: () => {
-      }
-    }
-  },
-  emits: ["submit", "cancel"],
-  setup(__props, { emit: __emit }) {
-    const emit = __emit;
-    const props = __props;
-    const { isHighContrastMode } = useHighContrastMode();
-    const { proxy } = getCurrentInstance();
-    const handleSubmit = () => {
-      if (proxy?.$submit instanceof Function) proxy.$submit();
-      if (rawUrl.value && validUrl.value) {
-        emit("submit", { text: text.value, href: url.value });
-        return;
-      } else if (!rawUrl.value) {
-        emit("submit", { text: text.value, href: null });
-        return;
-      }
-      console.debug("[LinkInput] Invalid URL in handleSubmit");
-      urlError.value = true;
-    };
-    const handleRemove = () => {
-      emit("submit", { text: text.value, href: null });
-    };
-    const urlError = ref(false);
-    const text = ref(props.initialText);
-    const rawUrl = ref(props.href);
-    const url = computed(() => {
-      if (!rawUrl.value?.startsWith("http")) return "http://" + rawUrl.value;
-      return rawUrl.value;
-    });
-    const validUrl = computed(() => {
-      const urlSplit = url.value.split(".").filter(Boolean);
-      return url.value.includes(".") && urlSplit.length > 1;
-    });
-    const getApplyText = computed(() => showApply.value ? "Apply" : "Remove");
-    const isDisabled = computed(() => !validUrl.value);
-    const showApply = computed(() => !showRemove.value);
-    const showRemove = computed(() => props.href && !rawUrl.value);
-    const isAnchor = computed(() => props.href.startsWith("#"));
-    const openLink = () => {
-      window.open(url.value, "_blank");
-    };
-    watch(
-      () => props.href,
-      (newVal) => {
-        rawUrl.value = newVal;
-      }
-    );
-    const focusInput = () => {
-      const input = document.querySelector(".link-input-ctn input");
-      if (!input) return;
-      input.focus();
-    };
-    onMounted(() => {
-      if (props.showInput) focusInput();
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["link-input-ctn", { "high-contrast": unref(isHighContrastMode) }])
-      }, [
-        !__props.href ? (openBlock(), createElementBlock("div", _hoisted_1$a, "Add link")) : isAnchor.value ? (openBlock(), createElementBlock("div", _hoisted_2$8, "Page anchor")) : (openBlock(), createElementBlock("div", _hoisted_3$6, "Edit link")),
-        __props.showInput && !isAnchor.value ? (openBlock(), createElementBlock("div", _hoisted_4$2, [
-          createElementVNode("div", _hoisted_5$2, [
-            createElementVNode("div", {
-              class: "input-icon",
-              innerHTML: unref(toolbarIcons).linkInput
-            }, null, 8, _hoisted_6$1),
-            withDirectives(createElementVNode("input", {
-              type: "text",
-              name: "link",
-              placeholder: "Type or paste a link",
-              class: normalizeClass({ error: urlError.value }),
-              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => rawUrl.value = $event),
-              onKeydown: [
-                withKeys(withModifiers(handleSubmit, ["stop", "prevent"]), ["enter"]),
-                _cache[1] || (_cache[1] = ($event) => urlError.value = false)
-              ]
-            }, null, 42, _hoisted_7), [
-              [vModelText, rawUrl.value]
-            ]),
-            createElementVNode("div", {
-              class: normalizeClass(["open-link-icon", { disabled: !validUrl.value }]),
-              innerHTML: unref(toolbarIcons).openLink,
-              onClick: openLink,
-              "data-item": "btn-link-open"
-            }, null, 10, _hoisted_8)
-          ]),
-          createElementVNode("div", _hoisted_9, [
-            __props.href ? (openBlock(), createElementBlock("button", {
-              key: 0,
-              class: "remove-btn",
-              onClick: handleRemove,
-              "data-item": "btn-link-remove"
-            }, [
-              createElementVNode("div", {
-                class: "remove-btn__icon",
-                innerHTML: unref(toolbarIcons).removeLink
-              }, null, 8, _hoisted_10),
-              _cache[3] || (_cache[3] = createTextVNode(" Remove "))
-            ])) : createCommentVNode("", true),
-            showApply.value ? (openBlock(), createElementBlock("button", {
-              key: 1,
-              class: normalizeClass(["submit-btn", { "disable-btn": isDisabled.value }]),
-              onClick: handleSubmit,
-              "data-item": "btn-link-apply"
-            }, toDisplayString(getApplyText.value), 3)) : createCommentVNode("", true)
-          ])
-        ])) : isAnchor.value ? (openBlock(), createElementBlock("div", _hoisted_11, [
-          createElementVNode("a", {
-            onClick: _cache[2] || (_cache[2] = withModifiers((...args) => __props.goToAnchor && __props.goToAnchor(...args), ["stop", "prevent"]))
-          }, "Go to " + toDisplayString(__props.href.startsWith("#_") ? __props.href.substring(2) : __props.href), 1)
-        ])) : createCommentVNode("", true)
-      ], 2);
-    };
-  }
-};
-const LinkInput = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-64aa14bc"]]);
-const _hoisted_1$9 = ["onClick", "onKeydown"];
-const _hoisted_2$7 = { class: "document-mode-column icon-column" };
-const _hoisted_3$5 = ["innerHTML"];
-const _hoisted_4$1 = { class: "document-mode-column text-column" };
-const _hoisted_5$1 = { class: "document-mode-type" };
-const _hoisted_6 = { class: "document-mode-description" };
-const _sfc_main$a = {
+const AlignmentButtons = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["__scopeId", "data-v-3f28435a"]]);
+const _hoisted_1$b = ["onClick", "onKeydown"];
+const _hoisted_2$9 = { class: "document-mode-column icon-column" };
+const _hoisted_3$7 = ["innerHTML"];
+const _hoisted_4$3 = { class: "document-mode-column text-column" };
+const _hoisted_5$2 = { class: "document-mode-type" };
+const _hoisted_6$1 = { class: "document-mode-description" };
+const _sfc_main$d = {
   __name: "DocumentMode",
   props: {
     options: {
@@ -653,29 +468,29 @@ const _sfc_main$a = {
             ref: documentModeRefs,
             onKeydown: withModifiers((event) => handleKeyDown(event, index), ["prevent"])
           }, [
-            createElementVNode("div", _hoisted_2$7, [
+            createElementVNode("div", _hoisted_2$9, [
               createElementVNode("div", {
                 class: "icon-column__icon",
                 innerHTML: option.icon
-              }, null, 8, _hoisted_3$5)
+              }, null, 8, _hoisted_3$7)
             ]),
-            createElementVNode("div", _hoisted_4$1, [
-              createElementVNode("div", _hoisted_5$1, toDisplayString(option.label), 1),
-              createElementVNode("div", _hoisted_6, toDisplayString(option.description), 1)
+            createElementVNode("div", _hoisted_4$3, [
+              createElementVNode("div", _hoisted_5$2, toDisplayString(option.label), 1),
+              createElementVNode("div", _hoisted_6$1, toDisplayString(option.description), 1)
             ])
-          ], 42, _hoisted_1$9);
+          ], 42, _hoisted_1$b);
         }), 256))
       ], 2);
     };
   }
 };
-const DocumentMode = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__scopeId", "data-v-7febe4d9"]]);
-const _hoisted_1$8 = {
+const DocumentMode = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["__scopeId", "data-v-7febe4d9"]]);
+const _hoisted_1$a = {
   key: 0,
   class: "linked-style-buttons"
 };
-const _hoisted_2$6 = ["onClick", "onKeydown"];
-const _sfc_main$9 = {
+const _hoisted_2$8 = ["onClick", "onKeydown"];
+const _sfc_main$c = {
   __name: "LinkedStyle",
   props: {
     editor: {
@@ -729,7 +544,7 @@ const _sfc_main$9 = {
       styleRefs.value[0].focus();
     });
     return (_ctx, _cache) => {
-      return props.editor ? (openBlock(), createElementBlock("div", _hoisted_1$8, [
+      return props.editor ? (openBlock(), createElementBlock("div", _hoisted_1$a, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(unref(getQuickFormatList)(__props.editor), (style, index) => {
           return openBlock(), createElementBlock("div", {
             class: normalizeClass(["style-item", { "selected": __props.selectedOption === style.id }]),
@@ -744,18 +559,18 @@ const _sfc_main$9 = {
               style: normalizeStyle(unref(generateLinkedStyleString)(style, null, false)),
               "data-item": "btn-linkedStyles-option"
             }, toDisplayString(style.definition.attrs.name), 5)
-          ], 42, _hoisted_2$6);
+          ], 42, _hoisted_2$8);
         }), 256))
       ])) : createCommentVNode("", true);
     };
   }
 };
-const LinkedStyle = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-2cf079a2"]]);
-const _hoisted_1$7 = ["aria-label", "onClick", "onKeydown"];
-const _hoisted_2$5 = ["innerHTML"];
-const _hoisted_3$4 = ["innerHTML"];
+const LinkedStyle = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["__scopeId", "data-v-2cf079a2"]]);
+const _hoisted_1$9 = ["aria-label", "onClick", "onKeydown"];
+const _hoisted_2$7 = ["innerHTML"];
+const _hoisted_3$6 = ["innerHTML"];
 const ROW_SIZE$1 = 7;
-const _sfc_main$8 = {
+const _sfc_main$b = {
   __name: "IconGridRow",
   props: {
     icons: {
@@ -874,26 +689,26 @@ const _sfc_main$8 = {
                 class: "option__icon",
                 innerHTML: option.icon,
                 style: normalizeStyle(option.style)
-              }, null, 12, _hoisted_2$5),
+              }, null, 12, _hoisted_2$7),
               isActive.value(option) ? (openBlock(), createElementBlock("div", {
                 key: 0,
                 class: "option__check",
                 innerHTML: unref(toolbarIcons).colorOptionCheck,
                 style: normalizeStyle(getCheckStyle(option.value, optionIndex))
-              }, null, 12, _hoisted_3$4)) : createCommentVNode("", true)
-            ], 40, _hoisted_1$7);
+              }, null, 12, _hoisted_3$6)) : createCommentVNode("", true)
+            ], 40, _hoisted_1$9);
           }), 128))
         ]);
       }), 128);
     };
   }
 };
-const IconGridRow = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__scopeId", "data-v-e89b7f5f"]]);
+const IconGridRow = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-e89b7f5f"]]);
 const DropIcon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M320 512c53.2 0 101.4-21.6 136.1-56.6l-298.3-235C140 257.1 128 292.3 128 320c0 106 86 192 192 192zM505.2 370.7c4.4-16.2 6.8-33.1 6.8-50.7c0-91.2-130.2-262.3-166.6-308.3C339.4 4.2 330.5 0 320.9 0l-1.8 0c-9.6 0-18.5 4.2-24.5 11.7C277.8 33 240.7 81.3 205.8 136L38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L505.2 370.7zM224 336c0 44.2 35.8 80 80 80c8.8 0 16 7.2 16 16s-7.2 16-16 16c-61.9 0-112-50.1-112-112c0-8.8 7.2-16 16-16s16 7.2 16 16z"/></svg>\n';
-const _hoisted_1$6 = { class: "options-grid-wrap" };
-const _hoisted_2$4 = ["innerHTML"];
-const _hoisted_3$3 = { class: "option-grid-ctn" };
-const _sfc_main$7 = {
+const _hoisted_1$8 = { class: "options-grid-wrap" };
+const _hoisted_2$6 = ["innerHTML"];
+const _hoisted_3$5 = { class: "option-grid-ctn" };
+const _sfc_main$a = {
   __name: "IconGrid",
   props: {
     icons: {
@@ -920,7 +735,7 @@ const _sfc_main$7 = {
       emit("select", option);
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$6, [
+      return openBlock(), createElementBlock("div", _hoisted_1$8, [
         __props.hasNoneIcon ? (openBlock(), createElementBlock("div", {
           key: 0,
           class: "none-option",
@@ -931,10 +746,10 @@ const _sfc_main$7 = {
           createElementVNode("span", {
             innerHTML: unref(DropIcon),
             class: "none-icon"
-          }, null, 8, _hoisted_2$4),
+          }, null, 8, _hoisted_2$6),
           _cache[1] || (_cache[1] = createTextVNode(" None "))
         ])) : createCommentVNode("", true),
-        createElementVNode("div", _hoisted_3$3, [
+        createElementVNode("div", _hoisted_3$5, [
           createVNode(IconGridRow, {
             icons: __props.icons,
             "active-color": __props.activeColor,
@@ -953,7 +768,7 @@ const _sfc_main$7 = {
     };
   }
 };
-const IconGrid = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__scopeId", "data-v-a00a9a3e"]]);
+const IconGrid = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__scopeId", "data-v-a00a9a3e"]]);
 const closeDropdown$1 = (dropdown) => {
   dropdown.expand.value = false;
 };
@@ -1062,10 +877,10 @@ const icons = [
 const getAvailableColorOptions = () => {
   return icons.flat().map((item) => item.value);
 };
-const _hoisted_1$5 = ["data-cols", "data-rows", "onKeydown", "onClick"];
-const _hoisted_2$3 = ["aria-valuetext"];
+const _hoisted_1$7 = ["data-cols", "data-rows", "onKeydown", "onClick"];
+const _hoisted_2$5 = ["aria-valuetext"];
 const ROW_SIZE = 5;
-const _sfc_main$6 = {
+const _sfc_main$9 = {
   __name: "TableGrid",
   emits: ["select", "clickoutside"],
   setup(__props, { emit: __emit }) {
@@ -1181,7 +996,7 @@ const _sfc_main$6 = {
                   ref: tableGridItems,
                   onKeydown: withModifiers((event) => handleKeyDown(event, n2, i), ["prevent"]),
                   onClick: withModifiers(($event) => handleClick({ cols: n2, rows: i }), ["stop", "prevent"])
-                }, null, 40, _hoisted_1$5);
+                }, null, 40, _hoisted_1$7);
               }), 64))
             ], 64);
           }), 64))
@@ -1189,59 +1004,17 @@ const _sfc_main$6 = {
         createElementVNode("div", {
           class: "toolbar-table-grid-value",
           "aria-valuetext": `${selectedRows.value} x ${selectedCols.value}`
-        }, toDisplayString(selectedRows.value) + " x " + toDisplayString(selectedCols.value), 9, _hoisted_2$3)
+        }, toDisplayString(selectedRows.value) + " x " + toDisplayString(selectedCols.value), 9, _hoisted_2$5)
       ], 2);
     };
   }
 };
-const TableGrid = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-3e1154b8"]]);
-const _hoisted_1$4 = { class: "toolbar-table-actions" };
-const _hoisted_2$2 = ["onClick", "data-item", "ariaLabel"];
-const _hoisted_3$2 = { class: "toolbar-table-actions__icon" };
-const _hoisted_4 = ["innerHTML"];
-const _hoisted_5 = { class: "toolbar-table-actions__label" };
-const _sfc_main$5 = {
-  __name: "TableActions",
-  props: {
-    options: {
-      type: Array
-    }
-  },
-  emits: ["select"],
-  setup(__props, { emit: __emit }) {
-    const emit = __emit;
-    const handleClick = (item) => {
-      emit("select", { command: item.command });
-    };
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$4, [
-        (openBlock(true), createElementBlock(Fragment, null, renderList(__props.options, (option) => {
-          return openBlock(), createElementBlock("div", {
-            class: normalizeClass(["toolbar-table-actions__item", { "toolbar-table-actions__item--border": option.bottomBorder }]),
-            onClick: ($event) => handleClick(option),
-            "data-item": option.props?.["data-item"] || "",
-            ariaLabel: option.props?.ariaLabel,
-            role: "menuitem"
-          }, [
-            createElementVNode("div", _hoisted_3$2, [
-              createElementVNode("div", {
-                class: "toolbar-table-actions__icon-wrapper",
-                innerHTML: option.icon
-              }, null, 8, _hoisted_4)
-            ]),
-            createElementVNode("div", _hoisted_5, toDisplayString(option.label), 1)
-          ], 10, _hoisted_2$2);
-        }), 256))
-      ]);
-    };
-  }
-};
-const TableActions = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-f82e859a"]]);
+const TableGrid = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-3e1154b8"]]);
 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>\n';
-const _hoisted_1$3 = { class: "search-input-ctn" };
-const _hoisted_2$1 = { class: "row" };
-const _hoisted_3$1 = ["onKeydown"];
-const _sfc_main$4 = {
+const _hoisted_1$6 = { class: "search-input-ctn" };
+const _hoisted_2$4 = { class: "row" };
+const _hoisted_3$4 = ["onKeydown"];
+const _sfc_main$8 = {
   __name: "SearchInput",
   props: {
     searchRef: {
@@ -1256,8 +1029,8 @@ const _sfc_main$4 = {
       emit("submit", { value: searchValue.value });
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$3, [
-        createElementVNode("div", _hoisted_2$1, [
+      return openBlock(), createElementBlock("div", _hoisted_1$6, [
+        createElementVNode("div", _hoisted_2$4, [
           withDirectives(createElementVNode("input", {
             ref: __props.searchRef,
             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => searchValue.value = $event),
@@ -1266,7 +1039,7 @@ const _sfc_main$4 = {
             name: "search",
             placeholder: "Type search string",
             onKeydown: withKeys(withModifiers(handleSubmit, ["stop", "prevent"]), ["enter"])
-          }, null, 40, _hoisted_3$1), [
+          }, null, 40, _hoisted_3$4), [
             [vModelText, searchValue.value]
           ])
         ]),
@@ -1280,7 +1053,7 @@ const _sfc_main$4 = {
     };
   }
 };
-const SearchInput = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-af870fbd"]]);
+const SearchInput = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__scopeId", "data-v-af870fbd"]]);
 const TOOLBAR_FONTS = [
   {
     label: "Georgia",
@@ -1423,7 +1196,7 @@ const makeDefaultItems = ({
     labelAttr: "fontSize",
     tooltip: toolbarTexts2.fontSize,
     hasCaret: true,
-    hasInlineTextInput: false,
+    hasInlineTextInput: true,
     inlineTextInputVisible: true,
     suppressActiveHighlight: true,
     isWide: true,
@@ -1562,62 +1335,6 @@ const makeDefaultItems = ({
       })
     ]);
   };
-  const link = useToolbarItem({
-    type: "dropdown",
-    name: "link",
-    markName: "link",
-    icon: toolbarIcons2.link,
-    tooltip: toolbarTexts2.link,
-    attributes: {
-      ariaLabel: "Link dropdown"
-    },
-    options: [
-      {
-        type: "render",
-        key: "linkDropdown",
-        render: () => renderLinkDropdown(link)
-      }
-    ],
-    onActivate: ({ href }) => {
-      if (href) link.attributes.value = { href };
-      else link.attributes.value = {};
-      link.expand.value = true;
-    },
-    onDeactivate: () => {
-      link.attributes.value = {};
-      link.expand.value = false;
-    }
-  });
-  function renderLinkDropdown(link2) {
-    const handleSubmit = ({ href }) => {
-      closeDropdown(link2);
-      link2.attributes.value.link = { href };
-      const itemWithCommand = { ...link2, command: "toggleLink" };
-      superToolbar.emitCommand({ item: itemWithCommand, argument: { href, text: "" } });
-      if (!href) link2.active.value = false;
-    };
-    return h("div", {}, [
-      h(LinkInput, {
-        onSubmit: handleSubmit,
-        href: link2.attributes.value.href,
-        goToAnchor: () => {
-          closeDropdown(link2);
-          if (!superToolbar.activeEditor || !link2.attributes.value?.href) return;
-          const anchorName = link2.attributes.value?.href?.slice(1);
-          const container = superToolbar.activeEditor.element;
-          const anchor = container.querySelector(`a[name='${anchorName}']`);
-          if (anchor) scrollToElement(anchor);
-        }
-      })
-    ]);
-  }
-  const linkInput = useToolbarItem({
-    type: "options",
-    name: "linkInput",
-    command: "toggleLink"
-  });
-  link.childItem = linkInput;
-  linkInput.parentItem = link;
   const image = useToolbarItem({
     type: "button",
     name: "image",
@@ -1660,171 +1377,41 @@ const makeDefaultItems = ({
       })
     ]);
   }
-  const tableActionsItem = useToolbarItem({
+  const alignment2 = useToolbarItem({
     type: "dropdown",
-    name: "tableActions",
-    command: "executeTableCommand",
-    icon: toolbarIcons2.tableActions,
-    hideLabel: true,
-    disabled: true,
+    name: "textAlign",
+    tooltip: toolbarTexts2.textAlign,
+    icon: toolbarIcons2.alignLeft,
+    command: "setTextAlign",
+    hasCaret: true,
+    markName: "textAlign",
+    labelAttr: "textAlign",
+    suppressActiveHighlight: true,
     attributes: {
-      ariaLabel: "Table actions"
+      ariaLabel: "Text align"
     },
     options: [
       {
         type: "render",
-        render: () => renderTableActions(tableActionsItem)
-      }
-    ]
-  });
-  const tableActionsOptions = [
-    {
-      label: toolbarTexts2.addRowBefore,
-      command: "addRowBefore",
-      icon: toolbarIcons2.addRowBefore,
-      props: {
-        "data-item": "btn-tableActions-option",
-        ariaLabel: "Add row before"
-      }
-    },
-    {
-      label: toolbarTexts2.addRowAfter,
-      command: "addRowAfter",
-      icon: toolbarIcons2.addRowAfter,
-      props: {
-        "data-item": "btn-tableActions-option",
-        ariaLabel: "Add row after"
-      }
-    },
-    {
-      label: toolbarTexts2.addColumnBefore,
-      command: "addColumnBefore",
-      icon: toolbarIcons2.addColumnBefore,
-      props: {
-        "data-item": "btn-tableActions-option",
-        ariaLabel: "Add column before"
+        render: () => {
+          const handleSelect = (e) => {
+            closeDropdown(alignment2);
+            const buttonWithCommand = { ...alignment2, command: "setTextAlign" };
+            buttonWithCommand.command = "setTextAlign";
+            superToolbar.emitCommand({ item: buttonWithCommand, argument: e });
+            setAlignmentIcon(alignment2, e);
+          };
+          return h("div", {}, [
+            h(AlignmentButtons, {
+              onSelect: handleSelect
+            })
+          ]);
+        },
+        key: "alignment"
       }
-    },
-    {
-      label: toolbarTexts2.addColumnAfter,
-      command: "addColumnAfter",
-      icon: toolbarIcons2.addColumnAfter,
-      bottomBorder: true,
-      props: {
-        "data-item": "btn-tableActions-option",
-        ariaLabel: "Add column after"
-      }
-    },
-    {
-      label: toolbarTexts2.deleteRow,
-      command: "deleteRow",
-      icon: toolbarIcons2.deleteRow,
-      props: {
-        "data-item": "btn-tableActions-option",
-        ariaLabel: "Delete row"
-      }
-    },
-    {
-      label: toolbarTexts2.deleteColumn,
-      command: "deleteColumn",
-      icon: toolbarIcons2.deleteColumn,
-      props: {
-        "data-item": "btn-tableActions-option",
-        ariaLabel: "Delete column"
-      }
-    },
-    {
-      label: toolbarTexts2.deleteTable,
-      command: "deleteTable",
-      icon: toolbarIcons2.deleteTable,
-      props: {
-        "data-item": "btn-tableActions-option",
-        ariaLabel: "Delete table"
-      }
-    },
-    {
-      label: toolbarTexts2.transparentBorders,
-      command: "deleteCellAndTableBorders",
-      icon: toolbarIcons2.deleteBorders,
-      bottomBorder: true,
-      props: {
-        "data-item": "btn-tableActions-option",
-        ariaLabel: "Delete cell and table borders"
-      }
-    },
-    {
-      label: toolbarTexts2.mergeCells,
-      command: "mergeCells",
-      icon: toolbarIcons2.mergeCells,
-      props: {
-        "data-item": "btn-tableActions-option",
-        ariaLabel: "Merge cells"
-      }
-    },
-    {
-      label: toolbarTexts2.splitCell,
-      command: "splitCell",
-      icon: toolbarIcons2.splitCell,
-      props: {
-        "data-item": "btn-tableActions-option",
-        ariaLabel: "Split cells"
-      }
-    },
-    {
-      label: toolbarTexts2.fixTables,
-      command: "fixTables",
-      icon: toolbarIcons2.fixTables,
-      props: {
-        "data-item": "btn-tableActions-option",
-        ariaLabel: "Fix tables"
-      }
-    }
-  ];
-  function renderTableActions(tableActionsItem2) {
-    return h(TableActions, {
-      options: tableActionsOptions,
-      onSelect: (event) => {
-        closeDropdown(tableActionsItem2);
-        const { command } = event;
-        superToolbar.emitCommand({ item: tableActionsItem2, argument: { command } });
-      }
-    });
-  }
-  const alignment2 = useToolbarItem({
-    type: "dropdown",
-    name: "textAlign",
-    tooltip: toolbarTexts2.textAlign,
-    icon: toolbarIcons2.alignLeft,
-    command: "setTextAlign",
-    hasCaret: true,
-    markName: "textAlign",
-    labelAttr: "textAlign",
-    suppressActiveHighlight: true,
-    attributes: {
-      ariaLabel: "Text align"
-    },
-    options: [
-      {
-        type: "render",
-        render: () => {
-          const handleSelect = (e) => {
-            closeDropdown(alignment2);
-            const buttonWithCommand = { ...alignment2, command: "setTextAlign" };
-            buttonWithCommand.command = "setTextAlign";
-            superToolbar.emitCommand({ item: buttonWithCommand, argument: e });
-            setAlignmentIcon(alignment2, e);
-          };
-          return h("div", {}, [
-            h(AlignmentButtons, {
-              onSelect: handleSelect
-            })
-          ]);
-        },
-        key: "alignment"
-      }
-    ],
-    onActivate: ({ textAlign }) => {
-      setAlignmentIcon(alignment2, textAlign);
+    ],
+    onActivate: ({ textAlign }) => {
+      setAlignmentIcon(alignment2, textAlign);
     },
     onDeactivate: () => {
       setAlignmentIcon(alignment2, "left");
@@ -2245,10 +1832,8 @@ const makeDefaultItems = ({
     colorButton,
     highlight,
     separator,
-    link,
     image,
     tableItem,
-    tableActionsItem,
     separator,
     alignment2,
     bulletedList,
@@ -2338,17 +1923,6 @@ const toolbarTexts = {
   link: "Link",
   image: "Image",
   table: "Insert table",
-  addRowBefore: "Insert row above",
-  addRowAfter: "Insert row below",
-  addColumnBefore: "Insert column left",
-  addColumnAfter: "Insert column right",
-  deleteRow: "Delete row",
-  deleteColumn: "Delete column",
-  deleteTable: "Delete table",
-  transparentBorders: "Transparent borders",
-  mergeCells: "Merge cells",
-  splitCell: "Split cell",
-  fixTables: "Fix tables",
   textAlign: "Alignment",
   bulletList: "Bullet list",
   numberedList: "Numbered list",
@@ -2603,35 +2177,6 @@ class SuperToolbar extends EventEmitter {
         }
         this.updateToolbarState();
       },
-      /**
-       * Toggles link formatting and updates cursor position
-       * @param {Object} params - Command parameters
-       * @param {CommandItem} params.item - The command item
-       * @param {*} params.argument - Command arguments
-       * @returns {void}
-       */
-      toggleLink: ({ item, argument }) => {
-        let command = item.command;
-        if (command in this.activeEditor.commands) {
-          this.activeEditor.commands[command](argument);
-          const { view } = this.activeEditor;
-          let { selection } = view.state;
-          if (this.activeEditor.options.isHeaderOrFooter) {
-            selection = this.activeEditor.options.lastSelection;
-          }
-          const endPos = selection.$to.pos;
-          const newSelection = new TextSelection(view.state.doc.resolve(endPos));
-          const tr = view.state.tr.setSelection(newSelection);
-          const state = view.state.apply(tr);
-          view.updateState(state);
-          if (!this.activeEditor.options.isHeaderOrFooter) {
-            setTimeout(() => {
-              view.focus();
-            }, 100);
-          }
-        }
-        this.updateToolbarState();
-      },
       /**
        * Inserts a table into the document
        * @param {Object} params - Command parameters
@@ -3020,76 +2565,1019 @@ runCommandWithArgumentOnly_fn = function({ item, argument, noArgumentCallback =
     this.updateToolbarState();
   }
 };
-function adjustPaginationBreaks(editorElem, editor) {
-  if (!editorElem.value || !editor?.value?.options?.scale) return;
-  const zoom = editor.value.options.scale;
-  const bounds = editorElem.value.getBoundingClientRect();
-  const breakNodes = editorElem.value.querySelectorAll(".pagination-break-wrapper");
-  let firstLeft;
-  breakNodes.forEach((node) => {
-    const nodeBounds = node.getBoundingClientRect();
-    const left = (nodeBounds.left - bounds.left) / zoom * -1 + 1;
-    if (!firstLeft) firstLeft = left;
-    if (left !== firstLeft) {
-      const diff = left - firstLeft;
-      node.style.transform = `translateX(${diff}px)`;
+const plusIconSvg = '<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="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 144L48 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l144 0 0 144c0 17.7 14.3 32 32 32s32-14.3 32-32l0-144 144 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-144 0 0-144z"/></svg>';
+const trashIconSvg = '<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="M135.2 17.7C140.6 6.8 151.7 0 163.8 0L284.2 0c12.1 0 23.2 6.8 28.6 17.7L320 32l96 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 96C14.3 96 0 81.7 0 64S14.3 32 32 32l96 0 7.2-14.3zM32 128l384 0 0 320c0 35.3-28.7 64-64 64L96 512c-35.3 0-64-28.7-64-64l0-320zm96 64c-8.8 0-16 7.2-16 16l0 224c0 8.8 7.2 16 16 16s16-7.2 16-16l0-224c0-8.8-7.2-16-16-16zm96 0c-8.8 0-16 7.2-16 16l0 224c0 8.8 7.2 16 16 16s16-7.2 16-16l0-224c0-8.8-7.2-16-16-16zm96 0c-8.8 0-16 7.2-16 16l0 224c0 8.8 7.2 16 16 16s16-7.2 16-16l0-224c0-8.8-7.2-16-16-16z"/></svg>';
+const wrenchIconSvg = '<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 320c88.4 0 160-71.6 160-160c0-15.3-2.2-30.1-6.2-44.2c-3.1-10.8-16.4-13.2-24.3-5.3l-76.8 76.8c-3 3-7.1 4.7-11.3 4.7L336 192c-8.8 0-16-7.2-16-16l0-57.4c0-4.2 1.7-8.3 4.7-11.3l76.8-76.8c7.9-7.9 5.4-21.2-5.3-24.3C382.1 2.2 367.3 0 352 0C263.6 0 192 71.6 192 160c0 19.1 3.4 37.5 9.5 54.5L19.9 396.1C7.2 408.8 0 426.1 0 444.1C0 481.6 30.4 512 67.9 512c18 0 35.3-7.2 48-19.9L297.5 310.5c17 6.2 35.4 9.5 54.5 9.5zM80 408a24 24 0 1 1 0 48 24 24 0 1 1 0-48z"/></svg>';
+const borderNoneIconSvg = '<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="M32 480a32 32 0 1 1 0-64 32 32 0 1 1 0 64zm96-64a32 32 0 1 1 0 64 32 32 0 1 1 0-64zm0-384a32 32 0 1 1 0 64 32 32 0 1 1 0-64zm0 256a32 32 0 1 1 0-64 32 32 0 1 1 0 64zM320 416a32 32 0 1 1 0 64 32 32 0 1 1 0-64zm0-320a32 32 0 1 1 0-64 32 32 0 1 1 0 64zm0 128a32 32 0 1 1 0 64 32 32 0 1 1 0-64zM224 480a32 32 0 1 1 0-64 32 32 0 1 1 0 64zm0-448a32 32 0 1 1 0 64 32 32 0 1 1 0-64zm0 256a32 32 0 1 1 0-64 32 32 0 1 1 0 64zM416 416a32 32 0 1 1 0 64 32 32 0 1 1 0-64zm0-384a32 32 0 1 1 0 64 32 32 0 1 1 0-64zM32 96a32 32 0 1 1 0-64 32 32 0 1 1 0 64zM416 224a32 32 0 1 1 0 64 32 32 0 1 1 0-64zM32 288a32 32 0 1 1 0-64 32 32 0 1 1 0 64zm192 32a32 32 0 1 1 0 64 32 32 0 1 1 0-64zm192 64a32 32 0 1 1 0-64 32 32 0 1 1 0 64zM32 320a32 32 0 1 1 0 64 32 32 0 1 1 0-64zM416 192a32 32 0 1 1 0-64 32 32 0 1 1 0 64zM32 128a32 32 0 1 1 0 64 32 32 0 1 1 0-64zm192 64a32 32 0 1 1 0-64 32 32 0 1 1 0 64z"/></svg>';
+const arrowsLeftRightIconSvg = '<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="M406.6 374.6l96-96c12.5-12.5 12.5-32.8 0-45.3l-96-96c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L402.7 224l-293.5 0 41.4-41.4c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-96 96c-12.5 12.5-12.5 32.8 0 45.3l96 96c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 288l293.5 0-41.4 41.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0z"/></svg>';
+const arrowsToDotIconSvg = '<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 0c17.7 0 32 14.3 32 32l0 32 32 0c12.9 0 24.6 7.8 29.6 19.8s2.2 25.7-6.9 34.9l-64 64c-12.5 12.5-32.8 12.5-45.3 0l-64-64c-9.2-9.2-11.9-22.9-6.9-34.9s16.6-19.8 29.6-19.8l32 0 0-32c0-17.7 14.3-32 32-32zM169.4 393.4l64-64c12.5-12.5 32.8-12.5 45.3 0l64 64c9.2 9.2 11.9 22.9 6.9 34.9s-16.6 19.8-29.6 19.8l-32 0 0 32c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-32-32 0c-12.9 0-24.6-7.8-29.6-19.8s-2.2-25.7 6.9-34.9zM32 224l32 0 0-32c0-12.9 7.8-24.6 19.8-29.6s25.7-2.2 34.9 6.9l64 64c12.5 12.5 12.5 32.8 0 45.3l-64 64c-9.2 9.2-22.9 11.9-34.9 6.9s-19.8-16.6-19.8-29.6l0-32-32 0c-17.7 0-32-14.3-32-32s14.3-32 32-32zm297.4 54.6c-12.5-12.5-12.5-32.8 0-45.3l64-64c9.2-9.2 22.9-11.9 34.9-6.9s19.8 16.6 19.8 29.6l0 32 32 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-32 0 0 32c0 12.9-7.8 24.6-19.8 29.6s-25.7 2.2-34.9-6.9l-64-64zM256 224a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"/></svg>';
+const ICONS = {
+  addRowBefore: plusIconSvg,
+  addRowAfter: plusIconSvg,
+  addColumnBefore: plusIconSvg,
+  addColumnAfter: plusIconSvg,
+  deleteRow: trashIconSvg,
+  deleteColumn: trashIconSvg,
+  deleteTable: trashIconSvg,
+  deleteBorders: borderNoneIconSvg,
+  mergeCells: arrowsToDotIconSvg,
+  splitCell: arrowsLeftRightIconSvg,
+  fixTables: wrenchIconSvg,
+  ai: magicWandIcon,
+  link: linkIconSvg,
+  table: tableIconSvg,
+  cut: scissorsIconSvg,
+  copy: copyIconSvg,
+  paste: pasteIconSvg
+};
+const TEXTS = {
+  addRowBefore: "Insert row above",
+  addRowAfter: "Insert row below",
+  addColumnBefore: "Insert column left",
+  addColumnAfter: "Insert column right",
+  deleteRow: "Delete row",
+  deleteColumn: "Delete column",
+  deleteTable: "Delete table",
+  transparentBorders: "Transparent borders",
+  mergeCells: "Merge cells",
+  splitCell: "Split cell",
+  fixTables: "Fix tables",
+  insertText: "Insert text",
+  replaceText: "Replace text",
+  insertLink: "Insert link",
+  insertTable: "Insert table",
+  editTable: "Edit table",
+  cut: "Cut",
+  copy: "Copy",
+  paste: "Paste"
+};
+const tableActionsOptions = [
+  {
+    label: TEXTS.addRowBefore,
+    command: "addRowBefore",
+    icon: ICONS.addRowBefore,
+    props: {
+      "data-item": "btn-tableActions-option",
+      ariaLabel: "Add row before"
     }
-  });
-}
-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
+  },
+  {
+    label: TEXTS.addRowAfter,
+    command: "addRowAfter",
+    icon: ICONS.addRowAfter,
+    props: {
+      "data-item": "btn-tableActions-option",
+      ariaLabel: "Add row after"
+    }
+  },
+  {
+    label: TEXTS.addColumnBefore,
+    command: "addColumnBefore",
+    icon: ICONS.addColumnBefore,
+    props: {
+      "data-item": "btn-tableActions-option",
+      ariaLabel: "Add column before"
+    }
+  },
+  {
+    label: TEXTS.addColumnAfter,
+    command: "addColumnAfter",
+    icon: ICONS.addColumnAfter,
+    bottomBorder: true,
+    props: {
+      "data-item": "btn-tableActions-option",
+      ariaLabel: "Add column after"
+    }
+  },
+  {
+    label: TEXTS.deleteRow,
+    command: "deleteRow",
+    icon: ICONS.deleteRow,
+    props: {
+      "data-item": "btn-tableActions-option",
+      ariaLabel: "Delete row"
+    }
+  },
+  {
+    label: TEXTS.deleteColumn,
+    command: "deleteColumn",
+    icon: ICONS.deleteColumn,
+    props: {
+      "data-item": "btn-tableActions-option",
+      ariaLabel: "Delete column"
+    }
+  },
+  {
+    label: TEXTS.deleteTable,
+    command: "deleteTable",
+    icon: ICONS.deleteTable,
+    props: {
+      "data-item": "btn-tableActions-option",
+      ariaLabel: "Delete table"
+    }
+  },
+  {
+    label: TEXTS.transparentBorders,
+    command: "deleteCellAndTableBorders",
+    icon: ICONS.deleteBorders,
+    bottomBorder: true,
+    props: {
+      "data-item": "btn-tableActions-option",
+      ariaLabel: "Delete cell and table borders"
+    }
+  },
+  {
+    label: TEXTS.mergeCells,
+    command: "mergeCells",
+    icon: ICONS.mergeCells,
+    props: {
+      "data-item": "btn-tableActions-option",
+      ariaLabel: "Merge cells"
+    }
+  },
+  {
+    label: TEXTS.splitCell,
+    command: "splitCell",
+    icon: ICONS.splitCell,
+    props: {
+      "data-item": "btn-tableActions-option",
+      ariaLabel: "Split cells"
+    }
+  },
+  {
+    label: TEXTS.fixTables,
+    command: "fixTables",
+    icon: ICONS.fixTables,
+    props: {
+      "data-item": "btn-tableActions-option",
+      ariaLabel: "Fix tables"
+    }
+  }
+];
+const TRIGGERS = {
+  slash: "slash",
+  click: "click"
+};
+const getPropsByItemId = (itemId, props) => {
+  const editor = props.editor;
+  const baseProps = {
+    editor: markRaw(props.editor)
   };
-  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;
+  switch (itemId) {
+    case "insert-text":
+      const { state } = editor.view;
+      const { from, to, empty } = state.selection;
+      const selectedText = !empty ? state.doc.textBetween(from, to) : "";
+      return {
+        ...baseProps,
+        selectedText,
+        handleClose: props.closePopover || (() => null),
+        apiKey: editor.options?.aiApiKey,
+        endpoint: editor.options?.aiEndpoint
+      };
+    case "insert-link":
+      return baseProps;
+    case "insert-table":
+      return {
+        ...baseProps,
+        onSelect: ({ rows, cols }) => {
+          editor.commands.insertTable({ rows, cols });
+          props.closePopover();
+        }
+      };
+    case "edit-table":
+      return {
+        ...baseProps,
+        options: tableActionsOptions,
+        onSelect: ({ command }) => {
+          if (editor.commands[command]) {
+            editor.commands[command]();
+          }
+          props.closePopover();
+        }
+      };
+    case "copy":
+    case "paste":
+      return {
+        ...baseProps
+        // These actions don't need additional props
+      };
+    default:
+      return baseProps;
   }
-  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.create(view.state.doc, cursorPos)
-    );
-    view.dispatch(transaction);
-    view.focus();
+};
+async function getEditorContext(editor, event) {
+  const { view } = editor;
+  const { state } = view;
+  const { from, to, empty } = state.selection;
+  const selectedText = !empty ? state.doc.textBetween(from, to) : "";
+  let pos = null;
+  let node = null;
+  if (event) {
+    const coords = { left: event.clientX, top: event.clientY };
+    pos = view.posAtCoords(coords)?.pos ?? null;
+    node = pos !== null ? state.doc.nodeAt(pos) : null;
+  } else {
+    pos = from;
+    node = state.doc.nodeAt(pos);
   }
+  const clipboardContent = await readFromClipboard(state);
+  return {
+    editor,
+    selectedText,
+    pos,
+    node,
+    event,
+    clipboardContent
+  };
+}
+const _hoisted_1$5 = {
+  key: 0,
+  class: "link-title"
 };
-const _hoisted_1$2 = { class: "numbering" };
-const MIN_WIDTH = 200;
-const alignment = "flex-end";
-const _sfc_main$3 = {
-  __name: "Ruler",
+const _hoisted_2$3 = {
+  key: 1,
+  class: "link-title"
+};
+const _hoisted_3$3 = {
+  key: 2,
+  class: "link-title"
+};
+const _hoisted_4$2 = { key: 3 };
+const _hoisted_5$1 = { class: "input-row" };
+const _hoisted_6 = ["innerHTML"];
+const _hoisted_7 = ["onKeydown"];
+const _hoisted_8 = ["innerHTML"];
+const _hoisted_9 = { class: "input-row link-buttons" };
+const _hoisted_10 = ["innerHTML"];
+const _hoisted_11 = {
+  key: 4,
+  class: "input-row go-to-anchor clickable"
+};
+const _sfc_main$7 = {
+  __name: "LinkInput",
   props: {
-    orientation: {
-      type: String,
-      default: "horizontal"
+    showInput: {
+      type: Boolean,
+      default: true
     },
-    length: {
-      type: Number,
-      default: 0
+    showLink: {
+      type: Boolean,
+      default: true
+    },
+    goToAnchor: {
+      type: Function,
+      default: () => {
+      }
     },
     editor: {
       type: Object,
       required: true
-    }
-  },
-  emits: ["margin-change"],
+    },
+    closePopover: {
+      type: Function,
+      default: () => {
+      }
+    }
+  },
+  setup(__props) {
+    const props = __props;
+    const { isHighContrastMode } = useHighContrastMode();
+    const urlError = ref(false);
+    const getSelectedText = () => {
+      if (!props.editor || !props.editor.state) return "";
+      const { state } = props.editor;
+      const { from, to } = state.selection;
+      return state.doc.textBetween(from, to, " ");
+    };
+    const getLinkHrefAtSelection = () => {
+      if (!props.editor || !props.editor.state) return "";
+      const { state } = props.editor;
+      const { schema, selection } = state;
+      const linkMark = schema.marks.link;
+      if (!linkMark) return "";
+      let href = "";
+      const { $from, empty } = selection;
+      if (empty) {
+        const marks = state.storedMarks || $from.marks();
+        const link = marks.find((mark) => mark.type === linkMark);
+        if (link) href = link.attrs.href;
+      } else {
+        state.doc.nodesBetween(selection.from, selection.to, (node) => {
+          if (node.marks) {
+            const link = node.marks.find((mark) => mark.type === linkMark);
+            if (link) href = link.attrs.href;
+          }
+        });
+      }
+      return href || "";
+    };
+    const text = ref("");
+    const rawUrl = ref("");
+    const isAnchor = ref(false);
+    const url = computed(() => {
+      if (!rawUrl.value?.startsWith("http")) return "http://" + rawUrl.value;
+      return rawUrl.value;
+    });
+    const validUrl = computed(() => {
+      const urlSplit = url.value.split(".").filter(Boolean);
+      return url.value.includes(".") && urlSplit.length > 1;
+    });
+    const isEditing = computed(() => !isAnchor.value && !!getLinkHrefAtSelection());
+    const getApplyText = computed(() => showApply.value ? "Apply" : "Remove");
+    const isDisabled = computed(() => !validUrl.value);
+    const showApply = computed(() => !showRemove.value);
+    const showRemove = computed(() => rawUrl.value === "" && getLinkHrefAtSelection());
+    const openLink = () => {
+      window.open(url.value, "_blank");
+    };
+    const updateFromEditor = () => {
+      text.value = getSelectedText();
+      rawUrl.value = getLinkHrefAtSelection();
+    };
+    watch(
+      () => props.editor?.state?.selection,
+      () => {
+        updateFromEditor();
+      },
+      { immediate: true }
+    );
+    const focusInput = () => {
+      const input = document.querySelector(".link-input-ctn input");
+      if (!input) return;
+      input.focus();
+    };
+    onMounted(() => {
+      updateFromEditor();
+      isAnchor.value = rawUrl.value.startsWith("#");
+      if (props.showInput) focusInput();
+    });
+    const handleSubmit = () => {
+      if (rawUrl.value && validUrl.value) {
+        if (props.editor && props.editor.commands && props.editor.commands.toggleLink) {
+          props.editor.commands.toggleLink({ href: url.value, text: text.value });
+          const { view } = props.editor;
+          let { selection } = view.state;
+          const endPos = selection.$to.pos;
+          const tr = view.state.tr.setSelection(new TextSelection(view.state.doc.resolve(endPos)));
+          const state = view.state.apply(tr);
+          view.updateState(state);
+          setTimeout(() => {
+            view.focus();
+          }, 100);
+        }
+        props.closePopover();
+        return;
+      } else if (!rawUrl.value) {
+        if (props.editor && props.editor.commands && props.editor.commands.unsetLink) {
+          props.editor.commands.unsetLink();
+        }
+        props.closePopover();
+        return;
+      }
+      urlError.value = true;
+    };
+    const handleRemove = () => {
+      if (props.editor && props.editor.commands && props.editor.commands.unsetLink) {
+        props.editor.commands.unsetLink();
+        props.closePopover();
+      }
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["link-input-ctn", { "high-contrast": unref(isHighContrastMode) }])
+      }, [
+        isAnchor.value ? (openBlock(), createElementBlock("div", _hoisted_1$5, "Page anchor")) : isEditing.value ? (openBlock(), createElementBlock("div", _hoisted_2$3, "Edit link")) : (openBlock(), createElementBlock("div", _hoisted_3$3, "Add link")),
+        __props.showInput && !isAnchor.value ? (openBlock(), createElementBlock("div", _hoisted_4$2, [
+          createElementVNode("div", _hoisted_5$1, [
+            createElementVNode("div", {
+              class: "input-icon",
+              innerHTML: unref(toolbarIcons).linkInput
+            }, null, 8, _hoisted_6),
+            withDirectives(createElementVNode("input", {
+              type: "text",
+              name: "link",
+              placeholder: "Type or paste a link",
+              class: normalizeClass({ error: urlError.value }),
+              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => rawUrl.value = $event),
+              onKeydown: [
+                withKeys(withModifiers(handleSubmit, ["stop", "prevent"]), ["enter"]),
+                _cache[1] || (_cache[1] = ($event) => urlError.value = false)
+              ]
+            }, null, 42, _hoisted_7), [
+              [vModelText, rawUrl.value]
+            ]),
+            createElementVNode("div", {
+              class: normalizeClass(["open-link-icon", { disabled: !validUrl.value }]),
+              innerHTML: unref(toolbarIcons).openLink,
+              onClick: openLink,
+              "data-item": "btn-link-open"
+            }, null, 10, _hoisted_8)
+          ]),
+          createElementVNode("div", _hoisted_9, [
+            rawUrl.value ? (openBlock(), createElementBlock("button", {
+              key: 0,
+              class: "remove-btn",
+              onClick: handleRemove,
+              "data-item": "btn-link-remove"
+            }, [
+              createElementVNode("div", {
+                class: "remove-btn__icon",
+                innerHTML: unref(toolbarIcons).removeLink
+              }, null, 8, _hoisted_10),
+              _cache[3] || (_cache[3] = createTextVNode(" Remove "))
+            ])) : createCommentVNode("", true),
+            showApply.value ? (openBlock(), createElementBlock("button", {
+              key: 1,
+              class: normalizeClass(["submit-btn", { "disable-btn": isDisabled.value }]),
+              onClick: handleSubmit,
+              "data-item": "btn-link-apply"
+            }, toDisplayString(getApplyText.value), 3)) : createCommentVNode("", true)
+          ])
+        ])) : isAnchor.value ? (openBlock(), createElementBlock("div", _hoisted_11, [
+          createElementVNode("a", {
+            onClick: _cache[2] || (_cache[2] = withModifiers((...args) => __props.goToAnchor && __props.goToAnchor(...args), ["stop", "prevent"]))
+          }, "Go to " + toDisplayString(rawUrl.value.startsWith("#_") ? rawUrl.value.substring(2) : rawUrl.value), 1)
+        ])) : createCommentVNode("", true)
+      ], 2);
+    };
+  }
+};
+const LinkInput = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__scopeId", "data-v-2632571a"]]);
+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.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.create(view.state.doc, pos)
+    );
+    view.dispatch(tr);
+    view.focus();
+  }
+}
+const _hoisted_1$4 = { class: "toolbar-table-actions" };
+const _hoisted_2$2 = ["onClick", "data-item", "ariaLabel"];
+const _hoisted_3$2 = { class: "toolbar-table-actions__icon" };
+const _hoisted_4$1 = ["innerHTML"];
+const _hoisted_5 = { class: "toolbar-table-actions__label" };
+const _sfc_main$6 = {
+  __name: "TableActions",
+  props: {
+    options: {
+      type: Array
+    }
+  },
+  emits: ["select"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    const handleClick = (item) => {
+      emit("select", { command: item.command });
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$4, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(__props.options, (option) => {
+          return openBlock(), createElementBlock("div", {
+            class: normalizeClass(["toolbar-table-actions__item", { "toolbar-table-actions__item--border": option.bottomBorder }]),
+            onClick: ($event) => handleClick(option),
+            "data-item": option.props?.["data-item"] || "",
+            ariaLabel: option.props?.ariaLabel,
+            role: "menuitem"
+          }, [
+            createElementVNode("div", _hoisted_3$2, [
+              createElementVNode("div", {
+                class: "toolbar-table-actions__icon-wrapper",
+                innerHTML: option.icon
+              }, null, 8, _hoisted_4$1)
+            ]),
+            createElementVNode("div", _hoisted_5, toDisplayString(option.label), 1)
+          ], 10, _hoisted_2$2);
+        }), 256))
+      ]);
+    };
+  }
+};
+const TableActions = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-f82e859a"]]);
+const isModuleEnabled = (editorOptions, moduleName) => {
+  switch (moduleName) {
+    case "ai":
+      return !!editorOptions?.isAiEnabled;
+    default:
+      return true;
+  }
+};
+function getItems(context) {
+  const { editor, selectedText, trigger, clipboardContent } = context;
+  const isInTable2 = selectionHasNodeOrMark(editor.view.state, "table", { requireEnds: true });
+  const sections = [
+    {
+      id: "ai-content",
+      items: [
+        {
+          id: "insert-text",
+          label: selectedText ? TEXTS.replaceText : TEXTS.insertText,
+          icon: ICONS.ai,
+          component: AIWriter,
+          action: (editor2) => {
+            if (editor2?.commands && typeof editor2.commands?.insertAiMark === "function") {
+              editor2.commands.insertAiMark();
+            }
+          },
+          allowedTriggers: [TRIGGERS.slash, TRIGGERS.click],
+          requiresModule: "ai"
+        }
+      ]
+    },
+    {
+      id: "general",
+      items: [
+        {
+          id: "insert-link",
+          label: TEXTS.insertLink,
+          icon: ICONS.link,
+          component: LinkInput,
+          allowedTriggers: [TRIGGERS.click]
+        },
+        {
+          id: "insert-table",
+          label: TEXTS.insertTable,
+          icon: ICONS.table,
+          component: TableGrid,
+          allowedTriggers: [TRIGGERS.slash, TRIGGERS.click]
+        },
+        {
+          id: "edit-table",
+          label: TEXTS.editTable,
+          icon: ICONS.table,
+          component: TableActions,
+          allowedTriggers: [TRIGGERS.slash, TRIGGERS.click],
+          requiresTableParent: true
+        }
+      ]
+    },
+    {
+      id: "clipboard",
+      items: [
+        {
+          id: "cut",
+          label: TEXTS.cut,
+          icon: ICONS.cut,
+          action: async (editor2) => {
+            const { state, dispatch } = editor2.view;
+            const { htmlString, text } = serializeSelectionToClipboard(state);
+            await writeToClipboard({ htmlString, text });
+            const { from, to } = state.selection;
+            dispatch(state.tr.delete(from, to));
+          },
+          allowedTriggers: [TRIGGERS.click],
+          requiresSelection: true
+        },
+        {
+          id: "copy",
+          label: TEXTS.copy,
+          icon: ICONS.copy,
+          action: async (editor2) => {
+            const { state } = editor2.view;
+            const { htmlString, text } = serializeSelectionToClipboard(state);
+            await writeToClipboard({ htmlString, text });
+          },
+          allowedTriggers: [TRIGGERS.click],
+          requiresSelection: true
+        },
+        {
+          id: "paste",
+          label: TEXTS.paste,
+          icon: ICONS.paste,
+          action: async (editor2) => {
+            try {
+              const clipboardData = await navigator.clipboard.read();
+              const event = new ClipboardEvent("paste", {
+                clipboardData: new DataTransfer(),
+                bubbles: true,
+                cancelable: true
+              });
+              for (const item of clipboardData) {
+                for (const type of item.types) {
+                  const blob = await item.getType(type);
+                  event.clipboardData.setData(type, await blob.text());
+                }
+              }
+              editor2.view.dom.dispatchEvent(event);
+            } catch (error) {
+              console.warn("Failed to paste:", error);
+            }
+          },
+          allowedTriggers: [TRIGGERS.click, TRIGGERS.slash],
+          requiresClipboard: true
+        }
+      ]
+    }
+  ];
+  const filteredSections = sections.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.requiresTableParent && !isInTable2 || item.id === "insert-table" && isInTable2) return false;
+      return true;
+    });
+    return {
+      ...section,
+      items: filteredItems
+    };
+  }).filter((section) => section.items.length > 0);
+  return filteredSections;
+}
+const _hoisted_1$3 = { class: "slash-menu-items" };
+const _hoisted_2$1 = {
+  key: 0,
+  class: "slash-menu-divider",
+  tabindex: "0"
+};
+const _hoisted_3$1 = ["onClick"];
+const _hoisted_4 = ["innerHTML"];
+const _sfc_main$5 = {
+  __name: "SlashMenu",
+  props: {
+    editor: {
+      type: Object,
+      required: true
+    },
+    openPopover: {
+      type: Function,
+      required: true
+    },
+    closePopover: {
+      type: Function,
+      required: true
+    }
+  },
+  setup(__props) {
+    const props = __props;
+    const searchInput = ref(null);
+    const searchQuery = ref("");
+    const isOpen = ref(false);
+    const menuPosition = ref({ left: "0px", top: "0px" });
+    const menuRef = ref(null);
+    const sections = ref([]);
+    const selectedId = ref(null);
+    const flattenedItems = computed(() => {
+      const items = [];
+      sections.value.forEach((section) => {
+        section.items.forEach((item) => {
+          items.push(item);
+        });
+      });
+      return items;
+    });
+    const filteredItems = computed(() => {
+      if (!searchQuery.value) {
+        return flattenedItems.value;
+      }
+      return flattenedItems.value.filter(
+        (item) => item.label?.toLowerCase().includes(searchQuery.value.toLowerCase())
+      );
+    });
+    const filteredSections = computed(() => {
+      if (!searchQuery.value) {
+        return sections.value;
+      }
+      return [{
+        id: "search-results",
+        items: filteredItems.value
+      }];
+    });
+    watch(isOpen, (open) => {
+      if (open) {
+        nextTick(() => {
+          if (searchInput.value) {
+            searchInput.value.focus();
+          }
+        });
+      }
+    });
+    watch(flattenedItems, (newItems) => {
+      if (newItems.length > 0) {
+        selectedId.value = newItems[0].id;
+      }
+    });
+    const handleGlobalKeyDown = (event) => {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        event.stopPropagation();
+        closeMenu();
+        props.editor?.view?.focus();
+        return;
+      }
+      if (isOpen.value && (event.target === searchInput.value || menuRef.value && menuRef.value.contains(event.target))) {
+        const currentItems = filteredItems.value;
+        const currentIndex = currentItems.findIndex((item) => item.id === selectedId.value);
+        switch (event.key) {
+          case "ArrowDown": {
+            event.preventDefault();
+            if (currentIndex < currentItems.length - 1) {
+              selectedId.value = currentItems[currentIndex + 1].id;
+            }
+            break;
+          }
+          case "ArrowUp": {
+            event.preventDefault();
+            if (currentIndex > 0) {
+              selectedId.value = currentItems[currentIndex - 1].id;
+            }
+            break;
+          }
+          case "Enter": {
+            event.preventDefault();
+            const selectedItem = currentItems.find((item) => item.id === selectedId.value);
+            if (selectedItem) {
+              executeCommand(selectedItem);
+            }
+            break;
+          }
+        }
+      }
+    };
+    const handleGlobalOutsideClick = (event) => {
+      if (isOpen.value && menuRef.value && !menuRef.value.contains(event.target)) {
+        moveCursorToMouseEvent(event, props.editor);
+        closeMenu({ restoreCursor: false });
+      }
+    };
+    const handleRightClick = async (event) => {
+      if (event.ctrlKey) {
+        return;
+      }
+      event.preventDefault();
+      props.editor.view.dispatch(
+        props.editor.view.state.tr.setMeta(SlashMenuPluginKey, {
+          type: "open",
+          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;
+        if (item.component) {
+          menuRef.value;
+          const componentProps = getPropsByItemId(item.id, props);
+          props.openPopover(markRaw(item.component), componentProps, { left: menuPosition.value.left, top: menuPosition.value.top });
+          closeMenu({ restoreCursor: false });
+        } else {
+          const shouldRestoreCursor = item.id !== "paste";
+          closeMenu({ restoreCursor: shouldRestoreCursor });
+        }
+      }
+    };
+    const closeMenu = (options = { restoreCursor: true }) => {
+      if (props.editor?.view) {
+        const pluginState = SlashMenuPluginKey.getState(props.editor.view.state);
+        const { anchorPos } = pluginState;
+        props.editor.view.dispatch(
+          props.editor.view.state.tr.setMeta(SlashMenuPluginKey, {
+            type: "close"
+          })
+        );
+        if (options.restoreCursor && anchorPos !== null) {
+          const tr = props.editor.view.state.tr.setSelection(
+            props.editor.view.state.selection.constructor.near(
+              props.editor.view.state.doc.resolve(anchorPos)
+            )
+          );
+          props.editor.view.dispatch(tr);
+          props.editor.view.focus();
+        }
+        isOpen.value = false;
+        searchQuery.value = "";
+        sections.value = [];
+      }
+    };
+    onMounted(() => {
+      if (!props.editor) return;
+      document.addEventListener("keydown", handleGlobalKeyDown);
+      document.addEventListener("mousedown", handleGlobalOutsideClick);
+      props.editor.on("slashMenu:open", async (event) => {
+        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;
+      });
+      props.editor.view.dom.addEventListener("contextmenu", handleRightClick);
+      props.editor.on("slashMenu:close", () => {
+        isOpen.value = false;
+        searchQuery.value = "";
+      });
+    });
+    onBeforeUnmount(() => {
+      document.removeEventListener("keydown", handleGlobalKeyDown);
+      document.removeEventListener("mousedown", handleGlobalOutsideClick);
+      if (props.editor) {
+        try {
+          props.editor.off("slashMenu:open");
+          props.editor.off("slashMenu:close");
+          props.editor.view.dom.removeEventListener("contextmenu", handleRightClick);
+        } catch (error) {
+        }
+      }
+    });
+    return (_ctx, _cache) => {
+      return isOpen.value ? (openBlock(), createElementBlock("div", {
+        key: 0,
+        ref_key: "menuRef",
+        ref: menuRef,
+        class: "slash-menu",
+        style: normalizeStyle(menuPosition.value),
+        onMousedown: _cache[2] || (_cache[2] = withModifiers(() => {
+        }, ["stop"]))
+      }, [
+        withDirectives(createElementVNode("input", {
+          ref_key: "searchInput",
+          ref: searchInput,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => searchQuery.value = $event),
+          type: "text",
+          class: "slash-menu-hidden-input",
+          onKeydown: [
+            handleGlobalKeyDown,
+            _cache[1] || (_cache[1] = withModifiers(() => {
+            }, ["stop"]))
+          ]
+        }, null, 544), [
+          [vModelText, searchQuery.value]
+        ]),
+        createElementVNode("div", _hoisted_1$3, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(filteredSections.value, (section, sectionIndex) => {
+            return openBlock(), createElementBlock(Fragment, {
+              key: section.id
+            }, [
+              sectionIndex > 0 && section.items.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_2$1)) : createCommentVNode("", true),
+              (openBlock(true), createElementBlock(Fragment, null, renderList(section.items, (item) => {
+                return openBlock(), createElementBlock("div", {
+                  key: item.id,
+                  class: normalizeClass(["slash-menu-item", { "is-selected": item.id === selectedId.value }]),
+                  onClick: ($event) => executeCommand(item)
+                }, [
+                  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)
+                ], 10, _hoisted_3$1);
+              }), 128))
+            ], 64);
+          }), 128))
+        ])
+      ], 36)) : createCommentVNode("", true);
+    };
+  }
+};
+function adjustPaginationBreaks(editorElem, editor) {
+  if (!editorElem.value || !editor?.value?.options?.scale) return;
+  const zoom = editor.value.options.scale;
+  const bounds = editorElem.value.getBoundingClientRect();
+  const breakNodes = editorElem.value.querySelectorAll(".pagination-break-wrapper");
+  let firstLeft;
+  breakNodes.forEach((node) => {
+    const nodeBounds = node.getBoundingClientRect();
+    const left = (nodeBounds.left - bounds.left) / zoom * -1 + 1;
+    if (!firstLeft) firstLeft = left;
+    if (left !== firstLeft) {
+      const diff = left - firstLeft;
+      node.style.transform = `translateX(${diff}px)`;
+    }
+  });
+}
+const _hoisted_1$2 = { class: "numbering" };
+const MIN_WIDTH = 200;
+const alignment = "flex-end";
+const _sfc_main$4 = {
+  __name: "Ruler",
+  props: {
+    orientation: {
+      type: String,
+      default: "horizontal"
+    },
+    length: {
+      type: Number,
+      default: 0
+    },
+    editor: {
+      type: Object,
+      required: true
+    }
+  },
+  emits: ["margin-change"],
   setup(__props, { emit: __emit }) {
     const emit = __emit;
     const props = __props;
@@ -3278,7 +3766,73 @@ const _sfc_main$3 = {
     };
   }
 };
-const Ruler = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-ad77036c"]]);
+const Ruler = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-ad77036c"]]);
+const _sfc_main$3 = {
+  __name: "GenericPopover",
+  props: {
+    editor: { type: Object, required: true },
+    styles: { type: Object, default: () => ({}) },
+    visible: { type: Boolean, default: false },
+    position: { type: Object, default: () => ({ left: "0px", top: "0px" }) }
+  },
+  emits: ["close"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const popover = ref(null);
+    function handleClickOutside(event) {
+      if (popover.value && !popover.value.contains(event.target)) {
+        emit("close");
+      }
+      moveCursorToMouseEvent(event, props.editor);
+    }
+    function handleEscape(event) {
+      if (event.key === "Escape") {
+        emit("close");
+      }
+    }
+    watch(() => props.visible, (val) => {
+      if (val) {
+        document.addEventListener("mousedown", handleClickOutside);
+        document.addEventListener("keydown", handleEscape);
+      } else {
+        document.removeEventListener("mousedown", handleClickOutside);
+        document.removeEventListener("keydown", handleEscape);
+      }
+    });
+    onMounted(() => {
+      if (props.visible) {
+        document.addEventListener("mousedown", handleClickOutside);
+        document.addEventListener("keydown", handleEscape);
+      }
+    });
+    onBeforeUnmount(() => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("keydown", handleEscape);
+    });
+    const derivedStyles = computed(() => ({
+      left: props.position.left,
+      top: props.position.top,
+      ...props.styles
+    }));
+    return (_ctx, _cache) => {
+      return __props.visible ? (openBlock(), createElementBlock("div", {
+        key: 0,
+        class: "generic-popover",
+        style: normalizeStyle(derivedStyles.value),
+        ref_key: "popover",
+        ref: popover,
+        onMousedown: _cache[0] || (_cache[0] = withModifiers(() => {
+        }, ["stop"])),
+        onClick: _cache[1] || (_cache[1] = withModifiers(() => {
+        }, ["stop"]))
+      }, [
+        renderSlot(_ctx.$slots, "default", {}, void 0, true)
+      ], 36)) : createCommentVNode("", true);
+    };
+  }
+};
+const GenericPopover = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-93a6abe9"]]);
 const _hoisted_1$1 = { class: "super-editor-container" };
 const _hoisted_2 = {
   key: 1,
@@ -3321,6 +3875,24 @@ const _sfc_main$2 = {
     const editor = shallowRef(null);
     const editorWrapper = ref(null);
     const editorElem = ref(null);
+    const popoverControls = reactive({
+      visible: false,
+      position: { left: "0px", top: "0px" },
+      component: null,
+      props: {}
+    });
+    const closePopover = () => {
+      popoverControls.visible = false;
+      popoverControls.component = null;
+      popoverControls.props = {};
+      editor.value.view.focus();
+    };
+    const openPopover = (component, props2, position) => {
+      popoverControls.component = component;
+      popoverControls.props = props2;
+      popoverControls.position = position;
+      popoverControls.visible = true;
+    };
     let dataPollTimeout;
     const stopPolling = () => {
       clearTimeout(dataPollTimeout);
@@ -3417,6 +3989,9 @@ const _sfc_main$2 = {
       if (!isInsideEditor && editor.value.isEditable) {
         editor.value.view?.focus();
       }
+      if (isInsideEditor && editor.value.isEditable) {
+        checkNodeSpecificClicks(editor.value, event, popoverControls);
+      }
     };
     onMounted(() => {
       initializeData();
@@ -3459,7 +4034,14 @@ const _sfc_main$2 = {
             ref: editorElem,
             class: "editor-element super-editor__element",
             role: "presentation"
-          }, null, 512)
+          }, null, 512),
+          editorReady.value && editor.value ? (openBlock(), createBlock(_sfc_main$5, {
+            key: 0,
+            editor: editor.value,
+            popoverControls,
+            openPopover,
+            closePopover
+          }, null, 8, ["editor", "popoverControls"])) : createCommentVNode("", true)
         ], 544),
         !editorReady.value ? (openBlock(), createElementBlock("div", _hoisted_2, [
           createElementVNode("div", _hoisted_3, [
@@ -3505,12 +4087,23 @@ const _sfc_main$2 = {
             text: "",
             style: { "width": "70%" }
           })
-        ])) : createCommentVNode("", true)
+        ])) : createCommentVNode("", true),
+        createVNode(GenericPopover, {
+          editor: editor.value ?? {},
+          visible: popoverControls.visible,
+          position: popoverControls.position,
+          onClose: closePopover
+        }, {
+          default: withCtx(() => [
+            (openBlock(), createBlock(resolveDynamicComponent(popoverControls.component), normalizeProps(guardReactiveProps({ ...popoverControls.props, editor: editor.value, closePopover })), null, 16))
+          ]),
+          _: 1
+        }, 8, ["editor", "visible", "position"])
       ]);
     };
   }
 };
-const SuperEditor = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-4b700df1"]]);
+const SuperEditor = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-b71313e5"]]);
 const _sfc_main$1 = {
   __name: "BasicUpload",
   emits: ["file-change"],
@@ -3637,6 +4230,7 @@ export {
   D as DocxZipper,
   Editor,
   Extensions,
+  _sfc_main$5 as SlashMenu,
   X as SuperConverter,
   SuperEditor,
   SuperInput,