@kopexa/tiptap 17.10.1 → 17.11.0

package/dist/index.js

@@ -55,7 +55,7 @@ __export(index_exports, {
   sanitizeUrl: () => sanitizeUrl,
   useCollaboration: () => useCollaboration,
   useCollaborationRequired: () => useCollaborationRequired,
-  useCurrentEditor: () => import_react64.useCurrentEditor,
+  useCurrentEditor: () => import_react66.useCurrentEditor,
   useDocumentVisibility: () => useDocumentVisibility,
   useEditorFile: () => useEditorFile,
   useEditorFileRequired: () => useEditorFileRequired,
@@ -64,7 +64,7 @@ __export(index_exports, {
   useVariablesWithFallback: () => useVariablesWithFallback
 });
 module.exports = __toCommonJS(index_exports);
-var import_react64 = require("@tiptap/react");
+var import_react66 = require("@tiptap/react");
 
 // src/context/collaboration-context.tsx
 var import_provider = require("@hocuspocus/provider");
@@ -410,13 +410,33 @@ function useEditorFileRequired() {
 
 // src/extensions/callout/index.ts
 var import_core = require("@tiptap/core");
-var import_react8 = require("@tiptap/react");
+var import_react9 = require("@tiptap/react");
 
 // src/extensions/callout/callout-view.tsx
 var import_icons2 = require("@kopexa/icons");
 var import_theme = require("@kopexa/theme");
-var import_react6 = require("@tiptap/react");
-var import_react7 = require("react");
+var import_react7 = require("@tiptap/react");
+var import_react8 = require("react");
+
+// src/hooks/use-editor-editable.ts
+var import_react5 = require("react");
+function useEditorEditable(editor) {
+  const subscribe2 = (0, import_react5.useCallback)(
+    (callback) => {
+      if (!editor) return () => {
+      };
+      editor.on("transaction", callback);
+      return () => editor.off("transaction", callback);
+    },
+    [editor]
+  );
+  const getSnapshot2 = (0, import_react5.useCallback)(() => {
+    var _a;
+    return (_a = editor == null ? void 0 : editor.isEditable) != null ? _a : false;
+  }, [editor]);
+  const getServerSnapshot2 = (0, import_react5.useCallback)(() => false, []);
+  return (0, import_react5.useSyncExternalStore)(subscribe2, getSnapshot2, getServerSnapshot2);
+}
 
 // src/extensions/callout/callout-settings.tsx
 var import_button = require("@kopexa/button");
@@ -425,7 +445,7 @@ var import_icons = require("@kopexa/icons");
 var import_input = require("@kopexa/input");
 var import_label = require("@kopexa/label");
 var import_select = require("@kopexa/select");
-var import_react5 = require("react");
+var import_react6 = require("react");
 var import_react_intl2 = require("react-intl");
 
 // src/extensions/callout/messages.ts
@@ -503,14 +523,14 @@ function CalloutSettings({
   getPos
 }) {
   const intl = (0, import_react_intl2.useIntl)();
-  const [isOpen, setIsOpen] = (0, import_react5.useState)(false);
-  const [localAttrs, setLocalAttrs] = (0, import_react5.useState)(attrs);
-  (0, import_react5.useEffect)(() => {
+  const [isOpen, setIsOpen] = (0, import_react6.useState)(false);
+  const [localAttrs, setLocalAttrs] = (0, import_react6.useState)(attrs);
+  (0, import_react6.useEffect)(() => {
     if (isOpen) {
       setLocalAttrs(attrs);
     }
   }, [isOpen, attrs]);
-  const handleSave = (0, import_react5.useCallback)(() => {
+  const handleSave = (0, import_react6.useCallback)(() => {
     const pos = getPos();
     if (pos === void 0) return;
     editor.view.dispatch(
@@ -518,17 +538,17 @@ function CalloutSettings({
     );
     setIsOpen(false);
   }, [editor, localAttrs, getPos]);
-  const handleCancel = (0, import_react5.useCallback)(() => {
+  const handleCancel = (0, import_react6.useCallback)(() => {
     setLocalAttrs(attrs);
     setIsOpen(false);
   }, [attrs]);
-  const handleVariantChange = (0, import_react5.useCallback)((value) => {
+  const handleVariantChange = (0, import_react6.useCallback)((value) => {
     setLocalAttrs((prev) => ({
       ...prev,
       variant: String(value)
     }));
   }, []);
-  const handleTitleChange = (0, import_react5.useCallback)(
+  const handleTitleChange = (0, import_react6.useCallback)(
     (e) => {
       const value = e.target.value;
       setLocalAttrs((prev) => ({
@@ -614,14 +634,8 @@ function getVariantIcon(variant, iconClass) {
 function CalloutNodeView({ editor, node, getPos }) {
   const attrs = node.attrs;
   const { variant = "info", title } = attrs;
-  const isEditable = (0, import_react6.useEditorState)({
-    editor,
-    selector: ({ editor: e }) => {
-      var _a;
-      return (_a = e == null ? void 0 : e.isEditable) != null ? _a : false;
-    }
-  });
-  const styles = (0, import_react7.useMemo)(
+  const isEditable = useEditorEditable(editor);
+  const styles = (0, import_react8.useMemo)(
     () => (0, import_theme.callout)({
       variant,
       radius: "md",
@@ -630,7 +644,7 @@ function CalloutNodeView({ editor, node, getPos }) {
     [variant]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-    import_react6.NodeViewWrapper,
+    import_react7.NodeViewWrapper,
     {
       className: styles.root(),
       "data-type": "callout",
@@ -639,7 +653,7 @@ function CalloutNodeView({ editor, node, getPos }) {
         /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: styles.iconContainer(), children: getVariantIcon(variant, styles.icon()) }),
         /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: styles.content(), children: [
           title && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: styles.title(), children: title }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react6.NodeViewContent, { className: "callout-content" })
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react7.NodeViewContent, { className: "callout-content" })
         ] }),
         isEditable && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "absolute top-2 right-2", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           CalloutSettings,
@@ -704,7 +718,7 @@ var CalloutNode = import_core.Node.create({
     ];
   },
   addNodeView() {
-    return (0, import_react8.ReactNodeViewRenderer)(CalloutNodeView);
+    return (0, import_react9.ReactNodeViewRenderer)(CalloutNodeView);
   },
   addCommands() {
     return {
@@ -759,14 +773,14 @@ var CalloutNode = import_core.Node.create({
 
 // src/extensions/image/index.ts
 var import_extension_image = require("@tiptap/extension-image");
-var import_react11 = require("@tiptap/react");
+var import_react12 = require("@tiptap/react");
 
 // src/extensions/image/image-view.tsx
 var import_button2 = require("@kopexa/button");
 var import_icons3 = require("@kopexa/icons");
 var import_theme2 = require("@kopexa/theme");
-var import_react9 = require("@tiptap/react");
-var import_react10 = require("react");
+var import_react10 = require("@tiptap/react");
+var import_react11 = require("react");
 var import_react_intl4 = require("react-intl");
 
 // src/extensions/image/messages.ts
@@ -805,18 +819,12 @@ function ImageNodeView({ editor, node, getPos }) {
   const intl = (0, import_react_intl4.useIntl)();
   const fileHandler = useEditorFile();
   const { src, alt, title, uploadState, uploadProgress } = node.attrs;
-  const isEditable = (0, import_react9.useEditorState)({
-    editor,
-    selector: ({ editor: e }) => {
-      var _a2;
-      return (_a2 = e == null ? void 0 : e.isEditable) != null ? _a2 : false;
-    }
-  });
-  const [resolvedUrl, setResolvedUrl] = (0, import_react10.useState)(null);
-  const [resolveState, setResolveState] = (0, import_react10.useState)("idle");
-  const retryCountRef = (0, import_react10.useRef)(0);
+  const isEditable = useEditorEditable(editor);
+  const [resolvedUrl, setResolvedUrl] = (0, import_react11.useState)(null);
+  const [resolveState, setResolveState] = (0, import_react11.useState)("idle");
+  const retryCountRef = (0, import_react11.useRef)(0);
   const needsResolve = (_a = fileHandler == null ? void 0 : fileHandler.isReference(src)) != null ? _a : false;
-  const resolveImage = (0, import_react10.useCallback)(async () => {
+  const resolveImage = (0, import_react11.useCallback)(async () => {
     if (!src) return;
     if (!needsResolve) {
       setResolvedUrl(src);
@@ -838,14 +846,14 @@ function ImageNodeView({ editor, node, getPos }) {
       setResolveState("error");
     }
   }, [src, needsResolve, fileHandler]);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     resolveImage();
   }, [resolveImage]);
-  const handleRetry = (0, import_react10.useCallback)(() => {
+  const handleRetry = (0, import_react11.useCallback)(() => {
     retryCountRef.current += 1;
     resolveImage();
   }, [resolveImage]);
-  const handleRemove = (0, import_react10.useCallback)(() => {
+  const handleRemove = (0, import_react11.useCallback)(() => {
     const pos = getPos();
     if (pos === void 0) return;
     editor.commands.deleteRange({
@@ -853,16 +861,16 @@ function ImageNodeView({ editor, node, getPos }) {
       to: pos + node.nodeSize
     });
   }, [editor, getPos, node.nodeSize]);
-  const errorStyles = (0, import_react10.useMemo)(
+  const errorStyles = (0, import_react11.useMemo)(
     () => (0, import_theme2.imagePlaceholder)({ size: "md", variant: "error" }),
     []
   );
-  const loadingStyles = (0, import_react10.useMemo)(
+  const loadingStyles = (0, import_react11.useMemo)(
     () => (0, import_theme2.imagePlaceholder)({ size: "md", variant: "uploading" }),
     []
   );
   if (uploadState === "uploading") {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react9.NodeViewWrapper, { className: "my-4", "data-type": "image", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: loadingStyles.root(), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: loadingStyles.content(), children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react10.NodeViewWrapper, { className: "my-4", "data-type": "image", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: loadingStyles.root(), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: loadingStyles.content(), children: [
       /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "relative size-12", children: [
         /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
           "svg",
@@ -908,7 +916,7 @@ function ImageNodeView({ editor, node, getPos }) {
     ] }) }) });
   }
   if (uploadState === "error") {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react9.NodeViewWrapper, { className: "my-4", "data-type": "image", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: errorStyles.root(), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: errorStyles.content(), children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react10.NodeViewWrapper, { className: "my-4", "data-type": "image", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: errorStyles.root(), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: errorStyles.content(), children: [
       /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_icons3.AlertCircleIcon, { className: errorStyles.icon() }),
       /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: errorStyles.text(), children: intl.formatMessage(messages2.upload_error) }),
       isEditable && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
@@ -924,7 +932,7 @@ function ImageNodeView({ editor, node, getPos }) {
     ] }) }) });
   }
   if (resolveState === "resolved" && resolvedUrl) {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react9.NodeViewWrapper, { className: "my-4 relative group", "data-type": "image", children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react10.NodeViewWrapper, { className: "my-4 relative group", "data-type": "image", children: [
       /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         "img",
         {
@@ -949,7 +957,7 @@ function ImageNodeView({ editor, node, getPos }) {
   }
   const isLoading = resolveState === "loading" || resolveState === "idle";
   const isError = resolveState === "error";
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react9.NodeViewWrapper, { className: "my-4", "data-type": "image", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react10.NodeViewWrapper, { className: "my-4", "data-type": "image", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     "div",
     {
       className: [
@@ -1033,7 +1041,7 @@ var ImageNode = import_extension_image.Image.extend({
     };
   },
   addNodeView() {
-    return (0, import_react11.ReactNodeViewRenderer)(ImageNodeView, {
+    return (0, import_react12.ReactNodeViewRenderer)(ImageNodeView, {
       stopEvent: ({ event }) => {
         const target = event.target;
         if (target instanceof HTMLElement && target.closest("button, [role='button'], input, a")) {
@@ -1047,14 +1055,14 @@ var ImageNode = import_extension_image.Image.extend({
 
 // src/extensions/image-upload/index.ts
 var import_core2 = require("@tiptap/core");
-var import_react14 = require("@tiptap/react");
+var import_react15 = require("@tiptap/react");
 
 // src/extensions/image-upload/image-upload-view.tsx
 var import_button3 = require("@kopexa/button");
 var import_icons4 = require("@kopexa/icons");
 var import_theme3 = require("@kopexa/theme");
-var import_react12 = require("@tiptap/react");
-var import_react13 = require("react");
+var import_react13 = require("@tiptap/react");
+var import_react14 = require("react");
 var import_react_intl6 = require("react-intl");
 
 // src/extensions/image-upload/messages.ts
@@ -1095,18 +1103,12 @@ var import_jsx_runtime6 = require("react/jsx-runtime");
 function ImageUploadNodeView({ editor, node, getPos }) {
   const intl = (0, import_react_intl6.useIntl)();
   const fileHandler = useEditorFile();
-  const isEditable = (0, import_react12.useEditorState)({
-    editor,
-    selector: ({ editor: e }) => {
-      var _a;
-      return (_a = e == null ? void 0 : e.isEditable) != null ? _a : false;
-    }
-  });
-  const [uploadState, setUploadState] = (0, import_react13.useState)("idle");
-  const [uploadProgress, setUploadProgress] = (0, import_react13.useState)(0);
-  const [isDragOver, setIsDragOver] = (0, import_react13.useState)(false);
-  const fileInputRef = (0, import_react13.useRef)(null);
-  const handleRemove = (0, import_react13.useCallback)(() => {
+  const isEditable = useEditorEditable(editor);
+  const [uploadState, setUploadState] = (0, import_react14.useState)("idle");
+  const [uploadProgress, setUploadProgress] = (0, import_react14.useState)(0);
+  const [isDragOver, setIsDragOver] = (0, import_react14.useState)(false);
+  const fileInputRef = (0, import_react14.useRef)(null);
+  const handleRemove = (0, import_react14.useCallback)(() => {
     const pos = getPos();
     if (pos === void 0) return;
     editor.commands.deleteRange({
@@ -1114,7 +1116,7 @@ function ImageUploadNodeView({ editor, node, getPos }) {
       to: pos + node.nodeSize
     });
   }, [editor, getPos, node.nodeSize]);
-  const handleFileSelect = (0, import_react13.useCallback)(
+  const handleFileSelect = (0, import_react14.useCallback)(
     async (file) => {
       if (!fileHandler) return;
       const pos = getPos();
@@ -1143,7 +1145,7 @@ function ImageUploadNodeView({ editor, node, getPos }) {
     },
     [fileHandler, editor, getPos, node.nodeSize]
   );
-  const handleInputChange = (0, import_react13.useCallback)(
+  const handleInputChange = (0, import_react14.useCallback)(
     (e) => {
       var _a;
       const file = (_a = e.target.files) == null ? void 0 : _a[0];
@@ -1154,7 +1156,7 @@ function ImageUploadNodeView({ editor, node, getPos }) {
     },
     [handleFileSelect]
   );
-  const handleDrop = (0, import_react13.useCallback)(
+  const handleDrop = (0, import_react14.useCallback)(
     (e) => {
       e.preventDefault();
       e.stopPropagation();
@@ -1166,49 +1168,49 @@ function ImageUploadNodeView({ editor, node, getPos }) {
     },
     [handleFileSelect]
   );
-  const handleDragOver = (0, import_react13.useCallback)((e) => {
+  const handleDragOver = (0, import_react14.useCallback)((e) => {
     e.preventDefault();
     e.stopPropagation();
   }, []);
-  const handleDragEnter = (0, import_react13.useCallback)((e) => {
+  const handleDragEnter = (0, import_react14.useCallback)((e) => {
     e.preventDefault();
     e.stopPropagation();
     setIsDragOver(true);
   }, []);
-  const handleDragLeave = (0, import_react13.useCallback)((e) => {
+  const handleDragLeave = (0, import_react14.useCallback)((e) => {
     e.preventDefault();
     e.stopPropagation();
     if (!e.currentTarget.contains(e.relatedTarget)) {
       setIsDragOver(false);
     }
   }, []);
-  const handleClick = (0, import_react13.useCallback)(() => {
+  const handleClick = (0, import_react14.useCallback)(() => {
     var _a;
     if (uploadState === "idle" || uploadState === "error") {
       (_a = fileInputRef.current) == null ? void 0 : _a.click();
     }
   }, [uploadState]);
-  const styles = (0, import_react13.useMemo)(
+  const styles = (0, import_react14.useMemo)(
     () => (0, import_theme3.imagePlaceholder)({
       size: "md",
       variant: isDragOver ? "default" : void 0
     }),
     [isDragOver]
   );
-  const errorStyles = (0, import_react13.useMemo)(
+  const errorStyles = (0, import_react14.useMemo)(
     () => (0, import_theme3.imagePlaceholder)({ size: "md", variant: "error" }),
     []
   );
-  const uploadingStyles = (0, import_react13.useMemo)(
+  const uploadingStyles = (0, import_react14.useMemo)(
     () => (0, import_theme3.imagePlaceholder)({ size: "md", variant: "uploading" }),
     []
   );
-  const disabledStyles = (0, import_react13.useMemo)(
+  const disabledStyles = (0, import_react14.useMemo)(
     () => (0, import_theme3.imagePlaceholder)({ size: "md", variant: "disabled" }),
     []
   );
   if (!fileHandler) {
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react12.NodeViewWrapper, { className: "my-4", "data-type": "image-upload", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: disabledStyles.root(), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: disabledStyles.content(), children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react13.NodeViewWrapper, { className: "my-4", "data-type": "image-upload", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: disabledStyles.root(), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: disabledStyles.content(), children: [
       /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_icons4.ImageIcon, { className: disabledStyles.icon() }),
       /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: disabledStyles.text(), children: intl.formatMessage(messages3.files_not_supported) }),
       isEditable && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
@@ -1224,7 +1226,7 @@ function ImageUploadNodeView({ editor, node, getPos }) {
     ] }) }) });
   }
   if (uploadState === "uploading") {
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react12.NodeViewWrapper, { className: "my-4", "data-type": "image-upload", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: uploadingStyles.root(), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: uploadingStyles.content(), children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react13.NodeViewWrapper, { className: "my-4", "data-type": "image-upload", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: uploadingStyles.root(), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: uploadingStyles.content(), children: [
       /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "relative size-12", children: [
         /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
           "svg",
@@ -1270,7 +1272,7 @@ function ImageUploadNodeView({ editor, node, getPos }) {
     ] }) }) });
   }
   if (uploadState === "error") {
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react12.NodeViewWrapper, { className: "my-4", "data-type": "image-upload", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: errorStyles.root(), onClick: handleClick, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react13.NodeViewWrapper, { className: "my-4", "data-type": "image-upload", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: errorStyles.root(), onClick: handleClick, children: [
       /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: errorStyles.content(), children: [
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_icons4.AlertCircleIcon, { className: errorStyles.icon() }),
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: errorStyles.text(), children: intl.formatMessage(messages3.upload_error) }),
@@ -1302,7 +1304,7 @@ function ImageUploadNodeView({ editor, node, getPos }) {
       )
     ] }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react12.NodeViewWrapper, { className: "my-4", "data-type": "image-upload", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react13.NodeViewWrapper, { className: "my-4", "data-type": "image-upload", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     "div",
     {
       className: `${styles.root()} ${isDragOver ? "border-primary bg-primary/10" : ""}`,
@@ -1384,7 +1386,7 @@ var ImageUploadNode = import_core2.Node.create({
     return ["div", { ...HTMLAttributes, "data-type": "image-upload" }];
   },
   addNodeView() {
-    return (0, import_react14.ReactNodeViewRenderer)(ImageUploadNodeView, {
+    return (0, import_react15.ReactNodeViewRenderer)(ImageUploadNodeView, {
       stopEvent: ({ event }) => {
         const target = event.target;
         if (target instanceof HTMLElement && target.closest("button, [role='button'], input, a")) {
@@ -1427,17 +1429,17 @@ var ImageUploadNode = import_core2.Node.create({
 
 // src/extensions/math/index.ts
 var import_core4 = require("@tiptap/core");
-var import_react20 = require("@tiptap/react");
+var import_react21 = require("@tiptap/react");
 
 // src/extensions/math/math-block-view.tsx
 var import_button4 = require("@kopexa/button");
 var import_dialog2 = require("@kopexa/dialog");
 var import_icons5 = require("@kopexa/icons");
 var import_label2 = require("@kopexa/label");
-var import_react15 = require("@tiptap/react");
+var import_react16 = require("@tiptap/react");
 var import_katex = __toESM(require("katex"));
 var import_katex_min = require("katex/dist/katex.min.css");
-var import_react16 = require("react");
+var import_react17 = require("react");
 var import_react_intl8 = require("react-intl");
 
 // src/extensions/math/messages.ts
@@ -1496,23 +1498,17 @@ function MathBlockView({ editor, node, getPos }) {
   const intl = (0, import_react_intl8.useIntl)();
   const attrs = node.attrs;
   const { latex = "" } = attrs;
-  const isEditable = (0, import_react15.useEditorState)({
-    editor,
-    selector: ({ editor: e }) => {
-      var _a;
-      return (_a = e == null ? void 0 : e.isEditable) != null ? _a : false;
-    }
-  });
-  const [isOpen, setIsOpen] = (0, import_react16.useState)(false);
-  const [localLatex, setLocalLatex] = (0, import_react16.useState)(latex);
-  const [error, setError] = (0, import_react16.useState)(null);
-  (0, import_react16.useEffect)(() => {
+  const isEditable = useEditorEditable(editor);
+  const [isOpen, setIsOpen] = (0, import_react17.useState)(false);
+  const [localLatex, setLocalLatex] = (0, import_react17.useState)(latex);
+  const [error, setError] = (0, import_react17.useState)(null);
+  (0, import_react17.useEffect)(() => {
     if (isOpen) {
       setLocalLatex(latex);
       setError(null);
     }
   }, [isOpen, latex]);
-  const renderedHtml = (0, import_react16.useMemo)(() => {
+  const renderedHtml = (0, import_react17.useMemo)(() => {
     if (!latex) return null;
     try {
       return import_katex.default.renderToString(latex, {
@@ -1524,7 +1520,7 @@ function MathBlockView({ editor, node, getPos }) {
       return null;
     }
   }, [latex]);
-  const previewHtml = (0, import_react16.useMemo)(() => {
+  const previewHtml = (0, import_react17.useMemo)(() => {
     if (!localLatex) return null;
     try {
       setError(null);
@@ -1538,7 +1534,7 @@ function MathBlockView({ editor, node, getPos }) {
       return null;
     }
   }, [localLatex, intl]);
-  const handleSave = (0, import_react16.useCallback)(() => {
+  const handleSave = (0, import_react17.useCallback)(() => {
     const pos = getPos();
     if (pos === void 0) return;
     editor.view.dispatch(
@@ -1546,12 +1542,12 @@ function MathBlockView({ editor, node, getPos }) {
     );
     setIsOpen(false);
   }, [editor, localLatex, getPos]);
-  const handleCancel = (0, import_react16.useCallback)(() => {
+  const handleCancel = (0, import_react17.useCallback)(() => {
     setLocalLatex(latex);
     setError(null);
     setIsOpen(false);
   }, [latex]);
-  const handleOpenEditor = (0, import_react16.useCallback)(
+  const handleOpenEditor = (0, import_react17.useCallback)(
     (e) => {
       e.stopPropagation();
       e.preventDefault();
@@ -1563,7 +1559,7 @@ function MathBlockView({ editor, node, getPos }) {
   );
   const isEmpty = !latex;
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-    import_react15.NodeViewWrapper,
+    import_react16.NodeViewWrapper,
     {
       className: "my-4 relative group",
       "data-type": "math-block",
@@ -1638,39 +1634,33 @@ function MathBlockView({ editor, node, getPos }) {
 
 // src/extensions/math/inline-math.ts
 var import_core3 = require("@tiptap/core");
-var import_react19 = require("@tiptap/react");
+var import_react20 = require("@tiptap/react");
 
 // src/extensions/math/inline-math-view.tsx
 var import_button5 = require("@kopexa/button");
 var import_dialog3 = require("@kopexa/dialog");
 var import_label3 = require("@kopexa/label");
-var import_react17 = require("@tiptap/react");
+var import_react18 = require("@tiptap/react");
 var import_katex2 = __toESM(require("katex"));
 var import_katex_min2 = require("katex/dist/katex.min.css");
-var import_react18 = require("react");
+var import_react19 = require("react");
 var import_react_intl9 = require("react-intl");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 function InlineMathView({ editor, node, getPos }) {
   const intl = (0, import_react_intl9.useIntl)();
   const attrs = node.attrs;
   const { latex = "" } = attrs;
-  const isEditable = (0, import_react17.useEditorState)({
-    editor,
-    selector: ({ editor: e }) => {
-      var _a;
-      return (_a = e == null ? void 0 : e.isEditable) != null ? _a : false;
-    }
-  });
-  const [isOpen, setIsOpen] = (0, import_react18.useState)(false);
-  const [localLatex, setLocalLatex] = (0, import_react18.useState)(latex);
-  const [error, setError] = (0, import_react18.useState)(null);
-  (0, import_react18.useEffect)(() => {
+  const isEditable = useEditorEditable(editor);
+  const [isOpen, setIsOpen] = (0, import_react19.useState)(false);
+  const [localLatex, setLocalLatex] = (0, import_react19.useState)(latex);
+  const [error, setError] = (0, import_react19.useState)(null);
+  (0, import_react19.useEffect)(() => {
     if (isOpen) {
       setLocalLatex(latex);
       setError(null);
     }
   }, [isOpen, latex]);
-  const renderedHtml = (0, import_react18.useMemo)(() => {
+  const renderedHtml = (0, import_react19.useMemo)(() => {
     if (!latex) return null;
     try {
       return import_katex2.default.renderToString(latex, {
@@ -1682,7 +1672,7 @@ function InlineMathView({ editor, node, getPos }) {
       return null;
     }
   }, [latex]);
-  const previewHtml = (0, import_react18.useMemo)(() => {
+  const previewHtml = (0, import_react19.useMemo)(() => {
     if (!localLatex) return null;
     try {
       setError(null);
@@ -1696,7 +1686,7 @@ function InlineMathView({ editor, node, getPos }) {
       return null;
     }
   }, [localLatex, intl]);
-  const handleSave = (0, import_react18.useCallback)(() => {
+  const handleSave = (0, import_react19.useCallback)(() => {
     const pos = getPos();
     if (pos === void 0) return;
     editor.view.dispatch(
@@ -1704,12 +1694,12 @@ function InlineMathView({ editor, node, getPos }) {
     );
     setIsOpen(false);
   }, [editor, localLatex, getPos]);
-  const handleCancel = (0, import_react18.useCallback)(() => {
+  const handleCancel = (0, import_react19.useCallback)(() => {
     setLocalLatex(latex);
     setError(null);
     setIsOpen(false);
   }, [latex]);
-  const handleClick = (0, import_react18.useCallback)(
+  const handleClick = (0, import_react19.useCallback)(
     (e) => {
       e.stopPropagation();
       e.preventDefault();
@@ -1721,7 +1711,7 @@ function InlineMathView({ editor, node, getPos }) {
   );
   const isEmpty = !latex;
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-    import_react17.NodeViewWrapper,
+    import_react18.NodeViewWrapper,
     {
       as: "span",
       className: "inline-math-wrapper",
@@ -1817,7 +1807,7 @@ var InlineMath = import_core3.Node.create({
     ];
   },
   addNodeView() {
-    return (0, import_react19.ReactNodeViewRenderer)(InlineMathView, {
+    return (0, import_react20.ReactNodeViewRenderer)(InlineMathView, {
       as: "span"
     });
   },
@@ -1885,7 +1875,7 @@ var MathBlock = import_core4.Node.create({
     ];
   },
   addNodeView() {
-    return (0, import_react20.ReactNodeViewRenderer)(MathBlockView);
+    return (0, import_react21.ReactNodeViewRenderer)(MathBlockView);
   },
   addCommands() {
     return {
@@ -1928,13 +1918,13 @@ var MathBlock = import_core4.Node.create({
 
 // src/extensions/toc/index.ts
 var import_core5 = require("@tiptap/core");
-var import_react24 = require("@tiptap/react");
+var import_react25 = require("@tiptap/react");
 
 // src/extensions/toc/toc-view.tsx
 var import_icons7 = require("@kopexa/icons");
 var import_theme4 = require("@kopexa/theme");
-var import_react22 = require("@tiptap/react");
-var import_react23 = require("react");
+var import_react23 = require("@tiptap/react");
+var import_react24 = require("react");
 var import_react_intl12 = require("react-intl");
 
 // src/extensions/toc/messages.ts
@@ -2019,7 +2009,7 @@ var import_icons6 = require("@kopexa/icons");
 var import_label4 = require("@kopexa/label");
 var import_select2 = require("@kopexa/select");
 var import_switch = require("@kopexa/switch");
-var import_react21 = require("react");
+var import_react22 = require("react");
 var import_react_intl11 = require("react-intl");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 var HEADING_LEVELS = [
@@ -2032,14 +2022,14 @@ var HEADING_LEVELS = [
 ];
 function TocSettings({ editor, attrs, getPos }) {
   const intl = (0, import_react_intl11.useIntl)();
-  const [isOpen, setIsOpen] = (0, import_react21.useState)(false);
-  const [localAttrs, setLocalAttrs] = (0, import_react21.useState)(attrs);
-  (0, import_react21.useEffect)(() => {
+  const [isOpen, setIsOpen] = (0, import_react22.useState)(false);
+  const [localAttrs, setLocalAttrs] = (0, import_react22.useState)(attrs);
+  (0, import_react22.useEffect)(() => {
     if (isOpen) {
       setLocalAttrs(attrs);
     }
   }, [isOpen, attrs]);
-  const handleSave = (0, import_react21.useCallback)(() => {
+  const handleSave = (0, import_react22.useCallback)(() => {
     const pos = getPos();
     if (pos === void 0) return;
     editor.view.dispatch(
@@ -2047,11 +2037,11 @@ function TocSettings({ editor, attrs, getPos }) {
     );
     setIsOpen(false);
   }, [editor, localAttrs, getPos]);
-  const handleCancel = (0, import_react21.useCallback)(() => {
+  const handleCancel = (0, import_react22.useCallback)(() => {
     setLocalAttrs(attrs);
     setIsOpen(false);
   }, [attrs]);
-  const handleMinLevelChange = (0, import_react21.useCallback)((value) => {
+  const handleMinLevelChange = (0, import_react22.useCallback)((value) => {
     const minLevel = Number.parseInt(String(value), 10);
     setLocalAttrs((prev) => ({
       ...prev,
@@ -2060,7 +2050,7 @@ function TocSettings({ editor, attrs, getPos }) {
       maxLevel: Math.max(prev.maxLevel, minLevel)
     }));
   }, []);
-  const handleMaxLevelChange = (0, import_react21.useCallback)((value) => {
+  const handleMaxLevelChange = (0, import_react22.useCallback)((value) => {
     const maxLevel = Number.parseInt(String(value), 10);
     setLocalAttrs((prev) => ({
       ...prev,
@@ -2069,10 +2059,10 @@ function TocSettings({ editor, attrs, getPos }) {
       minLevel: Math.min(prev.minLevel, maxLevel)
     }));
   }, []);
-  const handleNumberedChange = (0, import_react21.useCallback)((checked) => {
+  const handleNumberedChange = (0, import_react22.useCallback)((checked) => {
     setLocalAttrs((prev) => ({ ...prev, numbered: checked }));
   }, []);
-  const handleStyleChange = (0, import_react21.useCallback)((value) => {
+  const handleStyleChange = (0, import_react22.useCallback)((value) => {
     setLocalAttrs((prev) => ({
       ...prev,
       style: String(value)
@@ -2212,7 +2202,7 @@ function generateHeadingNumbers(headings, minLevel) {
   });
 }
 function TocNodeView({ editor, node, getPos }) {
-  const [headings, setHeadings] = (0, import_react23.useState)([]);
+  const [headings, setHeadings] = (0, import_react24.useState)([]);
   const intl = (0, import_react_intl12.useIntl)();
   const attrs = node.attrs;
   const {
@@ -2221,8 +2211,8 @@ function TocNodeView({ editor, node, getPos }) {
     numbered = false,
     style = "default"
   } = attrs;
-  const styles = (0, import_react23.useMemo)(() => (0, import_theme4.toc)({ style }), [style]);
-  const updateHeadings = (0, import_react23.useCallback)(() => {
+  const styles = (0, import_react24.useMemo)(() => (0, import_theme4.toc)({ style }), [style]);
+  const updateHeadings = (0, import_react24.useCallback)(() => {
     const items = [];
     const { doc } = editor.state;
     doc.descendants((docNode, pos) => {
@@ -2242,14 +2232,14 @@ function TocNodeView({ editor, node, getPos }) {
     const numberedHeadings = generateHeadingNumbers(items, minLevel);
     setHeadings(numberedHeadings);
   }, [editor, minLevel, maxLevel]);
-  (0, import_react23.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     updateHeadings();
     editor.on("update", updateHeadings);
     return () => {
       editor.off("update", updateHeadings);
     };
   }, [editor, updateHeadings]);
-  const handleClick = (0, import_react23.useCallback)(
+  const handleClick = (0, import_react24.useCallback)(
     (pos, id) => {
       var _a;
       editor.chain().focus().setTextSelection(pos).run();
@@ -2270,7 +2260,7 @@ function TocNodeView({ editor, node, getPos }) {
   const getIndent = (level) => {
     return (level - minLevel) * 16;
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react22.NodeViewWrapper, { className: styles.root(), "data-type": "toc", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react23.NodeViewWrapper, { className: styles.root(), "data-type": "toc", children: [
     /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: styles.header(), children: [
       /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: styles.headerContent(), children: [
         /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_icons7.ListIcon, { className: styles.headerIcon() }),
@@ -2369,7 +2359,7 @@ var TocNode = import_core5.Node.create({
     ];
   },
   addNodeView() {
-    return (0, import_react24.ReactNodeViewRenderer)(TocNodeView);
+    return (0, import_react25.ReactNodeViewRenderer)(TocNodeView);
   },
   addCommands() {
     return {
@@ -2398,11 +2388,11 @@ var TocNode = import_core5.Node.create({
 
 // src/extensions/variable/index.ts
 var import_core6 = require("@tiptap/core");
-var import_react26 = require("@tiptap/react");
+var import_react27 = require("@tiptap/react");
 
 // src/extensions/variable/variable-view.tsx
 var import_theme5 = require("@kopexa/theme");
-var import_react25 = require("@tiptap/react");
+var import_react26 = require("@tiptap/react");
 
 // src/extensions/variable/variable-context.tsx
 var React = __toESM(require("react"));
@@ -2438,20 +2428,14 @@ function VariableNodeView({ node, editor }) {
   const attrs = node.attrs;
   const { name, fallback, category } = attrs;
   const context = useVariables();
-  const isEditable = (0, import_react25.useEditorState)({
-    editor,
-    selector: ({ editor: e }) => {
-      var _a2;
-      return (_a2 = e == null ? void 0 : e.isEditable) != null ? _a2 : true;
-    }
-  });
+  const isEditable = useEditorEditable(editor);
   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_runtime12.jsx)(
-      import_react25.NodeViewWrapper,
+      import_react26.NodeViewWrapper,
       {
         as: "span",
         "data-type": "variable",
@@ -2462,7 +2446,7 @@ function VariableNodeView({ node, editor }) {
     );
   }
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-    import_react25.NodeViewWrapper,
+    import_react26.NodeViewWrapper,
     {
       as: "span",
       className: styles.wrapper(),
@@ -2551,7 +2535,7 @@ var VariableNode = import_core6.Node.create({
     ];
   },
   addNodeView() {
-    return (0, import_react26.ReactNodeViewRenderer)(VariableNodeView);
+    return (0, import_react27.ReactNodeViewRenderer)(VariableNodeView);
   },
   addCommands() {
     return {
@@ -2770,24 +2754,24 @@ var import_state2 = require("@tiptap/pm/state");
 var React6 = __toESM(require("react"));
 
 // src/ui/suggestion-menu/suggestion-menu.tsx
-var import_react28 = require("@floating-ui/react");
+var import_react29 = require("@floating-ui/react");
 var import_editor_utils = require("@kopexa/editor-utils");
 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_react27 = require("@floating-ui/react");
+var import_react28 = 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_react27.useFloating)({
+  const { refs, update, context, floatingStyles } = (0, import_react28.useFloating)({
     open: show,
     ...floatingOptions
   });
-  const { isMounted, styles } = (0, import_react27.useTransitionStyles)(context);
-  const dismiss = (0, import_react27.useDismiss)(context, dismissOptions);
-  const { getReferenceProps, getFloatingProps } = (0, import_react27.useInteractions)([dismiss]);
+  const { isMounted, styles } = (0, import_react28.useTransitionStyles)(context);
+  const dismiss = (0, import_react28.useDismiss)(context, dismissOptions);
+  const { getReferenceProps, getFloatingProps } = (0, import_react28.useInteractions)([dismiss]);
   React3.useEffect(() => {
     update();
   }, [referencePos, update]);
@@ -3021,13 +3005,13 @@ var SuggestionMenu = ({
     {
       placement: "bottom-start",
       middleware: [
-        (0, import_react28.offset)(10),
-        (0, import_react28.flip)({
+        (0, import_react29.offset)(10),
+        (0, import_react29.flip)({
           mainAxis: true,
           crossAxis: false
         }),
-        (0, import_react28.shift)(),
-        (0, import_react28.size)({
+        (0, import_react29.shift)(),
+        (0, import_react29.size)({
           apply({ availableHeight, elements }) {
             if (elements.floating) {
               const maxHeightValue = maxHeight ? Math.min(maxHeight, availableHeight) : availableHeight;
@@ -3166,7 +3150,7 @@ var SuggestionMenu = ({
   if (!isMounted || !show || !editor) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react28.FloatingPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react29.FloatingPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     "div",
     {
       ref,
@@ -3361,14 +3345,68 @@ 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_react32 = require("@tiptap/react");
+var import_react34 = require("@tiptap/react");
 var import_starter_kit = require("@tiptap/starter-kit");
-var import_react33 = require("react");
+var import_react35 = require("react");
+
+// src/extensions/custom-color/index.ts
+var import_react30 = require("@tiptap/react");
+var CustomColor = import_react30.Mark.create({
+  name: "customColor",
+  addAttributes() {
+    return {
+      color: {
+        default: null,
+        parseHTML: (element) => element.getAttribute("data-text-color"),
+        renderHTML: (attributes) => {
+          const { color } = attributes;
+          if (!color) {
+            return {};
+          }
+          return {
+            "data-text-color": color,
+            style: `color: ${color}`
+          };
+        }
+      },
+      backgroundColor: {
+        default: null,
+        parseHTML: (element) => element.getAttribute("data-background-color"),
+        renderHTML: (attributes) => {
+          const { backgroundColor } = attributes;
+          if (!backgroundColor) {
+            return {};
+          }
+          return {
+            "data-background-color": backgroundColor,
+            style: `background-color: ${backgroundColor}`
+          };
+        }
+      }
+    };
+  },
+  parseHTML() {
+    return [
+      {
+        tag: "span[data-text-color]"
+      },
+      {
+        tag: "span[data-background-color]"
+      }
+    ];
+  },
+  renderHTML({ HTMLAttributes }) {
+    if (!HTMLAttributes["data-text-color"] && !HTMLAttributes["data-background-color"]) {
+      return ["span", (0, import_react30.mergeAttributes)(HTMLAttributes), 0];
+    }
+    return ["span", (0, import_react30.mergeAttributes)(HTMLAttributes), 0];
+  }
+});
 
 // src/extensions/link/index.ts
 var import_extension_link = __toESM(require("@tiptap/extension-link"));
 var import_state3 = require("@tiptap/pm/state");
-var import_react29 = require("@tiptap/react");
+var import_react31 = require("@tiptap/react");
 var Link = import_extension_link.default.extend({
   inclusive: false,
   parseHTML() {
@@ -3397,7 +3435,7 @@ var Link = import_extension_link.default.extend({
             const { schema, doc, tr } = view.state;
             let range;
             if (schema.marks.link) {
-              range = (0, import_react29.getMarkRange)(doc.resolve(pos), schema.marks.link);
+              range = (0, import_react31.getMarkRange)(doc.resolve(pos), schema.marks.link);
             }
             if (!range) {
               return;
@@ -3703,8 +3741,8 @@ var NodeBackground = import_core8.Extension.create({
 // src/extensions/selection/index.ts
 var import_state4 = require("@tiptap/pm/state");
 var import_view = require("@tiptap/pm/view");
-var import_react30 = require("@tiptap/react");
-var Selection = import_react30.Extension.create({
+var import_react32 = require("@tiptap/react");
+var Selection = import_react32.Extension.create({
   name: "selection",
   addProseMirrorPlugins() {
     const { editor } = this;
@@ -3719,7 +3757,7 @@ var Selection = import_react30.Extension.create({
             if (editor.isFocused === true || !editor.isEditable) {
               return null;
             }
-            if ((0, import_react30.isNodeSelection)(state.selection)) {
+            if ((0, import_react32.isNodeSelection)(state.selection)) {
               return null;
             }
             return import_view.DecorationSet.create(state.doc, [
@@ -3794,7 +3832,7 @@ var TabHandler = import_core9.Extension.create({
 
 // src/extensions/trailing-node/index.ts
 var import_state5 = require("@tiptap/pm/state");
-var import_react31 = require("@tiptap/react");
+var import_react33 = require("@tiptap/react");
 function nodeEqualsType({
   types,
   node
@@ -3805,7 +3843,7 @@ function nodeEqualsType({
   }
   return node.type === types;
 }
-var TrailingNode = import_react31.Extension.create({
+var TrailingNode = import_react33.Extension.create({
   name: "trailingNode",
   addOptions() {
     return {
@@ -4086,10 +4124,10 @@ var useCreateEditor = ({
   const fileHandlerFromContext = useEditorFile();
   const fileHandler = fileHandlerProp != null ? fileHandlerProp : fileHandlerFromContext;
   const collaboration = useCollaboration();
-  const [collabSyncing, setCollabSyncing] = (0, import_react33.useState)(!!collaboration);
-  const placeholderRef = (0, import_react33.useRef)(placeholder);
+  const [collabSyncing, setCollabSyncing] = (0, import_react35.useState)(!!collaboration);
+  const placeholderRef = (0, import_react35.useRef)(placeholder);
   placeholderRef.current = placeholder;
-  const [extensions] = (0, import_react33.useState)(
+  const [extensions] = (0, import_react35.useState)(
     () => getExtensions({
       editable,
       placeholder: () => {
@@ -4107,7 +4145,7 @@ var useCreateEditor = ({
     })
   );
   const { onCreate: userOnCreate, ...restOptions } = options;
-  const editor = (0, import_react32.useEditor)({
+  const editor = (0, import_react34.useEditor)({
     editorProps: {
       attributes: {
         autocomplete: "off",
@@ -4152,7 +4190,7 @@ var useCreateEditor = ({
     },
     ...restOptions
   });
-  (0, import_react33.useEffect)(() => {
+  (0, import_react35.useEffect)(() => {
     if (editor && editor.isEditable !== editable) {
       editor.setEditable(editable);
     }
@@ -4226,6 +4264,8 @@ function getExtensions({
     CalloutNode,
     MathBlock,
     InlineMath,
+    // Legacy support for old documents with customColor marks
+    CustomColor,
     // Image support - extended with file reference resolution
     ImageNode.configure({
       allowBase64: true
@@ -4372,8 +4412,8 @@ async function handleFileUpload(editor, file, fileHandler, pos) {
 // src/presets/basic/index.tsx
 var import_extension_table2 = require("@kopexa/extension-table");
 var import_theme9 = require("@kopexa/theme");
-var import_react60 = require("@tiptap/react");
-var import_react61 = require("react");
+var import_react62 = require("@tiptap/react");
+var import_react63 = require("react");
 var import_react_intl26 = require("react-intl");
 
 // src/context/editor-context.ts
@@ -4381,10 +4421,10 @@ 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_react34 = require("@tiptap/react");
+var import_react36 = require("@tiptap/react");
 function useUiEditorState(editor) {
   var _a;
-  return (_a = (0, import_react34.useEditorState)({
+  return (_a = (0, import_react36.useEditorState)({
     editor,
     selector: ({ editor: editor2 }) => {
       if (!editor2) return defaultUiState;
@@ -4411,7 +4451,7 @@ 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_react35 = require("react");
+var import_react37 = require("react");
 
 // src/ui/link-popover/use-link-popover.ts
 var import_editor_utils5 = require("@kopexa/editor-utils");
@@ -4667,8 +4707,8 @@ var LinkMain = ({
   isActive,
   onSave
 }) => {
-  const [isEditing, setIsEditing] = (0, import_react35.useState)(!isActive || !url);
-  (0, import_react35.useEffect)(() => {
+  const [isEditing, setIsEditing] = (0, import_react37.useState)(!isActive || !url);
+  (0, import_react37.useEffect)(() => {
     setIsEditing(!isActive || !url);
   }, [isActive, url]);
   const handleKeyDown = (event) => {
@@ -4784,7 +4824,7 @@ function LinkPopover({
   ...buttonProps
 }) {
   const { editor } = (0, import_editor_utils6.useTiptapEditor)(providedEditor);
-  const [isOpen, setIsOpen] = (0, import_react35.useState)(false);
+  const [isOpen, setIsOpen] = (0, import_react37.useState)(false);
   const {
     isVisible,
     canSet,
@@ -4800,18 +4840,18 @@ function LinkPopover({
     hideWhenUnavailable,
     onSetLink
   });
-  const handleOnOpenChange = (0, import_react35.useCallback)(
+  const handleOnOpenChange = (0, import_react37.useCallback)(
     (nextIsOpen) => {
       setIsOpen(nextIsOpen);
       onOpenChange == null ? void 0 : onOpenChange(nextIsOpen);
     },
     [onOpenChange]
   );
-  const handleSetLink = (0, import_react35.useCallback)(() => {
+  const handleSetLink = (0, import_react37.useCallback)(() => {
     setLink();
     setIsOpen(false);
   }, [setLink]);
-  const handleClick = (0, import_react35.useCallback)(
+  const handleClick = (0, import_react37.useCallback)(
     (event) => {
       onClick == null ? void 0 : onClick(event);
       if (event.defaultPrevented) return;
@@ -4819,7 +4859,7 @@ function LinkPopover({
     },
     [onClick, isOpen]
   );
-  (0, import_react35.useEffect)(() => {
+  (0, import_react37.useEffect)(() => {
     if (autoOpenOnLinkActive && isActive) {
       setIsOpen(true);
     }
@@ -4873,8 +4913,8 @@ LinkButton.displayName = "LinkButton";
 var import_editor_utils7 = require("@kopexa/editor-utils");
 var import_icons10 = require("@kopexa/icons");
 var import_toolbar2 = require("@kopexa/toolbar");
-var import_react36 = require("@tiptap/react");
-var import_react37 = require("react");
+var import_react38 = require("@tiptap/react");
+var import_react39 = require("react");
 var import_react_intl16 = require("react-intl");
 
 // src/ui/messages.ts
@@ -5340,7 +5380,7 @@ function shouldShowMarkButton(params) {
     return false;
   }
   if (hideWhenUnavailable) {
-    if ((0, import_react36.isNodeSelection)(editor.state.selection) || !canToggleMark(editor, type)) {
+    if ((0, import_react38.isNodeSelection)(editor.state.selection) || !canToggleMark(editor, type)) {
       return false;
     }
   }
@@ -5395,7 +5435,7 @@ var MarkButton = ({
     shortcutKey,
     formattedName
   } = useMarkState(editor, type, disabled);
-  const handleClick = (0, import_react37.useCallback)(
+  const handleClick = (0, import_react39.useCallback)(
     (e) => {
       onClick == null ? void 0 : onClick(e);
       if (!e.defaultPrevented && !isDisabled && editor) {
@@ -5404,7 +5444,7 @@ var MarkButton = ({
     },
     [onClick, isDisabled, editor, type]
   );
-  const show = (0, import_react37.useMemo)(() => {
+  const show = (0, import_react39.useMemo)(() => {
     return shouldShowMarkButton({
       editor,
       type,
@@ -5484,7 +5524,7 @@ var React9 = __toESM(require("react"));
 
 // src/hooks/use-floating-toolbar-visibility.ts
 var import_state6 = require("@tiptap/pm/state");
-var import_react38 = require("@tiptap/react");
+var import_react40 = require("@tiptap/react");
 var React8 = __toESM(require("react"));
 var HIDE_FLOATING_META = "hideFloatingToolbar";
 var selectNodeAndHideFloating = (editor, pos) => {
@@ -5586,39 +5626,39 @@ 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_react39 = require("react");
+var import_react41 = require("react");
 var import_react_intl17 = require("react-intl");
 var import_jsx_runtime19 = require("react/jsx-runtime");
 function LinkBubble({ editor }) {
   const intl = (0, import_react_intl17.useIntl)();
-  const [isEditing, setIsEditing] = (0, import_react39.useState)(false);
-  const [url, setUrl] = (0, import_react39.useState)("");
-  const getCurrentUrl = (0, import_react39.useCallback)(() => {
+  const [isEditing, setIsEditing] = (0, import_react41.useState)(false);
+  const [url, setUrl] = (0, import_react41.useState)("");
+  const getCurrentUrl = (0, import_react41.useCallback)(() => {
     if (!editor) return "";
     const attrs = editor.getAttributes("link");
     return attrs.href || "";
   }, [editor]);
-  (0, import_react39.useEffect)(() => {
+  (0, import_react41.useEffect)(() => {
     const isLinkActive2 = editor == null ? void 0 : editor.isActive("link");
     if (isLinkActive2) {
       setUrl(getCurrentUrl());
       setIsEditing(false);
     }
   }, [editor, getCurrentUrl]);
-  const handleOpenLink = (0, import_react39.useCallback)(() => {
+  const handleOpenLink = (0, import_react41.useCallback)(() => {
     const href = getCurrentUrl();
     if (href) {
       window.open(href, "_blank", "noopener,noreferrer");
     }
   }, [getCurrentUrl]);
-  const handleRemoveLink = (0, import_react39.useCallback)(() => {
+  const handleRemoveLink = (0, import_react41.useCallback)(() => {
     editor == null ? void 0 : editor.chain().focus().unsetLink().run();
   }, [editor]);
-  const handleEdit = (0, import_react39.useCallback)(() => {
+  const handleEdit = (0, import_react41.useCallback)(() => {
     setUrl(getCurrentUrl());
     setIsEditing(true);
   }, [getCurrentUrl]);
-  const handleSave = (0, import_react39.useCallback)(() => {
+  const handleSave = (0, import_react41.useCallback)(() => {
     if (url) {
       editor == null ? void 0 : editor.chain().focus().extendMarkRange("link").setLink({ href: url }).run();
     } else {
@@ -5626,7 +5666,7 @@ function LinkBubble({ editor }) {
     }
     setIsEditing(false);
   }, [editor, url]);
-  const handleKeyDown = (0, import_react39.useCallback)(
+  const handleKeyDown = (0, import_react41.useCallback)(
     (e) => {
       if (e.key === "Enter") {
         e.preventDefault();
@@ -5751,8 +5791,8 @@ var import_react_intl19 = require("react-intl");
 // src/ui/table-button/use-table.ts
 var import_editor_utils9 = require("@kopexa/editor-utils");
 var import_icons12 = require("@kopexa/icons");
-var import_react40 = require("@tiptap/react");
-var import_react41 = require("react");
+var import_react42 = require("@tiptap/react");
+var import_react43 = require("react");
 var import_react_intl18 = require("react-intl");
 function canToggle(editor) {
   if (!editor || !editor.isEditable) return false;
@@ -5784,7 +5824,7 @@ function shouldShowButton(props) {
   if (!editor || !editor.isEditable) return false;
   if (!(0, import_editor_utils9.isNodeInSchema)("table", editor)) return false;
   if (hideWhenUnavailable) {
-    if ((0, import_react40.isNodeSelection)(editor.state.selection) || !canToggle) {
+    if ((0, import_react42.isNodeSelection)(editor.state.selection) || !canToggle) {
       return false;
     }
   }
@@ -5798,10 +5838,10 @@ function useTableBlock(config) {
   } = config || {};
   const intl = (0, import_react_intl18.useIntl)();
   const { editor } = (0, import_editor_utils9.useTiptapEditor)(providedEditor);
-  const [isVisible, setIsVisible] = (0, import_react41.useState)(true);
+  const [isVisible, setIsVisible] = (0, import_react43.useState)(true);
   const canToggleState = canToggle(editor);
   const isActive = (editor == null ? void 0 : editor.isActive("table")) || false;
-  (0, import_react41.useEffect)(() => {
+  (0, import_react43.useEffect)(() => {
     if (!editor) return;
     const handleSelectionUpdate = () => {
       setIsVisible(shouldShowButton({ editor, hideWhenUnavailable }));
@@ -5812,7 +5852,7 @@ function useTableBlock(config) {
       editor.off("selectionUpdate", handleSelectionUpdate);
     };
   }, [editor, hideWhenUnavailable]);
-  const handleToggle = (0, import_react41.useCallback)(() => {
+  const handleToggle = (0, import_react43.useCallback)(() => {
     if (!editor) return false;
     const success = toggleTable(editor);
     if (success) {
@@ -6374,7 +6414,7 @@ var import_icons26 = require("@kopexa/icons");
 var import_popover3 = require("@kopexa/popover");
 var import_toolbar10 = require("@kopexa/toolbar");
 var import_use_is_mobile3 = require("@kopexa/use-is-mobile");
-var import_react59 = require("react");
+var import_react61 = require("react");
 var import_react_intl25 = require("react-intl");
 
 // src/hooks/use-cursor-visibility.ts
@@ -6485,13 +6525,13 @@ var import_editor_utils14 = require("@kopexa/editor-utils");
 var import_icons15 = require("@kopexa/icons");
 var import_popover2 = require("@kopexa/popover");
 var import_toolbar5 = require("@kopexa/toolbar");
-var import_react43 = require("react");
+var import_react45 = require("react");
 
 // src/ui/color-highlight-button/color-highlight-button.tsx
 var import_editor_utils13 = require("@kopexa/editor-utils");
 var import_theme8 = require("@kopexa/theme");
 var import_toolbar4 = require("@kopexa/toolbar");
-var import_react42 = require("react");
+var import_react44 = require("react");
 
 // src/ui/color-highlight-button/use-color-highlight.ts
 var import_editor_utils12 = require("@kopexa/editor-utils");
@@ -6688,7 +6728,7 @@ var ColorHighlightButton = ({
     hideWhenUnavailable,
     onApplied
   });
-  const handleClick = (0, import_react42.useCallback)(
+  const handleClick = (0, import_react44.useCallback)(
     (event) => {
       onClick == null ? void 0 : onClick(event);
       if (event.defaultPrevented) return;
@@ -6696,7 +6736,7 @@ var ColorHighlightButton = ({
     },
     [handleColorHighlight, onClick]
   );
-  const buttonStyle = (0, import_react42.useMemo)(
+  const buttonStyle = (0, import_react44.useMemo)(
     () => ({
       ...style,
       "--highlight-color": highlightColor
@@ -6779,8 +6819,8 @@ function ColorHighlightPopoverContent({
   ])
 }) {
   const { handleRemoveHighlight } = useColorHighlight({ editor });
-  const containerRef = (0, import_react43.useRef)(null);
-  const menuItems = (0, import_react43.useMemo)(
+  const containerRef = (0, import_react45.useRef)(null);
+  const menuItems = (0, import_react45.useMemo)(
     () => [...colors, { label: "Remove highlight", value: "none" }],
     [colors]
   );
@@ -6848,7 +6888,7 @@ function ColorHighlightPopover({
   ...props
 }) {
   const { editor } = (0, import_editor_utils14.useTiptapEditor)(providedEditor);
-  const [isOpen, setIsOpen] = (0, import_react43.useState)(false);
+  const [isOpen, setIsOpen] = (0, import_react45.useState)(false);
   const { isVisible, canColorHighlight: canColorHighlight2, isActive, label } = useColorHighlight({
     editor,
     hideWhenUnavailable,
@@ -6882,15 +6922,15 @@ var import_button13 = require("@kopexa/button");
 var import_dropdown_menu = require("@kopexa/dropdown-menu");
 var import_editor_utils16 = require("@kopexa/editor-utils");
 var import_icons17 = 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_button12 = require("@kopexa/button");
 var import_editor_utils15 = require("@kopexa/editor-utils");
 var import_icons16 = require("@kopexa/icons");
-var import_react44 = require("@tiptap/react");
-var import_react45 = require("react");
+var import_react46 = require("@tiptap/react");
+var import_react47 = require("react");
 var import_jsx_runtime23 = require("react/jsx-runtime");
 var listOptions = [
   {
@@ -6965,7 +7005,7 @@ 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;
     }
   }
@@ -7000,7 +7040,7 @@ var ListButton = ({
     type
   );
   const Icon = (listOption == null ? void 0 : listOption.icon) || import_icons16.ListIcon;
-  const handleClick = (0, import_react45.useCallback)(
+  const handleClick = (0, import_react47.useCallback)(
     (e) => {
       onClick == null ? void 0 : onClick(e);
       if (!e.defaultPrevented && editor) {
@@ -7009,7 +7049,7 @@ var ListButton = ({
     },
     [onClick, editor, type]
   );
-  const show = (0, import_react45.useMemo)(() => {
+  const show = (0, import_react47.useMemo)(() => {
     return shouldShowListButton({
       editor,
       type,
@@ -7063,24 +7103,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_utils16.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);
@@ -7098,7 +7138,7 @@ 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)
     );
@@ -7122,7 +7162,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,
@@ -7131,7 +7171,7 @@ 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]
   );
@@ -7172,7 +7212,7 @@ function ListDropdownMenu({
 // src/ui/table-button/index.tsx
 var import_editor_utils17 = require("@kopexa/editor-utils");
 var import_toolbar6 = require("@kopexa/toolbar");
-var import_react48 = require("react");
+var import_react50 = require("react");
 var import_jsx_runtime25 = require("react/jsx-runtime");
 var TableButton = ({
   editor: providedEditor,
@@ -7197,7 +7237,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;
@@ -7235,12 +7275,12 @@ var TableButton = ({
 // src/ui/text-align-button/text-align-button.tsx
 var import_button14 = require("@kopexa/button");
 var import_editor_utils19 = require("@kopexa/editor-utils");
-var import_react50 = require("react");
+var import_react52 = require("react");
 
 // src/ui/text-align-button/use-text-align.ts
 var import_editor_utils18 = require("@kopexa/editor-utils");
 var import_icons18 = require("@kopexa/icons");
-var import_react49 = require("react");
+var import_react51 = require("react");
 var import_react_intl21 = require("react-intl");
 var TEXT_ALIGN_SHORTCUT_KEYS = {
   left: "mod+shift+l",
@@ -7300,10 +7340,10 @@ function useTextAlign(config) {
   } = config;
   const intl = (0, import_react_intl21.useIntl)();
   const { editor } = (0, import_editor_utils18.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(shouldShowButton3({ editor, align, hideWhenUnavailable }));
@@ -7314,7 +7354,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) {
@@ -7361,7 +7401,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;
@@ -7397,7 +7437,7 @@ var TextAlignButton = ({
 var import_button17 = require("@kopexa/button");
 var import_dropdown_menu2 = require("@kopexa/dropdown-menu");
 var import_editor_utils28 = require("@kopexa/editor-utils");
-var import_react56 = require("react");
+var import_react58 = require("react");
 var import_react_intl23 = require("react-intl");
 
 // src/ui/blockquote-button/blockquote-button.tsx
@@ -7585,7 +7625,7 @@ var BlockquoteButton = ({
 var import_editor_utils23 = require("@kopexa/editor-utils");
 var import_icons21 = require("@kopexa/icons");
 var import_toolbar8 = require("@kopexa/toolbar");
-var import_react51 = require("react");
+var import_react53 = require("react");
 
 // src/ui/codeblock-button/use-code-block.ts
 var import_editor_utils22 = require("@kopexa/editor-utils");
@@ -7719,7 +7759,7 @@ var CodeBlockButton = ({
     hideWhenUnavailable,
     onToggled
   });
-  const handleClick = (0, import_react51.useCallback)(
+  const handleClick = (0, import_react53.useCallback)(
     (event) => {
       onClick == null ? void 0 : onClick(event);
       if (event.defaultPrevented) return;
@@ -7762,7 +7802,7 @@ var import_icons22 = require("@kopexa/icons");
 var React18 = __toESM(require("react"));
 
 // src/ui/heading-button/utils.ts
-var import_react52 = require("@tiptap/react");
+var import_react54 = require("@tiptap/react");
 var headingShortcutKeys = {
   1: "Ctrl-Alt-1",
   2: "Ctrl-Alt-2",
@@ -7803,7 +7843,7 @@ function shouldShowHeadingButton(params) {
     return false;
   }
   if (hideWhenUnavailable) {
-    if ((0, import_react52.isNodeSelection)(editor.state.selection)) {
+    if ((0, import_react54.isNodeSelection)(editor.state.selection)) {
       return false;
     }
   }
@@ -7909,14 +7949,14 @@ var import_button16 = require("@kopexa/button");
 var import_chip = require("@kopexa/chip");
 var import_editor_utils26 = require("@kopexa/editor-utils");
 var import_shared_utils = require("@kopexa/shared-utils");
-var import_react54 = require("react");
+var import_react56 = require("react");
 
 // src/ui/text-button/use-text.ts
 var import_editor_utils25 = require("@kopexa/editor-utils");
 var import_icons23 = require("@kopexa/icons");
 var import_use_is_mobile2 = require("@kopexa/use-is-mobile");
 var import_state9 = require("@tiptap/pm/state");
-var import_react53 = require("react");
+var import_react55 = require("react");
 var import_react_hotkeys_hook2 = require("react-hotkeys-hook");
 var TEXT_SHORTCUT_KEY = "mod+alt+0";
 function canToggleText(editor, turnInto = true) {
@@ -8009,10 +8049,10 @@ function useText(config) {
   } = config || {};
   const { editor } = (0, import_editor_utils25.useTiptapEditor)(providedEditor);
   const isMobile = (0, import_use_is_mobile2.useIsMobile)();
-  const [isVisible, setIsVisible] = (0, import_react53.useState)(true);
+  const [isVisible, setIsVisible] = (0, import_react55.useState)(true);
   const canToggle3 = canToggleText(editor);
   const isActive = isParagraphActive(editor);
-  (0, import_react53.useEffect)(() => {
+  (0, import_react55.useEffect)(() => {
     if (!editor) return;
     const handleSelectionUpdate = () => {
       setIsVisible(shouldShowButton6({ editor, hideWhenUnavailable }));
@@ -8023,7 +8063,7 @@ function useText(config) {
       editor.off("selectionUpdate", handleSelectionUpdate);
     };
   }, [editor, hideWhenUnavailable]);
-  const handleToggle = (0, import_react53.useCallback)(() => {
+  const handleToggle = (0, import_react55.useCallback)(() => {
     if (!editor) return false;
     const success = toggleParagraph(editor);
     if (success) {
@@ -8086,7 +8126,7 @@ var TextButton = ({
     hideWhenUnavailable,
     onToggled
   });
-  const handleClick = (0, import_react54.useCallback)(
+  const handleClick = (0, import_react56.useCallback)(
     (event) => {
       onClick == null ? void 0 : onClick(event);
       if (event.defaultPrevented) return;
@@ -8127,7 +8167,7 @@ var TextButton = ({
 var import_editor_utils27 = require("@kopexa/editor-utils");
 var import_icons24 = require("@kopexa/icons");
 var import_state10 = require("@tiptap/pm/state");
-var import_react55 = require("react");
+var import_react57 = require("react");
 var import_react_intl22 = require("react-intl");
 var TURN_INTO_BLOCKS = [
   "paragraph",
@@ -8225,14 +8265,14 @@ function useTurnIntoDropdown(config) {
   } = config || {};
   const intl = (0, import_react_intl22.useIntl)();
   const { editor } = (0, import_editor_utils27.useTiptapEditor)(providedEditor);
-  const [isOpen, setIsOpen] = (0, import_react55.useState)(false);
-  const [isVisible, setIsVisible] = (0, import_react55.useState)(true);
-  const translatedBlockTypeOptions = (0, import_react55.useMemo)(
+  const [isOpen, setIsOpen] = (0, import_react57.useState)(false);
+  const [isVisible, setIsVisible] = (0, import_react57.useState)(true);
+  const translatedBlockTypeOptions = (0, import_react57.useMemo)(
     () => createBlockTypeOptions(intl.formatMessage),
     [intl]
   );
   const canToggle3 = canTurnInto(editor, blockTypes);
-  const activeBlockType = (0, import_react55.useMemo)(() => {
+  const activeBlockType = (0, import_react57.useMemo)(() => {
     if (!editor) return translatedBlockTypeOptions[0];
     const filteredOptions2 = blockTypes ? translatedBlockTypeOptions.filter(
       (opt) => blockTypes.includes(opt.type)
@@ -8242,13 +8282,13 @@ function useTurnIntoDropdown(config) {
     );
     return activeOption || filteredOptions2[0];
   }, [editor, blockTypes, translatedBlockTypeOptions]);
-  const filteredOptions = (0, import_react55.useMemo)(() => {
+  const filteredOptions = (0, import_react57.useMemo)(() => {
     if (!blockTypes) return translatedBlockTypeOptions;
     return translatedBlockTypeOptions.filter(
       (opt) => blockTypes.includes(opt.type)
     );
   }, [blockTypes, translatedBlockTypeOptions]);
-  const handleOpenChange = (0, import_react55.useCallback)(
+  const handleOpenChange = (0, import_react57.useCallback)(
     (open) => {
       if (!editor || !canToggle3) return;
       setIsOpen(open);
@@ -8256,7 +8296,7 @@ function useTurnIntoDropdown(config) {
     },
     [canToggle3, editor, onOpenChange]
   );
-  (0, import_react55.useEffect)(() => {
+  (0, import_react57.useEffect)(() => {
     if (!editor) return;
     const handleSelectionUpdate = () => {
       setIsVisible(
@@ -8295,7 +8335,7 @@ function useTurnIntoDropdown(config) {
 var import_jsx_runtime31 = require("react/jsx-runtime");
 var TurnIntoDropdownContent = ({ blockTypes }) => {
   const intl = (0, import_react_intl23.useIntl)();
-  const filteredOptions = (0, import_react56.useMemo)(() => {
+  const filteredOptions = (0, import_react58.useMemo)(() => {
     const allOptions = createBlockTypeOptions(intl.formatMessage);
     if (!blockTypes) return allOptions;
     return allOptions.filter((opt) => blockTypes.includes(opt.type));
@@ -8393,7 +8433,7 @@ function renderBlockTypeButton(option, key) {
       return null;
   }
 }
-var TurnIntoDropdown = (0, import_react56.forwardRef)(
+var TurnIntoDropdown = (0, import_react58.forwardRef)(
   ({
     editor: providedEditor,
     hideWhenUnavailable = false,
@@ -8458,12 +8498,12 @@ TurnIntoDropdown.displayName = "TurnIntoDropdown";
 // src/ui/undo-redo-button/undo-redo-button.tsx
 var import_editor_utils30 = require("@kopexa/editor-utils");
 var import_toolbar9 = require("@kopexa/toolbar");
-var import_react58 = require("react");
+var import_react60 = require("react");
 
 // src/ui/undo-redo-button/use-undo-redo.ts
 var import_editor_utils29 = require("@kopexa/editor-utils");
 var import_icons25 = require("@kopexa/icons");
-var import_react57 = require("react");
+var import_react59 = require("react");
 var import_react_intl24 = require("react-intl");
 var UNDO_REDO_SHORTCUT_KEYS = {
   undo: "mod+z",
@@ -8505,9 +8545,9 @@ function useUndoRedo(config) {
   } = config;
   const intl = (0, import_react_intl24.useIntl)();
   const { editor } = (0, import_editor_utils29.useTiptapEditor)(providedEditor);
-  const [isVisible, setIsVisible] = (0, import_react57.useState)(true);
+  const [isVisible, setIsVisible] = (0, import_react59.useState)(true);
   const canExecute = canExecuteUndoRedoAction(editor, action);
-  (0, import_react57.useEffect)(() => {
+  (0, import_react59.useEffect)(() => {
     if (!editor) return;
     const handleUpdate = () => {
       setIsVisible(shouldShowButton7({ editor, hideWhenUnavailable, action }));
@@ -8518,7 +8558,7 @@ function useUndoRedo(config) {
       editor.off("transaction", handleUpdate);
     };
   }, [editor, hideWhenUnavailable, action]);
-  const handleAction = (0, import_react57.useCallback)(() => {
+  const handleAction = (0, import_react59.useCallback)(() => {
     if (!editor) return false;
     const success = executeUndoRedoAction(editor, action);
     if (success) {
@@ -8556,7 +8596,7 @@ var UndoRedoButton = ({
     hideWhenUnavailable,
     onExecuted
   });
-  const handleClick = (0, import_react58.useCallback)(
+  const handleClick = (0, import_react60.useCallback)(
     (event) => {
       onClick == null ? void 0 : onClick(event);
       if (event.defaultPrevented) return;
@@ -8598,7 +8638,7 @@ var EditorHeader = ({
   const isMobile = (0, import_use_is_mobile3.useIsMobile)();
   const windowSize = useWindowSize();
   const { styles } = useEditorUIContext();
-  const toolbarRef = (0, import_react59.useRef)(null);
+  const toolbarRef = (0, import_react61.useRef)(null);
   const bodyRect = useCursorVisibility({
     editor,
     overlayHeight: (_b = (_a = toolbarRef.current) == null ? void 0 : _a.getBoundingClientRect().height) != null ? _b : 0
@@ -8668,9 +8708,9 @@ function MoreOptions({
 }) {
   const intl = (0, import_react_intl25.useIntl)();
   const { editor } = (0, import_editor_utils31.useTiptapEditor)(providedEditor);
-  const [show, setShow] = (0, import_react59.useState)(false);
+  const [show, setShow] = (0, import_react61.useState)(false);
   const moreOptionsLabel = intl.formatMessage(messages7.more_options);
-  (0, import_react59.useEffect)(() => {
+  (0, import_react61.useEffect)(() => {
     if (!editor) return;
     const handleSelectionUpdate = () => {
       setShow(
@@ -8783,7 +8823,7 @@ var BasicEditor = ({
     ...options
   });
   const styles = (0, import_theme9.editorBasic)({ variant, bordered });
-  const resolveVariable = (0, import_react61.useCallback)(
+  const resolveVariable = (0, import_react63.useCallback)(
     (name) => variableValues == null ? void 0 : variableValues[name],
     [variableValues]
   );
@@ -8793,7 +8833,7 @@ var BasicEditor = ({
   const isBottomToolbar = variant === "field";
   const hasVariables = variables && variables.length > 0;
   const hasPagination = !!pagesOptions;
-  const editorContent = /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(EditorUIProvider, { value: { styles }, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: styles.root(), "data-slot": "editor", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_react60.EditorContext.Provider, { value: { editor }, children: [
+  const editorContent = /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(EditorUIProvider, { value: { styles }, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: styles.root(), "data-slot": "editor", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_react62.EditorContext.Provider, { value: { editor }, children: [
     showToolbar && !isBottomToolbar && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(EditorHeader, { editor, variant }),
     /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       EditorContentArea,
@@ -8817,10 +8857,10 @@ var EditorContentArea = ({
   hasPagination
 }) => {
   const styles = (0, import_theme9.editorBasic)({ variant });
-  const { editor } = (0, import_react61.useContext)(import_react60.EditorContext);
+  const { editor } = (0, import_react63.useContext)(import_react62.EditorContext);
   const { isDragging } = useUiEditorState(editor);
   useScrollToHash();
-  const handleKeyDown = (0, import_react61.useCallback)(
+  const handleKeyDown = (0, import_react63.useCallback)(
     (e) => {
       if (!(editor == null ? void 0 : editor.isFocused)) return;
       const isMod = e.metaKey || e.ctrlKey;
@@ -8864,7 +8904,7 @@ var EditorContentArea = ({
     // biome-ignore lint/a11y/noStaticElementInteractions: Wrapper intercepts keyboard shortcuts to prevent propagation
     /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: styles.wrapper(), onKeyDown: handleKeyDown, children: [
       /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
-        import_react60.EditorContent,
+        import_react62.EditorContent,
         {
           editor,
           role: "presentation",
@@ -8928,7 +8968,7 @@ function LoadingSpinner({ text = "Connecting..." }) {
 
 // src/presets/view/index.tsx
 var import_theme10 = require("@kopexa/theme");
-var import_react62 = require("@tiptap/react");
+var import_react64 = require("@tiptap/react");
 var import_jsx_runtime35 = require("react/jsx-runtime");
 function EditorView({
   content,
@@ -8948,8 +8988,8 @@ function EditorView({
   if (!editor) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: styles.root({ className }), "data-slot": "editor-view", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react62.EditorContext.Provider, { value: { editor }, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: styles.wrapper(), children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-    import_react62.EditorContent,
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: styles.root({ className }), "data-slot": "editor-view", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react64.EditorContext.Provider, { value: { editor }, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: styles.wrapper(), children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    import_react64.EditorContent,
     {
       editor,
       role: "presentation",
@@ -8961,7 +9001,7 @@ function EditorView({
 // src/presets/view/static.tsx
 var import_theme11 = require("@kopexa/theme");
 var import_html = require("@tiptap/html");
-var import_react63 = require("react");
+var import_react65 = require("react");
 var import_jsx_runtime36 = require("react/jsx-runtime");
 function EditorStaticView({
   content,
@@ -8971,7 +9011,7 @@ function EditorStaticView({
   customExtensions,
   disabled
 }) {
-  const extensions = (0, import_react63.useMemo)(
+  const extensions = (0, import_react65.useMemo)(
     () => getExtensions({
       editable: false,
       customExtensions,
@@ -8979,7 +9019,7 @@ function EditorStaticView({
     }),
     [customExtensions, disabled]
   );
-  const html = (0, import_react63.useMemo)(() => {
+  const html = (0, import_react65.useMemo)(() => {
     const parsed = safeParseContent(content);
     if (!parsed) return "";
     const json = parsed;