@kopexa/tiptap 17.10.2 → 17.11.1

package/dist/index.js

@@ -55,7 +55,7 @@ __export(index_exports, {
   sanitizeUrl: () => sanitizeUrl,
   useCollaboration: () => useCollaboration,
   useCollaborationRequired: () => useCollaborationRequired,
-  useCurrentEditor: () => import_react65.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_react65 = require("@tiptap/react");
+var import_react66 = require("@tiptap/react");
 
 // src/context/collaboration-context.tsx
 var import_provider = require("@hocuspocus/provider");
@@ -3345,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_react33 = require("@tiptap/react");
+var import_react34 = require("@tiptap/react");
 var import_starter_kit = require("@tiptap/starter-kit");
-var import_react34 = 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_react30 = require("@tiptap/react");
+var import_react31 = require("@tiptap/react");
 var Link = import_extension_link.default.extend({
   inclusive: false,
   parseHTML() {
@@ -3381,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_react30.getMarkRange)(doc.resolve(pos), schema.marks.link);
+              range = (0, import_react31.getMarkRange)(doc.resolve(pos), schema.marks.link);
             }
             if (!range) {
               return;
@@ -3687,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_react31 = require("@tiptap/react");
-var Selection = import_react31.Extension.create({
+var import_react32 = require("@tiptap/react");
+var Selection = import_react32.Extension.create({
   name: "selection",
   addProseMirrorPlugins() {
     const { editor } = this;
@@ -3703,7 +3757,7 @@ var Selection = import_react31.Extension.create({
             if (editor.isFocused === true || !editor.isEditable) {
               return null;
             }
-            if ((0, import_react31.isNodeSelection)(state.selection)) {
+            if ((0, import_react32.isNodeSelection)(state.selection)) {
               return null;
             }
             return import_view.DecorationSet.create(state.doc, [
@@ -3778,7 +3832,7 @@ var TabHandler = import_core9.Extension.create({
 
 // src/extensions/trailing-node/index.ts
 var import_state5 = require("@tiptap/pm/state");
-var import_react32 = require("@tiptap/react");
+var import_react33 = require("@tiptap/react");
 function nodeEqualsType({
   types,
   node
@@ -3789,7 +3843,7 @@ function nodeEqualsType({
   }
   return node.type === types;
 }
-var TrailingNode = import_react32.Extension.create({
+var TrailingNode = import_react33.Extension.create({
   name: "trailingNode",
   addOptions() {
     return {
@@ -4070,10 +4124,10 @@ var useCreateEditor = ({
   const fileHandlerFromContext = useEditorFile();
   const fileHandler = fileHandlerProp != null ? fileHandlerProp : fileHandlerFromContext;
   const collaboration = useCollaboration();
-  const [collabSyncing, setCollabSyncing] = (0, import_react34.useState)(!!collaboration);
-  const placeholderRef = (0, import_react34.useRef)(placeholder);
+  const [collabSyncing, setCollabSyncing] = (0, import_react35.useState)(!!collaboration);
+  const placeholderRef = (0, import_react35.useRef)(placeholder);
   placeholderRef.current = placeholder;
-  const [extensions] = (0, import_react34.useState)(
+  const [extensions] = (0, import_react35.useState)(
     () => getExtensions({
       editable,
       placeholder: () => {
@@ -4091,7 +4145,7 @@ var useCreateEditor = ({
     })
   );
   const { onCreate: userOnCreate, ...restOptions } = options;
-  const editor = (0, import_react33.useEditor)({
+  const editor = (0, import_react34.useEditor)({
     editorProps: {
       attributes: {
         autocomplete: "off",
@@ -4136,7 +4190,7 @@ var useCreateEditor = ({
     },
     ...restOptions
   });
-  (0, import_react34.useEffect)(() => {
+  (0, import_react35.useEffect)(() => {
     if (editor && editor.isEditable !== editable) {
       editor.setEditable(editable);
     }
@@ -4210,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
@@ -4356,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_react61 = require("@tiptap/react");
-var import_react62 = 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
@@ -4365,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_react35 = require("@tiptap/react");
+var import_react36 = require("@tiptap/react");
 function useUiEditorState(editor) {
   var _a;
-  return (_a = (0, import_react35.useEditorState)({
+  return (_a = (0, import_react36.useEditorState)({
     editor,
     selector: ({ editor: editor2 }) => {
       if (!editor2) return defaultUiState;
@@ -4395,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_react36 = require("react");
+var import_react37 = require("react");
 
 // src/ui/link-popover/use-link-popover.ts
 var import_editor_utils5 = require("@kopexa/editor-utils");
@@ -4651,8 +4707,8 @@ var LinkMain = ({
   isActive,
   onSave
 }) => {
-  const [isEditing, setIsEditing] = (0, import_react36.useState)(!isActive || !url);
-  (0, import_react36.useEffect)(() => {
+  const [isEditing, setIsEditing] = (0, import_react37.useState)(!isActive || !url);
+  (0, import_react37.useEffect)(() => {
     setIsEditing(!isActive || !url);
   }, [isActive, url]);
   const handleKeyDown = (event) => {
@@ -4768,7 +4824,7 @@ function LinkPopover({
   ...buttonProps
 }) {
   const { editor } = (0, import_editor_utils6.useTiptapEditor)(providedEditor);
-  const [isOpen, setIsOpen] = (0, import_react36.useState)(false);
+  const [isOpen, setIsOpen] = (0, import_react37.useState)(false);
   const {
     isVisible,
     canSet,
@@ -4784,18 +4840,18 @@ function LinkPopover({
     hideWhenUnavailable,
     onSetLink
   });
-  const handleOnOpenChange = (0, import_react36.useCallback)(
+  const handleOnOpenChange = (0, import_react37.useCallback)(
     (nextIsOpen) => {
       setIsOpen(nextIsOpen);
       onOpenChange == null ? void 0 : onOpenChange(nextIsOpen);
     },
     [onOpenChange]
   );
-  const handleSetLink = (0, import_react36.useCallback)(() => {
+  const handleSetLink = (0, import_react37.useCallback)(() => {
     setLink();
     setIsOpen(false);
   }, [setLink]);
-  const handleClick = (0, import_react36.useCallback)(
+  const handleClick = (0, import_react37.useCallback)(
     (event) => {
       onClick == null ? void 0 : onClick(event);
       if (event.defaultPrevented) return;
@@ -4803,7 +4859,7 @@ function LinkPopover({
     },
     [onClick, isOpen]
   );
-  (0, import_react36.useEffect)(() => {
+  (0, import_react37.useEffect)(() => {
     if (autoOpenOnLinkActive && isActive) {
       setIsOpen(true);
     }
@@ -4857,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_react37 = require("@tiptap/react");
-var import_react38 = require("react");
+var import_react38 = require("@tiptap/react");
+var import_react39 = require("react");
 var import_react_intl16 = require("react-intl");
 
 // src/ui/messages.ts
@@ -5324,7 +5380,7 @@ function shouldShowMarkButton(params) {
     return false;
   }
   if (hideWhenUnavailable) {
-    if ((0, import_react37.isNodeSelection)(editor.state.selection) || !canToggleMark(editor, type)) {
+    if ((0, import_react38.isNodeSelection)(editor.state.selection) || !canToggleMark(editor, type)) {
       return false;
     }
   }
@@ -5379,7 +5435,7 @@ var MarkButton = ({
     shortcutKey,
     formattedName
   } = useMarkState(editor, type, disabled);
-  const handleClick = (0, import_react38.useCallback)(
+  const handleClick = (0, import_react39.useCallback)(
     (e) => {
       onClick == null ? void 0 : onClick(e);
       if (!e.defaultPrevented && !isDisabled && editor) {
@@ -5388,7 +5444,7 @@ var MarkButton = ({
     },
     [onClick, isDisabled, editor, type]
   );
-  const show = (0, import_react38.useMemo)(() => {
+  const show = (0, import_react39.useMemo)(() => {
     return shouldShowMarkButton({
       editor,
       type,
@@ -5468,7 +5524,7 @@ var React9 = __toESM(require("react"));
 
 // src/hooks/use-floating-toolbar-visibility.ts
 var import_state6 = require("@tiptap/pm/state");
-var import_react39 = require("@tiptap/react");
+var import_react40 = require("@tiptap/react");
 var React8 = __toESM(require("react"));
 var HIDE_FLOATING_META = "hideFloatingToolbar";
 var selectNodeAndHideFloating = (editor, pos) => {
@@ -5570,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_react40 = 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_react40.useState)(false);
-  const [url, setUrl] = (0, import_react40.useState)("");
-  const getCurrentUrl = (0, import_react40.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_react40.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_react40.useCallback)(() => {
+  const handleOpenLink = (0, import_react41.useCallback)(() => {
     const href = getCurrentUrl();
     if (href) {
       window.open(href, "_blank", "noopener,noreferrer");
     }
   }, [getCurrentUrl]);
-  const handleRemoveLink = (0, import_react40.useCallback)(() => {
+  const handleRemoveLink = (0, import_react41.useCallback)(() => {
     editor == null ? void 0 : editor.chain().focus().unsetLink().run();
   }, [editor]);
-  const handleEdit = (0, import_react40.useCallback)(() => {
+  const handleEdit = (0, import_react41.useCallback)(() => {
     setUrl(getCurrentUrl());
     setIsEditing(true);
   }, [getCurrentUrl]);
-  const handleSave = (0, import_react40.useCallback)(() => {
+  const handleSave = (0, import_react41.useCallback)(() => {
     if (url) {
       editor == null ? void 0 : editor.chain().focus().extendMarkRange("link").setLink({ href: url }).run();
     } else {
@@ -5610,7 +5666,7 @@ function LinkBubble({ editor }) {
     }
     setIsEditing(false);
   }, [editor, url]);
-  const handleKeyDown = (0, import_react40.useCallback)(
+  const handleKeyDown = (0, import_react41.useCallback)(
     (e) => {
       if (e.key === "Enter") {
         e.preventDefault();
@@ -5735,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_react41 = require("@tiptap/react");
-var import_react42 = 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;
@@ -5768,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_react41.isNodeSelection)(editor.state.selection) || !canToggle) {
+    if ((0, import_react42.isNodeSelection)(editor.state.selection) || !canToggle) {
       return false;
     }
   }
@@ -5782,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_react42.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_react42.useEffect)(() => {
+  (0, import_react43.useEffect)(() => {
     if (!editor) return;
     const handleSelectionUpdate = () => {
       setIsVisible(shouldShowButton({ editor, hideWhenUnavailable }));
@@ -5796,7 +5852,7 @@ function useTableBlock(config) {
       editor.off("selectionUpdate", handleSelectionUpdate);
     };
   }, [editor, hideWhenUnavailable]);
-  const handleToggle = (0, import_react42.useCallback)(() => {
+  const handleToggle = (0, import_react43.useCallback)(() => {
     if (!editor) return false;
     const success = toggleTable(editor);
     if (success) {
@@ -6358,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_react60 = require("react");
+var import_react61 = require("react");
 var import_react_intl25 = require("react-intl");
 
 // src/hooks/use-cursor-visibility.ts
@@ -6469,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_react44 = 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_react43 = require("react");
+var import_react44 = require("react");
 
 // src/ui/color-highlight-button/use-color-highlight.ts
 var import_editor_utils12 = require("@kopexa/editor-utils");
@@ -6672,7 +6728,7 @@ var ColorHighlightButton = ({
     hideWhenUnavailable,
     onApplied
   });
-  const handleClick = (0, import_react43.useCallback)(
+  const handleClick = (0, import_react44.useCallback)(
     (event) => {
       onClick == null ? void 0 : onClick(event);
       if (event.defaultPrevented) return;
@@ -6680,7 +6736,7 @@ var ColorHighlightButton = ({
     },
     [handleColorHighlight, onClick]
   );
-  const buttonStyle = (0, import_react43.useMemo)(
+  const buttonStyle = (0, import_react44.useMemo)(
     () => ({
       ...style,
       "--highlight-color": highlightColor
@@ -6763,8 +6819,8 @@ function ColorHighlightPopoverContent({
   ])
 }) {
   const { handleRemoveHighlight } = useColorHighlight({ editor });
-  const containerRef = (0, import_react44.useRef)(null);
-  const menuItems = (0, import_react44.useMemo)(
+  const containerRef = (0, import_react45.useRef)(null);
+  const menuItems = (0, import_react45.useMemo)(
     () => [...colors, { label: "Remove highlight", value: "none" }],
     [colors]
   );
@@ -6832,7 +6888,7 @@ function ColorHighlightPopover({
   ...props
 }) {
   const { editor } = (0, import_editor_utils14.useTiptapEditor)(providedEditor);
-  const [isOpen, setIsOpen] = (0, import_react44.useState)(false);
+  const [isOpen, setIsOpen] = (0, import_react45.useState)(false);
   const { isVisible, canColorHighlight: canColorHighlight2, isActive, label } = useColorHighlight({
     editor,
     hideWhenUnavailable,
@@ -6866,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_react47 = require("@tiptap/react");
-var import_react48 = 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_react45 = require("@tiptap/react");
-var import_react46 = require("react");
+var import_react46 = require("@tiptap/react");
+var import_react47 = require("react");
 var import_jsx_runtime23 = require("react/jsx-runtime");
 var listOptions = [
   {
@@ -6949,7 +7005,7 @@ function shouldShowListButton(params) {
     return false;
   }
   if (hideWhenUnavailable) {
-    if ((0, import_react45.isNodeSelection)(editor.state.selection) || !canToggleList(editor, type)) {
+    if ((0, import_react46.isNodeSelection)(editor.state.selection) || !canToggleList(editor, type)) {
       return false;
     }
   }
@@ -6984,7 +7040,7 @@ var ListButton = ({
     type
   );
   const Icon = (listOption == null ? void 0 : listOption.icon) || import_icons16.ListIcon;
-  const handleClick = (0, import_react46.useCallback)(
+  const handleClick = (0, import_react47.useCallback)(
     (e) => {
       onClick == null ? void 0 : onClick(e);
       if (!e.defaultPrevented && editor) {
@@ -6993,7 +7049,7 @@ var ListButton = ({
     },
     [onClick, editor, type]
   );
-  const show = (0, import_react46.useMemo)(() => {
+  const show = (0, import_react47.useMemo)(() => {
     return shouldShowListButton({
       editor,
       type,
@@ -7047,24 +7103,24 @@ function shouldShowListDropdown(params) {
     return false;
   }
   if (hideWhenUnavailable) {
-    if ((0, import_react47.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_react48.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_react48.useMemo)(
+  const filteredLists = (0, import_react49.useMemo)(
     () => getFilteredListOptions(availableTypes),
     [availableTypes]
   );
   const canToggleAny = canToggleAnyList(editor, availableTypes);
   const isAnyActive = isAnyListActive(editor, availableTypes);
-  const handleOpenChange = (0, import_react48.useCallback)(
+  const handleOpenChange = (0, import_react49.useCallback)(
     (open, callback) => {
       setIsOpen(open);
       callback == null ? void 0 : callback(open);
@@ -7082,7 +7138,7 @@ function useListDropdownState(editor, availableTypes) {
   };
 }
 function useActiveListIcon(editor, filteredLists) {
-  return (0, import_react48.useCallback)(() => {
+  return (0, import_react49.useCallback)(() => {
     const activeOption = filteredLists.find(
       (option) => isListActive(editor, option.type)
     );
@@ -7106,7 +7162,7 @@ function ListDropdownMenu({
     handleOpenChange
   } = useListDropdownState(editor, types);
   const getActiveIcon = useActiveListIcon(editor, filteredLists);
-  const show = (0, import_react48.useMemo)(() => {
+  const show = (0, import_react49.useMemo)(() => {
     return shouldShowListDropdown({
       editor,
       listTypes: types,
@@ -7115,7 +7171,7 @@ function ListDropdownMenu({
       canToggleAny
     });
   }, [editor, types, hideWhenUnavailable, listInSchema, canToggleAny]);
-  const handleOnOpenChange = (0, import_react48.useCallback)(
+  const handleOnOpenChange = (0, import_react49.useCallback)(
     (open) => handleOpenChange(open, onOpenChange),
     [handleOpenChange, onOpenChange]
   );
@@ -7156,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_react49 = require("react");
+var import_react50 = require("react");
 var import_jsx_runtime25 = require("react/jsx-runtime");
 var TableButton = ({
   editor: providedEditor,
@@ -7181,7 +7237,7 @@ var TableButton = ({
     hideWhenUnavailable,
     onToggled
   });
-  const handleClick = (0, import_react49.useCallback)(
+  const handleClick = (0, import_react50.useCallback)(
     (event) => {
       onClick == null ? void 0 : onClick(event);
       if (event.defaultPrevented) return;
@@ -7219,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_react51 = 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_react50 = require("react");
+var import_react51 = require("react");
 var import_react_intl21 = require("react-intl");
 var TEXT_ALIGN_SHORTCUT_KEYS = {
   left: "mod+shift+l",
@@ -7284,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_react50.useState)(true);
+  const [isVisible, setIsVisible] = (0, import_react51.useState)(true);
   const canAlign = canSetTextAlign(editor, align);
   const isActive = isTextAlignActive(editor, align);
-  (0, import_react50.useEffect)(() => {
+  (0, import_react51.useEffect)(() => {
     if (!editor) return;
     const handleSelectionUpdate = () => {
       setIsVisible(shouldShowButton3({ editor, align, hideWhenUnavailable }));
@@ -7298,7 +7354,7 @@ function useTextAlign(config) {
       editor.off("selectionUpdate", handleSelectionUpdate);
     };
   }, [editor, hideWhenUnavailable, align]);
-  const handleTextAlign = (0, import_react50.useCallback)(() => {
+  const handleTextAlign = (0, import_react51.useCallback)(() => {
     if (!editor) return false;
     const success = setTextAlign(editor, align);
     if (success) {
@@ -7345,7 +7401,7 @@ var TextAlignButton = ({
     hideWhenUnavailable,
     onAligned
   });
-  const handleClick = (0, import_react51.useCallback)(
+  const handleClick = (0, import_react52.useCallback)(
     (e) => {
       onClick == null ? void 0 : onClick(e);
       if (e.defaultPrevented) return;
@@ -7381,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_react57 = require("react");
+var import_react58 = require("react");
 var import_react_intl23 = require("react-intl");
 
 // src/ui/blockquote-button/blockquote-button.tsx
@@ -7569,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_react52 = require("react");
+var import_react53 = require("react");
 
 // src/ui/codeblock-button/use-code-block.ts
 var import_editor_utils22 = require("@kopexa/editor-utils");
@@ -7703,7 +7759,7 @@ var CodeBlockButton = ({
     hideWhenUnavailable,
     onToggled
   });
-  const handleClick = (0, import_react52.useCallback)(
+  const handleClick = (0, import_react53.useCallback)(
     (event) => {
       onClick == null ? void 0 : onClick(event);
       if (event.defaultPrevented) return;
@@ -7746,7 +7802,7 @@ var import_icons22 = require("@kopexa/icons");
 var React18 = __toESM(require("react"));
 
 // src/ui/heading-button/utils.ts
-var import_react53 = require("@tiptap/react");
+var import_react54 = require("@tiptap/react");
 var headingShortcutKeys = {
   1: "Ctrl-Alt-1",
   2: "Ctrl-Alt-2",
@@ -7787,7 +7843,7 @@ function shouldShowHeadingButton(params) {
     return false;
   }
   if (hideWhenUnavailable) {
-    if ((0, import_react53.isNodeSelection)(editor.state.selection)) {
+    if ((0, import_react54.isNodeSelection)(editor.state.selection)) {
       return false;
     }
   }
@@ -7893,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_react55 = 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_react54 = 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) {
@@ -7993,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_react54.useState)(true);
+  const [isVisible, setIsVisible] = (0, import_react55.useState)(true);
   const canToggle3 = canToggleText(editor);
   const isActive = isParagraphActive(editor);
-  (0, import_react54.useEffect)(() => {
+  (0, import_react55.useEffect)(() => {
     if (!editor) return;
     const handleSelectionUpdate = () => {
       setIsVisible(shouldShowButton6({ editor, hideWhenUnavailable }));
@@ -8007,7 +8063,7 @@ function useText(config) {
       editor.off("selectionUpdate", handleSelectionUpdate);
     };
   }, [editor, hideWhenUnavailable]);
-  const handleToggle = (0, import_react54.useCallback)(() => {
+  const handleToggle = (0, import_react55.useCallback)(() => {
     if (!editor) return false;
     const success = toggleParagraph(editor);
     if (success) {
@@ -8070,7 +8126,7 @@ var TextButton = ({
     hideWhenUnavailable,
     onToggled
   });
-  const handleClick = (0, import_react55.useCallback)(
+  const handleClick = (0, import_react56.useCallback)(
     (event) => {
       onClick == null ? void 0 : onClick(event);
       if (event.defaultPrevented) return;
@@ -8111,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_react56 = require("react");
+var import_react57 = require("react");
 var import_react_intl22 = require("react-intl");
 var TURN_INTO_BLOCKS = [
   "paragraph",
@@ -8209,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_react56.useState)(false);
-  const [isVisible, setIsVisible] = (0, import_react56.useState)(true);
-  const translatedBlockTypeOptions = (0, import_react56.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_react56.useMemo)(() => {
+  const activeBlockType = (0, import_react57.useMemo)(() => {
     if (!editor) return translatedBlockTypeOptions[0];
     const filteredOptions2 = blockTypes ? translatedBlockTypeOptions.filter(
       (opt) => blockTypes.includes(opt.type)
@@ -8226,13 +8282,13 @@ function useTurnIntoDropdown(config) {
     );
     return activeOption || filteredOptions2[0];
   }, [editor, blockTypes, translatedBlockTypeOptions]);
-  const filteredOptions = (0, import_react56.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_react56.useCallback)(
+  const handleOpenChange = (0, import_react57.useCallback)(
     (open) => {
       if (!editor || !canToggle3) return;
       setIsOpen(open);
@@ -8240,7 +8296,7 @@ function useTurnIntoDropdown(config) {
     },
     [canToggle3, editor, onOpenChange]
   );
-  (0, import_react56.useEffect)(() => {
+  (0, import_react57.useEffect)(() => {
     if (!editor) return;
     const handleSelectionUpdate = () => {
       setIsVisible(
@@ -8279,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_react57.useMemo)(() => {
+  const filteredOptions = (0, import_react58.useMemo)(() => {
     const allOptions = createBlockTypeOptions(intl.formatMessage);
     if (!blockTypes) return allOptions;
     return allOptions.filter((opt) => blockTypes.includes(opt.type));
@@ -8377,7 +8433,7 @@ function renderBlockTypeButton(option, key) {
       return null;
   }
 }
-var TurnIntoDropdown = (0, import_react57.forwardRef)(
+var TurnIntoDropdown = (0, import_react58.forwardRef)(
   ({
     editor: providedEditor,
     hideWhenUnavailable = false,
@@ -8442,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_react59 = 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_react58 = require("react");
+var import_react59 = require("react");
 var import_react_intl24 = require("react-intl");
 var UNDO_REDO_SHORTCUT_KEYS = {
   undo: "mod+z",
@@ -8489,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_react58.useState)(true);
+  const [isVisible, setIsVisible] = (0, import_react59.useState)(true);
   const canExecute = canExecuteUndoRedoAction(editor, action);
-  (0, import_react58.useEffect)(() => {
+  (0, import_react59.useEffect)(() => {
     if (!editor) return;
     const handleUpdate = () => {
       setIsVisible(shouldShowButton7({ editor, hideWhenUnavailable, action }));
@@ -8502,7 +8558,7 @@ function useUndoRedo(config) {
       editor.off("transaction", handleUpdate);
     };
   }, [editor, hideWhenUnavailable, action]);
-  const handleAction = (0, import_react58.useCallback)(() => {
+  const handleAction = (0, import_react59.useCallback)(() => {
     if (!editor) return false;
     const success = executeUndoRedoAction(editor, action);
     if (success) {
@@ -8540,7 +8596,7 @@ var UndoRedoButton = ({
     hideWhenUnavailable,
     onExecuted
   });
-  const handleClick = (0, import_react59.useCallback)(
+  const handleClick = (0, import_react60.useCallback)(
     (event) => {
       onClick == null ? void 0 : onClick(event);
       if (event.defaultPrevented) return;
@@ -8582,7 +8638,7 @@ var EditorHeader = ({
   const isMobile = (0, import_use_is_mobile3.useIsMobile)();
   const windowSize = useWindowSize();
   const { styles } = useEditorUIContext();
-  const toolbarRef = (0, import_react60.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
@@ -8652,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_react60.useState)(false);
+  const [show, setShow] = (0, import_react61.useState)(false);
   const moreOptionsLabel = intl.formatMessage(messages7.more_options);
-  (0, import_react60.useEffect)(() => {
+  (0, import_react61.useEffect)(() => {
     if (!editor) return;
     const handleSelectionUpdate = () => {
       setShow(
@@ -8767,7 +8823,7 @@ var BasicEditor = ({
     ...options
   });
   const styles = (0, import_theme9.editorBasic)({ variant, bordered });
-  const resolveVariable = (0, import_react62.useCallback)(
+  const resolveVariable = (0, import_react63.useCallback)(
     (name) => variableValues == null ? void 0 : variableValues[name],
     [variableValues]
   );
@@ -8777,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_react61.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,
@@ -8801,10 +8857,10 @@ var EditorContentArea = ({
   hasPagination
 }) => {
   const styles = (0, import_theme9.editorBasic)({ variant });
-  const { editor } = (0, import_react62.useContext)(import_react61.EditorContext);
+  const { editor } = (0, import_react63.useContext)(import_react62.EditorContext);
   const { isDragging } = useUiEditorState(editor);
   useScrollToHash();
-  const handleKeyDown = (0, import_react62.useCallback)(
+  const handleKeyDown = (0, import_react63.useCallback)(
     (e) => {
       if (!(editor == null ? void 0 : editor.isFocused)) return;
       const isMod = e.metaKey || e.ctrlKey;
@@ -8848,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_react61.EditorContent,
+        import_react62.EditorContent,
         {
           editor,
           role: "presentation",
@@ -8912,7 +8968,7 @@ function LoadingSpinner({ text = "Connecting..." }) {
 
 // src/presets/view/index.tsx
 var import_theme10 = require("@kopexa/theme");
-var import_react63 = require("@tiptap/react");
+var import_react64 = require("@tiptap/react");
 var import_jsx_runtime35 = require("react/jsx-runtime");
 function EditorView({
   content,
@@ -8932,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_react63.EditorContext.Provider, { value: { editor }, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: styles.wrapper(), children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-    import_react63.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",
@@ -8945,7 +9001,7 @@ function EditorView({
 // src/presets/view/static.tsx
 var import_theme11 = require("@kopexa/theme");
 var import_html = require("@tiptap/html");
-var import_react64 = require("react");
+var import_react65 = require("react");
 var import_jsx_runtime36 = require("react/jsx-runtime");
 function EditorStaticView({
   content,
@@ -8955,7 +9011,7 @@ function EditorStaticView({
   customExtensions,
   disabled
 }) {
-  const extensions = (0, import_react64.useMemo)(
+  const extensions = (0, import_react65.useMemo)(
     () => getExtensions({
       editable: false,
       customExtensions,
@@ -8963,7 +9019,7 @@ function EditorStaticView({
     }),
     [customExtensions, disabled]
   );
-  const html = (0, import_react64.useMemo)(() => {
+  const html = (0, import_react65.useMemo)(() => {
     const parsed = safeParseContent(content);
     if (!parsed) return "";
     const json = parsed;

package/dist/index.mjs

@@ -3330,6 +3330,60 @@ import {
 import { StarterKit } from "@tiptap/starter-kit";
 import { useEffect as useEffect14, useRef as useRef8, useState as useState13 } from "react";
 
+// src/extensions/custom-color/index.ts
+import { Mark, mergeAttributes as mergeAttributes6 } from "@tiptap/react";
+var CustomColor = 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", mergeAttributes6(HTMLAttributes), 0];
+    }
+    return ["span", mergeAttributes6(HTMLAttributes), 0];
+  }
+});
+
 // src/extensions/link/index.ts
 import TiptapLink from "@tiptap/extension-link";
 import { Plugin, PluginKey as PluginKey3, TextSelection } from "@tiptap/pm/state";
@@ -4191,6 +4245,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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kopexa/tiptap",
-  "version": "17.10.2",
+  "version": "17.11.1",
   "description": "our tiptap components",
   "keywords": [
     "tiptap"
@@ -30,7 +30,7 @@
     "react": ">=19.0.0-rc.0",
     "react-dom": ">=19.0.0-rc.0",
     "yjs": "^13.6.0",
-    "@kopexa/theme": "17.25.2"
+    "@kopexa/theme": "17.26.0"
   },
   "dependencies": {
     "@floating-ui/dom": "^1.7.6",
@@ -67,29 +67,29 @@
     "react-hotkeys-hook": "^5.2.4",
     "react-intl": "^7.1.14",
     "y-indexeddb": "^9.0.12",
-    "@kopexa/button": "17.0.61",
-    "@kopexa/chip": "17.1.58",
-    "@kopexa/dropdown-menu": "17.0.61",
-    "@kopexa/editor-utils": "17.2.2",
+    "@kopexa/button": "17.0.63",
+    "@kopexa/callout": "17.0.63",
+    "@kopexa/dropdown-menu": "17.0.63",
+    "@kopexa/dialog": "17.2.28",
+    "@kopexa/chip": "17.1.60",
+    "@kopexa/editor-utils": "17.2.4",
     "@kopexa/extension-pages": "17.0.45",
-    "@kopexa/dialog": "17.2.26",
-    "@kopexa/callout": "17.0.61",
-    "@kopexa/extension-table": "17.1.13",
-    "@kopexa/extension-code": "17.0.61",
-    "@kopexa/input": "17.0.61",
-    "@kopexa/icons": "17.7.26",
-    "@kopexa/extension-controlref": "17.1.43",
-    "@kopexa/label": "17.0.61",
-    "@kopexa/popover": "17.2.26",
-    "@kopexa/react-utils": "17.1.3",
-    "@kopexa/switch": "17.2.26",
-    "@kopexa/select": "17.2.26",
-    "@kopexa/shared-utils": "17.0.61",
-    "@kopexa/tabs": "17.0.61",
-    "@kopexa/toolbar": "17.2.26",
-    "@kopexa/use-composed-ref": "17.0.61",
-    "@kopexa/separator": "17.0.61",
-    "@kopexa/use-is-mobile": "17.0.61"
+    "@kopexa/extension-code": "17.0.63",
+    "@kopexa/icons": "17.7.28",
+    "@kopexa/extension-table": "17.1.15",
+    "@kopexa/extension-controlref": "17.1.45",
+    "@kopexa/input": "17.0.63",
+    "@kopexa/label": "17.0.63",
+    "@kopexa/popover": "17.2.28",
+    "@kopexa/select": "17.2.28",
+    "@kopexa/switch": "17.2.28",
+    "@kopexa/separator": "17.0.63",
+    "@kopexa/react-utils": "17.1.5",
+    "@kopexa/toolbar": "17.2.28",
+    "@kopexa/shared-utils": "17.0.63",
+    "@kopexa/tabs": "17.0.63",
+    "@kopexa/use-composed-ref": "17.0.63",
+    "@kopexa/use-is-mobile": "17.0.63"
   },
   "clean-package": "../../../clean-package.config.json",
   "module": "dist/index.mjs",