@kopexa/tiptap 17.3.0 → 17.5.0

package/dist/index.js

@@ -39,13 +39,20 @@ __export(index_exports, {
   InlineMath: () => InlineMath,
   MathBlock: () => MathBlock,
   TocNode: () => TocNode,
+  VariableFillerDialog: () => VariableFillerDialog,
+  VariableNode: () => VariableNode,
+  VariableProvider: () => VariableProvider,
+  VariableSuggestion: () => VariableSuggestion,
   convertFileToBase64: () => convertFileToBase64,
+  extractVariablesFromContent: () => extractVariablesFromContent,
   getExtensions: () => getExtensions,
   handleImageUpload: () => handleImageUpload,
   isAllowedUri: () => isAllowedUri,
   sanitizeUrl: () => sanitizeUrl,
   useEditorFile: () => useEditorFile,
-  useEditorFileRequired: () => useEditorFileRequired
+  useEditorFileRequired: () => useEditorFileRequired,
+  useVariables: () => useVariables,
+  useVariablesWithFallback: () => useVariablesWithFallback
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -2044,186 +2051,1160 @@ var TocNode = import_core5.Node.create({
   }
 });
 
-// src/hooks/use-create-editor.ts
-var import_extension_code = require("@kopexa/extension-code");
-var import_extension_controlref = require("@kopexa/extension-controlref");
-var import_extension_table = require("@kopexa/extension-table");
-var import_extension_file_handler = require("@tiptap/extension-file-handler");
-var import_extension_highlight = require("@tiptap/extension-highlight");
-var import_extension_invisible_characters = __toESM(require("@tiptap/extension-invisible-characters"));
-var import_extension_list = require("@tiptap/extension-list");
-var import_extension_subscript = require("@tiptap/extension-subscript");
-var import_extension_superscript = require("@tiptap/extension-superscript");
-var import_extension_table_of_contents = require("@tiptap/extension-table-of-contents");
-var import_extension_text_align = require("@tiptap/extension-text-align");
-var import_extension_text_style = require("@tiptap/extension-text-style");
-var import_extension_typography = require("@tiptap/extension-typography");
-var import_extension_unique_id = require("@tiptap/extension-unique-id");
-var import_extensions = require("@tiptap/extensions");
-var import_react25 = require("@tiptap/react");
-var import_starter_kit = require("@tiptap/starter-kit");
-var import_react26 = require("react");
+// src/extensions/variable/index.ts
+var import_core6 = require("@tiptap/core");
+var import_react23 = require("@tiptap/react");
 
-// src/extensions/link/index.ts
-var import_extension_link = __toESM(require("@tiptap/extension-link"));
-var import_state = require("@tiptap/pm/state");
+// src/extensions/variable/variable-view.tsx
+var import_theme5 = require("@kopexa/theme");
 var import_react22 = require("@tiptap/react");
-var Link = import_extension_link.default.extend({
-  inclusive: false,
+
+// src/extensions/variable/variable-context.tsx
+var React = __toESM(require("react"));
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var VariableContext = React.createContext(null);
+function VariableProvider({
+  children,
+  variables,
+  resolveVariable
+}) {
+  const value = React.useMemo(
+    () => ({
+      variables,
+      resolveVariable
+    }),
+    [variables, resolveVariable]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(VariableContext.Provider, { value, children });
+}
+function useVariables() {
+  return React.useContext(VariableContext);
+}
+function useVariablesWithFallback(fallbackVariables = []) {
+  var _a;
+  const context = React.useContext(VariableContext);
+  return (_a = context == null ? void 0 : context.variables) != null ? _a : fallbackVariables;
+}
+
+// src/extensions/variable/variable-view.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function VariableNodeView({ node, editor }) {
+  var _a;
+  const attrs = node.attrs;
+  const { name, fallback, category } = attrs;
+  const context = useVariables();
+  const isEditable = (0, import_react22.useEditorState)({
+    editor,
+    selector: ({ editor: e }) => {
+      var _a2;
+      return (_a2 = e == null ? void 0 : e.isEditable) != null ? _a2 : true;
+    }
+  });
+  const resolvedValue = (_a = context == null ? void 0 : context.resolveVariable) == null ? void 0 : _a.call(context, name);
+  const hasValue = resolvedValue !== void 0 && resolvedValue !== "";
+  const displayValue = resolvedValue || fallback;
+  const styles = (0, import_theme5.variableNode)({ resolved: hasValue });
+  if (!isEditable && hasValue) {
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      import_react22.NodeViewWrapper,
+      {
+        as: "span",
+        "data-type": "variable",
+        "data-name": name,
+        style: { userSelect: "text" },
+        children: displayValue
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    import_react22.NodeViewWrapper,
+    {
+      as: "span",
+      className: styles.wrapper(),
+      "data-type": "variable",
+      "data-name": name,
+      "data-category": category,
+      "data-resolved": hasValue ? "true" : "false",
+      children: hasValue ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: styles.chip(), title: `{{${name}}}`, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: styles.value(), children: displayValue }) }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+        "span",
+        {
+          className: styles.chip(),
+          title: fallback ? `Fallback: ${fallback}` : void 0,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: styles.bracket(), children: "{" }),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: styles.bracket(), children: "{" }),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: styles.name(), children: name }),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: styles.bracket(), children: "}" }),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: styles.bracket(), children: "}" })
+          ]
+        }
+      )
+    }
+  );
+}
+
+// src/extensions/variable/index.ts
+var VariableNode = import_core6.Node.create({
+  name: "variable",
+  group: "inline",
+  inline: true,
+  atom: true,
+  selectable: true,
+  draggable: true,
+  addOptions() {
+    return {
+      HTMLAttributes: {}
+    };
+  },
+  addAttributes() {
+    return {
+      name: {
+        default: "",
+        parseHTML: (element) => element.getAttribute("data-name"),
+        renderHTML: (attributes) => ({
+          "data-name": attributes.name
+        })
+      },
+      fallback: {
+        default: void 0,
+        parseHTML: (element) => element.getAttribute("data-fallback"),
+        renderHTML: (attributes) => {
+          if (!attributes.fallback) return {};
+          return {
+            "data-fallback": attributes.fallback
+          };
+        }
+      },
+      category: {
+        default: void 0,
+        parseHTML: (element) => element.getAttribute("data-category"),
+        renderHTML: (attributes) => {
+          if (!attributes.category) return {};
+          return {
+            "data-category": attributes.category
+          };
+        }
+      }
+    };
+  },
   parseHTML() {
     return [
       {
-        tag: 'a[href]:not([data-type="button"]):not([href *= "javascript:" i])'
+        tag: 'span[data-type="variable"]'
       }
     ];
   },
-  addProseMirrorPlugins() {
-    var _a;
-    const { editor } = this;
-    return [
-      ...((_a = this.parent) == null ? void 0 : _a.call(this)) || [],
-      new import_state.Plugin({
-        key: new import_state.PluginKey("linkKeyHandler"),
-        props: {
-          handleKeyDown: (_, event) => {
-            const { selection } = editor.state;
-            if (event.key === "Escape" && selection.empty !== true) {
-              editor.commands.focus(selection.to, { scrollIntoView: false });
-            }
-            return false;
-          },
-          handleClick(view, pos) {
-            const { schema, doc, tr } = view.state;
-            let range;
-            if (schema.marks.link) {
-              range = (0, import_react22.getMarkRange)(doc.resolve(pos), schema.marks.link);
-            }
-            if (!range) {
-              return;
-            }
-            const { from, to } = range;
-            const start = Math.min(from, to);
-            const end = Math.max(from, to);
-            if (pos < start || pos > end) {
-              return;
-            }
-            const $start = doc.resolve(start);
-            const $end = doc.resolve(end);
-            const transaction = tr.setSelection(
-              new import_state.TextSelection($start, $end)
-            );
-            view.dispatch(transaction);
-          }
-        }
-      })
-    ];
-  }
-});
-
-// src/extensions/selection/index.ts
-var import_state2 = require("@tiptap/pm/state");
-var import_view = require("@tiptap/pm/view");
-var import_react23 = require("@tiptap/react");
-var Selection = import_react23.Extension.create({
-  name: "selection",
-  addProseMirrorPlugins() {
-    const { editor } = this;
+  renderHTML({ node, HTMLAttributes }) {
+    const attrs = node.attrs;
     return [
-      new import_state2.Plugin({
-        key: new import_state2.PluginKey("selection"),
-        props: {
-          decorations(state) {
-            if (state.selection.empty) {
-              return null;
-            }
-            if (editor.isFocused === true || !editor.isEditable) {
-              return null;
-            }
-            if ((0, import_react23.isNodeSelection)(state.selection)) {
-              return null;
-            }
-            return import_view.DecorationSet.create(state.doc, [
-              import_view.Decoration.inline(state.selection.from, state.selection.to, {
-                class: "selection"
-              })
-            ]);
-          }
-        }
-      })
+      "span",
+      (0, import_core6.mergeAttributes)(this.options.HTMLAttributes, HTMLAttributes, {
+        "data-type": "variable",
+        class: "variable-node"
+      }),
+      `{{${attrs.name}}}`
     ];
+  },
+  addNodeView() {
+    return (0, import_react23.ReactNodeViewRenderer)(VariableNodeView);
+  },
+  addCommands() {
+    return {
+      insertVariable: (attrs) => ({ commands }) => {
+        return commands.insertContent({
+          type: this.name,
+          attrs
+        });
+      }
+    };
   }
 });
 
-// src/extensions/trailing-node/index.ts
-var import_state3 = require("@tiptap/pm/state");
-var import_react24 = require("@tiptap/react");
-function nodeEqualsType({
-  types,
-  node
-}) {
-  if (!node) return false;
-  if (Array.isArray(types)) {
-    return types.includes(node.type);
+// src/extensions/variable/extract-variables.ts
+function extractVariablesFromContent(content) {
+  if (!content) return [];
+  const variables = /* @__PURE__ */ new Map();
+  function scan(node) {
+    var _a;
+    if (node.type === "variable" && ((_a = node.attrs) == null ? void 0 : _a.name)) {
+      const name = node.attrs.name;
+      if (!variables.has(name)) {
+        variables.set(name, {
+          name,
+          label: formatVariableName(name),
+          category: node.attrs.category || void 0,
+          fallback: node.attrs.fallback || void 0
+        });
+      }
+    }
+    if (node.content && Array.isArray(node.content)) {
+      for (const child of node.content) {
+        scan(child);
+      }
+    }
   }
-  return node.type === types;
+  scan(content);
+  return Array.from(variables.values());
 }
-var TrailingNode = import_react24.Extension.create({
-  name: "trailingNode",
-  addOptions() {
-    return {
-      node: "paragraph",
-      notAfter: ["paragraph"]
-    };
+function formatVariableName(name) {
+  return name.replace(/([A-Z])/g, " $1").replace(/[_-]/g, " ").replace(/\b\w/g, (c) => c.toUpperCase()).replace(/\s+/g, " ").trim();
+}
+
+// src/extensions/variable/variable-filler-dialog.tsx
+var import_button7 = require("@kopexa/button");
+var import_dialog5 = require("@kopexa/dialog");
+var import_input2 = require("@kopexa/input");
+var import_label5 = require("@kopexa/label");
+var React2 = __toESM(require("react"));
+var import_react_intl14 = require("react-intl");
+
+// src/extensions/variable/messages.ts
+var import_react_intl13 = require("react-intl");
+var messages6 = (0, import_react_intl13.defineMessages)({
+  title: {
+    id: "editor.variable.title",
+    defaultMessage: "Variables",
+    description: "Title for the variables section"
   },
-  addProseMirrorPlugins() {
-    const plugin = new import_state3.PluginKey(this.name);
-    const disabledNodes = Object.entries(this.editor.schema.nodes).map(([, value]) => value).filter((node) => this.options.notAfter.includes(node.name));
-    return [
-      new import_state3.Plugin({
-        key: plugin,
-        appendTransaction: (_, __, state) => {
-          const { doc, tr, schema } = state;
-          const shouldInsertNodeAtEnd = plugin.getState(state);
-          const endPosition = doc.content.size;
-          const type = schema.nodes[this.options.node];
-          if (!shouldInsertNodeAtEnd) {
-            return null;
-          }
-          if (type) {
-            return tr.insert(endPosition, type.create());
-          }
-          return null;
-        },
-        state: {
-          init: (_, state) => {
-            const lastNode = state.tr.doc.lastChild;
-            return !nodeEqualsType({ node: lastNode, types: disabledNodes });
-          },
-          apply: (tr, value) => {
-            if (!tr.docChanged) {
-              return value;
-            }
-            const lastNode = tr.doc.lastChild;
-            return !nodeEqualsType({ node: lastNode, types: disabledNodes });
-          }
-        }
-      })
-    ];
+  insert: {
+    id: "editor.variable.insert",
+    defaultMessage: "Insert variable",
+    description: "Insert variable button label"
+  },
+  empty_state: {
+    id: "editor.variable.empty_state",
+    defaultMessage: "No variables available",
+    description: "Empty state when no variables are defined"
+  },
+  hint: {
+    id: "editor.variable.hint",
+    defaultMessage: "Type {{ to insert a variable",
+    description: "Hint for inserting variables"
+  },
+  save: {
+    id: "editor.variable.save",
+    defaultMessage: "Save",
+    description: "Save button label"
+  },
+  cancel: {
+    id: "editor.variable.cancel",
+    defaultMessage: "Cancel",
+    description: "Cancel button label"
+  },
+  category_company: {
+    id: "editor.variable.category.company",
+    defaultMessage: "Company",
+    description: "Company variables category"
+  },
+  category_user: {
+    id: "editor.variable.category.user",
+    defaultMessage: "User",
+    description: "User variables category"
+  },
+  category_date: {
+    id: "editor.variable.category.date",
+    defaultMessage: "Date",
+    description: "Date variables category"
+  },
+  category_document: {
+    id: "editor.variable.category.document",
+    defaultMessage: "Document",
+    description: "Document variables category"
+  },
+  category_other: {
+    id: "editor.variable.category.other",
+    defaultMessage: "Other",
+    description: "Other variables category"
+  },
+  filler_title: {
+    id: "editor.variable.filler.title",
+    defaultMessage: "Fill in Variables",
+    description: "Title for the variable filler dialog"
+  },
+  filler_filled: {
+    id: "editor.variable.filler.filled",
+    defaultMessage: "filled",
+    description: "Label for filled count"
   }
 });
 
-// src/extensions/ui-state/index.ts
-var import_core6 = require("@tiptap/core");
-var defaultUiState = {
-  aiGenerationIsSelection: false,
-  aiGenerationIsLoading: false,
-  aiGenerationActive: false,
-  aiGenerationHasMessage: false,
-  commentInputVisible: false,
+// src/extensions/variable/variable-filler-dialog.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function VariableFillerDialog({
+  open,
+  onOpenChange,
+  variables,
+  values,
+  onSave,
+  title,
+  description
+}) {
+  const intl = (0, import_react_intl14.useIntl)();
+  const [localValues, setLocalValues] = React2.useState(
+    {}
+  );
+  React2.useEffect(() => {
+    if (open) {
+      setLocalValues({ ...values });
+    }
+  }, [open, values]);
+  const handleChange = React2.useCallback((name, value) => {
+    setLocalValues((prev) => ({
+      ...prev,
+      [name]: value
+    }));
+  }, []);
+  const handleSave = React2.useCallback(() => {
+    onSave(localValues);
+    onOpenChange(false);
+  }, [localValues, onSave, onOpenChange]);
+  const handleCancel = React2.useCallback(() => {
+    setLocalValues({ ...values });
+    onOpenChange(false);
+  }, [values, onOpenChange]);
+  const groupedVariables = React2.useMemo(() => {
+    return variables.reduce(
+      (acc, v) => {
+        const cat = v.category || intl.formatMessage(messages6.category_other);
+        if (!acc[cat]) acc[cat] = [];
+        acc[cat].push(v);
+        return acc;
+      },
+      {}
+    );
+  }, [variables, intl]);
+  const filledCount = React2.useMemo(() => {
+    return variables.filter((v) => {
+      var _a;
+      return (_a = localValues[v.name]) == null ? void 0 : _a.trim();
+    }).length;
+  }, [variables, localValues]);
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_dialog5.Dialog.Root, { open, onOpenChange, size: "md", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_dialog5.Dialog.Content, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_dialog5.Dialog.Header, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_dialog5.Dialog.Title, { children: title || intl.formatMessage(messages6.filler_title) }),
+      description && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_dialog5.Dialog.Description, { children: description })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_dialog5.Dialog.Body, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "space-y-6", children: Object.entries(groupedVariables).map(([category, vars]) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h4", { className: "text-sm font-semibold text-muted-foreground uppercase tracking-wide mb-3", children: category }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "space-y-3", children: vars.map((v) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "space-y-1.5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_label5.Label, { htmlFor: `var-${v.name}`, className: "text-sm", children: [
+          v.label,
+          v.description && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "ml-2 text-xs text-muted-foreground font-normal", children: v.description })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          import_input2.Input,
+          {
+            id: `var-${v.name}`,
+            placeholder: v.fallback || `{{${v.name}}}`,
+            value: localValues[v.name] || "",
+            onChange: (e) => handleChange(v.name, e.target.value)
+          }
+        )
+      ] }, v.name)) })
+    ] }, category)) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_dialog5.Dialog.Footer, { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "text-sm text-muted-foreground", children: [
+        filledCount,
+        " / ",
+        variables.length,
+        " ",
+        intl.formatMessage(messages6.filler_filled)
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_button7.Button, { variant: "ghost", onClick: handleCancel, children: intl.formatMessage(messages6.cancel) }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_button7.Button, { onClick: handleSave, children: intl.formatMessage(messages6.save) })
+      ] })
+    ] })
+  ] }) });
+}
+
+// src/extensions/variable/variable-suggestion.tsx
+var import_editor_utils = require("@kopexa/editor-utils");
+var import_theme6 = require("@kopexa/theme");
+var import_state2 = require("@tiptap/pm/state");
+var React6 = __toESM(require("react"));
+
+// src/ui/suggestion-menu/suggestion-menu.tsx
+var import_react27 = require("@floating-ui/react");
+var import_state = require("@tiptap/pm/state");
+var import_suggestion = require("@tiptap/suggestion");
+var React5 = __toESM(require("react"));
+
+// src/hooks/use-floating-element.ts
+var import_react24 = require("@floating-ui/react");
+var React3 = __toESM(require("react"));
+function useFloatingElement(show, referencePos, zIndex, options) {
+  const { dismissOptions, ...floatingOptions } = options || {};
+  const { refs, update, context, floatingStyles } = (0, import_react24.useFloating)({
+    open: show,
+    ...floatingOptions
+  });
+  const { isMounted, styles } = (0, import_react24.useTransitionStyles)(context);
+  const dismiss = (0, import_react24.useDismiss)(context, dismissOptions);
+  const { getReferenceProps, getFloatingProps } = (0, import_react24.useInteractions)([dismiss]);
+  React3.useEffect(() => {
+    update();
+  }, [referencePos, update]);
+  React3.useEffect(() => {
+    if (referencePos === null) {
+      return;
+    }
+    refs.setReference({
+      getBoundingClientRect: () => referencePos
+    });
+  }, [referencePos, refs]);
+  return React3.useMemo(
+    () => ({
+      isMounted,
+      ref: refs.setFloating,
+      style: {
+        ...styles,
+        ...floatingStyles,
+        zIndex
+      },
+      update,
+      getFloatingProps,
+      getReferenceProps
+    }),
+    [
+      floatingStyles,
+      isMounted,
+      refs.setFloating,
+      styles,
+      update,
+      zIndex,
+      getFloatingProps,
+      getReferenceProps
+    ]
+  );
+}
+
+// src/hooks/use-menu-navigation.ts
+var React4 = __toESM(require("react"));
+function useMenuNavigation({
+  editor,
+  containerRef,
+  query,
+  items,
+  onSelect,
+  onClose,
+  orientation = "vertical",
+  autoSelectFirstItem = true
+}) {
+  const [selectedIndex, setSelectedIndex] = React4.useState(
+    autoSelectFirstItem ? 0 : -1
+  );
+  React4.useEffect(() => {
+    const handleKeyboardNavigation = (event) => {
+      if (!items.length) return false;
+      const moveNext = () => setSelectedIndex((currentIndex) => {
+        if (currentIndex === -1) return 0;
+        return (currentIndex + 1) % items.length;
+      });
+      const movePrev = () => setSelectedIndex((currentIndex) => {
+        if (currentIndex === -1) return items.length - 1;
+        return (currentIndex - 1 + items.length) % items.length;
+      });
+      switch (event.key) {
+        case "ArrowUp": {
+          if (orientation === "horizontal") return false;
+          event.preventDefault();
+          movePrev();
+          return true;
+        }
+        case "ArrowDown": {
+          if (orientation === "horizontal") return false;
+          event.preventDefault();
+          moveNext();
+          return true;
+        }
+        case "ArrowLeft": {
+          if (orientation === "vertical") return false;
+          event.preventDefault();
+          movePrev();
+          return true;
+        }
+        case "ArrowRight": {
+          if (orientation === "vertical") return false;
+          event.preventDefault();
+          moveNext();
+          return true;
+        }
+        case "Tab": {
+          event.preventDefault();
+          if (event.shiftKey) {
+            movePrev();
+          } else {
+            moveNext();
+          }
+          return true;
+        }
+        case "Home": {
+          event.preventDefault();
+          setSelectedIndex(0);
+          return true;
+        }
+        case "End": {
+          event.preventDefault();
+          setSelectedIndex(items.length - 1);
+          return true;
+        }
+        case "Enter": {
+          if (event.isComposing) return false;
+          event.preventDefault();
+          if (selectedIndex !== -1 && items[selectedIndex]) {
+            onSelect == null ? void 0 : onSelect(items[selectedIndex]);
+          }
+          return true;
+        }
+        case "Escape": {
+          event.preventDefault();
+          onClose == null ? void 0 : onClose();
+          return true;
+        }
+        default:
+          return false;
+      }
+    };
+    let targetElement = null;
+    if (editor) {
+      targetElement = editor.view.dom;
+    } else if (containerRef == null ? void 0 : containerRef.current) {
+      targetElement = containerRef.current;
+    }
+    if (targetElement) {
+      targetElement.addEventListener("keydown", handleKeyboardNavigation, true);
+      return () => {
+        targetElement == null ? void 0 : targetElement.removeEventListener(
+          "keydown",
+          handleKeyboardNavigation,
+          true
+        );
+      };
+    }
+    return void 0;
+  }, [
+    editor,
+    containerRef,
+    items,
+    selectedIndex,
+    onSelect,
+    onClose,
+    orientation
+  ]);
+  React4.useEffect(() => {
+    if (query) {
+      setSelectedIndex(autoSelectFirstItem ? 0 : -1);
+    }
+  }, [query, autoSelectFirstItem]);
+  return {
+    selectedIndex: items.length ? selectedIndex : void 0,
+    setSelectedIndex
+  };
+}
+
+// src/hooks/use-tiptap-editor.ts
+var import_react25 = require("@tiptap/react");
+var import_react26 = require("react");
+function useTiptapEditor(providedEditor) {
+  const { editor: coreEditor } = (0, import_react25.useCurrentEditor)();
+  const mainEditor = (0, import_react26.useMemo)(
+    () => providedEditor || coreEditor,
+    [providedEditor, coreEditor]
+  );
+  const editorState = (0, import_react25.useEditorState)({
+    editor: mainEditor,
+    selector(context) {
+      if (!context.editor) {
+        return {
+          editor: null,
+          editorState: void 0,
+          canCommand: void 0
+        };
+      }
+      return {
+        editor: context.editor,
+        editorState: context.editor.state,
+        canCommand: context.editor.can
+      };
+    }
+  });
+  return editorState || { editor: null };
+}
+
+// src/ui/suggestion-menu/suggestion-menu-utils.ts
+function calculateStartPosition(cursorPosition, previousNode, triggerChar) {
+  if (!(previousNode == null ? void 0 : previousNode.text) || !triggerChar) {
+    return cursorPosition;
+  }
+  const commandText = previousNode.text;
+  const triggerCharIndex = commandText.lastIndexOf(triggerChar);
+  if (triggerCharIndex === -1) {
+    return cursorPosition;
+  }
+  const textLength = commandText.substring(triggerCharIndex).length;
+  return cursorPosition - textLength;
+}
+function filterSuggestionItems(items, query) {
+  const normalizedQuery = query.trim().toLowerCase();
+  if (!normalizedQuery) {
+    return items;
+  }
+  return items.filter((item) => {
+    var _a, _b;
+    if (item.title.toLowerCase().includes(normalizedQuery)) {
+      return true;
+    }
+    if ((_a = item.subtext) == null ? void 0 : _a.toLowerCase().includes(normalizedQuery)) {
+      return true;
+    }
+    if ((_b = item.keywords) == null ? void 0 : _b.some(
+      (keyword) => keyword.toLowerCase().includes(normalizedQuery)
+    )) {
+      return true;
+    }
+    return false;
+  }).sort((a, b) => {
+    const aTitle = a.title.toLowerCase();
+    const bTitle = b.title.toLowerCase();
+    if (aTitle === normalizedQuery && bTitle !== normalizedQuery) return -1;
+    if (bTitle === normalizedQuery && aTitle !== normalizedQuery) return 1;
+    if (aTitle.startsWith(normalizedQuery) && !bTitle.startsWith(normalizedQuery))
+      return -1;
+    if (bTitle.startsWith(normalizedQuery) && !aTitle.startsWith(normalizedQuery))
+      return 1;
+    return 0;
+  });
+}
+
+// src/ui/suggestion-menu/suggestion-menu.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var SuggestionMenu = ({
+  editor: providedEditor,
+  floatingOptions,
+  selector = "tiptap-suggestion-menu",
+  children,
+  maxHeight = 384,
+  pluginKey = import_suggestion.SuggestionPluginKey,
+  ...internalSuggestionProps
+}) => {
+  const { editor } = useTiptapEditor(providedEditor);
+  const [show, setShow] = React5.useState(false);
+  const [internalClientRect, setInternalClientRect] = React5.useState(null);
+  const [internalCommand, setInternalCommand] = React5.useState(null);
+  const [internalItems, setInternalItems] = React5.useState(
+    []
+  );
+  const [internalQuery, setInternalQuery] = React5.useState("");
+  const [, setInternalRange] = React5.useState(null);
+  const { ref, style, getFloatingProps, isMounted } = useFloatingElement(
+    show,
+    internalClientRect,
+    1e3,
+    {
+      placement: "bottom-start",
+      middleware: [
+        (0, import_react27.offset)(10),
+        (0, import_react27.flip)({
+          mainAxis: true,
+          crossAxis: false
+        }),
+        (0, import_react27.shift)(),
+        (0, import_react27.size)({
+          apply({ availableHeight, elements }) {
+            if (elements.floating) {
+              const maxHeightValue = maxHeight ? Math.min(maxHeight, availableHeight) : availableHeight;
+              elements.floating.style.setProperty(
+                "--suggestion-menu-max-height",
+                `${maxHeightValue}px`
+              );
+            }
+          }
+        })
+      ],
+      onOpenChange(open) {
+        if (!open) {
+          setShow(false);
+        }
+      },
+      ...floatingOptions
+    }
+  );
+  const internalSuggestionPropsRef = React5.useRef(internalSuggestionProps);
+  React5.useEffect(() => {
+    internalSuggestionPropsRef.current = internalSuggestionProps;
+  }, [internalSuggestionProps]);
+  const closePopup = React5.useCallback(() => {
+    setShow(false);
+  }, []);
+  React5.useEffect(() => {
+    if (!editor || editor.isDestroyed) {
+      return;
+    }
+    const existingPlugin = editor.state.plugins.find(
+      (plugin) => plugin.spec.key === pluginKey
+    );
+    if (existingPlugin) {
+      editor.unregisterPlugin(pluginKey);
+    }
+    const suggestion = (0, import_suggestion.Suggestion)({
+      pluginKey: pluginKey instanceof import_state.PluginKey ? pluginKey : new import_state.PluginKey(pluginKey),
+      editor,
+      command({ editor: editor2, range, props }) {
+        var _a, _b;
+        if (!range) {
+          return;
+        }
+        const { view, state } = editor2;
+        const { selection } = state;
+        const isMention = editor2.extensionManager.extensions.some(
+          (extension) => {
+            var _a2, _b2;
+            const name = extension.name;
+            return name === "mention" && ((_b2 = (_a2 = extension.options) == null ? void 0 : _a2.suggestion) == null ? void 0 : _b2.char) === internalSuggestionPropsRef.current.char;
+          }
+        );
+        if (!isMention) {
+          const cursorPosition = selection.$from.pos;
+          const previousNode = (_a = selection.$head) == null ? void 0 : _a.nodeBefore;
+          const startPosition = previousNode ? calculateStartPosition(
+            cursorPosition,
+            previousNode,
+            internalSuggestionPropsRef.current.char
+          ) : selection.$from.start();
+          const transaction = state.tr.deleteRange(
+            startPosition,
+            cursorPosition
+          );
+          view.dispatch(transaction);
+        }
+        const nodeAfter = view.state.selection.$to.nodeAfter;
+        const overrideSpace = (_b = nodeAfter == null ? void 0 : nodeAfter.text) == null ? void 0 : _b.startsWith(" ");
+        const rangeToUse = { ...range };
+        if (overrideSpace) {
+          rangeToUse.to += 1;
+        }
+        props.onSelect({ editor: editor2, range: rangeToUse, context: props.context });
+      },
+      render: () => {
+        return {
+          onStart: (props) => {
+            var _a, _b;
+            setInternalCommand(() => props.command);
+            setInternalItems(props.items);
+            setInternalQuery(props.query);
+            setInternalRange(props.range);
+            setInternalClientRect((_b = (_a = props.clientRect) == null ? void 0 : _a.call(props)) != null ? _b : null);
+            setShow(true);
+          },
+          onUpdate: (props) => {
+            var _a, _b;
+            setInternalCommand(() => props.command);
+            setInternalItems(props.items);
+            setInternalQuery(props.query);
+            setInternalRange(props.range);
+            setInternalClientRect((_b = (_a = props.clientRect) == null ? void 0 : _a.call(props)) != null ? _b : null);
+          },
+          onKeyDown: (props) => {
+            if (props.event.key === "Escape") {
+              closePopup();
+              return true;
+            }
+            return false;
+          },
+          onExit: () => {
+            setInternalCommand(null);
+            setInternalItems([]);
+            setInternalQuery("");
+            setInternalRange(null);
+            setInternalClientRect(null);
+            setShow(false);
+          }
+        };
+      },
+      ...internalSuggestionPropsRef.current
+    });
+    editor.registerPlugin(suggestion);
+    return () => {
+      if (!editor.isDestroyed) {
+        editor.unregisterPlugin(pluginKey);
+      }
+    };
+  }, [editor, pluginKey, closePopup]);
+  const onSelect = React5.useCallback(
+    (item) => {
+      closePopup();
+      if (internalCommand) {
+        internalCommand(item);
+      }
+    },
+    [closePopup, internalCommand]
+  );
+  const { selectedIndex } = useMenuNavigation({
+    editor,
+    query: internalQuery,
+    items: internalItems,
+    onSelect
+  });
+  if (!isMounted || !show || !editor) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react27.FloatingPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    "div",
+    {
+      ref,
+      style,
+      ...getFloatingProps(),
+      "data-selector": selector,
+      className: "tiptap-suggestion-menu",
+      role: "listbox",
+      "aria-label": "Suggestions",
+      onPointerDown: (e) => e.preventDefault(),
+      children: children({
+        items: internalItems,
+        selectedIndex,
+        onSelect
+      })
+    }
+  ) });
+};
+
+// src/extensions/variable/variable-suggestion.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var VariableSuggestionPluginKey = new import_state2.PluginKey("variableSuggestion");
+function VariableSuggestion({
+  editor,
+  variables
+}) {
+  const getItems = React6.useCallback(
+    ({ query }) => {
+      const normalizedQuery = query.toLowerCase().trim();
+      const items = [];
+      const matchingVariables = variables.filter((variable) => {
+        var _a, _b;
+        if (!normalizedQuery) return true;
+        return variable.name.toLowerCase().includes(normalizedQuery) || variable.label.toLowerCase().includes(normalizedQuery) || ((_a = variable.category) == null ? void 0 : _a.toLowerCase().includes(normalizedQuery)) || ((_b = variable.description) == null ? void 0 : _b.toLowerCase().includes(normalizedQuery));
+      });
+      for (const variable of matchingVariables) {
+        items.push({
+          title: variable.label,
+          subtext: variable.name,
+          group: variable.category,
+          keywords: [variable.name, variable.label, variable.category].filter(
+            Boolean
+          ),
+          onSelect: ({ editor: editor2 }) => {
+            const attrs = {
+              name: variable.name,
+              fallback: variable.fallback,
+              category: variable.category
+            };
+            editor2.chain().focus().insertVariable(attrs).run();
+          }
+        });
+      }
+      if (normalizedQuery && !variables.some((v) => v.name.toLowerCase() === normalizedQuery)) {
+        items.push({
+          title: `Neue Variable "${query}"`,
+          subtext: query,
+          group: "Neu",
+          onSelect: ({ editor: editor2 }) => {
+            const attrs = {
+              name: query
+            };
+            editor2.chain().focus().insertVariable(attrs).run();
+          }
+        });
+      }
+      return items;
+    },
+    [variables]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    SuggestionMenu,
+    {
+      editor,
+      pluginKey: VariableSuggestionPluginKey,
+      char: "{{",
+      items: getItems,
+      allowSpaces: false,
+      selector: "tiptap-variable-suggestion-menu",
+      children: (props) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(VariableList, { ...props })
+    }
+  );
+}
+var VariableItem = ({
+  item,
+  isSelected,
+  onSelect
+}) => {
+  const itemRef = React6.useRef(null);
+  React6.useEffect(() => {
+    const selector = document.querySelector(
+      '[data-selector="tiptap-variable-suggestion-menu"]'
+    );
+    if (!itemRef.current || !isSelected || !selector) return;
+    const overflow = (0, import_editor_utils.getElementOverflowPosition)(itemRef.current, selector);
+    if (overflow === "top") {
+      itemRef.current.scrollIntoView(true);
+    } else if (overflow === "bottom") {
+      itemRef.current.scrollIntoView(false);
+    }
+  }, [isSelected]);
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+    "button",
+    {
+      ref: itemRef,
+      type: "button",
+      "data-active-state": isSelected ? "on" : "off",
+      onClick: onSelect,
+      className: "w-full flex items-center justify-between gap-3 px-2 py-1.5 text-sm rounded-sm outline-none hover:bg-muted data-[active-state=on]:bg-muted",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "font-medium truncate", children: item.title }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("code", { className: "text-xs text-muted-foreground font-mono shrink-0", children: item.subtext })
+      ]
+    }
+  );
+};
+var VariableList = ({
+  items,
+  selectedIndex,
+  onSelect
+}) => {
+  const styles = (0, import_theme6.slashDropdownMenu)();
+  const renderedItems = React6.useMemo(() => {
+    const rendered = [];
+    const groups = {};
+    items.forEach((item, index) => {
+      const groupLabel = item.group || "";
+      if (!groups[groupLabel]) {
+        groups[groupLabel] = { items: [], indices: [] };
+      }
+      groups[groupLabel].items.push(item);
+      groups[groupLabel].indices.push(index);
+    });
+    Object.entries(groups).forEach(([groupLabel, groupData], groupIndex) => {
+      const groupItems = groupData.items.map((item, itemIndex) => {
+        const originalIndex = groupData.indices[itemIndex];
+        return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          VariableItem,
+          {
+            item,
+            isSelected: originalIndex === selectedIndex,
+            onSelect: () => onSelect(item)
+          },
+          `item-${originalIndex}-${item.title}`
+        );
+      });
+      if (groupLabel) {
+        rendered.push(
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "py-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "px-2 py-1 text-xs font-semibold text-muted-foreground uppercase tracking-wide", children: groupLabel }),
+            groupItems
+          ] }, `group-${groupIndex}-${groupLabel}`)
+        );
+      } else {
+        rendered.push(...groupItems);
+      }
+    });
+    return rendered;
+  }, [items, selectedIndex, onSelect]);
+  if (!renderedItems.length) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    "div",
+    {
+      className: styles.card(),
+      style: {
+        maxHeight: "var(--suggestion-menu-max-height)",
+        minWidth: "240px"
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: styles.body(), children: renderedItems })
+    }
+  );
+};
+
+// src/hooks/use-create-editor.ts
+var import_extension_code = require("@kopexa/extension-code");
+var import_extension_controlref = require("@kopexa/extension-controlref");
+var import_extension_table = require("@kopexa/extension-table");
+var import_extension_file_handler = require("@tiptap/extension-file-handler");
+var import_extension_highlight = require("@tiptap/extension-highlight");
+var import_extension_invisible_characters = __toESM(require("@tiptap/extension-invisible-characters"));
+var import_extension_list = require("@tiptap/extension-list");
+var import_extension_subscript = require("@tiptap/extension-subscript");
+var import_extension_superscript = require("@tiptap/extension-superscript");
+var import_extension_table_of_contents = require("@tiptap/extension-table-of-contents");
+var import_extension_text_align = require("@tiptap/extension-text-align");
+var import_extension_text_style = require("@tiptap/extension-text-style");
+var import_extension_typography = require("@tiptap/extension-typography");
+var import_extension_unique_id = require("@tiptap/extension-unique-id");
+var import_extensions = require("@tiptap/extensions");
+var import_react31 = require("@tiptap/react");
+var import_starter_kit = require("@tiptap/starter-kit");
+var import_react32 = require("react");
+
+// src/extensions/link/index.ts
+var import_extension_link = __toESM(require("@tiptap/extension-link"));
+var import_state3 = require("@tiptap/pm/state");
+var import_react28 = require("@tiptap/react");
+var Link = import_extension_link.default.extend({
+  inclusive: false,
+  parseHTML() {
+    return [
+      {
+        tag: 'a[href]:not([data-type="button"]):not([href *= "javascript:" i])'
+      }
+    ];
+  },
+  addProseMirrorPlugins() {
+    var _a;
+    const { editor } = this;
+    return [
+      ...((_a = this.parent) == null ? void 0 : _a.call(this)) || [],
+      new import_state3.Plugin({
+        key: new import_state3.PluginKey("linkKeyHandler"),
+        props: {
+          handleKeyDown: (_, event) => {
+            const { selection } = editor.state;
+            if (event.key === "Escape" && selection.empty !== true) {
+              editor.commands.focus(selection.to, { scrollIntoView: false });
+            }
+            return false;
+          },
+          handleClick(view, pos) {
+            const { schema, doc, tr } = view.state;
+            let range;
+            if (schema.marks.link) {
+              range = (0, import_react28.getMarkRange)(doc.resolve(pos), schema.marks.link);
+            }
+            if (!range) {
+              return;
+            }
+            const { from, to } = range;
+            const start = Math.min(from, to);
+            const end = Math.max(from, to);
+            if (pos < start || pos > end) {
+              return;
+            }
+            const $start = doc.resolve(start);
+            const $end = doc.resolve(end);
+            const transaction = tr.setSelection(
+              new import_state3.TextSelection($start, $end)
+            );
+            view.dispatch(transaction);
+          }
+        }
+      })
+    ];
+  }
+});
+
+// src/extensions/selection/index.ts
+var import_state4 = require("@tiptap/pm/state");
+var import_view = require("@tiptap/pm/view");
+var import_react29 = require("@tiptap/react");
+var Selection = import_react29.Extension.create({
+  name: "selection",
+  addProseMirrorPlugins() {
+    const { editor } = this;
+    return [
+      new import_state4.Plugin({
+        key: new import_state4.PluginKey("selection"),
+        props: {
+          decorations(state) {
+            if (state.selection.empty) {
+              return null;
+            }
+            if (editor.isFocused === true || !editor.isEditable) {
+              return null;
+            }
+            if ((0, import_react29.isNodeSelection)(state.selection)) {
+              return null;
+            }
+            return import_view.DecorationSet.create(state.doc, [
+              import_view.Decoration.inline(state.selection.from, state.selection.to, {
+                class: "selection"
+              })
+            ]);
+          }
+        }
+      })
+    ];
+  }
+});
+
+// src/extensions/trailing-node/index.ts
+var import_state5 = require("@tiptap/pm/state");
+var import_react30 = require("@tiptap/react");
+function nodeEqualsType({
+  types,
+  node
+}) {
+  if (!node) return false;
+  if (Array.isArray(types)) {
+    return types.includes(node.type);
+  }
+  return node.type === types;
+}
+var TrailingNode = import_react30.Extension.create({
+  name: "trailingNode",
+  addOptions() {
+    return {
+      node: "paragraph",
+      notAfter: ["paragraph"]
+    };
+  },
+  addProseMirrorPlugins() {
+    const plugin = new import_state5.PluginKey(this.name);
+    const disabledNodes = Object.entries(this.editor.schema.nodes).map(([, value]) => value).filter((node) => this.options.notAfter.includes(node.name));
+    return [
+      new import_state5.Plugin({
+        key: plugin,
+        appendTransaction: (_, __, state) => {
+          const { doc, tr, schema } = state;
+          const shouldInsertNodeAtEnd = plugin.getState(state);
+          const endPosition = doc.content.size;
+          const type = schema.nodes[this.options.node];
+          if (!shouldInsertNodeAtEnd) {
+            return null;
+          }
+          if (type) {
+            return tr.insert(endPosition, type.create());
+          }
+          return null;
+        },
+        state: {
+          init: (_, state) => {
+            const lastNode = state.tr.doc.lastChild;
+            return !nodeEqualsType({ node: lastNode, types: disabledNodes });
+          },
+          apply: (tr, value) => {
+            if (!tr.docChanged) {
+              return value;
+            }
+            const lastNode = tr.doc.lastChild;
+            return !nodeEqualsType({ node: lastNode, types: disabledNodes });
+          }
+        }
+      })
+    ];
+  }
+});
+
+// src/extensions/ui-state/index.ts
+var import_core7 = require("@tiptap/core");
+var defaultUiState = {
+  aiGenerationIsSelection: false,
+  aiGenerationIsLoading: false,
+  aiGenerationActive: false,
+  aiGenerationHasMessage: false,
+  commentInputVisible: false,
   lockDragHandle: false,
   isDragging: false
 };
