@kopexa/tiptap 17.12.6 → 17.12.7

package/dist/index.js

@@ -5074,7 +5074,8 @@ var ColorHighlightButton = ({
   const buttonStyle = (0, import_react37.useMemo)(
     () => ({
       ...style,
-      "--highlight-color": highlightColor
+      "--highlight-color": highlightColor,
+      backgroundColor: highlightColor
     }),
     [highlightColor, style]
   );
@@ -5130,6 +5131,32 @@ var import_popover = require("@kopexa/popover");
 var import_toolbar2 = require("@kopexa/toolbar");
 var import_react38 = require("react");
 var import_jsx_runtime17 = require("react/jsx-runtime");
+function useResolvedHighlightColors(editor, isOpen) {
+  var _a;
+  const [resolved, setResolved] = (0, import_react38.useState)();
+  (0, import_react38.useEffect)(() => {
+    var _a2;
+    if (!isOpen || !((_a2 = editor == null ? void 0 : editor.view) == null ? void 0 : _a2.dom)) return;
+    const editorEl = editor.view.dom;
+    const computed = getComputedStyle(editorEl);
+    const colors = HIGHLIGHT_COLORS.filter(
+      (c) => c.value !== "var(--tt-bg-color)"
+    ).map((color) => {
+      const resolveVar = (v) => {
+        const match = v.match(/^var\((.+)\)$/);
+        if (!match) return v;
+        return computed.getPropertyValue(match[1]).trim() || v;
+      };
+      return {
+        ...color,
+        value: resolveVar(color.value),
+        border: resolveVar(color.border)
+      };
+    });
+    setResolved(colors);
+  }, [isOpen, (_a = editor == null ? void 0 : editor.view) == null ? void 0 : _a.dom]);
+  return resolved;
+}
 var ColorHighlightPopoverButton = ({
   className,
   children,
@@ -5157,7 +5184,8 @@ function ColorHighlightPopoverContent({
     "var(--tt-color-highlight-red)",
     "var(--tt-color-highlight-purple)",
     "var(--tt-color-highlight-yellow)"
-  ])
+  ]),
+  onApplied
 }) {
   const { handleRemoveHighlight } = useColorHighlight({ editor });
   const containerRef = (0, import_react38.useRef)(null);
@@ -5190,6 +5218,7 @@ function ColorHighlightPopoverContent({
           {
             editor,
             highlightColor: color.value,
+            onApplied,
             "aria-label": `${color.label} highlight color`,
             tabIndex: index === selectedIndex ? 0 : -1,
             "data-highlighted": selectedIndex === index
@@ -5202,7 +5231,10 @@ function ColorHighlightPopoverContent({
     /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "tiptap-button-group", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       import_button8.IconButton,
       {
-        onClick: handleRemoveHighlight,
+        onClick: () => {
+          handleRemoveHighlight();
+          onApplied == null ? void 0 : onApplied();
+        },
         "aria-label": "Remove highlight",
         tabIndex: selectedIndex === colors.length ? 0 : -1,
         type: "button",
@@ -5217,23 +5249,25 @@ function ColorHighlightPopoverContent({
 }
 function ColorHighlightPopover({
   editor: providedEditor,
-  colors = pickHighlightColorsByValue([
-    "var(--tt-color-highlight-green)",
-    "var(--tt-color-highlight-blue)",
-    "var(--tt-color-highlight-red)",
-    "var(--tt-color-highlight-purple)",
-    "var(--tt-color-highlight-yellow)"
-  ]),
+  colors,
   hideWhenUnavailable = false,
   onApplied,
   ...props
 }) {
   const { editor } = (0, import_editor_utils7.useTiptapEditor)(providedEditor);
   const [isOpen, setIsOpen] = (0, import_react38.useState)(false);
+  const resolvedColors = useResolvedHighlightColors(editor, isOpen);
+  const handleApplied = (0, import_react38.useCallback)(
+    (result) => {
+      setIsOpen(false);
+      onApplied == null ? void 0 : onApplied(result);
+    },
+    [onApplied]
+  );
   const { isVisible, canColorHighlight: canColorHighlight2, isActive, label } = useColorHighlight({
     editor,
     hideWhenUnavailable,
-    onApplied
+    onApplied: handleApplied
   });
   if (!isVisible) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_popover.Popover.Root, { open: isOpen, onOpenChange: setIsOpen, spacing: "dense", children: [
@@ -5254,7 +5288,14 @@ function ColorHighlightPopover({
         )
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_popover.Popover.Content, { "aria-label": "Highlight colors", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ColorHighlightPopoverContent, { editor, colors }) })
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_popover.Popover.Content, { "aria-label": "Highlight colors", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      ColorHighlightPopoverContent,
+      {
+        editor,
+        colors: colors != null ? colors : resolvedColors,
+        onApplied: () => setIsOpen(false)
+      }
+    ) })
   ] });
 }
 
@@ -5876,7 +5917,7 @@ var MarkButton = ({
 
 // src/ui/bubble-menu/index.tsx
 var import_jsx_runtime20 = require("react/jsx-runtime");
-function useResolvedHighlightColors(editor) {
+function useResolvedHighlightColors2(editor) {
   var _a;
   if (!((_a = editor == null ? void 0 : editor.view) == null ? void 0 : _a.dom)) return void 0;
   const editorEl = editor.view.dom;
@@ -5897,7 +5938,7 @@ function useResolvedHighlightColors(editor) {
   );
 }
 function BubbleMenu({ editor }) {
-  const resolvedColors = useResolvedHighlightColors(editor);
+  const resolvedColors = useResolvedHighlightColors2(editor);
   if (!editor) {
     return null;
   }

package/dist/index.mjs

@@ -4405,7 +4405,7 @@ import {
   EditorContext
 } from "@tiptap/react";
 import {
-  useCallback as useCallback39,
+  useCallback as useCallback40,
   useContext as useContext4
 } from "react";
 import { useIntl as useIntl19 } from "react-intl";
@@ -5072,7 +5072,8 @@ var ColorHighlightButton = ({
   const buttonStyle = useMemo13(
     () => ({
       ...style,
-      "--highlight-color": highlightColor
+      "--highlight-color": highlightColor,
+      backgroundColor: highlightColor
     }),
     [highlightColor, style]
   );
@@ -5126,8 +5127,34 @@ import { useTiptapEditor as useTiptapEditor4 } from "@kopexa/editor-utils";
 import { BanIcon, HighlighterIcon as HighlighterIcon2 } from "@kopexa/icons";
 import { Popover } from "@kopexa/popover";
 import { ToolbarSeparator } from "@kopexa/toolbar";
-import { useMemo as useMemo14, useRef as useRef9, useState as useState15 } from "react";
+import { useCallback as useCallback16, useEffect as useEffect16, useMemo as useMemo14, useRef as useRef9, useState as useState15 } from "react";
 import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
+function useResolvedHighlightColors(editor, isOpen) {
+  var _a;
+  const [resolved, setResolved] = useState15();
+  useEffect16(() => {
+    var _a2;
+    if (!isOpen || !((_a2 = editor == null ? void 0 : editor.view) == null ? void 0 : _a2.dom)) return;
+    const editorEl = editor.view.dom;
+    const computed = getComputedStyle(editorEl);
+    const colors = HIGHLIGHT_COLORS.filter(
+      (c) => c.value !== "var(--tt-bg-color)"
+    ).map((color) => {
+      const resolveVar = (v) => {
+        const match = v.match(/^var\((.+)\)$/);
+        if (!match) return v;
+        return computed.getPropertyValue(match[1]).trim() || v;
+      };
+      return {
+        ...color,
+        value: resolveVar(color.value),
+        border: resolveVar(color.border)
+      };
+    });
+    setResolved(colors);
+  }, [isOpen, (_a = editor == null ? void 0 : editor.view) == null ? void 0 : _a.dom]);
+  return resolved;
+}
 var ColorHighlightPopoverButton = ({
   className,
   children,
@@ -5155,7 +5182,8 @@ function ColorHighlightPopoverContent({
     "var(--tt-color-highlight-red)",
     "var(--tt-color-highlight-purple)",
     "var(--tt-color-highlight-yellow)"
-  ])
+  ]),
+  onApplied
 }) {
   const { handleRemoveHighlight } = useColorHighlight({ editor });
   const containerRef = useRef9(null);
@@ -5188,6 +5216,7 @@ function ColorHighlightPopoverContent({
           {
             editor,
             highlightColor: color.value,
+            onApplied,
             "aria-label": `${color.label} highlight color`,
             tabIndex: index === selectedIndex ? 0 : -1,
             "data-highlighted": selectedIndex === index
@@ -5200,7 +5229,10 @@ function ColorHighlightPopoverContent({
     /* @__PURE__ */ jsx17("div", { className: "tiptap-button-group", children: /* @__PURE__ */ jsx17(
       IconButton6,
       {
-        onClick: handleRemoveHighlight,
+        onClick: () => {
+          handleRemoveHighlight();
+          onApplied == null ? void 0 : onApplied();
+        },
         "aria-label": "Remove highlight",
         tabIndex: selectedIndex === colors.length ? 0 : -1,
         type: "button",
@@ -5215,23 +5247,25 @@ function ColorHighlightPopoverContent({
 }
 function ColorHighlightPopover({
   editor: providedEditor,
-  colors = pickHighlightColorsByValue([
-    "var(--tt-color-highlight-green)",
-    "var(--tt-color-highlight-blue)",
-    "var(--tt-color-highlight-red)",
-    "var(--tt-color-highlight-purple)",
-    "var(--tt-color-highlight-yellow)"
-  ]),
+  colors,
   hideWhenUnavailable = false,
   onApplied,
   ...props
 }) {
   const { editor } = useTiptapEditor4(providedEditor);
   const [isOpen, setIsOpen] = useState15(false);
+  const resolvedColors = useResolvedHighlightColors(editor, isOpen);
+  const handleApplied = useCallback16(
+    (result) => {
+      setIsOpen(false);
+      onApplied == null ? void 0 : onApplied(result);
+    },
+    [onApplied]
+  );
   const { isVisible, canColorHighlight: canColorHighlight2, isActive, label } = useColorHighlight({
     editor,
     hideWhenUnavailable,
-    onApplied
+    onApplied: handleApplied
   });
   if (!isVisible) return null;
   return /* @__PURE__ */ jsxs13(Popover.Root, { open: isOpen, onOpenChange: setIsOpen, spacing: "dense", children: [
@@ -5252,7 +5286,14 @@ function ColorHighlightPopover({
         )
       }
     ),
-    /* @__PURE__ */ jsx17(Popover.Content, { "aria-label": "Highlight colors", children: /* @__PURE__ */ jsx17(ColorHighlightPopoverContent, { editor, colors }) })
+    /* @__PURE__ */ jsx17(Popover.Content, { "aria-label": "Highlight colors", children: /* @__PURE__ */ jsx17(
+      ColorHighlightPopoverContent,
+      {
+        editor,
+        colors: colors != null ? colors : resolvedColors,
+        onApplied: () => setIsOpen(false)
+      }
+    ) })
   ] });
 }
 
@@ -5269,7 +5310,7 @@ import {
 import { Input as Input3 } from "@kopexa/input";
 import { Popover as Popover2 } from "@kopexa/popover";
 import { ToolbarButton as ToolbarButton2 } from "@kopexa/toolbar";
-import { useCallback as useCallback17, useEffect as useEffect17, useState as useState17 } from "react";
+import { useCallback as useCallback18, useEffect as useEffect18, useState as useState17 } from "react";
 
 // src/ui/link-popover/use-link-popover.ts
 import { isMarkInSchema as isMarkInSchema2, useTiptapEditor as useTiptapEditor5 } from "@kopexa/editor-utils";
@@ -5526,7 +5567,7 @@ var LinkMain = ({
   onSave
 }) => {
   const [isEditing, setIsEditing] = useState17(!isActive || !url);
-  useEffect17(() => {
+  useEffect18(() => {
     setIsEditing(!isActive || !url);
   }, [isActive, url]);
   const handleKeyDown = (event) => {
@@ -5658,18 +5699,18 @@ function LinkPopover({
     hideWhenUnavailable,
     onSetLink
   });
-  const handleOnOpenChange = useCallback17(
+  const handleOnOpenChange = useCallback18(
     (nextIsOpen) => {
       setIsOpen(nextIsOpen);
       onOpenChange == null ? void 0 : onOpenChange(nextIsOpen);
     },
     [onOpenChange]
   );
-  const handleSetLink = useCallback17(() => {
+  const handleSetLink = useCallback18(() => {
     setLink();
     setIsOpen(false);
   }, [setLink]);
-  const handleClick = useCallback17(
+  const handleClick = useCallback18(
     (event) => {
       onClick == null ? void 0 : onClick(event);
       if (event.defaultPrevented) return;
@@ -5677,7 +5718,7 @@ function LinkPopover({
     },
     [onClick, isOpen]
   );
-  useEffect17(() => {
+  useEffect18(() => {
     if (autoOpenOnLinkActive && isActive) {
       setIsOpen(true);
     }
@@ -5744,7 +5785,7 @@ import {
 } from "@kopexa/icons";
 import { ToolbarButton as ToolbarButton3 } from "@kopexa/toolbar";
 import { isNodeSelection as isNodeSelection2 } from "@tiptap/react";
-import { useCallback as useCallback18, useMemo as useMemo15 } from "react";
+import { useCallback as useCallback19, useMemo as useMemo15 } from "react";
 import { useIntl as useIntl10 } from "react-intl";
 import { jsx as jsx19 } from "react/jsx-runtime";
 var markIcons = {
@@ -5847,7 +5888,7 @@ var MarkButton = ({
     shortcutKey,
     formattedName
   } = useMarkState(editor, type, disabled);
-  const handleClick = useCallback18(
+  const handleClick = useCallback19(
     (e) => {
       onClick == null ? void 0 : onClick(e);
       if (!e.defaultPrevented && !isDisabled && editor) {
@@ -5892,7 +5933,7 @@ var MarkButton = ({
 
 // src/ui/bubble-menu/index.tsx
 import { jsx as jsx20, jsxs as jsxs15 } from "react/jsx-runtime";
-function useResolvedHighlightColors(editor) {
+function useResolvedHighlightColors2(editor) {
   var _a;
   if (!((_a = editor == null ? void 0 : editor.view) == null ? void 0 : _a.dom)) return void 0;
   const editorEl = editor.view.dom;
@@ -5913,7 +5954,7 @@ function useResolvedHighlightColors(editor) {
   );
 }
 function BubbleMenu({ editor }) {
-  const resolvedColors = useResolvedHighlightColors(editor);
+  const resolvedColors = useResolvedHighlightColors2(editor);
   if (!editor) {
     return null;
   }
@@ -6063,39 +6104,39 @@ import { IconButton as IconButton8 } from "@kopexa/button";
 import { EditIcon as EditIcon3, ExternalLinkIcon as ExternalLinkIcon2, TrashIcon as TrashIcon4 } from "@kopexa/icons";
 import { Input as Input4 } from "@kopexa/input";
 import { BubbleMenu as TiptapBubbleMenu2 } from "@tiptap/react/menus";
-import { useCallback as useCallback20, useEffect as useEffect20, useState as useState19 } from "react";
+import { useCallback as useCallback21, useEffect as useEffect21, useState as useState19 } from "react";
 import { useIntl as useIntl11 } from "react-intl";
 import { Fragment as Fragment4, jsx as jsx21, jsxs as jsxs16 } from "react/jsx-runtime";
 function LinkBubble({ editor }) {
   const intl = useIntl11();
   const [isEditing, setIsEditing] = useState19(false);
   const [url, setUrl] = useState19("");
-  const getCurrentUrl = useCallback20(() => {
+  const getCurrentUrl = useCallback21(() => {
     if (!editor) return "";
     const attrs = editor.getAttributes("link");
     return attrs.href || "";
   }, [editor]);
-  useEffect20(() => {
+  useEffect21(() => {
     const isLinkActive2 = editor == null ? void 0 : editor.isActive("link");
     if (isLinkActive2) {
       setUrl(getCurrentUrl());
       setIsEditing(false);
     }
   }, [editor, getCurrentUrl]);
-  const handleOpenLink = useCallback20(() => {
+  const handleOpenLink = useCallback21(() => {
     const href = getCurrentUrl();
     if (href) {
       window.open(href, "_blank", "noopener,noreferrer");
     }
   }, [getCurrentUrl]);
-  const handleRemoveLink = useCallback20(() => {
+  const handleRemoveLink = useCallback21(() => {
     editor == null ? void 0 : editor.chain().focus().unsetLink().run();
   }, [editor]);
-  const handleEdit = useCallback20(() => {
+  const handleEdit = useCallback21(() => {
     setUrl(getCurrentUrl());
     setIsEditing(true);
   }, [getCurrentUrl]);
-  const handleSave = useCallback20(() => {
+  const handleSave = useCallback21(() => {
     if (url) {
       editor == null ? void 0 : editor.chain().focus().extendMarkRange("link").setLink({ href: url }).run();
     } else {
@@ -6103,7 +6144,7 @@ function LinkBubble({ editor }) {
     }
     setIsEditing(false);
   }, [editor, url]);
-  const handleKeyDown = useCallback20(
+  const handleKeyDown = useCallback21(
     (e) => {
       if (e.key === "Enter") {
         e.preventDefault();
@@ -6256,7 +6297,7 @@ import {
 } from "@kopexa/editor-utils";
 import { TableIcon } from "@kopexa/icons";
 import { isNodeSelection as isNodeSelection4 } from "@tiptap/react";
-import { useCallback as useCallback21, useEffect as useEffect21, useState as useState20 } from "react";
+import { useCallback as useCallback22, useEffect as useEffect22, useState as useState20 } from "react";
 import { useIntl as useIntl12 } from "react-intl";
 function canToggle(editor) {
   if (!editor || !editor.isEditable) return false;
@@ -6305,7 +6346,7 @@ function useTableBlock(config) {
   const [isVisible, setIsVisible] = useState20(true);
   const canToggleState = canToggle(editor);
   const isActive = (editor == null ? void 0 : editor.isActive("table")) || false;
-  useEffect21(() => {
+  useEffect22(() => {
     if (!editor) return;
     const handleSelectionUpdate = () => {
       setIsVisible(shouldShowButton2({ editor, hideWhenUnavailable }));
@@ -6316,7 +6357,7 @@ function useTableBlock(config) {
       editor.off("selectionUpdate", handleSelectionUpdate);
     };
   }, [editor, hideWhenUnavailable]);
-  const handleToggle = useCallback21(() => {
+  const handleToggle = useCallback22(() => {
     if (!editor) return false;
     const success = toggleTable(editor);
     if (success) {
@@ -6883,7 +6924,7 @@ import {
   ToolbarSeparator as ToolbarSeparator3
 } from "@kopexa/toolbar";
 import { useIsMobile as useIsMobile3 } from "@kopexa/use-is-mobile";
-import { useEffect as useEffect31, useRef as useRef12, useState as useState30 } from "react";
+import { useEffect as useEffect32, useRef as useRef12, useState as useState30 } from "react";
 import { useIntl as useIntl18 } from "react-intl";
 
 // src/hooks/use-cursor-visibility.ts
@@ -6994,14 +7035,14 @@ import { DropdownMenu } from "@kopexa/dropdown-menu";
 import { isNodeInSchema as isNodeInSchema4, useTiptapEditor as useTiptapEditor11 } from "@kopexa/editor-utils";
 import { ChevronDownIcon, ListIcon as ListIcon4 } from "@kopexa/icons";
 import { isNodeSelection as isNodeSelection6 } from "@tiptap/react";
-import { useCallback as useCallback25, useMemo as useMemo18, useState as useState23 } from "react";
+import { useCallback as useCallback26, useMemo as useMemo18, useState as useState23 } from "react";
 
 // src/ui/list-button/index.tsx
 import { Button as Button7 } from "@kopexa/button";
 import { isNodeInSchema as isNodeInSchema3, useTiptapEditor as useTiptapEditor10 } from "@kopexa/editor-utils";
 import { ListIcon as ListIcon3, ListOrderedIcon as ListOrderedIcon2, ListTodoIcon as ListTodoIcon2 } from "@kopexa/icons";
 import { isNodeSelection as isNodeSelection5 } from "@tiptap/react";
-import { useCallback as useCallback24, useMemo as useMemo17 } from "react";
+import { useCallback as useCallback25, useMemo as useMemo17 } from "react";
 import { jsx as jsx23 } from "react/jsx-runtime";
 var listOptions = [
   {
@@ -7111,7 +7152,7 @@ var ListButton = ({
     type
   );
   const Icon = (listOption == null ? void 0 : listOption.icon) || ListIcon3;
-  const handleClick = useCallback24(
+  const handleClick = useCallback25(
     (e) => {
       onClick == null ? void 0 : onClick(e);
       if (!e.defaultPrevented && editor) {
@@ -7191,7 +7232,7 @@ function useListDropdownState(editor, availableTypes) {
   );
   const canToggleAny = canToggleAnyList(editor, availableTypes);
   const isAnyActive = isAnyListActive(editor, availableTypes);
-  const handleOpenChange = useCallback25(
+  const handleOpenChange = useCallback26(
     (open, callback) => {
       setIsOpen(open);
       callback == null ? void 0 : callback(open);
@@ -7209,7 +7250,7 @@ function useListDropdownState(editor, availableTypes) {
   };
 }
 function useActiveListIcon(editor, filteredLists) {
-  return useCallback25(() => {
+  return useCallback26(() => {
     const activeOption = filteredLists.find(
       (option) => isListActive(editor, option.type)
     );
@@ -7242,7 +7283,7 @@ function ListDropdownMenu({
       canToggleAny
     });
   }, [editor, types, hideWhenUnavailable, listInSchema, canToggleAny]);
-  const handleOnOpenChange = useCallback25(
+  const handleOnOpenChange = useCallback26(
     (open) => handleOpenChange(open, onOpenChange),
     [handleOpenChange, onOpenChange]
   );
@@ -7283,7 +7324,7 @@ function ListDropdownMenu({
 // src/ui/table-button/index.tsx
 import { useTiptapEditor as useTiptapEditor12 } from "@kopexa/editor-utils";
 import { ToolbarButton as ToolbarButton4 } from "@kopexa/toolbar";
-import { useCallback as useCallback26 } from "react";
+import { useCallback as useCallback27 } from "react";
 import { Fragment as Fragment5, jsx as jsx25, jsxs as jsxs19 } from "react/jsx-runtime";
 var TableButton = ({
   editor: providedEditor,
@@ -7308,7 +7349,7 @@ var TableButton = ({
     hideWhenUnavailable,
     onToggled
   });
-  const handleClick = useCallback26(
+  const handleClick = useCallback27(
     (event) => {
       onClick == null ? void 0 : onClick(event);
       if (event.defaultPrevented) return;
@@ -7346,7 +7387,7 @@ var TableButton = ({
 // src/ui/text-align-button/text-align-button.tsx
 import { IconButton as IconButton9 } from "@kopexa/button";
 import { useTiptapEditor as useTiptapEditor14 } from "@kopexa/editor-utils";
-import { useCallback as useCallback28 } from "react";
+import { useCallback as useCallback29 } from "react";
 
 // src/ui/text-align-button/use-text-align.ts
 import {
@@ -7360,7 +7401,7 @@ import {
   AlignLeftIcon,
   AlignRightIcon
 } from "@kopexa/icons";
-import { useCallback as useCallback27, useEffect as useEffect25, useState as useState24 } from "react";
+import { useCallback as useCallback28, useEffect as useEffect26, useState as useState24 } from "react";
 import { useIntl as useIntl14 } from "react-intl";
 var TEXT_ALIGN_SHORTCUT_KEYS = {
   left: "mod+shift+l",
@@ -7423,7 +7464,7 @@ function useTextAlign(config) {
   const [isVisible, setIsVisible] = useState24(true);
   const canAlign = canSetTextAlign(editor, align);
   const isActive = isTextAlignActive(editor, align);
-  useEffect25(() => {
+  useEffect26(() => {
     if (!editor) return;
     const handleSelectionUpdate = () => {
       setIsVisible(shouldShowButton3({ editor, align, hideWhenUnavailable }));
@@ -7434,7 +7475,7 @@ function useTextAlign(config) {
       editor.off("selectionUpdate", handleSelectionUpdate);
     };
   }, [editor, hideWhenUnavailable, align]);
-  const handleTextAlign = useCallback27(() => {
+  const handleTextAlign = useCallback28(() => {
     if (!editor) return false;
     const success = setTextAlign(editor, align);
     if (success) {
@@ -7481,7 +7522,7 @@ var TextAlignButton = ({
     hideWhenUnavailable,
     onAligned
   });
-  const handleClick = useCallback28(
+  const handleClick = useCallback29(
     (e) => {
       onClick == null ? void 0 : onClick(e);
       if (e.defaultPrevented) return;
@@ -7711,7 +7752,7 @@ var BlockquoteButton = ({
 import { useTiptapEditor as useTiptapEditor18 } from "@kopexa/editor-utils";
 import { CodeblockIcon as CodeblockIcon2 } from "@kopexa/icons";
 import { ToolbarButton as ToolbarButton6 } from "@kopexa/toolbar";
-import { useCallback as useCallback32 } from "react";
+import { useCallback as useCallback33 } from "react";
 
 // src/ui/codeblock-button/use-code-block.ts
 import {
@@ -7851,7 +7892,7 @@ var CodeBlockButton = ({
     hideWhenUnavailable,
     onToggled
   });
-  const handleClick = useCallback32(
+  const handleClick = useCallback33(
     (event) => {
       onClick == null ? void 0 : onClick(event);
       if (event.defaultPrevented) return;
@@ -8048,7 +8089,7 @@ import { Button as Button10 } from "@kopexa/button";
 import { Chip } from "@kopexa/chip";
 import { useTiptapEditor as useTiptapEditor21 } from "@kopexa/editor-utils";
 import { parseShortcutKeys } from "@kopexa/shared-utils";
-import { useCallback as useCallback35 } from "react";
+import { useCallback as useCallback36 } from "react";
 
 // src/ui/text-button/use-text.ts
 import {
@@ -8062,7 +8103,7 @@ import {
 import { TypeIcon as TypeIcon2 } from "@kopexa/icons";
 import { useIsMobile as useIsMobile2 } from "@kopexa/use-is-mobile";
 import { NodeSelection as NodeSelection4, TextSelection as TextSelection4 } from "@tiptap/pm/state";
-import { useCallback as useCallback34, useEffect as useEffect28, useState as useState27 } from "react";
+import { useCallback as useCallback35, useEffect as useEffect29, useState as useState27 } from "react";
 import { useHotkeys as useHotkeys2 } from "react-hotkeys-hook";
 var TEXT_SHORTCUT_KEY = "mod+alt+0";
 function canToggleText(editor, turnInto = true) {
@@ -8158,7 +8199,7 @@ function useText(config) {
   const [isVisible, setIsVisible] = useState27(true);
   const canToggle3 = canToggleText(editor);
   const isActive = isParagraphActive(editor);
-  useEffect28(() => {
+  useEffect29(() => {
     if (!editor) return;
     const handleSelectionUpdate = () => {
       setIsVisible(shouldShowButton6({ editor, hideWhenUnavailable }));
@@ -8169,7 +8210,7 @@ function useText(config) {
       editor.off("selectionUpdate", handleSelectionUpdate);
     };
   }, [editor, hideWhenUnavailable]);
-  const handleToggle = useCallback34(() => {
+  const handleToggle = useCallback35(() => {
     if (!editor) return false;
     const success = toggleParagraph(editor);
     if (success) {
@@ -8232,7 +8273,7 @@ var TextButton = ({
     hideWhenUnavailable,
     onToggled
   });
-  const handleClick = useCallback35(
+  const handleClick = useCallback36(
     (event) => {
       onClick == null ? void 0 : onClick(event);
       if (event.defaultPrevented) return;
@@ -8273,7 +8314,7 @@ var TextButton = ({
 import { useTiptapEditor as useTiptapEditor22 } from "@kopexa/editor-utils";
 import { ChevronDownIcon as ChevronDownIcon2 } from "@kopexa/icons";
 import { NodeSelection as NodeSelection5 } from "@tiptap/pm/state";
-import { useCallback as useCallback36, useEffect as useEffect29, useMemo as useMemo20, useState as useState28 } from "react";
+import { useCallback as useCallback37, useEffect as useEffect30, useMemo as useMemo20, useState as useState28 } from "react";
 import { useIntl as useIntl15 } from "react-intl";
 var TURN_INTO_BLOCKS = [
   "paragraph",
@@ -8394,7 +8435,7 @@ function useTurnIntoDropdown(config) {
       (opt) => blockTypes.includes(opt.type)
     );
   }, [blockTypes, translatedBlockTypeOptions]);
-  const handleOpenChange = useCallback36(
+  const handleOpenChange = useCallback37(
     (open) => {
       if (!editor || !canToggle3) return;
       setIsOpen(open);
@@ -8402,7 +8443,7 @@ function useTurnIntoDropdown(config) {
     },
     [canToggle3, editor, onOpenChange]
   );
-  useEffect29(() => {
+  useEffect30(() => {
     if (!editor) return;
     const handleSelectionUpdate = () => {
       setIsVisible(
@@ -8604,12 +8645,12 @@ TurnIntoDropdown.displayName = "TurnIntoDropdown";
 // src/ui/undo-redo-button/undo-redo-button.tsx
 import { useTiptapEditor as useTiptapEditor25 } from "@kopexa/editor-utils";
 import { ToolbarButton as ToolbarButton7 } from "@kopexa/toolbar";
-import { useCallback as useCallback38 } from "react";
+import { useCallback as useCallback39 } from "react";
 
 // src/ui/undo-redo-button/use-undo-redo.ts
 import { isNodeTypeSelected as isNodeTypeSelected7, useTiptapEditor as useTiptapEditor24 } from "@kopexa/editor-utils";
 import { RedoIcon, UndoIcon } from "@kopexa/icons";
-import { useCallback as useCallback37, useEffect as useEffect30, useState as useState29 } from "react";
+import { useCallback as useCallback38, useEffect as useEffect31, useState as useState29 } from "react";
 import { useIntl as useIntl17 } from "react-intl";
 var UNDO_REDO_SHORTCUT_KEYS = {
   undo: "mod+z",
@@ -8653,7 +8694,7 @@ function useUndoRedo(config) {
   const { editor } = useTiptapEditor24(providedEditor);
   const [isVisible, setIsVisible] = useState29(true);
   const canExecute = canExecuteUndoRedoAction(editor, action);
-  useEffect30(() => {
+  useEffect31(() => {
     if (!editor) return;
     const handleUpdate = () => {
       setIsVisible(shouldShowButton7({ editor, hideWhenUnavailable, action }));
@@ -8664,7 +8705,7 @@ function useUndoRedo(config) {
       editor.off("transaction", handleUpdate);
     };
   }, [editor, hideWhenUnavailable, action]);
-  const handleAction = useCallback37(() => {
+  const handleAction = useCallback38(() => {
     if (!editor) return false;
     const success = executeUndoRedoAction(editor, action);
     if (success) {
@@ -8702,7 +8743,7 @@ var UndoRedoButton = ({
     hideWhenUnavailable,
     onExecuted
   });
-  const handleClick = useCallback38(
+  const handleClick = useCallback39(
     (event) => {
       onClick == null ? void 0 : onClick(event);
       if (event.defaultPrevented) return;
@@ -8816,7 +8857,7 @@ function MoreOptions({
   const { editor } = useTiptapEditor26(providedEditor);
   const [show, setShow] = useState30(false);
   const moreOptionsLabel = intl.formatMessage(messages7.more_options);
-  useEffect31(() => {
+  useEffect32(() => {
     if (!editor) return;
     const handleSelectionUpdate = () => {
       setShow(
@@ -8929,7 +8970,7 @@ var BasicEditor = ({
     ...options
   });
   const styles = editorBasic({ variant, bordered });
-  const resolveVariable = useCallback39(
+  const resolveVariable = useCallback40(
     (name) => variableValues == null ? void 0 : variableValues[name],
     [variableValues]
   );
@@ -8966,7 +9007,7 @@ var EditorContentArea = ({
   const { editor } = useContext4(EditorContext);
   const { isDragging } = useUiEditorState(editor);
   useScrollToHash();
-  const handleKeyDown = useCallback39(
+  const handleKeyDown = useCallback40(
     (e) => {
       if (!(editor == null ? void 0 : editor.isFocused)) return;
       const isMod = e.metaKey || e.ctrlKey;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kopexa/tiptap",
-  "version": "17.12.6",
+  "version": "17.12.7",
   "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.27.0"
+    "@kopexa/theme": "17.27.1"
   },
   "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.74",
-    "@kopexa/callout": "17.0.74",
-    "@kopexa/dropdown-menu": "17.0.74",
-    "@kopexa/editor-utils": "17.2.15",
-    "@kopexa/extension-code": "17.0.74",
-    "@kopexa/sight": "17.13.2",
-    "@kopexa/extension-controlref": "17.1.56",
-    "@kopexa/chip": "17.1.71",
-    "@kopexa/extension-pages": "17.1.5",
-    "@kopexa/extension-table": "17.1.26",
-    "@kopexa/icons": "17.10.3",
-    "@kopexa/input": "17.0.74",
-    "@kopexa/popover": "17.2.39",
-    "@kopexa/label": "17.0.74",
-    "@kopexa/select": "17.2.39",
-    "@kopexa/react-utils": "17.1.16",
-    "@kopexa/separator": "17.0.74",
-    "@kopexa/switch": "17.2.39",
-    "@kopexa/shared-utils": "17.0.74",
-    "@kopexa/use-is-mobile": "17.0.74",
-    "@kopexa/tabs": "17.0.74",
-    "@kopexa/toolbar": "17.2.39",
-    "@kopexa/use-composed-ref": "17.0.74"
+    "@kopexa/button": "17.0.75",
+    "@kopexa/chip": "17.1.72",
+    "@kopexa/dropdown-menu": "17.0.75",
+    "@kopexa/callout": "17.0.75",
+    "@kopexa/sight": "17.13.3",
+    "@kopexa/editor-utils": "17.2.16",
+    "@kopexa/extension-code": "17.0.75",
+    "@kopexa/extension-pages": "17.1.6",
+    "@kopexa/extension-controlref": "17.1.57",
+    "@kopexa/extension-table": "17.1.27",
+    "@kopexa/icons": "17.10.4",
+    "@kopexa/input": "17.0.75",
+    "@kopexa/label": "17.0.75",
+    "@kopexa/popover": "17.2.40",
+    "@kopexa/select": "17.2.40",
+    "@kopexa/switch": "17.2.40",
+    "@kopexa/react-utils": "17.1.17",
+    "@kopexa/separator": "17.0.75",
+    "@kopexa/tabs": "17.0.75",
+    "@kopexa/toolbar": "17.2.40",
+    "@kopexa/shared-utils": "17.0.75",
+    "@kopexa/use-composed-ref": "17.0.75",
+    "@kopexa/use-is-mobile": "17.0.75"
   },
   "clean-package": "../../../clean-package.config.json",
   "module": "dist/index.mjs",