@edifice.io/react 2.6.8-develop.20261008153753 → 2.6.9-chore-tiptap-v3.20261013172459

package/dist/editor.js

@@ -26,6 +26,7 @@ import { EditorToolbar } from "./modules/editor/components/EditorToolbar/EditorT
 import { useActionOptions } from "./modules/editor/hooks/useActionOptions.js";
 import { useCantooEditor } from "./modules/editor/hooks/useCantooEditor.js";
 import { useCommentEditor } from "./modules/editor/hooks/useCommentEditor.js";
+import { useEditorState } from "./modules/editor/hooks/useEditorState.js";
 import { useImageModal } from "./modules/editor/hooks/useImageModal.js";
 import { useImageSelection } from "./modules/editor/hooks/useImageSelection.js";
 import { useLinkToolbar } from "./modules/editor/hooks/useLinkToolbar.js";
@@ -67,6 +68,7 @@ export {
   useCommentEditor,
   useEditor,
   useEditorContext,
+  useEditorState,
   useImageModal,
   useImageSelection,
   useLinkToolbar,

package/dist/modules/editor/components/BubbleMenuEditImage/BubbleMenuEditImage.js

@@ -1,8 +1,10 @@
 import { jsx } from "react/jsx-runtime";
-import { useMemo } from "react";
-import { BubbleMenu } from "@tiptap/react";
+import { useState, useEffect, useCallback, useMemo } from "react";
+import { BubbleMenu } from "../../../../node_modules/.pnpm/@tiptap_react@3.32.0_@floating-ui_dom@1.6.0_@tiptap_core@3.32.0_@tiptap_pm@3.32.0__@tiptap_pm_6inmb43gajy4fnlwtngbwkv7um/node_modules/@tiptap/react/dist/menus/index.js";
 import { useTranslation } from "react-i18next";
+import { useEditorState } from "../../hooks/useEditorState.js";
 import { Toolbar } from "../../../../components/Toolbar/Toolbar.js";
+import { offset } from "@floating-ui/dom";
 import SvgIconImageSizeLarge from "../../../icons/components/IconImageSizeLarge.js";
 import SvgIconImageSizeMedium from "../../../icons/components/IconImageSizeMedium.js";
 import SvgIconImageSizeSmall from "../../../icons/components/IconImageSizeSmall.js";
@@ -15,90 +17,93 @@ const BubbleMenuEditImage = ({
 }) => {
   const {
     t
-  } = useTranslation(), {
-    selection
-  } = editor.view.state, selectedNode = editor.view.state.doc.nodeAt(selection.anchor), handleButtonClick = (buttonSize) => {
-    editor.chain().focus().setAttributes({
+  } = useTranslation(), editorState = useEditorState(editor), [currentSize, setCurrentSize] = useState(null), [currentWidth, setCurrentWidth] = useState(null);
+  useEffect(() => {
+    var _a, _b;
+    const {
+      selection
+    } = editor.view.state, selectedNode = editor.view.state.doc.nodeAt(selection.anchor);
+    setCurrentSize(((_a = selectedNode == null ? void 0 : selectedNode.attrs) == null ? void 0 : _a.size) || null), setCurrentWidth(((_b = selectedNode == null ? void 0 : selectedNode.attrs) == null ? void 0 : _b.width) || null);
+  }, [editor, editorState]);
+  const handleButtonClick = useCallback((buttonSize) => {
+    editor.chain().focus().updateAttributes("custom-image", {
       width: buttonSize.width,
       height: buttonSize.height,
       size: buttonSize.size
     }).run();
-  }, ImageSizeItems = useMemo(() => {
-    var _a, _b, _c, _d, _e, _f;
-    return [{
-      type: "button",
-      name: "edit",
-      props: {
-        size: "lg",
-        color: "secondary",
-        leftIcon: /* @__PURE__ */ jsx(SvgIconWand, {}),
-        "aria-label": t("tiptap.tooltip.bubblemenu.image.edit"),
-        children: t("tiptap.bubblemenu.edit"),
-        onClick: onEditImage
-      },
-      tooltip: {
-        message: t("tiptap.tooltip.bubblemenu.image.edit"),
-        position: "top"
-      }
-    }, {
-      type: "divider",
-      name: "div-4"
-    }, {
-      type: "icon",
-      name: "small",
-      props: {
-        icon: /* @__PURE__ */ jsx(SvgIconImageSizeSmall, {}),
-        "aria-label": t("tiptap.tooltip.bubblemenu.image.small"),
-        color: "tertiary",
-        className: ((_a = selectedNode == null ? void 0 : selectedNode.attrs) == null ? void 0 : _a.size) === "small" && ((_b = selectedNode == null ? void 0 : selectedNode.attrs) == null ? void 0 : _b.width) === 250 ? "is-selected" : "",
-        onClick: () => handleButtonClick({
-          size: "small",
-          width: 250,
-          height: "auto"
-        })
-      },
-      tooltip: {
-        message: t("tiptap.tooltip.bubblemenu.image.small"),
-        position: "top"
-      }
-    }, {
-      type: "icon",
-      name: "medium",
-      props: {
-        icon: /* @__PURE__ */ jsx(SvgIconImageSizeMedium, {}),
-        "aria-label": t("tiptap.tooltip.bubblemenu.image.medium"),
-        color: "tertiary",
-        className: ((_c = selectedNode == null ? void 0 : selectedNode.attrs) == null ? void 0 : _c.size) === "medium" && ((_d = selectedNode == null ? void 0 : selectedNode.attrs) == null ? void 0 : _d.width) === 350 ? "is-selected" : "",
-        onClick: () => handleButtonClick({
-          size: "medium",
-          width: 350,
-          height: "auto"
-        })
-      },
-      tooltip: {
-        message: t("tiptap.tooltip.bubblemenu.image.medium"),
-        position: "top"
-      }
-    }, {
-      type: "icon",
-      name: "large",
-      props: {
-        icon: /* @__PURE__ */ jsx(SvgIconImageSizeLarge, {}),
-        "aria-label": t("tiptap.tooltip.bubblemenu.image.big"),
-        color: "tertiary",
-        className: ((_e = selectedNode == null ? void 0 : selectedNode.attrs) == null ? void 0 : _e.size) === "large" && ((_f = selectedNode == null ? void 0 : selectedNode.attrs) == null ? void 0 : _f.width) === 500 ? "is-selected" : "",
-        onClick: () => handleButtonClick({
-          size: "large",
-          width: 500,
-          height: "auto"
-        })
-      },
-      tooltip: {
-        message: t("tiptap.tooltip.bubblemenu.image.big"),
-        position: "top"
-      }
-    }];
-  }, [t, selectedNode]), tippyOptions = useMemo(() => {
+  }, [editor]), ImageSizeItems = useMemo(() => [{
+    type: "button",
+    name: "edit",
+    props: {
+      size: "lg",
+      color: "secondary",
+      leftIcon: /* @__PURE__ */ jsx(SvgIconWand, {}),
+      "aria-label": t("tiptap.tooltip.bubblemenu.image.edit"),
+      children: t("tiptap.bubblemenu.edit"),
+      onClick: onEditImage
+    },
+    tooltip: {
+      message: t("tiptap.tooltip.bubblemenu.image.edit"),
+      position: "top"
+    }
+  }, {
+    type: "divider",
+    name: "div-4"
+  }, {
+    type: "icon",
+    name: "small",
+    props: {
+      icon: /* @__PURE__ */ jsx(SvgIconImageSizeSmall, {}),
+      "aria-label": t("tiptap.tooltip.bubblemenu.image.small"),
+      color: "tertiary",
+      className: currentSize === "small" && currentWidth === 250 ? "is-selected" : "",
+      onClick: () => handleButtonClick({
+        size: "small",
+        width: 250,
+        height: "auto"
+      })
+    },
+    tooltip: {
+      message: t("tiptap.tooltip.bubblemenu.image.small"),
+      position: "top"
+    }
+  }, {
+    type: "icon",
+    name: "medium",
+    props: {
+      icon: /* @__PURE__ */ jsx(SvgIconImageSizeMedium, {}),
+      "aria-label": t("tiptap.tooltip.bubblemenu.image.medium"),
+      color: "tertiary",
+      className: currentSize === "medium" && currentWidth === 350 ? "is-selected" : "",
+      onClick: () => handleButtonClick({
+        size: "medium",
+        width: 350,
+        height: "auto"
+      })
+    },
+    tooltip: {
+      message: t("tiptap.tooltip.bubblemenu.image.medium"),
+      position: "top"
+    }
+  }, {
+    type: "icon",
+    name: "large",
+    props: {
+      icon: /* @__PURE__ */ jsx(SvgIconImageSizeLarge, {}),
+      "aria-label": t("tiptap.tooltip.bubblemenu.image.big"),
+      color: "tertiary",
+      className: currentSize === "large" && currentWidth === 500 ? "is-selected" : "",
+      onClick: () => handleButtonClick({
+        size: "large",
+        width: 500,
+        height: "auto"
+      })
+    },
+    tooltip: {
+      message: t("tiptap.tooltip.bubblemenu.image.big"),
+      position: "top"
+    }
+  }], [t, currentSize, currentWidth, onEditImage, handleButtonClick]), reference = useMemo(() => {
     function adjustRect(rect) {
       let yOffset = 0;
       if (window.visualViewport) {
@@ -108,12 +113,7 @@ const BubbleMenuEditImage = ({
       return new DOMRect(rect.x, rect.y - yOffset, rect.width, rect.height);
     }
     return {
-      placement: "bottom-start",
-      offset: [0, 0],
-      zIndex: 999,
-      duration: 100,
-      // Try to get the bounding rect of the table.
-      getReferenceClientRect: () => {
+      getBoundingClientRect: () => {
         const parentDiv = editor != null && editor.isActive("custom-image") ? editor.state.selection.$anchor : null;
         if (parentDiv) {
           const parentDomNode = editor == null ? void 0 : editor.view.nodeDOM(parentDiv.pos);
@@ -125,10 +125,17 @@ const BubbleMenuEditImage = ({
         return new DOMRect(0, 0, 100, 100);
       }
     };
-  }, [editor]);
+  }, [editor]), floatingOptions = useMemo(() => ({
+    placement: "bottom-start",
+    middleware: [offset({
+      mainAxis: 0,
+      crossAxis: 0
+    })],
+    strategy: "absolute"
+  }), []);
   return /* @__PURE__ */ jsx(BubbleMenu, { className: openEditImage ? "d-none" : "", shouldShow: ({
     editor: editor2
-  }) => editor2.isActive("custom-image") && !openEditImage, editor, tippyOptions, children: editable && /* @__PURE__ */ jsx(Toolbar, { className: "p-8", items: ImageSizeItems }) });
+  }) => editor2.isActive("custom-image") && !openEditImage, editor, options: floatingOptions, getReferencedVirtualElement: () => reference, children: editable && /* @__PURE__ */ jsx(Toolbar, { className: "p-8", items: ImageSizeItems }, `toolbar-${currentSize}-${currentWidth}`) });
 };
 export {
   BubbleMenuEditImage as default

package/dist/modules/editor/components/BubbleMenuEditInformationPane/BubbleMenuEditInformationPane.js

@@ -1,7 +1,9 @@
 import { jsx } from "react/jsx-runtime";
-import { useMemo } from "react";
-import { BubbleMenu } from "@tiptap/react";
+import { useState, useEffect, useMemo } from "react";
+import { BubbleMenu } from "../../../../node_modules/.pnpm/@tiptap_react@3.32.0_@floating-ui_dom@1.6.0_@tiptap_core@3.32.0_@tiptap_pm@3.32.0__@tiptap_pm_6inmb43gajy4fnlwtngbwkv7um/node_modules/@tiptap/react/dist/menus/index.js";
+import { offset } from "@floating-ui/dom";
 import { useTranslation } from "react-i18next";
+import { useEditorState } from "../../hooks/useEditorState.js";
 import { Toolbar } from "../../../../components/Toolbar/Toolbar.js";
 import SvgIconAlertTriangle from "../../../icons/components/IconAlertTriangle.js";
 import SvgIconDelete from "../../../icons/components/IconDelete.js";
@@ -14,98 +16,105 @@ const BubbleMenuEditInformationPane = ({
 }) => {
   const {
     t
-  } = useTranslation(), {
-    selection
-  } = editor.view.state, selectedNode = selection.$from.node(1), InformationPaneTypeItems = useMemo(() => {
-    var _a, _b, _c, _d;
-    return [{
-      type: "icon",
-      name: "info",
-      props: {
-        size: "lg",
-        icon: /* @__PURE__ */ jsx(SvgIconInfoCircle, {}),
-        "aria-label": t("tiptap.tooltip.bubblemenu.information.pane.info"),
-        className: ((_a = selectedNode == null ? void 0 : selectedNode.attrs) == null ? void 0 : _a.type) === "info" ? "is-selected" : "",
-        onClick: () => editor.chain().focus().updateAttributes("information-pane", {
-          type: "info"
-        }).run()
-      },
-      tooltip: {
-        message: t("tiptap.tooltip.bubblemenu.information.pane.info"),
-        position: "top"
+  } = useTranslation(), editorState = useEditorState(editor), [currentType, setCurrentType] = useState(null);
+  useEffect(() => {
+    var _a;
+    const {
+      $anchor
+    } = editor.view.state.selection;
+    let selectedNode = null;
+    for (let depth = $anchor.depth; depth >= 0; depth--) {
+      const node = $anchor.node(depth);
+      if (node.type.name === "information-pane") {
+        selectedNode = node;
+        break;
       }
-    }, {
-      type: "icon",
-      name: "success",
-      props: {
-        size: "lg",
-        icon: /* @__PURE__ */ jsx(SvgIconSuccessOutline, {}),
-        "aria-label": t("tiptap.tooltip.bubblemenu.information.pane.success"),
-        className: ((_b = selectedNode == null ? void 0 : selectedNode.attrs) == null ? void 0 : _b.type) === "success" ? "is-selected" : "",
-        onClick: () => editor.chain().focus().updateAttributes("information-pane", {
-          type: "success"
-        }).run()
-      },
-      tooltip: {
-        message: t("tiptap.tooltip.bubblemenu.information.pane.success"),
-        position: "top"
-      }
-    }, {
-      type: "icon",
-      name: "warning",
-      props: {
-        size: "lg",
-        icon: /* @__PURE__ */ jsx(SvgIconAlertTriangle, {}),
-        "aria-label": t("tiptap.tooltip.bubblemenu.information.pane.warning"),
-        className: ((_c = selectedNode == null ? void 0 : selectedNode.attrs) == null ? void 0 : _c.type) === "warning" ? "is-selected" : "",
-        onClick: () => editor.chain().focus().updateAttributes("information-pane", {
-          type: "warning"
-        }).run()
-      },
-      tooltip: {
-        message: t("tiptap.tooltip.bubblemenu.information.pane.warning"),
-        position: "top"
-      }
-    }, {
-      type: "icon",
-      name: "question",
-      props: {
-        size: "lg",
-        icon: /* @__PURE__ */ jsx(SvgIconQuestion, {}),
-        "aria-label": t("tiptap.tooltip.bubblemenu.information.pane.question"),
-        className: ((_d = selectedNode == null ? void 0 : selectedNode.attrs) == null ? void 0 : _d.type) === "question" ? "is-selected" : "",
-        onClick: () => editor.chain().focus().updateAttributes("information-pane", {
-          type: "question"
-        }).run()
-      },
-      tooltip: {
-        message: t("tiptap.tooltip.bubblemenu.information.pane.question"),
-        position: "top"
-      }
-    }, {
-      type: "divider",
-      name: "div-4"
-    }, {
-      type: "button",
-      name: "delete",
-      props: {
-        size: "lg",
-        leftIcon: /* @__PURE__ */ jsx(SvgIconDelete, {}),
-        "aria-label": t("tiptap.bubblemenu.delete"),
-        children: t("tiptap.bubblemenu.delete"),
-        onClick: () => editor.chain().focus().deleteNode("information-pane").run()
-      },
-      tooltip: {
-        message: t("tiptap.bubblemenu.delete"),
-        position: "top"
-      }
-    }];
-  }, [t, selectedNode]), tippyOptions = useMemo(() => ({
-    placement: "bottom",
-    offset: [0, 0],
-    zIndex: 999,
-    duration: 100,
-    getReferenceClientRect: () => {
+    }
+    setCurrentType(((_a = selectedNode == null ? void 0 : selectedNode.attrs) == null ? void 0 : _a.type) || null);
+  }, [editor, editorState]);
+  const InformationPaneTypeItems = useMemo(() => [{
+    type: "icon",
+    name: "info",
+    props: {
+      size: "lg",
+      icon: /* @__PURE__ */ jsx(SvgIconInfoCircle, {}),
+      "aria-label": t("tiptap.tooltip.bubblemenu.information.pane.info"),
+      className: currentType === "info" ? "is-selected" : "",
+      onClick: () => editor.chain().focus().updateAttributes("information-pane", {
+        type: "info"
+      }).run()
+    },
+    tooltip: {
+      message: t("tiptap.tooltip.bubblemenu.information.pane.info"),
+      position: "top"
+    }
+  }, {
+    type: "icon",
+    name: "success",
+    props: {
+      size: "lg",
+      icon: /* @__PURE__ */ jsx(SvgIconSuccessOutline, {}),
+      "aria-label": t("tiptap.tooltip.bubblemenu.information.pane.success"),
+      className: currentType === "success" ? "is-selected" : "",
+      onClick: () => editor.chain().focus().updateAttributes("information-pane", {
+        type: "success"
+      }).run()
+    },
+    tooltip: {
+      message: t("tiptap.tooltip.bubblemenu.information.pane.success"),
+      position: "top"
+    }
+  }, {
+    type: "icon",
+    name: "warning",
+    props: {
+      size: "lg",
+      icon: /* @__PURE__ */ jsx(SvgIconAlertTriangle, {}),
+      "aria-label": t("tiptap.tooltip.bubblemenu.information.pane.warning"),
+      className: currentType === "warning" ? "is-selected" : "",
+      onClick: () => editor.chain().focus().updateAttributes("information-pane", {
+        type: "warning"
+      }).run()
+    },
+    tooltip: {
+      message: t("tiptap.tooltip.bubblemenu.information.pane.warning"),
+      position: "top"
+    }
+  }, {
+    type: "icon",
+    name: "question",
+    props: {
+      size: "lg",
+      icon: /* @__PURE__ */ jsx(SvgIconQuestion, {}),
+      "aria-label": t("tiptap.tooltip.bubblemenu.information.pane.question"),
+      className: currentType === "question" ? "is-selected" : "",
+      onClick: () => editor.chain().focus().updateAttributes("information-pane", {
+        type: "question"
+      }).run()
+    },
+    tooltip: {
+      message: t("tiptap.tooltip.bubblemenu.information.pane.question"),
+      position: "top"
+    }
+  }, {
+    type: "divider",
+    name: "div-4"
+  }, {
+    type: "button",
+    name: "delete",
+    props: {
+      size: "lg",
+      leftIcon: /* @__PURE__ */ jsx(SvgIconDelete, {}),
+      "aria-label": t("tiptap.bubblemenu.delete"),
+      children: t("tiptap.bubblemenu.delete"),
+      onClick: () => editor.chain().focus().deleteNode("information-pane").run()
+    },
+    tooltip: {
+      message: t("tiptap.bubblemenu.delete"),
+      position: "top"
+    }
+  }], [t, editor, currentType]), reference = useMemo(() => ({
+    getBoundingClientRect: () => {
       const {
         state
       } = editor, {
@@ -126,10 +135,17 @@ const BubbleMenuEditInformationPane = ({
       }
       return new DOMRect(0, 0, 0, 0);
     }
-  }), [editor]);
+  }), [editor]), floatingOptions = useMemo(() => ({
+    placement: "bottom",
+    middleware: [offset({
+      mainAxis: 0,
+      crossAxis: 0
+    })],
+    strategy: "absolute"
+  }), []);
   return /* @__PURE__ */ jsx(BubbleMenu, { shouldShow: ({
     editor: editor2
-  }) => editor2.isActive("information-pane"), editor, tippyOptions, children: editable && /* @__PURE__ */ jsx(Toolbar, { className: "p-8", items: InformationPaneTypeItems }) });
+  }) => editor2.isActive("information-pane"), editor, options: floatingOptions, getReferencedVirtualElement: () => reference, children: editable && /* @__PURE__ */ jsx(Toolbar, { className: "p-8", items: InformationPaneTypeItems }) });
 };
 export {
   BubbleMenuEditInformationPane as default

package/dist/modules/editor/components/EditorToolbar/EditorToolbar.js

@@ -29,6 +29,7 @@ import { EditorToolbarTextSize } from "./EditorToolbar.TextSize.js";
 import { EditorToolbarTypography } from "./EditorToolbar.Typography.js";
 import { EditorToolbarCantoo } from "./EditorToolbar.Cantoo.js";
 import { useEditorContext } from "../../hooks/useEditorContext.js";
+import { useEditorState } from "../../hooks/useEditorState.js";
 import { useActionOptions } from "../../hooks/useActionOptions.js";
 import { useSpeechRecognition } from "../../hooks/useSpeechRecognition.js";
 import { Toolbar } from "../../../../components/Toolbar/Toolbar.js";
@@ -42,7 +43,7 @@ const EditorToolbar = ({
   } = useTranslation(), {
     id,
     editor
-  } = useEditorContext(), [plusOptions, listOptions, alignmentOptions] = useActionOptions(editor, toggleMathsModal, mediaLibraryRef), {
+  } = useEditorContext(), editorState = useEditorState(editor), [plusOptions, listOptions, alignmentOptions] = useActionOptions(editor, toggleMathsModal, mediaLibraryRef), {
     isAvailable: canRecognizeSpeech,
     isActive: speechRecognition,
     toggle: toggleSpeechRecognition
@@ -72,7 +73,8 @@ const EditorToolbar = ({
         },
         name: "undo",
         tooltip: t("editor.option.undo"),
-        visibility: showIf(hasExtension("history", editor))
+        // v3's StarterKit renamed the undo/redo extension from 'history' to 'undoRedo'.
+        visibility: showIf(hasExtension("undoRedo", editor))
       },
       //--------------- REDO ---------------//
       {
@@ -85,7 +87,7 @@ const EditorToolbar = ({
         },
         name: "redo",
         tooltip: t("editor.option.redo"),
-        visibility: showIf(hasExtension("history", editor))
+        visibility: showIf(hasExtension("undoRedo", editor))
       },
       //-------------------------------------//
       {
@@ -348,7 +350,7 @@ const EditorToolbar = ({
         visibility: showIf(hasExtension("textAlign", editor))
       }
     ];
-  }, [alignmentOptions, canRecognizeSpeech, editor, listOptions, mediaLibraryRef, plusOptions, speechRecognition, t, toggleSpeechRecognition]);
+  }, [alignmentOptions, canRecognizeSpeech, editor, editorState, listOptions, mediaLibraryRef, plusOptions, speechRecognition, t, toggleSpeechRecognition]);
   return /* @__PURE__ */ jsx("div", { className: "sticky-top z-1 editor-toolbar rounded-3", children: /* @__PURE__ */ jsx(Toolbar, { items: toolbarItems, variant: "no-shadow", className: "rounded-top-3", isBlock: !0, align: "left", ariaControls: id }) });
 };
 export {

package/dist/modules/editor/components/Toolbar/LinkToolbar.FloatingOptions.js

@@ -0,0 +1,12 @@
+import { offset } from "@floating-ui/dom";
+const floatingOptions = {
+  placement: "bottom",
+  middleware: [offset({
+    mainAxis: 10,
+    crossAxis: 0
+  })],
+  strategy: "absolute"
+};
+export {
+  floatingOptions
+};

package/dist/modules/editor/components/Toolbar/LinkToolbar.js

@@ -1,11 +1,12 @@
 import { jsx, Fragment } from "react/jsx-runtime";
 import { useState, useMemo, useEffect } from "react";
-import { FloatingMenu } from "@tiptap/react";
+import { BubbleMenu } from "../../../../node_modules/.pnpm/@tiptap_react@3.32.0_@floating-ui_dom@1.6.0_@tiptap_core@3.32.0_@tiptap_pm@3.32.0__@tiptap_pm_6inmb43gajy4fnlwtngbwkv7um/node_modules/@tiptap/react/dist/menus/index.js";
 import { useTranslation } from "react-i18next";
+import { useEditorState } from "../../hooks/useEditorState.js";
 import SvgIconEdit from "../../../icons/components/IconEdit.js";
 import SvgIconExternalLink from "../../../icons/components/IconExternalLink.js";
 import SvgIconUnlink from "../../../icons/components/IconUnlink.js";
-import { tippyOptions } from "./LinkToolbar.TippyOptions.js";
+import { floatingOptions } from "./LinkToolbar.FloatingOptions.js";
 import { Toolbar } from "../../../../components/Toolbar/Toolbar.js";
 const LinkToolbar = ({
   editor,
@@ -15,7 +16,7 @@ const LinkToolbar = ({
 }) => {
   const {
     t
-  } = useTranslation(), [linkAttrs, setLinkAttrs] = useState(), LinkToolbarItems = useMemo(() => [{
+  } = useTranslation(), editorState = useEditorState(editor), [linkAttrs, setLinkAttrs] = useState(), LinkToolbarItems = useMemo(() => [{
     type: "icon",
     name: "edit",
     props: {
@@ -54,7 +55,7 @@ const LinkToolbar = ({
   }], [onEdit, onOpen, onUnlink, t, linkAttrs]);
   return useEffect(() => {
     editor != null && editor.isActive("linker") ? setLinkAttrs(editor.getAttributes("linker")) : editor != null && editor.isActive("hyperlink") ? setLinkAttrs(editor.getAttributes("hyperlink")) : setLinkAttrs(void 0);
-  }, [editor == null ? void 0 : editor.state]), /* @__PURE__ */ jsx(Fragment, { children: editor && /* @__PURE__ */ jsx(FloatingMenu, { editor, tippyOptions, shouldShow: () => (editor == null ? void 0 : editor.isEditable) && ((editor == null ? void 0 : editor.isActive("linker")) || (editor == null ? void 0 : editor.isActive("hyperlink"))) || !1, children: /* @__PURE__ */ jsx(Toolbar, { className: "p-4", items: LinkToolbarItems }) }) });
+  }, [editor, editorState]), /* @__PURE__ */ jsx(Fragment, { children: editor && /* @__PURE__ */ jsx(BubbleMenu, { editor, options: floatingOptions, shouldShow: () => (editor == null ? void 0 : editor.isEditable) && ((editor == null ? void 0 : editor.isActive("linker")) || (editor == null ? void 0 : editor.isActive("hyperlink"))) || !1, children: /* @__PURE__ */ jsx(Toolbar, { className: "p-4", items: LinkToolbarItems }) }) });
 };
 export {
   LinkToolbar as default

package/dist/modules/editor/components/Toolbar/TableToolbar.js

@@ -1,6 +1,8 @@
 import { jsx, Fragment } from "react/jsx-runtime";
 import { useState, useMemo, useEffect } from "react";
-import { findParentNodeClosestToPos, FloatingMenu } from "@tiptap/react";
+import { findParentNodeClosestToPos } from "@tiptap/react";
+import { FloatingMenu } from "../../../../node_modules/.pnpm/@tiptap_react@3.32.0_@floating-ui_dom@1.6.0_@tiptap_core@3.32.0_@tiptap_pm@3.32.0__@tiptap_pm_6inmb43gajy4fnlwtngbwkv7um/node_modules/@tiptap/react/dist/menus/index.js";
+import { offset } from "@floating-ui/dom";
 import { useTranslation } from "react-i18next";
 import SvgIconMergeCells from "../../../icons/components/IconMergeCells.js";
 import SvgIconSplitCells from "../../../icons/components/IconSplitCells.js";
@@ -13,7 +15,7 @@ const TableToolbar = ({
 }) => {
   const {
     t
-  } = useTranslation(), [isSpan, setSpan] = useState(void 0), tippyOptions = useMemo(() => {
+  } = useTranslation(), [isSpan, setSpan] = useState(void 0), floatingOptions = useMemo(() => {
     function adjustRect(rect) {
       let yOffset = 0;
       if (window.visualViewport) {
@@ -24,8 +26,11 @@ const TableToolbar = ({
     }
     return {
       placement: "bottom",
-      offset: [0, 0],
-      zIndex: 999,
+      middleware: [offset({
+        mainAxis: 0,
+        crossAxis: 0
+      })],
+      strategy: "absolute",
       // popperOptions: {modifiers: [ /*see popper v2 modifiers*/ ]},
       // Try to get the bounding rect of the table.
       getReferenceClientRect: () => {
@@ -46,7 +51,7 @@ const TableToolbar = ({
       newSpan !== isSpan && setSpan(newSpan);
     } else
       isSpan && setSpan(void 0);
-  }, [editor, editor == null ? void 0 : editor.state, isSpan]), /* @__PURE__ */ jsx(Fragment, { children: editor && /* @__PURE__ */ jsx(FloatingMenu, { editor, tippyOptions, shouldShow: () => (editor == null ? void 0 : editor.isEditable) && editor.isActive("table") || !1, children: /* @__PURE__ */ jsx(Toolbar, { className: "p-4", items: [{
+  }, [editor, editor == null ? void 0 : editor.state, isSpan]), /* @__PURE__ */ jsx(Fragment, { children: editor && /* @__PURE__ */ jsx(FloatingMenu, { editor, options: floatingOptions, shouldShow: () => (editor == null ? void 0 : editor.isEditable) && editor.isActive("table") || !1, children: /* @__PURE__ */ jsx(Toolbar, { className: "p-4", items: [{
     type: "dropdown",
     name: "bkg-col",
     // isEnable:

package/dist/modules/editor/hooks/index.d.ts

@@ -1,6 +1,7 @@
 export * from './useActionOptions';
 export * from './useCommentEditor';
 export * from './useEditorContext';
+export * from './useEditorState';
 export * from './useImageModal';
 export * from './useImageSelection';
 export * from './useLinkToolbar';

package/dist/modules/editor/hooks/useCommentEditor.d.ts

@@ -6,7 +6,7 @@ import { Content, HTMLContent } from '@tiptap/react';
  * @param content default rich content
  */
 export declare const useCommentEditor: (editable: boolean, content: Content, maxLength?: number) => {
-    editor: import('@tiptap/core').Editor | null;
+    editor: import('@tiptap/core').Editor;
     commentLength: number;
     getComment: () => HTMLContent;
     resetComment: () => void;