-var UiState = import_core6.Extension.create({
+var UiState = import_core7.Extension.create({
   name: "uiState",
   addStorage() {
     return {
@@ -2439,20 +3420,22 @@ var useCreateEditor = ({
   enableControls = false,
   controlResolver,
   fileHandler: fileHandlerProp,
+  enableVariables = false,
   ...options
 }) => {
   const fileHandlerFromContext = useEditorFile();
   const fileHandler = fileHandlerProp != null ? fileHandlerProp : fileHandlerFromContext;
-  const [extensions] = (0, import_react26.useState)(
+  const [extensions] = (0, import_react32.useState)(
     () => getExtensions({
       editable,
       placeholder,
       enableControls,
       controlResolver,
-      fileHandler
+      fileHandler,
+      enableVariables
     })
   );
-  const editor = (0, import_react25.useEditor)({
+  const editor = (0, import_react31.useEditor)({
     editorProps: {
       attributes: {
         autocomplete: "off",
@@ -2471,7 +3454,7 @@ var useCreateEditor = ({
     content: safeParseContent(content),
     ...options
   });
-  (0, import_react26.useEffect)(() => {
+  (0, import_react32.useEffect)(() => {
     if (editor && editor.isEditable !== editable) {
       editor.setEditable(editable);
     }
@@ -2483,7 +3466,8 @@ function getExtensions({
   placeholder,
   enableControls = false,
   controlResolver,
-  fileHandler
+  fileHandler,
+  enableVariables = false
 }) {
   const extensions = [
     import_starter_kit.StarterKit.configure({
@@ -2549,6 +3533,9 @@ function getExtensions({
   if (enableControls) {
     extensions.push(import_extension_controlref.ControlKit.configure({ resolver: controlResolver }));
   }
+  if (enableVariables) {
+    extensions.push(VariableNode);
+  }
   if (fileHandler) {
     extensions.push(
       import_extension_file_handler.FileHandler.configure({
@@ -2633,19 +3620,19 @@ async function handleFileUpload(editor, file, fileHandler, pos) {
 }
 
 // src/presets/basic/index.tsx
-var import_theme7 = require("@kopexa/theme");
-var import_react54 = require("@tiptap/react");
-var import_react55 = require("react");
+var import_theme9 = require("@kopexa/theme");
+var import_react56 = require("@tiptap/react");
+var import_react57 = require("react");
 
 // src/context/editor-context.ts
 var import_react_utils = require("@kopexa/react-utils");
 var [EditorUIProvider, useEditorUIContext] = (0, import_react_utils.createContext)();
 
 // src/hooks/use-ui-editor-state.ts
-var import_react27 = require("@tiptap/react");
+var import_react33 = require("@tiptap/react");
 function useUiEditorState(editor) {
   var _a;
-  return (_a = (0, import_react27.useEditorState)({
+  return (_a = (0, import_react33.useEditorState)({
     editor,
     selector: ({ editor: editor2 }) => {
       if (!editor2) return defaultUiState;
@@ -2665,47 +3652,18 @@ function useUiEditorState(editor) {
 var import_toolbar3 = require("@kopexa/toolbar");
 var import_menus = require("@tiptap/react/menus");
 
-// src/ui/link-popover/link-popover.tsx
-var import_button7 = require("@kopexa/button");
-var import_icons9 = require("@kopexa/icons");
-var import_input2 = require("@kopexa/input");
-var import_popover = require("@kopexa/popover");
-var import_toolbar = require("@kopexa/toolbar");
-var import_react30 = require("react");
-
-// src/hooks/use-tiptap-editor.ts
-var import_react28 = require("@tiptap/react");
-var import_react29 = require("react");
-function useTiptapEditor(providedEditor) {
-  const { editor: coreEditor } = (0, import_react28.useCurrentEditor)();
-  const mainEditor = (0, import_react29.useMemo)(
-    () => providedEditor || coreEditor,
-    [providedEditor, coreEditor]
-  );
-  const editorState = (0, import_react28.useEditorState)({
-    editor: mainEditor,
-    selector(context) {
-      if (!context.editor) {
-        return {
-          editor: null,
-          editorState: void 0,
-          canCommand: void 0
-        };
-      }
-      return {
-        editor: context.editor,
-        editorState: context.editor.state,
-        canCommand: context.editor.can
-      };
-    }
-  });
-  return editorState || { editor: null };
-}
+// src/ui/link-popover/link-popover.tsx
+var import_button8 = require("@kopexa/button");
+var import_icons9 = require("@kopexa/icons");
+var import_input3 = require("@kopexa/input");
+var import_popover = require("@kopexa/popover");
+var import_toolbar = require("@kopexa/toolbar");
+var import_react34 = require("react");
 
 // src/ui/link-popover/use-link-popover.ts
-var import_editor_utils = require("@kopexa/editor-utils");
+var import_editor_utils2 = require("@kopexa/editor-utils");
 var import_icons8 = require("@kopexa/icons");
-var React = __toESM(require("react"));
+var React7 = __toESM(require("react"));
 
 // src/utils/index.ts
 var MAX_FILE_SIZE = 5 * 1024 * 1024;
@@ -2810,7 +3768,7 @@ function isLinkActive(editor) {
 }
 function shouldShowLinkButton(props) {
   const { editor, hideWhenUnavailable } = props;
-  const linkInSchema = (0, import_editor_utils.isMarkInSchema)("link", editor);
+  const linkInSchema = (0, import_editor_utils2.isMarkInSchema)("link", editor);
   if (!linkInSchema || !editor) {
     return false;
   }
@@ -2821,15 +3779,15 @@ function shouldShowLinkButton(props) {
 }
 function useLinkHandler(props) {
   const { editor, onSetLink } = props;
-  const [url, setUrl] = React.useState(null);
-  React.useEffect(() => {
+  const [url, setUrl] = React7.useState(null);
+  React7.useEffect(() => {
     if (!editor) return;
     const { href } = editor.getAttributes("link");
     if (isLinkActive(editor) && url === null) {
       setUrl(href || "");
     }
   }, [editor, url]);
-  React.useEffect(() => {
+  React7.useEffect(() => {
     if (!editor) return;
     const updateLinkState = () => {
       const { href } = editor.getAttributes("link");
@@ -2840,7 +3798,7 @@ function useLinkHandler(props) {
       editor.off("selectionUpdate", updateLinkState);
     };
   }, [editor]);
-  const setLink = React.useCallback(() => {
+  const setLink = React7.useCallback(() => {
     if (!url || !editor) return;
     const { selection } = editor.state;
     const isEmpty = selection.empty;
@@ -2853,12 +3811,12 @@ function useLinkHandler(props) {
     setUrl(null);
     onSetLink == null ? void 0 : onSetLink();
   }, [editor, onSetLink, url]);
-  const removeLink = React.useCallback(() => {
+  const removeLink = React7.useCallback(() => {
     if (!editor) return;
     editor.chain().focus().extendMarkRange("link").unsetLink().setMeta("preventAutolink", true).run();
     setUrl("");
   }, [editor]);
-  const openLink = React.useCallback(
+  const openLink = React7.useCallback(
     (target = "_blank", features = "noopener,noreferrer") => {
       if (!url) return;
       const safeUrl = sanitizeUrl(url, window.location.href);
@@ -2880,8 +3838,8 @@ function useLinkState(props) {
   const { editor, hideWhenUnavailable = false } = props;
   const canSet = canSetLink(editor);
   const isActive = isLinkActive(editor);
-  const [isVisible, setIsVisible] = React.useState(false);
-  React.useEffect(() => {
+  const [isVisible, setIsVisible] = React7.useState(false);
+  React7.useEffect(() => {
     if (!editor) return;
     const handleSelectionUpdate = () => {
       setIsVisible(
@@ -2929,9 +3887,9 @@ function useLinkPopover(config) {
 }
 
 // src/ui/link-popover/link-popover.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var LinkButton = ({ className, children, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     import_toolbar.ToolbarButton,
     {
       type: "button",
@@ -2943,7 +3901,7 @@ var LinkButton = ({ className, children, ...props }) => {
       title: "Link",
       isIconOnly: !children,
       ...props,
-      children: children || /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_icons9.LinkIcon, {})
+      children: children || /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_icons9.LinkIcon, {})
     }
   );
 };
@@ -2956,8 +3914,8 @@ var LinkMain = ({
   isActive,
   onSave
 }) => {
-  const [isEditing, setIsEditing] = (0, import_react30.useState)(!isActive || !url);
-  (0, import_react30.useEffect)(() => {
+  const [isEditing, setIsEditing] = (0, import_react34.useState)(!isActive || !url);
+  (0, import_react34.useEffect)(() => {
     setIsEditing(!isActive || !url);
   }, [isActive, url]);
   const handleKeyDown = (event) => {
@@ -2980,9 +3938,9 @@ var LinkMain = ({
     setIsEditing(true);
   };
   if (isEditing) {
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-1 min-w-[280px]", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-        import_input2.Input,
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center gap-1 min-w-[280px]", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        import_input3.Input,
         {
           type: "url",
           placeholder: "Enter URL...",
@@ -2996,8 +3954,8 @@ var LinkMain = ({
           autoFocus: true
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-        import_button7.IconButton,
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        import_button8.IconButton,
         {
           type: "button",
           size: "sm",
@@ -3005,13 +3963,13 @@ var LinkMain = ({
           onClick: handleSave,
           "aria-label": "Save link",
           disabled: !url,
-          children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_icons9.CheckIcon, { className: "size-4" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_icons9.CheckIcon, { className: "size-4" })
         }
       )
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-1 min-w-[280px]", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center gap-1 min-w-[280px]", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       "a",
       {
         href: url,
@@ -3025,38 +3983,38 @@ var LinkMain = ({
         children: url
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-0.5 border-l pl-1 ml-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-        import_button7.IconButton,
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center gap-0.5 border-l pl-1 ml-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        import_button8.IconButton,
         {
           type: "button",
           size: "sm",
           variant: "ghost",
           onClick: openLink,
           "aria-label": "Open link in new tab",
-          children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_icons9.ExternalLinkIcon, { className: "size-4" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_icons9.ExternalLinkIcon, { className: "size-4" })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-        import_button7.IconButton,
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        import_button8.IconButton,
         {
           type: "button",
           size: "sm",
           variant: "ghost",
           onClick: handleEdit,
           "aria-label": "Edit link",
-          children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_icons9.EditIcon, { className: "size-4" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_icons9.EditIcon, { className: "size-4" })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-        import_button7.IconButton,
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        import_button8.IconButton,
         {
           type: "button",
           size: "sm",
           variant: "ghost",
           onClick: removeLink,
           "aria-label": "Remove link",
-          children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_icons9.TrashIcon, { className: "size-4" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_icons9.TrashIcon, { className: "size-4" })
         }
       )
     ] })
@@ -3073,7 +4031,7 @@ function LinkPopover({
   ...buttonProps
 }) {
   const { editor } = useTiptapEditor(providedEditor);
-  const [isOpen, setIsOpen] = (0, import_react30.useState)(false);
+  const [isOpen, setIsOpen] = (0, import_react34.useState)(false);
   const {
     isVisible,
     canSet,
@@ -3089,18 +4047,18 @@ function LinkPopover({
     hideWhenUnavailable,
     onSetLink
   });
-  const handleOnOpenChange = (0, import_react30.useCallback)(
+  const handleOnOpenChange = (0, import_react34.useCallback)(
     (nextIsOpen) => {
       setIsOpen(nextIsOpen);
       onOpenChange == null ? void 0 : onOpenChange(nextIsOpen);
     },
     [onOpenChange]
   );
-  const handleSetLink = (0, import_react30.useCallback)(() => {
+  const handleSetLink = (0, import_react34.useCallback)(() => {
     setLink();
     setIsOpen(false);
   }, [setLink]);
-  const handleClick = (0, import_react30.useCallback)(
+  const handleClick = (0, import_react34.useCallback)(
     (event) => {
       onClick == null ? void 0 : onClick(event);
       if (event.defaultPrevented) return;
@@ -3108,7 +4066,7 @@ function LinkPopover({
     },
     [onClick, isOpen]
   );
-  (0, import_react30.useEffect)(() => {
+  (0, import_react34.useEffect)(() => {
     if (autoOpenOnLinkActive && isActive) {
       setIsOpen(true);
     }
@@ -3116,17 +4074,17 @@ function LinkPopover({
   if (!isVisible) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
     import_popover.Popover.Root,
     {
       open: isOpen,
       onOpenChange: handleOnOpenChange,
       spacing: "dense",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           import_popover.Popover.Trigger,
           {
-            render: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            render: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
               LinkButton,
               {
                 "data-disabled": !canSet,
@@ -3140,7 +4098,7 @@ function LinkPopover({
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_popover.Popover.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_popover.Popover.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           LinkMain,
           {
             url,
@@ -3159,12 +4117,12 @@ function LinkPopover({
 LinkButton.displayName = "LinkButton";
 
 // src/ui/mark-button/index.tsx
-var import_editor_utils2 = require("@kopexa/editor-utils");
+var import_editor_utils3 = require("@kopexa/editor-utils");
 var import_icons10 = require("@kopexa/icons");
 var import_toolbar2 = require("@kopexa/toolbar");
-var import_react31 = require("@tiptap/react");
-var import_react32 = require("react");
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_react35 = require("@tiptap/react");
+var import_react36 = require("react");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var markIcons = {
   bold: import_icons10.BoldIcon,
   italic: import_icons10.ItalicIcon,
@@ -3185,7 +4143,7 @@ var markShortcutKeys = {
 };
 function canToggleMark(editor, type) {
   if (!editor || !editor.isEditable) return false;
-  if (!(0, import_editor_utils2.isMarkInSchema)(type, editor) || (0, import_editor_utils2.isNodeTypeSelected)(editor, ["image"]))
+  if (!(0, import_editor_utils3.isMarkInSchema)(type, editor) || (0, import_editor_utils3.isNodeTypeSelected)(editor, ["image"]))
     return false;
   return editor.can().toggleMark(type);
 }
@@ -3210,7 +4168,7 @@ function shouldShowMarkButton(params) {
     return false;
   }
   if (hideWhenUnavailable) {
-    if ((0, import_react31.isNodeSelection)(editor.state.selection) || !canToggleMark(editor, type)) {
+    if ((0, import_react35.isNodeSelection)(editor.state.selection) || !canToggleMark(editor, type)) {
       return false;
     }
   }
@@ -3220,7 +4178,7 @@ function getFormattedMarkName(type) {
   return type.charAt(0).toUpperCase() + type.slice(1);
 }
 function useMarkState(editor, type, disabled = false) {
-  const markInSchema = (0, import_editor_utils2.isMarkInSchema)(type, editor);
+  const markInSchema = (0, import_editor_utils3.isMarkInSchema)(type, editor);
   const isDisabled = isMarkButtonDisabled(editor, type, disabled);
   const isActive = isMarkActive(editor, type);
   const Icon = markIcons[type];
@@ -3255,7 +4213,7 @@ var MarkButton = ({
     shortcutKey,
     formattedName
   } = useMarkState(editor, type, disabled);
-  const handleClick = (0, import_react32.useCallback)(
+  const handleClick = (0, import_react36.useCallback)(
     (e) => {
       onClick == null ? void 0 : onClick(e);
       if (!e.defaultPrevented && !isDisabled && editor) {
@@ -3264,7 +4222,7 @@ var MarkButton = ({
     },
     [onClick, isDisabled, editor, type]
   );
-  const show = (0, import_react32.useMemo)(() => {
+  const show = (0, import_react36.useMemo)(() => {
     return shouldShowMarkButton({
       editor,
       type,
@@ -3275,7 +4233,7 @@ var MarkButton = ({
   if (!show || !editor || !editor.isEditable) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     import_toolbar2.ToolbarButton,
     {
       type: "button",
@@ -3293,739 +4251,326 @@ var MarkButton = ({
       onClick: handleClick,
       isIconOnly: true,
       ...buttonProps,
-      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon, {})
+      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Icon, {})
     }
   );
 };
 
 // src/ui/bubble-menu/index.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 function BubbleMenu({ editor }) {
   if (!editor) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     import_menus.BubbleMenu,
     {
       editor,
-      shouldShow: ({ editor: e, state }) => {
+      shouldShow: ({ editor: e, state, view }) => {
         const { selection } = state;
         const { empty } = selection;
+        if (!view.hasFocus()) return false;
         if (empty) return false;
         if (e.isActive("codeBlock")) return false;
         if (e.isActive("link")) return false;
+        if (e.isActive("variable")) return false;
         if (!e.isEditable) return false;
         return true;
       },
-      options: {
-        placement: "top",
-        offset: 8
-      },
-      className: "rounded-lg border bg-background shadow-md",
-      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_toolbar3.Toolbar, { radius: "md", border: "none", className: "p-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_toolbar3.ToolbarGroup, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MarkButton, { type: "bold" }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MarkButton, { type: "italic" }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MarkButton, { type: "strike" }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MarkButton, { type: "code" })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_toolbar3.ToolbarSeparator, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_toolbar3.ToolbarGroup, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(LinkPopover, { autoOpenOnLinkActive: false }) })
-      ] })
-    }
-  );
-}
-
-// src/ui/copy-anchor-link-button/use-scroll-to-hash.ts
-var import_editor_utils3 = require("@kopexa/editor-utils");
-var React3 = __toESM(require("react"));
-
-// src/hooks/use-floating-toolbar-visibility.ts
-var import_state4 = require("@tiptap/pm/state");
-var import_react33 = require("@tiptap/react");
-var React2 = __toESM(require("react"));
-var HIDE_FLOATING_META = "hideFloatingToolbar";
-var selectNodeAndHideFloating = (editor, pos) => {
-  if (!editor) return;
-  const { state, view } = editor;
-  view.dispatch(
-    state.tr.setSelection(import_state4.NodeSelection.create(state.doc, pos)).setMeta(HIDE_FLOATING_META, true)
-  );
-};
-
-// src/ui/copy-anchor-link-button/use-scroll-to-hash.ts
-function useScrollToHash(config = {}) {
-  const {
-    editor: providedEditor,
-    onTargetFound = () => {
-    },
-    onTargetNotFound = () => {
-    }
-  } = config;
-  const { editor } = useTiptapEditor(providedEditor);
-  const scrollToNode = React3.useCallback(
-    (id) => {
-      var _a, _b, _c;
-      if (!editor) return false;
-      const attributeName = (_c = (_b = (_a = (0, import_editor_utils3.getEditorExtension)(editor, "uniqueID")) == null ? void 0 : _a.options) == null ? void 0 : _b.attributeName) != null ? _c : "data-id";
-      let position = null;
-      editor.state.doc.descendants((node, pos) => {
-        var _a2;
-        if (((_a2 = node.attrs) == null ? void 0 : _a2[attributeName]) === id) {
-          position = pos;
-          return false;
-        }
-        return true;
-      });
-      if (position === null) return false;
-      selectNodeAndHideFloating(editor, position);
-      setTimeout(() => {
-        let dom = null;
-        if (typeof position === "number") {
-          dom = editor.view.nodeDOM(position);
-        }
-        if (dom) {
-          dom.scrollIntoView({ behavior: "smooth", block: "center" });
-        }
-      }, 0);
-      return true;
-    },
-    [editor]
-  );
-  const handleScroll = React3.useCallback(
-    (delay = 0) => {
-      var _a;
-      const hash = (_a = window.location.hash) == null ? void 0 : _a.substring(1);
-      if (!hash) return;
-      setTimeout(() => {
-        if (scrollToNode(hash)) {
-          onTargetFound(hash);
-        } else {
-          onTargetNotFound(hash);
-        }
-      }, delay);
-    },
-    [scrollToNode, onTargetFound, onTargetNotFound]
-  );
-  React3.useEffect(() => {
-    var _a, _b;
-    if (!editor) return;
-    const provider = (_b = (_a = editor.extensionManager.extensions.find(
-      (ext) => ext.name === "collaborationCaret"
-    )) == null ? void 0 : _a.options) == null ? void 0 : _b.provider;
-    if (provider == null ? void 0 : provider.on) {
-      const syncHandler = () => handleScroll(500);
-      provider.on("synced", syncHandler);
-      return () => {
-        var _a2;
-        (_a2 = provider.off) == null ? void 0 : _a2.call(provider, "synced", syncHandler);
-      };
-    } else {
-      handleScroll(500);
-    }
-  }, [editor, handleScroll]);
-  React3.useEffect(() => {
-    const immediateScroll = () => handleScroll();
-    const delayedScroll = () => handleScroll(500);
-    window.addEventListener("hashchange", immediateScroll);
-    window.addEventListener("pageshow", delayedScroll);
-    window.addEventListener("popstate", immediateScroll);
-    return () => {
-      window.removeEventListener("hashchange", immediateScroll);
-      window.removeEventListener("pageshow", delayedScroll);
-      window.removeEventListener("popstate", immediateScroll);
-    };
-  }, [handleScroll]);
-  return { scrollToHash: scrollToNode };
-}
-
-// src/ui/link-bubble/index.tsx
-var import_button8 = require("@kopexa/button");
-var import_icons11 = require("@kopexa/icons");
-var import_input3 = require("@kopexa/input");
-var import_menus2 = require("@tiptap/react/menus");
-var import_react34 = require("react");
-var import_jsx_runtime13 = require("react/jsx-runtime");
-function LinkBubble({ editor }) {
-  const [isEditing, setIsEditing] = (0, import_react34.useState)(false);
-  const [url, setUrl] = (0, import_react34.useState)("");
-  const getCurrentUrl = (0, import_react34.useCallback)(() => {
-    if (!editor) return "";
-    const attrs = editor.getAttributes("link");
-    return attrs.href || "";
-  }, [editor]);
-  (0, import_react34.useEffect)(() => {
-    const isLinkActive2 = editor == null ? void 0 : editor.isActive("link");
-    if (isLinkActive2) {
-      setUrl(getCurrentUrl());
-      setIsEditing(false);
-    }
-  }, [editor, getCurrentUrl]);
-  const handleOpenLink = (0, import_react34.useCallback)(() => {
-    const href = getCurrentUrl();
-    if (href) {
-      window.open(href, "_blank", "noopener,noreferrer");
-    }
-  }, [getCurrentUrl]);
-  const handleRemoveLink = (0, import_react34.useCallback)(() => {
-    editor == null ? void 0 : editor.chain().focus().unsetLink().run();
-  }, [editor]);
-  const handleEdit = (0, import_react34.useCallback)(() => {
-    setUrl(getCurrentUrl());
-    setIsEditing(true);
-  }, [getCurrentUrl]);
-  const handleSave = (0, import_react34.useCallback)(() => {
-    if (url) {
-      editor == null ? void 0 : editor.chain().focus().extendMarkRange("link").setLink({ href: url }).run();
-    } else {
-      editor == null ? void 0 : editor.chain().focus().unsetLink().run();
-    }
-    setIsEditing(false);
-  }, [editor, url]);
-  const handleKeyDown = (0, import_react34.useCallback)(
-    (e) => {
-      if (e.key === "Enter") {
-        e.preventDefault();
-        handleSave();
-      } else if (e.key === "Escape") {
-        e.preventDefault();
-        setIsEditing(false);
-        setUrl(getCurrentUrl());
-      }
-    },
-    [handleSave, getCurrentUrl]
-  );
-  if (!editor) {
-    return null;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-    import_menus2.BubbleMenu,
-    {
-      editor,
-      pluginKey: "linkBubbleMenu",
-      shouldShow: ({ editor: e }) => {
-        return e.isActive("link") && e.isEditable;
-      },
-      options: {
-        placement: "bottom-start",
-        offset: 8
-      },
-      className: "rounded-lg border bg-background shadow-md",
-      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "flex items-center gap-1 p-1.5 min-w-[280px]", children: isEditing ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-          import_input3.Input,
-          {
-            type: "url",
-            value: url,
-            onChange: (e) => setUrl(e.target.value),
-            onKeyDown: handleKeyDown,
-            placeholder: "Enter URL...",
-            className: "flex-1 h-8 text-sm",
-            autoFocus: true
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-          import_button8.IconButton,
-          {
-            type: "button",
-            size: "sm",
-            variant: "ghost",
-            onClick: handleSave,
-            "aria-label": "Save link",
-            children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_icons11.EditIcon, { className: "size-4" })
-          }
-        )
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-          "a",
-          {
-            href: getCurrentUrl(),
-            target: "_blank",
-            rel: "noopener noreferrer",
-            className: "flex-1 text-sm text-primary truncate max-w-[200px] hover:underline px-2",
-            onClick: (e) => {
-              e.preventDefault();
-              handleOpenLink();
-            },
-            children: getCurrentUrl()
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center gap-0.5 border-l pl-1 ml-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-            import_button8.IconButton,
-            {
-              type: "button",
-              size: "sm",
-              variant: "ghost",
-              onClick: handleOpenLink,
-              "aria-label": "Open link in new tab",
-              children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_icons11.ExternalLinkIcon, { className: "size-4" })
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-            import_button8.IconButton,
-            {
-              type: "button",
-              size: "sm",
-              variant: "ghost",
-              onClick: handleEdit,
-              "aria-label": "Edit link",
-              children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_icons11.EditIcon, { className: "size-4" })
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-            import_button8.IconButton,
-            {
-              type: "button",
-              size: "sm",
-              variant: "ghost",
-              onClick: handleRemoveLink,
-              "aria-label": "Remove link",
-              children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_icons11.TrashIcon, { className: "size-4" })
-            }
-          )
-        ] })
-      ] }) })
+      options: {
+        placement: "top",
+        offset: 8
+      },
+      className: "rounded-lg border bg-background shadow-md",
+      children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_toolbar3.Toolbar, { radius: "md", border: "none", className: "p-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_toolbar3.ToolbarGroup, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(MarkButton, { type: "bold" }),
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(MarkButton, { type: "italic" }),
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(MarkButton, { type: "strike" }),
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(MarkButton, { type: "code" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_toolbar3.ToolbarSeparator, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_toolbar3.ToolbarGroup, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(LinkPopover, { autoOpenOnLinkActive: false }) })
+      ] })
     }
   );
 }
 
-// src/ui/slash-dropdown-menu/slash-dropdown-menu.tsx
-var import_button9 = require("@kopexa/button");
-var import_editor_utils6 = require("@kopexa/editor-utils");
-var import_separator = require("@kopexa/separator");
-var import_theme5 = require("@kopexa/theme");
-var React8 = __toESM(require("react"));
-
-// src/ui/suggestion-menu/suggestion-menu.tsx
-var import_react36 = require("@floating-ui/react");
-var import_state5 = require("@tiptap/pm/state");
-var import_suggestion = require("@tiptap/suggestion");
-var React6 = __toESM(require("react"));
+// src/ui/copy-anchor-link-button/use-scroll-to-hash.ts
+var import_editor_utils4 = require("@kopexa/editor-utils");
+var React9 = __toESM(require("react"));
 
-// src/hooks/use-floating-element.ts
-var import_react35 = require("@floating-ui/react");
-var React4 = __toESM(require("react"));
-function useFloatingElement(show, referencePos, zIndex, options) {
-  const { dismissOptions, ...floatingOptions } = options || {};
-  const { refs, update, context, floatingStyles } = (0, import_react35.useFloating)({
-    open: show,
-    ...floatingOptions
-  });
-  const { isMounted, styles } = (0, import_react35.useTransitionStyles)(context);
-  const dismiss = (0, import_react35.useDismiss)(context, dismissOptions);
-  const { getReferenceProps, getFloatingProps } = (0, import_react35.useInteractions)([dismiss]);
-  React4.useEffect(() => {
-    update();
-  }, [referencePos, update]);
-  React4.useEffect(() => {
-    if (referencePos === null) {
-      return;
-    }
-    refs.setReference({
-      getBoundingClientRect: () => referencePos
-    });
-  }, [referencePos, refs]);
-  return React4.useMemo(
-    () => ({
-      isMounted,
-      ref: refs.setFloating,
-      style: {
-        ...styles,
-        ...floatingStyles,
-        zIndex
-      },
-      update,
-      getFloatingProps,
-      getReferenceProps
-    }),
-    [
-      floatingStyles,
-      isMounted,
-      refs.setFloating,
-      styles,
-      update,
-      zIndex,
-      getFloatingProps,
-      getReferenceProps
-    ]
+// src/hooks/use-floating-toolbar-visibility.ts
+var import_state6 = require("@tiptap/pm/state");
+var import_react37 = require("@tiptap/react");
+var React8 = __toESM(require("react"));
+var HIDE_FLOATING_META = "hideFloatingToolbar";
+var selectNodeAndHideFloating = (editor, pos) => {
+  if (!editor) return;
+  const { state, view } = editor;
+  view.dispatch(
+    state.tr.setSelection(import_state6.NodeSelection.create(state.doc, pos)).setMeta(HIDE_FLOATING_META, true)
   );
-}
+};
 
-// src/hooks/use-menu-navigation.ts
-var React5 = __toESM(require("react"));
-function useMenuNavigation({
-  editor,
-  containerRef,
-  query,
-  items,
-  onSelect,
-  onClose,
-  orientation = "vertical",
-  autoSelectFirstItem = true
-}) {
-  const [selectedIndex, setSelectedIndex] = React5.useState(
-    autoSelectFirstItem ? 0 : -1
-  );
-  React5.useEffect(() => {
-    const handleKeyboardNavigation = (event) => {
-      if (!items.length) return false;
-      const moveNext = () => setSelectedIndex((currentIndex) => {
-        if (currentIndex === -1) return 0;
-        return (currentIndex + 1) % items.length;
-      });
-      const movePrev = () => setSelectedIndex((currentIndex) => {
-        if (currentIndex === -1) return items.length - 1;
-        return (currentIndex - 1 + items.length) % items.length;
-      });
-      switch (event.key) {
-        case "ArrowUp": {
-          if (orientation === "horizontal") return false;
-          event.preventDefault();
-          movePrev();
-          return true;
-        }
-        case "ArrowDown": {
-          if (orientation === "horizontal") return false;
-          event.preventDefault();
-          moveNext();
-          return true;
-        }
-        case "ArrowLeft": {
-          if (orientation === "vertical") return false;
-          event.preventDefault();
-          movePrev();
-          return true;
-        }
-        case "ArrowRight": {
-          if (orientation === "vertical") return false;
-          event.preventDefault();
-          moveNext();
-          return true;
-        }
-        case "Tab": {
-          event.preventDefault();
-          if (event.shiftKey) {
-            movePrev();
-          } else {
-            moveNext();
-          }
-          return true;
-        }
-        case "Home": {
-          event.preventDefault();
-          setSelectedIndex(0);
-          return true;
+// src/ui/copy-anchor-link-button/use-scroll-to-hash.ts
+function useScrollToHash(config = {}) {
+  const {
+    editor: providedEditor,
+    onTargetFound = () => {
+    },
+    onTargetNotFound = () => {
+    }
+  } = config;
+  const { editor } = useTiptapEditor(providedEditor);
+  const scrollToNode = React9.useCallback(
+    (id) => {
+      var _a, _b, _c;
+      if (!editor) return false;
+      const attributeName = (_c = (_b = (_a = (0, import_editor_utils4.getEditorExtension)(editor, "uniqueID")) == null ? void 0 : _a.options) == null ? void 0 : _b.attributeName) != null ? _c : "data-id";
+      let position = null;
+      editor.state.doc.descendants((node, pos) => {
+        var _a2;
+        if (((_a2 = node.attrs) == null ? void 0 : _a2[attributeName]) === id) {
+          position = pos;
+          return false;
         }
-        case "End": {
-          event.preventDefault();
-          setSelectedIndex(items.length - 1);
-          return true;
+        return true;
+      });
+      if (position === null) return false;
+      selectNodeAndHideFloating(editor, position);
+      setTimeout(() => {
+        let dom = null;
+        if (typeof position === "number") {
+          dom = editor.view.nodeDOM(position);
         }
-        case "Enter": {
-          if (event.isComposing) return false;
-          event.preventDefault();
-          if (selectedIndex !== -1 && items[selectedIndex]) {
-            onSelect == null ? void 0 : onSelect(items[selectedIndex]);
-          }
-          return true;
+        if (dom) {
+          dom.scrollIntoView({ behavior: "smooth", block: "center" });
         }
-        case "Escape": {
-          event.preventDefault();
-          onClose == null ? void 0 : onClose();
-          return true;
+      }, 0);
+      return true;
+    },
+    [editor]
+  );
+  const handleScroll = React9.useCallback(
+    (delay = 0) => {
+      var _a;
+      const hash = (_a = window.location.hash) == null ? void 0 : _a.substring(1);
+      if (!hash) return;
+      setTimeout(() => {
+        if (scrollToNode(hash)) {
+          onTargetFound(hash);
+        } else {
+          onTargetNotFound(hash);
         }
-        default:
-          return false;
-      }
-    };
-    let targetElement = null;
-    if (editor) {
-      targetElement = editor.view.dom;
-    } else if (containerRef == null ? void 0 : containerRef.current) {
-      targetElement = containerRef.current;
-    }
-    if (targetElement) {
-      targetElement.addEventListener("keydown", handleKeyboardNavigation, true);
-      return () => {
-        targetElement == null ? void 0 : targetElement.removeEventListener(
-          "keydown",
-          handleKeyboardNavigation,
-          true
-        );
-      };
-    }
-    return void 0;
-  }, [
-    editor,
-    containerRef,
-    items,
-    selectedIndex,
-    onSelect,
-    onClose,
-    orientation
-  ]);
-  React5.useEffect(() => {
-    if (query) {
-      setSelectedIndex(autoSelectFirstItem ? 0 : -1);
-    }
-  }, [query, autoSelectFirstItem]);
-  return {
-    selectedIndex: items.length ? selectedIndex : void 0,
-    setSelectedIndex
-  };
-}
-
-// src/ui/suggestion-menu/suggestion-menu-utils.ts
-function calculateStartPosition(cursorPosition, previousNode, triggerChar) {
-  if (!(previousNode == null ? void 0 : previousNode.text) || !triggerChar) {
-    return cursorPosition;
-  }
-  const commandText = previousNode.text;
-  const triggerCharIndex = commandText.lastIndexOf(triggerChar);
-  if (triggerCharIndex === -1) {
-    return cursorPosition;
-  }
-  const textLength = commandText.substring(triggerCharIndex).length;
-  return cursorPosition - textLength;
-}
-function filterSuggestionItems(items, query) {
-  const normalizedQuery = query.trim().toLowerCase();
-  if (!normalizedQuery) {
-    return items;
-  }
-  return items.filter((item) => {
+      }, delay);
+    },
+    [scrollToNode, onTargetFound, onTargetNotFound]
+  );
+  React9.useEffect(() => {
     var _a, _b;
-    if (item.title.toLowerCase().includes(normalizedQuery)) {
-      return true;
-    }
-    if ((_a = item.subtext) == null ? void 0 : _a.toLowerCase().includes(normalizedQuery)) {
-      return true;
-    }
-    if ((_b = item.keywords) == null ? void 0 : _b.some(
-      (keyword) => keyword.toLowerCase().includes(normalizedQuery)
-    )) {
-      return true;
+    if (!editor) return;
+    const provider = (_b = (_a = editor.extensionManager.extensions.find(
+      (ext) => ext.name === "collaborationCaret"
+    )) == null ? void 0 : _a.options) == null ? void 0 : _b.provider;
+    if (provider == null ? void 0 : provider.on) {
+      const syncHandler = () => handleScroll(500);
+      provider.on("synced", syncHandler);
+      return () => {
+        var _a2;
+        (_a2 = provider.off) == null ? void 0 : _a2.call(provider, "synced", syncHandler);
+      };
+    } else {
+      handleScroll(500);
     }
-    return false;
-  }).sort((a, b) => {
-    const aTitle = a.title.toLowerCase();
-    const bTitle = b.title.toLowerCase();
-    if (aTitle === normalizedQuery && bTitle !== normalizedQuery) return -1;
-    if (bTitle === normalizedQuery && aTitle !== normalizedQuery) return 1;
-    if (aTitle.startsWith(normalizedQuery) && !bTitle.startsWith(normalizedQuery))
-      return -1;
-    if (bTitle.startsWith(normalizedQuery) && !aTitle.startsWith(normalizedQuery))
-      return 1;
-    return 0;
-  });
+  }, [editor, handleScroll]);
+  React9.useEffect(() => {
+    const immediateScroll = () => handleScroll();
+    const delayedScroll = () => handleScroll(500);
+    window.addEventListener("hashchange", immediateScroll);
+    window.addEventListener("pageshow", delayedScroll);
+    window.addEventListener("popstate", immediateScroll);
+    return () => {
+      window.removeEventListener("hashchange", immediateScroll);
+      window.removeEventListener("pageshow", delayedScroll);
+      window.removeEventListener("popstate", immediateScroll);
+    };
+  }, [handleScroll]);
+  return { scrollToHash: scrollToNode };
 }
 
-// src/ui/suggestion-menu/suggestion-menu.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
-var SuggestionMenu = ({
-  editor: providedEditor,
-  floatingOptions,
-  selector = "tiptap-suggestion-menu",
-  children,
-  maxHeight = 384,
-  pluginKey = import_suggestion.SuggestionPluginKey,
-  ...internalSuggestionProps
-}) => {
-  const { editor } = useTiptapEditor(providedEditor);
-  const [show, setShow] = React6.useState(false);
-  const [internalClientRect, setInternalClientRect] = React6.useState(null);
-  const [internalCommand, setInternalCommand] = React6.useState(null);
-  const [internalItems, setInternalItems] = React6.useState(
-    []
-  );
-  const [internalQuery, setInternalQuery] = React6.useState("");
-  const [, setInternalRange] = React6.useState(null);
-  const { ref, style, getFloatingProps, isMounted } = useFloatingElement(
-    show,
-    internalClientRect,
-    1e3,
-    {
-      placement: "bottom-start",
-      middleware: [
-        (0, import_react36.offset)(10),
-        (0, import_react36.flip)({
-          mainAxis: true,
-          crossAxis: false
-        }),
-        (0, import_react36.shift)(),
-        (0, import_react36.size)({
-          apply({ availableHeight, elements }) {
-            if (elements.floating) {
-              const maxHeightValue = maxHeight ? Math.min(maxHeight, availableHeight) : availableHeight;
-              elements.floating.style.setProperty(
-                "--suggestion-menu-max-height",
-                `${maxHeightValue}px`
-              );
-            }
-          }
-        })
-      ],
-      onOpenChange(open) {
-        if (!open) {
-          setShow(false);
-        }
-      },
-      ...floatingOptions
+// src/ui/link-bubble/index.tsx
+var import_button9 = require("@kopexa/button");
+var import_icons11 = require("@kopexa/icons");
+var import_input4 = require("@kopexa/input");
+var import_menus2 = require("@tiptap/react/menus");
+var import_react38 = require("react");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+function LinkBubble({ editor }) {
+  const [isEditing, setIsEditing] = (0, import_react38.useState)(false);
+  const [url, setUrl] = (0, import_react38.useState)("");
+  const getCurrentUrl = (0, import_react38.useCallback)(() => {
+    if (!editor) return "";
+    const attrs = editor.getAttributes("link");
+    return attrs.href || "";
+  }, [editor]);
+  (0, import_react38.useEffect)(() => {
+    const isLinkActive2 = editor == null ? void 0 : editor.isActive("link");
+    if (isLinkActive2) {
+      setUrl(getCurrentUrl());
+      setIsEditing(false);
     }
-  );
-  const internalSuggestionPropsRef = React6.useRef(internalSuggestionProps);
-  React6.useEffect(() => {
-    internalSuggestionPropsRef.current = internalSuggestionProps;
-  }, [internalSuggestionProps]);
-  const closePopup = React6.useCallback(() => {
-    setShow(false);
-  }, []);
-  React6.useEffect(() => {
-    if (!editor || editor.isDestroyed) {
-      return;
+  }, [editor, getCurrentUrl]);
+  const handleOpenLink = (0, import_react38.useCallback)(() => {
+    const href = getCurrentUrl();
+    if (href) {
+      window.open(href, "_blank", "noopener,noreferrer");
     }
-    const existingPlugin = editor.state.plugins.find(
-      (plugin) => plugin.spec.key === pluginKey
-    );
-    if (existingPlugin) {
-      editor.unregisterPlugin(pluginKey);
+  }, [getCurrentUrl]);
+  const handleRemoveLink = (0, import_react38.useCallback)(() => {
+    editor == null ? void 0 : editor.chain().focus().unsetLink().run();
+  }, [editor]);
+  const handleEdit = (0, import_react38.useCallback)(() => {
+    setUrl(getCurrentUrl());
+    setIsEditing(true);
+  }, [getCurrentUrl]);
+  const handleSave = (0, import_react38.useCallback)(() => {
+    if (url) {
+      editor == null ? void 0 : editor.chain().focus().extendMarkRange("link").setLink({ href: url }).run();
+    } else {
+      editor == null ? void 0 : editor.chain().focus().unsetLink().run();
     }
-    const suggestion = (0, import_suggestion.Suggestion)({
-      pluginKey: pluginKey instanceof import_state5.PluginKey ? pluginKey : new import_state5.PluginKey(pluginKey),
+    setIsEditing(false);
+  }, [editor, url]);
+  const handleKeyDown = (0, import_react38.useCallback)(
+    (e) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        handleSave();
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        setIsEditing(false);
+        setUrl(getCurrentUrl());
+      }
+    },
+    [handleSave, getCurrentUrl]
+  );
+  if (!editor) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    import_menus2.BubbleMenu,
+    {
       editor,
-      command({ editor: editor2, range, props }) {
-        var _a, _b;
-        if (!range) {
-          return;
-        }
-        const { view, state } = editor2;
-        const { selection } = state;
-        const isMention = editor2.extensionManager.extensions.some(
-          (extension) => {
-            var _a2, _b2;
-            const name = extension.name;
-            return name === "mention" && ((_b2 = (_a2 = extension.options) == null ? void 0 : _a2.suggestion) == null ? void 0 : _b2.char) === internalSuggestionPropsRef.current.char;
-          }
-        );
-        if (!isMention) {
-          const cursorPosition = selection.$from.pos;
-          const previousNode = (_a = selection.$head) == null ? void 0 : _a.nodeBefore;
-          const startPosition = previousNode ? calculateStartPosition(
-            cursorPosition,
-            previousNode,
-            internalSuggestionPropsRef.current.char
-          ) : selection.$from.start();
-          const transaction = state.tr.deleteRange(
-            startPosition,
-            cursorPosition
-          );
-          view.dispatch(transaction);
-        }
-        const nodeAfter = view.state.selection.$to.nodeAfter;
-        const overrideSpace = (_b = nodeAfter == null ? void 0 : nodeAfter.text) == null ? void 0 : _b.startsWith(" ");
-        const rangeToUse = { ...range };
-        if (overrideSpace) {
-          rangeToUse.to += 1;
-        }
-        props.onSelect({ editor: editor2, range: rangeToUse, context: props.context });
+      pluginKey: "linkBubbleMenu",
+      shouldShow: ({ editor: e, view }) => {
+        if (!view.hasFocus()) return false;
+        return e.isActive("link") && e.isEditable;
       },
-      render: () => {
-        return {
-          onStart: (props) => {
-            var _a, _b;
-            setInternalCommand(() => props.command);
-            setInternalItems(props.items);
-            setInternalQuery(props.query);
-            setInternalRange(props.range);
-            setInternalClientRect((_b = (_a = props.clientRect) == null ? void 0 : _a.call(props)) != null ? _b : null);
-            setShow(true);
-          },
-          onUpdate: (props) => {
-            var _a, _b;
-            setInternalCommand(() => props.command);
-            setInternalItems(props.items);
-            setInternalQuery(props.query);
-            setInternalRange(props.range);
-            setInternalClientRect((_b = (_a = props.clientRect) == null ? void 0 : _a.call(props)) != null ? _b : null);
-          },
-          onKeyDown: (props) => {
-            if (props.event.key === "Escape") {
-              closePopup();
-              return true;
-            }
-            return false;
-          },
-          onExit: () => {
-            setInternalCommand(null);
-            setInternalItems([]);
-            setInternalQuery("");
-            setInternalRange(null);
-            setInternalClientRect(null);
-            setShow(false);
+      options: {
+        placement: "bottom-start",
+        offset: 8
+      },
+      className: "rounded-lg border bg-background shadow-md",
+      children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "flex items-center gap-1 p-1.5 min-w-[280px]", children: isEditing ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          import_input4.Input,
+          {
+            type: "url",
+            value: url,
+            onChange: (e) => setUrl(e.target.value),
+            onKeyDown: handleKeyDown,
+            placeholder: "Enter URL...",
+            className: "flex-1 h-8 text-sm",
+            autoFocus: true
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          import_button9.IconButton,
+          {
+            type: "button",
+            size: "sm",
+            variant: "ghost",
+            onClick: handleSave,
+            "aria-label": "Save link",
+            children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_icons11.EditIcon, { className: "size-4" })
+          }
+        )
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          "a",
+          {
+            href: getCurrentUrl(),
+            target: "_blank",
+            rel: "noopener noreferrer",
+            className: "flex-1 text-sm text-primary truncate max-w-[200px] hover:underline px-2",
+            onClick: (e) => {
+              e.preventDefault();
+              handleOpenLink();
+            },
+            children: getCurrentUrl()
           }
-        };
-      },
-      ...internalSuggestionPropsRef.current
-    });
-    editor.registerPlugin(suggestion);
-    return () => {
-      if (!editor.isDestroyed) {
-        editor.unregisterPlugin(pluginKey);
-      }
-    };
-  }, [editor, pluginKey, closePopup]);
-  const onSelect = React6.useCallback(
-    (item) => {
-      closePopup();
-      if (internalCommand) {
-        internalCommand(item);
-      }
-    },
-    [closePopup, internalCommand]
-  );
-  const { selectedIndex } = useMenuNavigation({
-    editor,
-    query: internalQuery,
-    items: internalItems,
-    onSelect
-  });
-  if (!isMounted || !show || !editor) {
-    return null;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react36.FloatingPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-    "div",
-    {
-      ref,
-      style,
-      ...getFloatingProps(),
-      "data-selector": selector,
-      className: "tiptap-suggestion-menu",
-      role: "listbox",
-      "aria-label": "Suggestions",
-      onPointerDown: (e) => e.preventDefault(),
-      children: children({
-        items: internalItems,
-        selectedIndex,
-        onSelect
-      })
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex items-center gap-0.5 border-l pl-1 ml-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            import_button9.IconButton,
+            {
+              type: "button",
+              size: "sm",
+              variant: "ghost",
+              onClick: handleOpenLink,
+              "aria-label": "Open link in new tab",
+              children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_icons11.ExternalLinkIcon, { className: "size-4" })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            import_button9.IconButton,
+            {
+              type: "button",
+              size: "sm",
+              variant: "ghost",
+              onClick: handleEdit,
+              "aria-label": "Edit link",
+              children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_icons11.EditIcon, { className: "size-4" })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            import_button9.IconButton,
+            {
+              type: "button",
+              size: "sm",
+              variant: "ghost",
+              onClick: handleRemoveLink,
+              "aria-label": "Remove link",
+              children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_icons11.TrashIcon, { className: "size-4" })
+            }
+          )
+        ] })
+      ] }) })
     }
-  ) });
-};
+  );
+}
+
+// src/ui/slash-dropdown-menu/slash-dropdown-menu.tsx
+var import_button10 = require("@kopexa/button");
+var import_editor_utils7 = require("@kopexa/editor-utils");
+var import_separator = require("@kopexa/separator");
+var import_theme7 = require("@kopexa/theme");
+var React11 = __toESM(require("react"));
 
 // src/ui/slash-dropdown-menu/use-slash-dropdown-menu.ts
-var import_editor_utils5 = require("@kopexa/editor-utils");
+var import_editor_utils6 = require("@kopexa/editor-utils");
 var import_icons13 = require("@kopexa/icons");
-var React7 = __toESM(require("react"));
+var React10 = __toESM(require("react"));
 
 // src/ui/table-button/use-table.ts
-var import_editor_utils4 = require("@kopexa/editor-utils");
+var import_editor_utils5 = require("@kopexa/editor-utils");
 var import_icons12 = require("@kopexa/icons");
-var import_react37 = require("@tiptap/react");
-var import_react38 = require("react");
+var import_react39 = require("@tiptap/react");
+var import_react40 = require("react");
 function canToggle(editor) {
   if (!editor || !editor.isEditable) return false;
-  if (!(0, import_editor_utils4.isNodeInSchema)("table", editor) || (0, import_editor_utils4.isNodeTypeSelected)(editor, ["image"])) {
+  if (!(0, import_editor_utils5.isNodeInSchema)("table", editor) || (0, import_editor_utils5.isNodeTypeSelected)(editor, ["image"])) {
     return false;
   }
   try {
@@ -4051,9 +4596,9 @@ function toggleTable(editor, config) {
 function shouldShowButton(props) {
   const { editor, hideWhenUnavailable } = props;
   if (!editor || !editor.isEditable) return false;
-  if (!(0, import_editor_utils4.isNodeInSchema)("table", editor)) return false;
+  if (!(0, import_editor_utils5.isNodeInSchema)("table", editor)) return false;
   if (hideWhenUnavailable) {
-    if ((0, import_react37.isNodeSelection)(editor.state.selection) || !canToggle) {
+    if ((0, import_react39.isNodeSelection)(editor.state.selection) || !canToggle) {
       return false;
     }
   }
@@ -4066,10 +4611,10 @@ function useTableBlock(config) {
     onToggled
   } = config || {};
   const { editor } = useTiptapEditor(providedEditor);
-  const [isVisible, setIsVisible] = (0, import_react38.useState)(true);
+  const [isVisible, setIsVisible] = (0, import_react40.useState)(true);
   const canToggleState = canToggle(editor);
   const isActive = (editor == null ? void 0 : editor.isActive("table")) || false;
-  (0, import_react38.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     if (!editor) return;
     const handleSelectionUpdate = () => {
       setIsVisible(shouldShowButton({ editor, hideWhenUnavailable }));
@@ -4080,7 +4625,7 @@ function useTableBlock(config) {
       editor.off("selectionUpdate", handleSelectionUpdate);
     };
   }, [editor, hideWhenUnavailable]);
-  const handleToggle = (0, import_react38.useCallback)(() => {
+  const handleToggle = (0, import_react40.useCallback)(() => {
     if (!editor) return false;
     const success = toggleTable(editor);
     if (success) {
@@ -4266,8 +4811,8 @@ var getItemImplementations = () => {
     // AI
     continue_writing: {
       check: (editor) => {
-        const { hasContent } = (0, import_editor_utils5.hasContentAbove)(editor);
-        const extensionsReady = (0, import_editor_utils5.isExtensionAvailable)(editor, [
+        const { hasContent } = (0, import_editor_utils6.hasContentAbove)(editor);
+        const extensionsReady = (0, import_editor_utils6.isExtensionAvailable)(editor, [
           "ai",
           "aiAdvanced"
         ]);
@@ -4275,14 +4820,14 @@ var getItemImplementations = () => {
       },
       action: ({ editor }) => {
         const editorChain = editor.chain().focus();
-        const nodeSelectionPosition = (0, import_editor_utils5.findSelectionPosition)({ editor });
+        const nodeSelectionPosition = (0, import_editor_utils6.findSelectionPosition)({ editor });
         if (nodeSelectionPosition !== null) {
           editorChain.setNodeSelection(nodeSelectionPosition);
         }
         editorChain.run();
         editor.chain().focus().aiGenerationShow().run();
         requestAnimationFrame(() => {
-          const { hasContent, content } = (0, import_editor_utils5.hasContentAbove)(editor);
+          const { hasContent, content } = (0, import_editor_utils6.hasContentAbove)(editor);
           const snippet = content.length > 500 ? `...${content.slice(-500)}` : content;
           const prompt = hasContent ? `Context: ${snippet}
 
@@ -4296,10 +4841,10 @@ Continue writing from where the text above ends. Write ONLY ONE SENTENCE. DONT R
       }
     },
     ai_ask_button: {
-      check: (editor) => (0, import_editor_utils5.isExtensionAvailable)(editor, ["ai", "aiAdvanced"]),
+      check: (editor) => (0, import_editor_utils6.isExtensionAvailable)(editor, ["ai", "aiAdvanced"]),
       action: ({ editor }) => {
         const editorChain = editor.chain().focus();
-        const nodeSelectionPosition = (0, import_editor_utils5.findSelectionPosition)({ editor });
+        const nodeSelectionPosition = (0, import_editor_utils6.findSelectionPosition)({ editor });
         if (nodeSelectionPosition !== null) {
           editorChain.setNodeSelection(nodeSelectionPosition);
         }
@@ -4309,55 +4854,55 @@ Continue writing from where the text above ends. Write ONLY ONE SENTENCE. DONT R
     },
     // Style
     text: {
-      check: (editor) => (0, import_editor_utils5.isNodeInSchema)("paragraph", editor),
+      check: (editor) => (0, import_editor_utils6.isNodeInSchema)("paragraph", editor),
       action: ({ editor }) => {
         editor.chain().focus().setParagraph().run();
       }
     },
     heading_1: {
-      check: (editor) => (0, import_editor_utils5.isNodeInSchema)("heading", editor),
+      check: (editor) => (0, import_editor_utils6.isNodeInSchema)("heading", editor),
       action: ({ editor }) => {
         editor.chain().focus().toggleHeading({ level: 1 }).run();
       }
     },
     heading_2: {
-      check: (editor) => (0, import_editor_utils5.isNodeInSchema)("heading", editor),
+      check: (editor) => (0, import_editor_utils6.isNodeInSchema)("heading", editor),
       action: ({ editor }) => {
         editor.chain().focus().toggleHeading({ level: 2 }).run();
       }
     },
     heading_3: {
-      check: (editor) => (0, import_editor_utils5.isNodeInSchema)("heading", editor),
+      check: (editor) => (0, import_editor_utils6.isNodeInSchema)("heading", editor),
       action: ({ editor }) => {
         editor.chain().focus().toggleHeading({ level: 3 }).run();
       }
     },
     bullet_list: {
-      check: (editor) => (0, import_editor_utils5.isNodeInSchema)("bulletList", editor),
+      check: (editor) => (0, import_editor_utils6.isNodeInSchema)("bulletList", editor),
       action: ({ editor }) => {
         editor.chain().focus().toggleBulletList().run();
       }
     },
     ordered_list: {
-      check: (editor) => (0, import_editor_utils5.isNodeInSchema)("orderedList", editor),
+      check: (editor) => (0, import_editor_utils6.isNodeInSchema)("orderedList", editor),
       action: ({ editor }) => {
         editor.chain().focus().toggleOrderedList().run();
       }
     },
     task_list: {
-      check: (editor) => (0, import_editor_utils5.isNodeInSchema)("taskList", editor),
+      check: (editor) => (0, import_editor_utils6.isNodeInSchema)("taskList", editor),
       action: ({ editor }) => {
         editor.chain().focus().toggleTaskList().run();
       }
     },
     quote: {
-      check: (editor) => (0, import_editor_utils5.isNodeInSchema)("blockquote", editor),
+      check: (editor) => (0, import_editor_utils6.isNodeInSchema)("blockquote", editor),
       action: ({ editor }) => {
         editor.chain().focus().toggleBlockquote().run();
       }
     },
     code_block: {
-      check: (editor) => (0, import_editor_utils5.isNodeInSchema)("codeBlock", editor),
+      check: (editor) => (0, import_editor_utils6.isNodeInSchema)("codeBlock", editor),
       action: ({ editor }) => {
         editor.chain().focus().toggleNode("codeBlock", "paragraph").run();
       }
@@ -4374,17 +4919,17 @@ Continue writing from where the text above ends. Write ONLY ONE SENTENCE. DONT R
     //   action: ({ editor }: { editor: Editor }) => addEmojiTrigger(editor),
     // },
     divider: {
-      check: (editor) => (0, import_editor_utils5.isNodeInSchema)("horizontalRule", editor),
+      check: (editor) => (0, import_editor_utils6.isNodeInSchema)("horizontalRule", editor),
       action: ({ editor }) => {
         editor.chain().focus().setHorizontalRule().run();
       }
     },
     table: {
-      check: (editor) => (0, import_editor_utils5.isNodeInSchema)("table", editor),
+      check: (editor) => (0, import_editor_utils6.isNodeInSchema)("table", editor),
       action: ({ editor }) => toggleTable(editor, { rows: 3, cols: 3, withHeaderRow: true })
     },
     control: {
-      check: (editor) => (0, import_editor_utils5.isNodeInSchema)("controlBlock", editor),
+      check: (editor) => (0, import_editor_utils6.isNodeInSchema)("controlBlock", editor),
       action: ({ editor }) => {
         try {
           return editor.chain().focus().insertControlBlock().run();
@@ -4394,32 +4939,32 @@ Continue writing from where the text above ends. Write ONLY ONE SENTENCE. DONT R
       }
     },
     table_of_contents: {
-      check: (editor) => (0, import_editor_utils5.isNodeInSchema)("tableOfContentsNode", editor),
+      check: (editor) => (0, import_editor_utils6.isNodeInSchema)("tableOfContentsNode", editor),
       action: ({ editor }) => {
         editor.chain().focus().insertTableOfContents().run();
       }
     },
     callout: {
-      check: (editor) => (0, import_editor_utils5.isNodeInSchema)("calloutNode", editor),
+      check: (editor) => (0, import_editor_utils6.isNodeInSchema)("calloutNode", editor),
       action: ({ editor }) => {
         editor.chain().focus().insertCallout("info").run();
       }
     },
     callout_warning: {
-      check: (editor) => (0, import_editor_utils5.isNodeInSchema)("calloutNode", editor),
+      check: (editor) => (0, import_editor_utils6.isNodeInSchema)("calloutNode", editor),
       action: ({ editor }) => {
         editor.chain().focus().insertCallout("warning").run();
       }
     },
     math: {
-      check: (editor) => (0, import_editor_utils5.isNodeInSchema)("mathBlock", editor),
+      check: (editor) => (0, import_editor_utils6.isNodeInSchema)("mathBlock", editor),
       action: ({ editor }) => {
         editor.chain().focus().insertMathBlock().run();
       }
     },
     // Upload
     image: {
-      check: (editor) => (0, import_editor_utils5.isNodeInSchema)("imageUpload", editor),
+      check: (editor) => (0, import_editor_utils6.isNodeInSchema)("imageUpload", editor),
       action: ({ editor }) => {
         editor.chain().focus().setImageUpload().run();
       }
@@ -4445,7 +4990,7 @@ function organizeItemsByGroups(items, showGroups) {
   return organizedItems;
 }
 function useSlashDropdownMenu(config) {
-  const getSlashMenuItems = React7.useCallback(
+  const getSlashMenuItems = React10.useCallback(
     (editor) => {
       const items = [];
       const enabledItems = (config == null ? void 0 : config.enabledItems) || Object.keys(texts);
@@ -4482,11 +5027,11 @@ function useSlashDropdownMenu(config) {
 }
 
 // src/ui/slash-dropdown-menu/slash-dropdown-menu.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var SlashDropdownMenu = (props) => {
   const { config, ...restProps } = props;
   const { getSlashMenuItems } = useSlashDropdownMenu(config);
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     SuggestionMenu,
     {
       char: "/",
@@ -4496,19 +5041,19 @@ var SlashDropdownMenu = (props) => {
       selector: "tiptap-slash-dropdown-menu",
       items: ({ query, editor }) => filterSuggestionItems(getSlashMenuItems(editor), query),
       ...restProps,
-      children: (props2) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(List, { ...props2, config })
+      children: (props2) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(List, { ...props2, config })
     }
   );
 };
 var Item = (props) => {
   const { item, isSelected, onSelect } = props;
-  const itemRef = React8.useRef(null);
-  React8.useEffect(() => {
+  const itemRef = React11.useRef(null);
+  React11.useEffect(() => {
     const selector = document.querySelector(
       '[data-selector="tiptap-slash-dropdown-menu"]'
     );
     if (!itemRef.current || !isSelected || !selector) return;
-    const overflow = (0, import_editor_utils6.getElementOverflowPosition)(itemRef.current, selector);
+    const overflow = (0, import_editor_utils7.getElementOverflowPosition)(itemRef.current, selector);
     if (overflow === "top") {
       itemRef.current.scrollIntoView(true);
     } else if (overflow === "bottom") {
@@ -4516,13 +5061,13 @@ var Item = (props) => {
     }
   }, [isSelected]);
   const BadgeIcon = item.badge;
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-    import_button9.Button,
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    import_button10.Button,
     {
       ref: itemRef,
       variant: "ghost",
       color: "default",
-      startContent: BadgeIcon && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BadgeIcon, {}),
+      startContent: BadgeIcon && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(BadgeIcon, {}),
       "data-active-state": isSelected ? "on" : "off",
       onClick: onSelect,
       fullWidth: true,
@@ -4537,14 +5082,14 @@ var List = ({
   onSelect,
   config
 }) => {
-  const styles = (0, import_theme5.slashDropdownMenu)();
-  const renderedItems = React8.useMemo(() => {
+  const styles = (0, import_theme7.slashDropdownMenu)();
+  const renderedItems = React11.useMemo(() => {
     const rendered = [];
     const showGroups = (config == null ? void 0 : config.showGroups) !== false;
     if (!showGroups) {
       items.forEach((item, index) => {
         rendered.push(
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
             Item,
             {
               item,
@@ -4569,7 +5114,7 @@ var List = ({
     Object.entries(groups).forEach(([groupLabel, groupData], groupIndex) => {
       if (groupIndex > 0) {
         rendered.push(
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
             import_separator.Separator,
             {
               orientation: "horizontal"
@@ -4580,7 +5125,7 @@ var List = ({
       }
       const groupItems = groupData.items.map((item, itemIndex) => {
         const originalIndex = groupData.indices[itemIndex];
-        return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           Item,
           {
             item,
@@ -4592,13 +5137,13 @@ var List = ({
       });
       if (groupLabel) {
         rendered.push(
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
             "div",
             {
               className: styles.cardItemGroup(),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: styles.cardGroupLabel(), children: groupLabel }),
-                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: styles.cardGroup(), children: groupItems })
+                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: styles.cardGroupLabel(), children: groupLabel }),
+                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: styles.cardGroup(), children: groupItems })
               ]
             },
             `group-${groupIndex}-${groupLabel}`
@@ -4613,14 +5158,14 @@ var List = ({
   if (!renderedItems.length) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     "div",
     {
       className: styles.card(),
       style: {
         maxHeight: "var(--suggestion-menu-max-height)"
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: styles.body(), children: renderedItems })
+      children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: styles.body(), children: renderedItems })
     }
   );
 };
@@ -4630,20 +5175,20 @@ var import_icons25 = require("@kopexa/icons");
 var import_popover3 = require("@kopexa/popover");
 var import_toolbar10 = require("@kopexa/toolbar");
 var import_use_is_mobile2 = require("@kopexa/use-is-mobile");
-var import_react53 = require("react");
+var import_react55 = require("react");
 
 // src/hooks/use-cursor-visibility.ts
-var React10 = __toESM(require("react"));
+var React13 = __toESM(require("react"));
 
 // src/hooks/use-window-size.ts
-var React9 = __toESM(require("react"));
+var React12 = __toESM(require("react"));
 function useWindowSize() {
-  const [windowSize, setWindowSize] = React9.useState({
+  const [windowSize, setWindowSize] = React12.useState({
     width: 0,
     height: 0,
     offsetTop: 0
   });
-  React9.useEffect(() => {
+  React12.useEffect(() => {
     handleResize();
     function handleResize() {
       if (typeof window === "undefined") return;
@@ -4679,19 +5224,19 @@ function useCursorVisibility({
   elementRef = null
 }) {
   const { height: windowHeight } = useWindowSize();
-  const [rect, setRect] = React10.useState({
+  const [rect, setRect] = React13.useState({
     x: 0,
     y: 0,
     width: 0,
     height: 0
   });
-  const updateRect = React10.useCallback(() => {
+  const updateRect = React13.useCallback(() => {
     var _a;
     const element = (_a = elementRef == null ? void 0 : elementRef.current) != null ? _a : document.body;
     const { x, y, width, height } = element.getBoundingClientRect();
     setRect({ x, y, width, height });
   }, [elementRef]);
-  React10.useEffect(() => {
+  React13.useEffect(() => {
     var _a;
     const element = (_a = elementRef == null ? void 0 : elementRef.current) != null ? _a : document.body;
     updateRect();
@@ -4705,7 +5250,7 @@ function useCursorVisibility({
       window.removeEventListener("scroll", updateRect);
     };
   }, [elementRef, updateRect]);
-  React10.useEffect(() => {
+  React13.useEffect(() => {
     const ensureCursorVisibility = () => {
       if (!editor) return;
       const { state, view } = editor;
@@ -4736,18 +5281,18 @@ function useCursorVisibility({
 
 // src/ui/blockquote-button/blockquote-button.tsx
 var import_toolbar4 = require("@kopexa/toolbar");
-var React12 = __toESM(require("react"));
+var React15 = __toESM(require("react"));
 
 // src/ui/blockquote-button/use-blockquote.ts
-var import_editor_utils7 = require("@kopexa/editor-utils");
+var import_editor_utils8 = require("@kopexa/editor-utils");
 var import_icons14 = require("@kopexa/icons");
-var import_state6 = require("@tiptap/pm/state");
-var React11 = __toESM(require("react"));
+var import_state7 = require("@tiptap/pm/state");
+var React14 = __toESM(require("react"));
 var BLOCKQUOTE_SHORTCUT_KEY = "mod+shift+b";
 function canToggleBlockquote(editor, turnInto = true) {
   var _a;
   if (!editor || !editor.isEditable) return false;
-  if (!(0, import_editor_utils7.isNodeInSchema)("blockquote", editor) || (0, import_editor_utils7.isNodeTypeSelected)(editor, ["image"]))
+  if (!(0, import_editor_utils8.isNodeInSchema)("blockquote", editor) || (0, import_editor_utils8.isNodeTypeSelected)(editor, ["image"]))
     return false;
   if (!turnInto) {
     return editor.can().toggleWrap("blockquote");
@@ -4756,12 +5301,12 @@ function canToggleBlockquote(editor, turnInto = true) {
     const view = editor.view;
     const state = view.state;
     const selection = state.selection;
-    if (selection.empty || selection instanceof import_state6.TextSelection) {
-      const pos = (_a = (0, import_editor_utils7.findNodePosition)({
+    if (selection.empty || selection instanceof import_state7.TextSelection) {
+      const pos = (_a = (0, import_editor_utils8.findNodePosition)({
         editor,
         node: state.selection.$anchor.node(1)
       })) == null ? void 0 : _a.pos;
-      if (!(0, import_editor_utils7.isValidPosition)(pos)) return false;
+      if (!(0, import_editor_utils8.isValidPosition)(pos)) return false;
     }
     return true;
   } catch {
@@ -4776,19 +5321,19 @@ function toggleBlockquote(editor) {
     const view = editor.view;
     let state = view.state;
     let tr = state.tr;
-    if (state.selection.empty || state.selection instanceof import_state6.TextSelection) {
-      const pos = (_a = (0, import_editor_utils7.findNodePosition)({
+    if (state.selection.empty || state.selection instanceof import_state7.TextSelection) {
+      const pos = (_a = (0, import_editor_utils8.findNodePosition)({
         editor,
         node: state.selection.$anchor.node(1)
       })) == null ? void 0 : _a.pos;
-      if (!(0, import_editor_utils7.isValidPosition)(pos)) return false;
-      tr = tr.setSelection(import_state6.NodeSelection.create(state.doc, pos));
+      if (!(0, import_editor_utils8.isValidPosition)(pos)) return false;
+      tr = tr.setSelection(import_state7.NodeSelection.create(state.doc, pos));
       view.dispatch(tr);
       state = view.state;
     }
     const selection = state.selection;
     let chain = editor.chain().focus();
-    if (selection instanceof import_state6.NodeSelection) {
+    if (selection instanceof import_state7.NodeSelection) {
       const firstChild = (_b = selection.node.firstChild) == null ? void 0 : _b.firstChild;
       const lastChild = (_c = selection.node.lastChild) == null ? void 0 : _c.lastChild;
       const from = firstChild ? selection.from + firstChild.nodeSize : selection.from + 1;
@@ -4806,7 +5351,7 @@ function toggleBlockquote(editor) {
 function shouldShowButton2(props) {
   const { editor, hideWhenUnavailable } = props;
   if (!editor || !editor.isEditable) return false;
-  if (!(0, import_editor_utils7.isNodeInSchema)("blockquote", editor)) return false;
+  if (!(0, import_editor_utils8.isNodeInSchema)("blockquote", editor)) return false;
   if (hideWhenUnavailable && !editor.isActive("code")) {
     return canToggleBlockquote(editor);
   }
@@ -4819,10 +5364,10 @@ function useBlockquote(config) {
     onToggled
   } = config || {};
   const { editor } = useTiptapEditor(providedEditor);
-  const [isVisible, setIsVisible] = React11.useState(true);
+  const [isVisible, setIsVisible] = React14.useState(true);
   const canToggle3 = canToggleBlockquote(editor);
   const isActive = (editor == null ? void 0 : editor.isActive("blockquote")) || false;
-  React11.useEffect(() => {
+  React14.useEffect(() => {
     if (!editor) return;
     const handleSelectionUpdate = () => {
       setIsVisible(shouldShowButton2({ editor, hideWhenUnavailable }));
@@ -4833,7 +5378,7 @@ function useBlockquote(config) {
       editor.off("selectionUpdate", handleSelectionUpdate);
     };
   }, [editor, hideWhenUnavailable]);
-  const handleToggle = React11.useCallback(() => {
+  const handleToggle = React14.useCallback(() => {
     if (!editor) return false;
     const success = toggleBlockquote(editor);
     if (success) {
@@ -4853,7 +5398,7 @@ function useBlockquote(config) {
 }
 
 // src/ui/blockquote-button/blockquote-button.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var BlockquoteButton = ({
   editor: providedEditor,
   text,
@@ -4878,7 +5423,7 @@ var BlockquoteButton = ({
     hideWhenUnavailable,
     onToggled
   });
-  const handleClick = React12.useCallback(
+  const handleClick = React15.useCallback(
     (event) => {
       onClick == null ? void 0 : onClick(event);
       if (event.defaultPrevented) return;
@@ -4889,7 +5434,7 @@ var BlockquoteButton = ({
   if (!isVisible) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     import_toolbar4.ToolbarButton,
     {
       type: "button",
@@ -4906,9 +5451,9 @@ var BlockquoteButton = ({
       onClick: handleClick,
       isIconOnly: !text && !children,
       ...buttonProps,
-      children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Icon, {}),
-        text && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { children: text })
+      children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, {}),
+        text && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { children: text })
       ] })
     }
   );
@@ -4917,18 +5462,18 @@ var BlockquoteButton = ({
 // src/ui/codeblock-button/code-block-button.tsx
 var import_icons16 = require("@kopexa/icons");
 var import_toolbar5 = require("@kopexa/toolbar");
-var import_react39 = require("react");
+var import_react41 = require("react");
 
 // src/ui/codeblock-button/use-code-block.ts
-var import_editor_utils8 = require("@kopexa/editor-utils");
+var import_editor_utils9 = require("@kopexa/editor-utils");
 var import_icons15 = require("@kopexa/icons");
-var import_state7 = require("@tiptap/pm/state");
-var React13 = __toESM(require("react"));
+var import_state8 = require("@tiptap/pm/state");
+var React16 = __toESM(require("react"));
 var CODE_BLOCK_SHORTCUT_KEY = "mod+alt+c";
 function canToggle2(editor, turnInto = true) {
   var _a;
   if (!editor || !editor.isEditable) return false;
-  if (!(0, import_editor_utils8.isNodeInSchema)("codeBlock", editor) || (0, import_editor_utils8.isNodeTypeSelected)(editor, ["image"]))
+  if (!(0, import_editor_utils9.isNodeInSchema)("codeBlock", editor) || (0, import_editor_utils9.isNodeTypeSelected)(editor, ["image"]))
     return false;
   if (!turnInto) {
     return editor.can().toggleNode("codeBlock", "paragraph");
@@ -4937,12 +5482,12 @@ function canToggle2(editor, turnInto = true) {
     const view = editor.view;
     const state = view.state;
     const selection = state.selection;
-    if (selection.empty || selection instanceof import_state7.TextSelection) {
-      const pos = (_a = (0, import_editor_utils8.findNodePosition)({
+    if (selection.empty || selection instanceof import_state8.TextSelection) {
+      const pos = (_a = (0, import_editor_utils9.findNodePosition)({
         editor,
         node: state.selection.$anchor.node(1)
       })) == null ? void 0 : _a.pos;
-      if (!(0, import_editor_utils8.isValidPosition)(pos)) return false;
+      if (!(0, import_editor_utils9.isValidPosition)(pos)) return false;
     }
     return true;
   } catch {
@@ -4957,19 +5502,19 @@ function toggleCodeBlock(editor) {
     const view = editor.view;
     let state = view.state;
     let tr = state.tr;
-    if (state.selection.empty || state.selection instanceof import_state7.TextSelection) {
-      const pos = (_a = (0, import_editor_utils8.findNodePosition)({
+    if (state.selection.empty || state.selection instanceof import_state8.TextSelection) {
+      const pos = (_a = (0, import_editor_utils9.findNodePosition)({
         editor,
         node: state.selection.$anchor.node(1)
       })) == null ? void 0 : _a.pos;
-      if (!(0, import_editor_utils8.isValidPosition)(pos)) return false;
-      tr = tr.setSelection(import_state7.NodeSelection.create(state.doc, pos));
+      if (!(0, import_editor_utils9.isValidPosition)(pos)) return false;
+      tr = tr.setSelection(import_state8.NodeSelection.create(state.doc, pos));
       view.dispatch(tr);
       state = view.state;
     }
     const selection = state.selection;
     let chain = editor.chain().focus();
-    if (selection instanceof import_state7.NodeSelection) {
+    if (selection instanceof import_state8.NodeSelection) {
       const firstChild = (_b = selection.node.firstChild) == null ? void 0 : _b.firstChild;
       const lastChild = (_c = selection.node.lastChild) == null ? void 0 : _c.lastChild;
       const from = firstChild ? selection.from + firstChild.nodeSize : selection.from + 1;
@@ -4987,7 +5532,7 @@ function toggleCodeBlock(editor) {
 function shouldShowButton3(props) {
   const { editor, hideWhenUnavailable } = props;
   if (!editor || !editor.isEditable) return false;
-  if (!(0, import_editor_utils8.isNodeInSchema)("codeBlock", editor)) return false;
+  if (!(0, import_editor_utils9.isNodeInSchema)("codeBlock", editor)) return false;
   if (hideWhenUnavailable && !editor.isActive("code")) {
     return canToggle2(editor);
   }
@@ -5000,10 +5545,10 @@ function useCodeBlock(config) {
     onToggled
   } = config || {};
   const { editor } = useTiptapEditor(providedEditor);
-  const [isVisible, setIsVisible] = React13.useState(true);
+  const [isVisible, setIsVisible] = React16.useState(true);
   const canToggleState = canToggle2(editor);
   const isActive = (editor == null ? void 0 : editor.isActive("codeBlock")) || false;
-  React13.useEffect(() => {
+  React16.useEffect(() => {
     if (!editor) return;
     const handleSelectionUpdate = () => {
       setIsVisible(shouldShowButton3({ editor, hideWhenUnavailable }));
@@ -5014,7 +5559,7 @@ function useCodeBlock(config) {
       editor.off("selectionUpdate", handleSelectionUpdate);
     };
   }, [editor, hideWhenUnavailable]);
-  const handleToggle = React13.useCallback(() => {
+  const handleToggle = React16.useCallback(() => {
     if (!editor) return false;
     const success = toggleCodeBlock(editor);
     if (success) {
@@ -5034,7 +5579,7 @@ function useCodeBlock(config) {
 }
 
 // src/ui/codeblock-button/code-block-button.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var CodeBlockButton = ({
   editor: providedEditor,
   text,
@@ -5051,7 +5596,7 @@ var CodeBlockButton = ({
     hideWhenUnavailable,
     onToggled
   });
-  const handleClick = (0, import_react39.useCallback)(
+  const handleClick = (0, import_react41.useCallback)(
     (event) => {
       onClick == null ? void 0 : onClick(event);
       if (event.defaultPrevented) return;
@@ -5062,7 +5607,7 @@ var CodeBlockButton = ({
   if (!isVisible) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     import_toolbar5.ToolbarButton,
     {
       type: "button",
@@ -5079,28 +5624,28 @@ var CodeBlockButton = ({
       onClick: handleClick,
       isIconOnly: true,
       ...buttonProps,
-      children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_icons16.CodeblockIcon, {})
+      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_icons16.CodeblockIcon, {})
     }
   );
 };
 
 // src/ui/color-highlight-popover/color-highlight-popover.tsx
-var import_button10 = require("@kopexa/button");
+var import_button11 = require("@kopexa/button");
 var import_icons18 = require("@kopexa/icons");
 var import_popover2 = require("@kopexa/popover");
 var import_toolbar7 = require("@kopexa/toolbar");
-var import_react41 = require("react");
+var import_react43 = require("react");
 
 // src/ui/color-highlight-button/color-highlight-button.tsx
-var import_theme6 = require("@kopexa/theme");
+var import_theme8 = require("@kopexa/theme");
 var import_toolbar6 = require("@kopexa/toolbar");
-var import_react40 = require("react");
+var import_react42 = require("react");
 
 // src/ui/color-highlight-button/use-color-highlight.ts
-var import_editor_utils9 = require("@kopexa/editor-utils");
+var import_editor_utils10 = require("@kopexa/editor-utils");
 var import_icons17 = require("@kopexa/icons");
 var import_use_is_mobile = require("@kopexa/use-is-mobile");
-var React14 = __toESM(require("react"));
+var React17 = __toESM(require("react"));
 var import_react_hotkeys_hook = require("react-hotkeys-hook");
 var COLOR_HIGHLIGHT_SHORTCUT_KEY = "mod+shift+h";
 var HIGHLIGHT_COLORS = [
@@ -5163,7 +5708,7 @@ function pickHighlightColorsByValue(values) {
 }
 function canColorHighlight(editor) {
   if (!editor || !editor.isEditable) return false;
-  if (!(0, import_editor_utils9.isMarkInSchema)("highlight", editor) || (0, import_editor_utils9.isNodeTypeSelected)(editor, ["image"]))
+  if (!(0, import_editor_utils10.isMarkInSchema)("highlight", editor) || (0, import_editor_utils10.isNodeTypeSelected)(editor, ["image"]))
     return false;
   return editor.can().setMark("highlight");
 }
@@ -5179,7 +5724,7 @@ function removeHighlight(editor) {
 function shouldShowButton4(props) {
   const { editor, hideWhenUnavailable } = props;
   if (!editor || !editor.isEditable) return false;
-  if (!(0, import_editor_utils9.isMarkInSchema)("highlight", editor)) return false;
+  if (!(0, import_editor_utils10.isMarkInSchema)("highlight", editor)) return false;
   if (hideWhenUnavailable && !editor.isActive("code")) {
     return canColorHighlight(editor);
   }
@@ -5195,10 +5740,10 @@ function useColorHighlight(config) {
   } = config;
   const { editor } = useTiptapEditor(providedEditor);
   const isMobile = (0, import_use_is_mobile.useIsMobile)();
-  const [isVisible, setIsVisible] = React14.useState(true);
+  const [isVisible, setIsVisible] = React17.useState(true);
   const canColorHighlightState = canColorHighlight(editor);
   const isActive = isColorHighlightActive(editor, highlightColor);
-  React14.useEffect(() => {
+  React17.useEffect(() => {
     if (!editor) return;
     const handleSelectionUpdate = () => {
       setIsVisible(shouldShowButton4({ editor, hideWhenUnavailable }));
@@ -5209,7 +5754,7 @@ function useColorHighlight(config) {
       editor.off("selectionUpdate", handleSelectionUpdate);
     };
   }, [editor, hideWhenUnavailable]);
-  const handleColorHighlight = React14.useCallback(() => {
+  const handleColorHighlight = React17.useCallback(() => {
     if (!editor || !canColorHighlightState || !highlightColor || !label)
       return false;
     if (editor.state.storedMarks) {
@@ -5228,7 +5773,7 @@ function useColorHighlight(config) {
       return success;
     }, 0);
   }, [canColorHighlightState, highlightColor, editor, label, onApplied]);
-  const handleRemoveHighlight = React14.useCallback(() => {
+  const handleRemoveHighlight = React17.useCallback(() => {
     const success = removeHighlight(editor);
     if (success) {
       onApplied == null ? void 0 : onApplied({ color: "", label: "Remove highlight" });
@@ -5260,7 +5805,7 @@ function useColorHighlight(config) {
 }
 
 // src/ui/color-highlight-button/color-highlight-button.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var ColorHighlightButton = ({
   editor: providedEditor,
   highlightColor,
@@ -5289,7 +5834,7 @@ var ColorHighlightButton = ({
     hideWhenUnavailable,
     onApplied
   });
-  const handleClick = (0, import_react40.useCallback)(
+  const handleClick = (0, import_react42.useCallback)(
     (event) => {
       onClick == null ? void 0 : onClick(event);
       if (event.defaultPrevented) return;
@@ -5297,7 +5842,7 @@ var ColorHighlightButton = ({
     },
     [handleColorHighlight, onClick]
   );
-  const buttonStyle = (0, import_react40.useMemo)(
+  const buttonStyle = (0, import_react42.useMemo)(
     () => ({
       ...style,
       "--highlight-color": highlightColor
@@ -5307,8 +5852,8 @@ var ColorHighlightButton = ({
   if (!isVisible) {
     return null;
   }
-  const styles = (0, import_theme6.colorHighlightButton)();
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+  const styles = (0, import_theme8.colorHighlightButton)();
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
     import_toolbar6.ToolbarButton,
     {
       type: "button",
@@ -5327,15 +5872,15 @@ var ColorHighlightButton = ({
       isIconOnly: true,
       ...buttonProps,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           "span",
           {
             "data-active-state": isActive ? "on" : "off",
             className: styles.mark()
           }
         ),
-        children || /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        children || /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
             "span",
             {
               style: { "--highlight-color": highlightColor }
@@ -5349,13 +5894,13 @@ var ColorHighlightButton = ({
 };
 
 // src/ui/color-highlight-popover/color-highlight-popover.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 var ColorHighlightPopoverButton = ({
   className,
   children,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-  import_button10.IconButton,
+}) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  import_button11.IconButton,
   {
     type: "button",
     className,
@@ -5366,7 +5911,7 @@ var ColorHighlightPopoverButton = ({
     tooltip: "Highlight",
     isIconOnly: !children,
     ...props,
-    children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_icons18.HighlighterIcon, {})
+    children: children != null ? children : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_icons18.HighlighterIcon, {})
   }
 );
 function ColorHighlightPopoverContent({
@@ -5380,8 +5925,8 @@ function ColorHighlightPopoverContent({
   ])
 }) {
   const { handleRemoveHighlight } = useColorHighlight({ editor });
-  const containerRef = (0, import_react41.useRef)(null);
-  const menuItems = (0, import_react41.useMemo)(
+  const containerRef = (0, import_react43.useRef)(null);
+  const menuItems = (0, import_react43.useMemo)(
     () => [...colors, { label: "Remove highlight", value: "none" }],
     [colors]
   );
@@ -5399,13 +5944,13 @@ function ColorHighlightPopoverContent({
     },
     autoSelectFirstItem: false
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { ref: containerRef, className: "flex gap-1 items-center", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { ref: containerRef, className: "flex gap-1 items-center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       "div",
       {
         className: "flex items-center gap-1 outline-none",
         "data-orientation": "horizontal",
-        children: colors.map((color, index) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        children: colors.map((color, index) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
           ColorHighlightButton,
           {
             editor,
@@ -5418,9 +5963,9 @@ function ColorHighlightPopoverContent({
         ))
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_toolbar7.ToolbarSeparator, { orientation: "vertical" }),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "tiptap-button-group", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-      import_button10.IconButton,
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_toolbar7.ToolbarSeparator, { orientation: "vertical" }),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "tiptap-button-group", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      import_button11.IconButton,
       {
         onClick: handleRemoveHighlight,
         "aria-label": "Remove highlight",
@@ -5430,7 +5975,7 @@ function ColorHighlightPopoverContent({
         variant: "ghost",
         color: "default",
         "data-highlighted": selectedIndex === colors.length,
-        children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_icons18.BanIcon, {})
+        children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_icons18.BanIcon, {})
       }
     ) })
   ] });
@@ -5449,18 +5994,18 @@ function ColorHighlightPopover({
   ...props
 }) {
   const { editor } = useTiptapEditor(providedEditor);
-  const [isOpen, setIsOpen] = (0, import_react41.useState)(false);
+  const [isOpen, setIsOpen] = (0, import_react43.useState)(false);
   const { isVisible, canColorHighlight: canColorHighlight2, isActive, label } = useColorHighlight({
     editor,
     hideWhenUnavailable,
     onApplied
   });
   if (!isVisible) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_popover2.Popover.Root, { open: isOpen, onOpenChange: setIsOpen, spacing: "dense", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_popover2.Popover.Root, { open: isOpen, onOpenChange: setIsOpen, spacing: "dense", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       import_popover2.Popover.Trigger,
       {
-        render: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        render: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
           ColorHighlightPopoverButton,
           {
             disabled: !canColorHighlight2,
@@ -5474,26 +6019,26 @@ function ColorHighlightPopover({
         )
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_popover2.Popover.Content, { "aria-label": "Highlight colors", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ColorHighlightPopoverContent, { editor, colors }) })
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_popover2.Popover.Content, { "aria-label": "Highlight colors", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ColorHighlightPopoverContent, { editor, colors }) })
   ] });
 }
 
 // src/ui/heading-dropdown-menu/index.tsx
-var import_button12 = require("@kopexa/button");
+var import_button13 = require("@kopexa/button");
 var import_dropdown_menu = require("@kopexa/dropdown-menu");
-var import_editor_utils11 = require("@kopexa/editor-utils");
+var import_editor_utils12 = require("@kopexa/editor-utils");
 var import_icons20 = require("@kopexa/icons");
-var import_react43 = require("@tiptap/react");
-var React16 = __toESM(require("react"));
+var import_react45 = require("@tiptap/react");
+var React19 = __toESM(require("react"));
 
 // src/ui/heading-button/index.tsx
-var import_button11 = require("@kopexa/button");
-var import_editor_utils10 = require("@kopexa/editor-utils");
+var import_button12 = require("@kopexa/button");
+var import_editor_utils11 = require("@kopexa/editor-utils");
 var import_icons19 = require("@kopexa/icons");
-var React15 = __toESM(require("react"));
+var React18 = __toESM(require("react"));
 
 // src/ui/heading-button/utils.ts
-var import_react42 = require("@tiptap/react");
+var import_react44 = require("@tiptap/react");
 var headingShortcutKeys = {
   1: "Ctrl-Alt-1",
   2: "Ctrl-Alt-2",
@@ -5534,7 +6079,7 @@ function shouldShowHeadingButton(params) {
     return false;
   }
   if (hideWhenUnavailable) {
-    if ((0, import_react42.isNodeSelection)(editor.state.selection)) {
+    if ((0, import_react44.isNodeSelection)(editor.state.selection)) {
       return false;
     }
   }
@@ -5545,7 +6090,7 @@ function getFormattedHeadingName(level) {
 }
 
 // src/ui/heading-button/index.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var headingIcons = {
   1: import_icons19.HeadingOneIcon,
   2: import_icons19.HeadingTwoIcon,
@@ -5555,7 +6100,7 @@ var headingIcons = {
   6: import_icons19.HeadingSixIcon
 };
 function useHeadingState(editor, level, disabled = false) {
-  const headingInSchema = (0, import_editor_utils10.isNodeInSchema)("heading", editor);
+  const headingInSchema = (0, import_editor_utils11.isNodeInSchema)("heading", editor);
   const isDisabled = isHeadingButtonDisabled(editor, level, disabled);
   const isActive = isHeadingActive(editor, level);
   const Icon = headingIcons[level];
@@ -5591,7 +6136,7 @@ var HeadingButton = ({
     shortcutKey,
     formattedName
   } = useHeadingState(editor, level, disabled);
-  const handleClick = React15.useCallback(
+  const handleClick = React18.useCallback(
     (e) => {
       onClick == null ? void 0 : onClick(e);
       if (!e.defaultPrevented && !isDisabled && editor) {
@@ -5600,7 +6145,7 @@ var HeadingButton = ({
     },
     [onClick, isDisabled, editor, level]
   );
-  const show = React15.useMemo(() => {
+  const show = React18.useMemo(() => {
     return shouldShowHeadingButton({
       editor,
       level,
@@ -5611,8 +6156,8 @@ var HeadingButton = ({
   if (!show || !editor || !editor.isEditable) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-    import_button11.Button,
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    import_button12.Button,
     {
       type: "button",
       className: className.trim(),
@@ -5627,7 +6172,7 @@ var HeadingButton = ({
       tooltip: formattedName,
       shortcutKeys: shortcutKey,
       onClick: handleClick,
-      startContent: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, {}),
+      startContent: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Icon, {}),
       ...buttonProps,
       ref,
       children: children || text
@@ -5636,7 +6181,7 @@ var HeadingButton = ({
 };
 
 // src/ui/heading-dropdown-menu/index.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 function HeadingDropdownMenu({
   editor: providedEditor,
   levels = [1, 2, 3, 4, 5, 6],
@@ -5645,26 +6190,26 @@ function HeadingDropdownMenu({
   ...props
 }) {
   var _a;
-  const [isOpen, setIsOpen] = React16.useState(false);
+  const [isOpen, setIsOpen] = React19.useState(false);
   const { editor } = useTiptapEditor(providedEditor);
-  const headingInSchema = (0, import_editor_utils11.isNodeInSchema)("heading", editor);
-  const handleOnOpenChange = React16.useCallback(
+  const headingInSchema = (0, import_editor_utils12.isNodeInSchema)("heading", editor);
+  const handleOnOpenChange = React19.useCallback(
     (open) => {
       setIsOpen(open);
       onOpenChange == null ? void 0 : onOpenChange(open);
     },
     [onOpenChange]
   );
-  const getActiveIcon = React16.useCallback(() => {
-    if (!editor) return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_icons20.HeadingIcon, {});
+  const getActiveIcon = React19.useCallback(() => {
+    if (!editor) return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_icons20.HeadingIcon, {});
     const activeLevel = levels.find(
       (level) => editor.isActive("heading", { level })
     );
-    if (!activeLevel) return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_icons20.HeadingIcon, {});
+    if (!activeLevel) return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_icons20.HeadingIcon, {});
     const ActiveIcon = headingIcons[activeLevel];
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ActiveIcon, {});
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ActiveIcon, {});
   }, [editor, levels]);
-  const canToggleAnyHeading = React16.useCallback(() => {
+  const canToggleAnyHeading = React19.useCallback(() => {
     if (!editor) return false;
     return levels.some(
       (level) => editor.can().toggleNode("heading", "paragraph", { level })
@@ -5672,12 +6217,12 @@ function HeadingDropdownMenu({
   }, [editor, levels]);
   const isDisabled = !canToggleAnyHeading();
   const isAnyHeadingActive = (_a = editor == null ? void 0 : editor.isActive("heading")) != null ? _a : false;
-  const show = React16.useMemo(() => {
+  const show = React19.useMemo(() => {
     if (!headingInSchema || !editor) {
       return false;
     }
     if (hideWhenUnavailable) {
-      if ((0, import_react43.isNodeSelection)(editor.state.selection) || !canToggleAnyHeading()) {
+      if ((0, import_react45.isNodeSelection)(editor.state.selection) || !canToggleAnyHeading()) {
         return false;
       }
     }
@@ -5686,9 +6231,9 @@ function HeadingDropdownMenu({
   if (!show || !editor || !editor.isEditable) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_dropdown_menu.DropdownMenu.Root, { open: isOpen, onOpenChange: handleOnOpenChange, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_dropdown_menu.DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-      import_button12.Button,
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_dropdown_menu.DropdownMenu.Root, { open: isOpen, onOpenChange: handleOnOpenChange, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_dropdown_menu.DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+      import_button13.Button,
       {
         type: "button",
         disabled: isDisabled,
@@ -5700,12 +6245,12 @@ function HeadingDropdownMenu({
         "aria-label": "Format text as heading",
         "aria-pressed": isAnyHeadingActive,
         tooltip: "Heading",
-        endContent: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_icons20.ChevronDownIcon, {}),
+        endContent: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_icons20.ChevronDownIcon, {}),
         ...props,
         children: getActiveIcon()
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_dropdown_menu.DropdownMenu.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_dropdown_menu.DropdownMenu.Group, { children: levels.map((level) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_dropdown_menu.DropdownMenu.Item, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_dropdown_menu.DropdownMenu.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_dropdown_menu.DropdownMenu.Group, { children: levels.map((level) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_dropdown_menu.DropdownMenu.Item, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
       HeadingButton,
       {
         editor,
@@ -5720,20 +6265,20 @@ function HeadingDropdownMenu({
 }
 
 // src/ui/list-dropdown-menu/index.tsx
-var import_button14 = require("@kopexa/button");
+var import_button15 = require("@kopexa/button");
 var import_dropdown_menu2 = require("@kopexa/dropdown-menu");
-var import_editor_utils13 = require("@kopexa/editor-utils");
+var import_editor_utils14 = require("@kopexa/editor-utils");
 var import_icons22 = require("@kopexa/icons");
-var import_react46 = require("@tiptap/react");
-var import_react47 = require("react");
+var import_react48 = require("@tiptap/react");
+var import_react49 = require("react");
 
 // src/ui/list-button/index.tsx
-var import_button13 = require("@kopexa/button");
-var import_editor_utils12 = require("@kopexa/editor-utils");
+var import_button14 = require("@kopexa/button");
+var import_editor_utils13 = require("@kopexa/editor-utils");
 var import_icons21 = require("@kopexa/icons");
-var import_react44 = require("@tiptap/react");
-var import_react45 = require("react");
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_react46 = require("@tiptap/react");
+var import_react47 = require("react");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 var listOptions = [
   {
     label: "Bullet List",
@@ -5807,14 +6352,14 @@ function shouldShowListButton(params) {
     return false;
   }
   if (hideWhenUnavailable) {
-    if ((0, import_react44.isNodeSelection)(editor.state.selection) || !canToggleList(editor, type)) {
+    if ((0, import_react46.isNodeSelection)(editor.state.selection) || !canToggleList(editor, type)) {
       return false;
     }
   }
   return true;
 }
 function useListState(editor, type) {
-  const listInSchema = (0, import_editor_utils12.isNodeInSchema)(type, editor);
+  const listInSchema = (0, import_editor_utils13.isNodeInSchema)(type, editor);
   const listOption = getListOption(type);
   const isActive = isListActive(editor, type);
   const shortcutKey = listShortcutKeys[type];
@@ -5842,7 +6387,7 @@ var ListButton = ({
     type
   );
   const Icon = (listOption == null ? void 0 : listOption.icon) || import_icons21.ListIcon;
-  const handleClick = (0, import_react45.useCallback)(
+  const handleClick = (0, import_react47.useCallback)(
     (e) => {
       onClick == null ? void 0 : onClick(e);
       if (!e.defaultPrevented && editor) {
@@ -5851,7 +6396,7 @@ var ListButton = ({
     },
     [onClick, editor, type]
   );
-  const show = (0, import_react45.useMemo)(() => {
+  const show = (0, import_react47.useMemo)(() => {
     return shouldShowListButton({
       editor,
       type,
@@ -5862,8 +6407,8 @@ var ListButton = ({
   if (!show || !editor || !editor.isEditable) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-    import_button13.Button,
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    import_button14.Button,
     {
       type: "button",
       className: className.trim(),
@@ -5876,7 +6421,7 @@ var ListButton = ({
       tooltip: (listOption == null ? void 0 : listOption.label) || type,
       shortcutKeys: shortcutKey,
       onClick: handleClick,
-      startContent: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon, {}),
+      startContent: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Icon, {}),
       ...buttonProps,
       ref,
       children: children || text
@@ -5885,7 +6430,7 @@ var ListButton = ({
 };
 
 // src/ui/list-dropdown-menu/index.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 function canToggleAnyList(editor, listTypes) {
   if (!editor) return false;
   return listTypes.some((type) => canToggleList(editor, type));
@@ -5905,24 +6450,24 @@ function shouldShowListDropdown(params) {
     return false;
   }
   if (hideWhenUnavailable) {
-    if ((0, import_react46.isNodeSelection)(editor.state.selection) || !canToggleAny) {
+    if ((0, import_react48.isNodeSelection)(editor.state.selection) || !canToggleAny) {
       return false;
     }
   }
   return true;
 }
 function useListDropdownState(editor, availableTypes) {
-  const [isOpen, setIsOpen] = (0, import_react47.useState)(false);
+  const [isOpen, setIsOpen] = (0, import_react49.useState)(false);
   const listInSchema = availableTypes.some(
-    (type) => (0, import_editor_utils13.isNodeInSchema)(type, editor)
+    (type) => (0, import_editor_utils14.isNodeInSchema)(type, editor)
   );
-  const filteredLists = (0, import_react47.useMemo)(
+  const filteredLists = (0, import_react49.useMemo)(
     () => getFilteredListOptions(availableTypes),
     [availableTypes]
   );
   const canToggleAny = canToggleAnyList(editor, availableTypes);
   const isAnyActive = isAnyListActive(editor, availableTypes);
-  const handleOpenChange = (0, import_react47.useCallback)(
+  const handleOpenChange = (0, import_react49.useCallback)(
     (open, callback) => {
       setIsOpen(open);
       callback == null ? void 0 : callback(open);
@@ -5940,11 +6485,11 @@ function useListDropdownState(editor, availableTypes) {
   };
 }
 function useActiveListIcon(editor, filteredLists) {
-  return (0, import_react47.useCallback)(() => {
+  return (0, import_react49.useCallback)(() => {
     const activeOption = filteredLists.find(
       (option) => isListActive(editor, option.type)
     );
-    return activeOption ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(activeOption.icon, {}) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_icons22.ListIcon, {});
+    return activeOption ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(activeOption.icon, {}) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_icons22.ListIcon, {});
   }, [editor, filteredLists]);
 }
 function ListDropdownMenu({
@@ -5964,7 +6509,7 @@ function ListDropdownMenu({
     handleOpenChange
   } = useListDropdownState(editor, types);
   const getActiveIcon = useActiveListIcon(editor, filteredLists);
-  const show = (0, import_react47.useMemo)(() => {
+  const show = (0, import_react49.useMemo)(() => {
     return shouldShowListDropdown({
       editor,
       listTypes: types,
@@ -5973,16 +6518,16 @@ function ListDropdownMenu({
       canToggleAny
     });
   }, [editor, types, hideWhenUnavailable, listInSchema, canToggleAny]);
-  const handleOnOpenChange = (0, import_react47.useCallback)(
+  const handleOnOpenChange = (0, import_react49.useCallback)(
     (open) => handleOpenChange(open, onOpenChange),
     [handleOpenChange, onOpenChange]
   );
   if (!show || !editor || !editor.isEditable) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_dropdown_menu2.DropdownMenu.Root, { open: isOpen, onOpenChange: handleOnOpenChange, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_dropdown_menu2.DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-      import_button14.Button,
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_dropdown_menu2.DropdownMenu.Root, { open: isOpen, onOpenChange: handleOnOpenChange, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_dropdown_menu2.DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      import_button15.Button,
       {
         type: "button",
         variant: "ghost",
@@ -5991,12 +6536,12 @@ function ListDropdownMenu({
         tabIndex: -1,
         "aria-label": "List options",
         tooltip: "List",
-        endContent: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_icons22.ChevronDownIcon, {}),
+        endContent: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_icons22.ChevronDownIcon, {}),
         ...props,
         children: getActiveIcon()
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_dropdown_menu2.DropdownMenu.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_dropdown_menu2.DropdownMenu.Group, { children: filteredLists.map((option) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_dropdown_menu2.DropdownMenu.Item, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_dropdown_menu2.DropdownMenu.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_dropdown_menu2.DropdownMenu.Group, { children: filteredLists.map((option) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_dropdown_menu2.DropdownMenu.Item, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
       ListButton,
       {
         editor,
@@ -6013,8 +6558,8 @@ function ListDropdownMenu({
 
 // src/ui/table-button/index.tsx
 var import_toolbar8 = require("@kopexa/toolbar");
-var import_react48 = require("react");
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_react50 = require("react");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var TableButton = ({
   editor: providedEditor,
   text,
@@ -6038,7 +6583,7 @@ var TableButton = ({
     hideWhenUnavailable,
     onToggled
   });
-  const handleClick = (0, import_react48.useCallback)(
+  const handleClick = (0, import_react50.useCallback)(
     (event) => {
       onClick == null ? void 0 : onClick(event);
       if (event.defaultPrevented) return;
@@ -6049,7 +6594,7 @@ var TableButton = ({
   if (!isVisible) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
     import_toolbar8.ToolbarButton,
     {
       type: "button",
@@ -6065,22 +6610,22 @@ var TableButton = ({
       onClick: handleClick,
       isIconOnly: !text && !children,
       ...buttonProps,
-      children: children || /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Icon, {}),
-        text && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { children: text })
+      children: children || /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Icon, {}),
+        text && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { children: text })
       ] })
     }
   );
 };
 
 // src/ui/text-align-button/text-align-button.tsx
-var import_button15 = require("@kopexa/button");
-var import_react50 = require("react");
+var import_button16 = require("@kopexa/button");
+var import_react52 = require("react");
 
 // src/ui/text-align-button/use-text-align.ts
-var import_editor_utils14 = require("@kopexa/editor-utils");
+var import_editor_utils15 = require("@kopexa/editor-utils");
 var import_icons23 = require("@kopexa/icons");
-var import_react49 = require("react");
+var import_react51 = require("react");
 var TEXT_ALIGN_SHORTCUT_KEYS = {
   left: "mod+shift+l",
   center: "mod+shift+e",
@@ -6101,7 +6646,7 @@ var textAlignLabels = {
 };
 function canSetTextAlign(editor, align) {
   if (!editor || !editor.isEditable) return false;
-  if (!(0, import_editor_utils14.isExtensionAvailable)(editor, "textAlign") || (0, import_editor_utils14.isNodeTypeSelected)(editor, ["image"]))
+  if (!(0, import_editor_utils15.isExtensionAvailable)(editor, "textAlign") || (0, import_editor_utils15.isNodeTypeSelected)(editor, ["image"]))
     return false;
   return editor.can().setTextAlign(align);
 }
@@ -6124,7 +6669,7 @@ function setTextAlign(editor, align) {
 function shouldShowButton5(props) {
   const { editor, hideWhenUnavailable, align } = props;
   if (!editor || !editor.isEditable) return false;
-  if (!(0, import_editor_utils14.isExtensionAvailable)(editor, "textAlign")) return false;
+  if (!(0, import_editor_utils15.isExtensionAvailable)(editor, "textAlign")) return false;
   if (hideWhenUnavailable && !editor.isActive("code")) {
     return canSetTextAlign(editor, align);
   }
@@ -6138,10 +6683,10 @@ function useTextAlign(config) {
     onAligned
   } = config;
   const { editor } = useTiptapEditor(providedEditor);
-  const [isVisible, setIsVisible] = (0, import_react49.useState)(true);
+  const [isVisible, setIsVisible] = (0, import_react51.useState)(true);
   const canAlign = canSetTextAlign(editor, align);
   const isActive = isTextAlignActive(editor, align);
-  (0, import_react49.useEffect)(() => {
+  (0, import_react51.useEffect)(() => {
     if (!editor) return;
     const handleSelectionUpdate = () => {
       setIsVisible(shouldShowButton5({ editor, align, hideWhenUnavailable }));
@@ -6152,7 +6697,7 @@ function useTextAlign(config) {
       editor.off("selectionUpdate", handleSelectionUpdate);
     };
   }, [editor, hideWhenUnavailable, align]);
-  const handleTextAlign = (0, import_react49.useCallback)(() => {
+  const handleTextAlign = (0, import_react51.useCallback)(() => {
     if (!editor) return false;
     const success = setTextAlign(editor, align);
     if (success) {
@@ -6172,7 +6717,7 @@ function useTextAlign(config) {
 }
 
 // src/ui/text-align-button/text-align-button.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 var TextAlignButton = ({
   editor: providedEditor,
   align,
@@ -6199,7 +6744,7 @@ var TextAlignButton = ({
     hideWhenUnavailable,
     onAligned
   });
-  const handleClick = (0, import_react50.useCallback)(
+  const handleClick = (0, import_react52.useCallback)(
     (e) => {
       onClick == null ? void 0 : onClick(e);
       if (e.defaultPrevented) return;
@@ -6210,8 +6755,8 @@ var TextAlignButton = ({
   if (!isVisible) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-    import_button15.IconButton,
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    import_button16.IconButton,
     {
       type: "button",
       disabled: canAlign,
@@ -6226,19 +6771,19 @@ var TextAlignButton = ({
       shortcutKeys,
       onClick: handleClick,
       ...buttonProps,
-      children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Icon, {})
+      children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Icon, {})
     }
   );
 };
 
 // src/ui/undo-redo-button/undo-redo-button.tsx
 var import_toolbar9 = require("@kopexa/toolbar");
-var import_react52 = require("react");
+var import_react54 = require("react");
 
 // src/ui/undo-redo-button/use-undo-redo.ts
-var import_editor_utils15 = require("@kopexa/editor-utils");
+var import_editor_utils16 = require("@kopexa/editor-utils");
 var import_icons24 = require("@kopexa/icons");
-var import_react51 = require("react");
+var import_react53 = require("react");
 var UNDO_REDO_SHORTCUT_KEYS = {
   undo: "mod+z",
   redo: "mod+shift+z"
@@ -6253,7 +6798,7 @@ var historyIcons = {
 };
 function canExecuteUndoRedoAction(editor, action) {
   if (!editor || !editor.isEditable) return false;
-  if ((0, import_editor_utils15.isNodeTypeSelected)(editor, ["image"])) return false;
+  if ((0, import_editor_utils16.isNodeTypeSelected)(editor, ["image"])) return false;
   return action === "undo" ? editor.can().undo() : editor.can().redo();
 }
 function executeUndoRedoAction(editor, action) {
@@ -6278,9 +6823,9 @@ function useUndoRedo(config) {
     onExecuted
   } = config;
   const { editor } = useTiptapEditor(providedEditor);
-  const [isVisible, setIsVisible] = (0, import_react51.useState)(true);
+  const [isVisible, setIsVisible] = (0, import_react53.useState)(true);
   const canExecute = canExecuteUndoRedoAction(editor, action);
-  (0, import_react51.useEffect)(() => {
+  (0, import_react53.useEffect)(() => {
     if (!editor) return;
     const handleUpdate = () => {
       setIsVisible(shouldShowButton6({ editor, hideWhenUnavailable, action }));
@@ -6291,7 +6836,7 @@ function useUndoRedo(config) {
       editor.off("transaction", handleUpdate);
     };
   }, [editor, hideWhenUnavailable, action]);
-  const handleAction = (0, import_react51.useCallback)(() => {
+  const handleAction = (0, import_react53.useCallback)(() => {
     if (!editor) return false;
     const success = executeUndoRedoAction(editor, action);
     if (success) {
@@ -6310,7 +6855,7 @@ function useUndoRedo(config) {
 }
 
 // src/ui/undo-redo-button/undo-redo-button.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 var UndoRedoButton = ({
   editor: providedEditor,
   action,
@@ -6329,7 +6874,7 @@ var UndoRedoButton = ({
     hideWhenUnavailable,
     onExecuted
   });
-  const handleClick = (0, import_react52.useCallback)(
+  const handleClick = (0, import_react54.useCallback)(
     (event) => {
       onClick == null ? void 0 : onClick(event);
       if (event.defaultPrevented) return;
@@ -6340,7 +6885,7 @@ var UndoRedoButton = ({
   if (!isVisible) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     import_toolbar9.ToolbarButton,
     {
       type: "button",
@@ -6355,13 +6900,13 @@ var UndoRedoButton = ({
       onClick: handleClick,
       isIconOnly: true,
       ...buttonProps,
-      children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Icon, {})
+      children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon, {})
     }
   );
 };
 
 // src/presets/basic/editor-header.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var EditorHeader = ({
   editor: providedEditor,
   variant
@@ -6371,7 +6916,7 @@ var EditorHeader = ({
   const isMobile = (0, import_use_is_mobile2.useIsMobile)();
   const windowSize = useWindowSize();
   const { styles } = useEditorUIContext();
-  const toolbarRef = (0, import_react53.useRef)(null);
+  const toolbarRef = (0, import_react55.useRef)(null);
   const bodyRect = useCursorVisibility({
     editor,
     overlayHeight: (_b = (_a = toolbarRef.current) == null ? void 0 : _a.getBoundingClientRect().height) != null ? _b : 0
@@ -6380,7 +6925,7 @@ var EditorHeader = ({
     return null;
   }
   const ToolbarContent = variant === "comment" ? CommentToolbarContent : variant === "field" ? FieldToolbarContent : MainToolbarContent;
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: styles.toolbarContainer(), "data-slot": "editor-toolbar", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: styles.toolbarContainer(), "data-slot": "editor-toolbar", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     import_toolbar10.Toolbar,
     {
       sticky: true,
@@ -6390,54 +6935,54 @@ var EditorHeader = ({
         bottom: `calc(100% - ${windowSize.height - bodyRect.y}px)`
       } : {},
       className: styles.toolbar(),
-      children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ToolbarContent, {})
+      children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ToolbarContent, {})
     }
   ) });
 };
-var MainToolbarContent = () => /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_toolbar10.ToolbarGroup, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(UndoRedoButton, { action: "undo" }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(UndoRedoButton, { action: "redo" })
+var MainToolbarContent = () => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_toolbar10.ToolbarGroup, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(UndoRedoButton, { action: "undo" }),
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(UndoRedoButton, { action: "redo" })
   ] }),
-  /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_toolbar10.ToolbarSeparator, {}),
-  /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_toolbar10.ToolbarGroup, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(HeadingDropdownMenu, { levels: [1, 2, 3, 4] }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ListDropdownMenu, { types: ["bulletList", "orderedList", "taskList"] }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(BlockquoteButton, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(CodeBlockButton, {})
+  /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_toolbar10.ToolbarSeparator, {}),
+  /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_toolbar10.ToolbarGroup, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(HeadingDropdownMenu, { levels: [1, 2, 3, 4] }),
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ListDropdownMenu, { types: ["bulletList", "orderedList", "taskList"] }),
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(BlockquoteButton, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(CodeBlockButton, {})
   ] }),
-  /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_toolbar10.ToolbarSeparator, {}),
-  /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_toolbar10.ToolbarGroup, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(MarkButton, { type: "bold" }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(MarkButton, { type: "italic" }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(MarkButton, { type: "strike" }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(MarkButton, { type: "code" }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(MarkButton, { type: "underline" }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ColorHighlightPopover, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(LinkPopover, {})
+  /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_toolbar10.ToolbarSeparator, {}),
+  /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_toolbar10.ToolbarGroup, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(MarkButton, { type: "bold" }),
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(MarkButton, { type: "italic" }),
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(MarkButton, { type: "strike" }),
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(MarkButton, { type: "code" }),
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(MarkButton, { type: "underline" }),
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ColorHighlightPopover, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(LinkPopover, {})
   ] }),
-  /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_toolbar10.ToolbarSeparator, {}),
-  /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_toolbar10.ToolbarGroup, { children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(TableButton, {}) }),
-  /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(MoreOptions, { hideWhenUnavailable: true })
+  /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_toolbar10.ToolbarSeparator, {}),
+  /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_toolbar10.ToolbarGroup, { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(TableButton, {}) }),
+  /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(MoreOptions, { hideWhenUnavailable: true })
 ] });
-var CommentToolbarContent = () => /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_toolbar10.ToolbarGroup, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(MarkButton, { type: "bold" }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(MarkButton, { type: "italic" }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(MarkButton, { type: "strike" }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(MarkButton, { type: "code" })
+var CommentToolbarContent = () => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_toolbar10.ToolbarGroup, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(MarkButton, { type: "bold" }),
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(MarkButton, { type: "italic" }),
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(MarkButton, { type: "strike" }),
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(MarkButton, { type: "code" })
   ] }),
-  /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_toolbar10.ToolbarSeparator, {}),
-  /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_toolbar10.ToolbarGroup, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(LinkPopover, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ListDropdownMenu, { types: ["bulletList", "orderedList"] })
+  /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_toolbar10.ToolbarSeparator, {}),
+  /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_toolbar10.ToolbarGroup, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(LinkPopover, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ListDropdownMenu, { types: ["bulletList", "orderedList"] })
   ] })
 ] });
-var FieldToolbarContent = () => /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_toolbar10.ToolbarGroup, { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(MarkButton, { type: "bold" }),
-  /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(MarkButton, { type: "italic" }),
-  /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(MarkButton, { type: "strike" }),
-  /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(LinkPopover, {})
+var FieldToolbarContent = () => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_toolbar10.ToolbarGroup, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(MarkButton, { type: "bold" }),
+  /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(MarkButton, { type: "italic" }),
+  /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(MarkButton, { type: "strike" }),
+  /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(LinkPopover, {})
 ] });
 function MoreOptions({
   editor: providedEditor,
@@ -6445,8 +6990,8 @@ function MoreOptions({
   ...props
 }) {
   const { editor } = useTiptapEditor(providedEditor);
-  const [show, setShow] = (0, import_react53.useState)(false);
-  (0, import_react53.useEffect)(() => {
+  const [show, setShow] = (0, import_react55.useState)(false);
+  (0, import_react55.useEffect)(() => {
     if (!editor) return;
     const handleSelectionUpdate = () => {
       setShow(
@@ -6465,13 +7010,13 @@ function MoreOptions({
   if (!show || !editor || !editor.isEditable) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_toolbar10.ToolbarSeparator, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_toolbar10.ToolbarGroup, { children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_popover3.Popover.Root, { spacing: "dense", width: "auto", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_toolbar10.ToolbarSeparator, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_toolbar10.ToolbarGroup, { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_popover3.Popover.Root, { spacing: "dense", width: "auto", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
         import_popover3.Popover.Trigger,
         {
-          render: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          render: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
             import_toolbar10.ToolbarButton,
             {
               type: "button",
@@ -6483,29 +7028,29 @@ function MoreOptions({
               title: "More options",
               isIconOnly: true,
               ...props,
-              children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_icons25.MoreVerticalIcon, {})
+              children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_icons25.MoreVerticalIcon, {})
             }
           )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
         import_popover3.Popover.Content,
         {
           side: "top",
           align: "end",
           alignOffset: 4,
           sideOffset: 4,
-          children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_toolbar10.Toolbar, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_toolbar10.ToolbarGroup, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(MarkButton, { type: "superscript" }),
-              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(MarkButton, { type: "subscript" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_toolbar10.Toolbar, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_toolbar10.ToolbarGroup, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(MarkButton, { type: "superscript" }),
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(MarkButton, { type: "subscript" })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_toolbar10.ToolbarSeparator, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_toolbar10.ToolbarGroup, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(TextAlignButton, { align: "left" }),
-              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(TextAlignButton, { align: "center" }),
-              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(TextAlignButton, { align: "right" }),
-              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(TextAlignButton, { align: "justify" })
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_toolbar10.ToolbarSeparator, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_toolbar10.ToolbarGroup, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(TextAlignButton, { align: "left" }),
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(TextAlignButton, { align: "center" }),
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(TextAlignButton, { align: "right" }),
+              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(TextAlignButton, { align: "justify" })
             ] })
           ] })
         }
@@ -6537,36 +7082,87 @@ function shouldShowMoreOptions(params) {
 }
 
 // src/presets/basic/index.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 var BasicEditor = ({
   variant,
   bordered,
   content,
+  variables,
+  variableValues,
   ...options
 }) => {
-  const editor = useCreateEditor({ content, ...options });
-  const styles = (0, import_theme7.editorBasic)({ variant, bordered });
+  const editor = useCreateEditor({
+    content,
+    enableVariables: !!(variables == null ? void 0 : variables.length),
+    ...options
+  });
+  const styles = (0, import_theme9.editorBasic)({ variant, bordered });
+  const resolveVariable = (0, import_react57.useCallback)(
+    (name) => variableValues == null ? void 0 : variableValues[name],
+    [variableValues]
+  );
   if (!editor) {
-    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(LoadingSpinner, {});
+    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(LoadingSpinner, {});
   }
   const isBottomToolbar = variant === "field";
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(EditorUIProvider, { value: { styles }, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: styles.root(), "data-slot": "editor", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react54.EditorContext.Provider, { value: { editor }, children: [
-    !isBottomToolbar && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(EditorHeader, { editor, variant }),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(EditorContentArea, { variant }),
-    isBottomToolbar && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(EditorHeader, { editor, variant })
+  const hasVariables = variables && variables.length > 0;
+  const editorContent = /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(EditorUIProvider, { value: { styles }, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: styles.root(), "data-slot": "editor", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_react56.EditorContext.Provider, { value: { editor }, children: [
+    !isBottomToolbar && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(EditorHeader, { editor, variant }),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(EditorContentArea, { variant, variables }),
+    isBottomToolbar && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(EditorHeader, { editor, variant })
   ] }) }) });
+  if (hasVariables) {
+    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(VariableProvider, { variables, resolveVariable, children: editorContent });
+  }
+  return editorContent;
 };
-var EditorContentArea = ({ variant }) => {
-  const styles = (0, import_theme7.editorBasic)({ variant });
-  const { editor } = (0, import_react55.useContext)(import_react54.EditorContext);
+var EditorContentArea = ({ variant, variables }) => {
+  const styles = (0, import_theme9.editorBasic)({ variant });
+  const { editor } = (0, import_react57.useContext)(import_react56.EditorContext);
   const { isDragging } = useUiEditorState(editor);
   useScrollToHash();
+  const handleKeyDown = (0, import_react57.useCallback)(
+    (e) => {
+      if (!(editor == null ? void 0 : editor.isFocused)) return;
+      const isMod = e.metaKey || e.ctrlKey;
+      const key = e.key.toLowerCase();
+      const editorShortcuts = [
+        isMod && key === "b",
+        // Bold
+        isMod && key === "i",
+        // Italic
+        isMod && key === "u",
+        // Underline
+        isMod && e.shiftKey && key === "x",
+        // Strikethrough
+        isMod && key === "k",
+        // Link
+        isMod && key === "z",
+        // Undo
+        isMod && e.shiftKey && key === "z",
+        // Redo
+        isMod && key === "y",
+        // Redo (alternative)
+        isMod && key === "a",
+        // Select all
+        isMod && key === "e",
+        // Code
+        isMod && e.shiftKey && key === "e"
+        // Code block
+      ];
+      if (editorShortcuts.some(Boolean)) {
+        e.stopPropagation();
+      }
+    },
+    [editor]
+  );
   if (!editor) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: styles.wrapper(), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-      import_react54.EditorContent,
+  const isEditable = editor.isEditable;
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: styles.wrapper(), onKeyDown: handleKeyDown, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+      import_react56.EditorContent,
       {
         editor,
         role: "presentation",
@@ -6574,17 +7170,20 @@ var EditorContentArea = ({ variant }) => {
         style: {
           cursor: isDragging ? "grabbing" : "auto"
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(SlashDropdownMenu, {})
+        children: [
+          isEditable && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SlashDropdownMenu, {}),
+          isEditable && variables && variables.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(VariableSuggestion, { editor, variables })
+        ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(BubbleMenu, { editor }),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(LinkBubble, { editor })
+    isEditable && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(BubbleMenu, { editor }),
+    isEditable && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(LinkBubble, { editor })
   ] });
 };
 function LoadingSpinner({ text = "Connecting..." }) {
-  const styles = (0, import_theme7.editorSpinner)();
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: styles.root(), children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: styles.content(), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+  const styles = (0, import_theme9.editorSpinner)();
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: styles.root(), children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: styles.content(), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
       "svg",
       {
         className: styles.svg(),
@@ -6592,9 +7191,9 @@ function LoadingSpinner({ text = "Connecting..." }) {
         fill: "none",
         viewBox: "0 0 24 24",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("title", { children: "Loading Spinner" }),
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("circle", { className: styles.circle(), cx: "12", cy: "12", r: "10" }),
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("title", { children: "Loading Spinner" }),
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("circle", { className: styles.circle(), cx: "12", cy: "12", r: "10" }),
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
             "path",
             {
               className: styles.path(),
@@ -6604,7 +7203,7 @@ function LoadingSpinner({ text = "Connecting..." }) {
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: styles.text(), children: text })
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: styles.text(), children: text })
   ] }) });
 }
 // Annotate the CommonJS export names for ESM import in node:
@@ -6617,11 +7216,18 @@ function LoadingSpinner({ text = "Connecting..." }) {
   InlineMath,
   MathBlock,
   TocNode,
+  VariableFillerDialog,
+  VariableNode,
+  VariableProvider,
+  VariableSuggestion,
   convertFileToBase64,
+  extractVariablesFromContent,
   getExtensions,
   handleImageUpload,
   isAllowedUri,
   sanitizeUrl,
   useEditorFile,
-  useEditorFileRequired
+  useEditorFileRequired,
+  useVariables,
+  useVariablesWithFallback
 });