@haklex/rich-plugin-floating-toolbar 0.0.103 → 0.0.105

package/dist/FloatingToolbarPlugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FloatingToolbarPlugin.d.ts","sourceRoot":"","sources":["../src/FloatingToolbarPlugin.tsx"],"names":[],"mappings":"AAkCA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAgMrD,MAAM,WAAW,0BAA0B;IACzC,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,qBAAqB,CAAC,EACpC,OAAO,GACR,GAAE,0BAA+B,GAAG,YAAY,GAAG,IAAI,CA2gBvD"}
+{"version":3,"file":"FloatingToolbarPlugin.d.ts","sourceRoot":"","sources":["../src/FloatingToolbarPlugin.tsx"],"names":[],"mappings":"AAmCA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AA8LrD,MAAM,WAAW,0BAA0B;IACzC,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,qBAAqB,CAAC,EACpC,OAAO,GACR,GAAE,0BAA+B,GAAG,YAAY,GAAG,IAAI,CAwhBvD"}

package/dist/index.mjs

@@ -1,4 +1,5 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useTextSelectionSnapshot, getDOMRectFromTextSelection } from "@haklex/rich-editor";
 import { $toggleSpoilerSelection, $selectionTouchesSpoiler } from "@haklex/rich-editor/commands";
 import { $createRubyNode, $isRubyNode } from "@haklex/rich-editor/nodes";
 import { ColorPicker } from "@haklex/rich-editor-ui";
@@ -99,9 +100,7 @@ function getSelectionState(selection) {
     fontColor: $getSelectionStyleValueForProperty(selection, "color", "")
   };
 }
-function computePosition(nativeSelection, toolbar2, container) {
-  const range = nativeSelection.getRangeAt(0);
-  const rect = range.getBoundingClientRect();
+function computePosition(rect, toolbar2, container) {
   if (rect.width === 0 && rect.height === 0) return null;
   const toolbarWidth = toolbar2.offsetWidth;
   const toolbarHeight = toolbar2.offsetHeight;
@@ -162,6 +161,7 @@ function FloatingToolbarPlugin({
   const [editor] = useLexicalComposerContext();
   const { className: portalClassName } = usePortalTheme();
   const portalContainer = usePortalContainer();
+  const selectionSnapshot = useTextSelectionSnapshot();
   const toolbarRef = useRef(null);
   const [visible, setVisible] = useState(false);
   const [state, setState] = useState(INITIAL_STATE);
@@ -213,17 +213,27 @@ function FloatingToolbarPlugin({
     };
   }, [editor, updateToolbar]);
   useEffect(() => {
-    if (!visible || !toolbarRef.current) return;
+    if (!selectionSnapshot) {
+      setVisible(false);
+    }
+  }, [selectionSnapshot]);
+  useEffect(() => {
+    if (!visible || !toolbarRef.current || !selectionSnapshot) return;
     const positionToolbar = () => {
       const toolbar2 = toolbarRef.current;
       if (!toolbar2) return;
       applyThemeVars(toolbar2);
-      const nativeSelection = window.getSelection();
-      if (!nativeSelection || nativeSelection.rangeCount === 0) {
+      const rootElement2 = editor.getRootElement();
+      if (!rootElement2) {
+        setVisible(false);
+        return;
+      }
+      const rect = getDOMRectFromTextSelection(rootElement2, selectionSnapshot);
+      if (!rect) {
         setVisible(false);
         return;
       }
-      const pos = computePosition(nativeSelection, toolbar2, portalContainer);
+      const pos = computePosition(rect, toolbar2, portalContainer);
       if (!pos) {
         setVisible(false);
         return;
@@ -247,7 +257,7 @@ function FloatingToolbarPlugin({
     const onScroll = () => requestAnimationFrame(positionToolbar);
     scrollParent.addEventListener("scroll", onScroll, { passive: true });
     return () => scrollParent.removeEventListener("scroll", onScroll);
-  }, [applyThemeVars, editor, visible, state]);
+  }, [applyThemeVars, editor, portalContainer, selectionSnapshot, state, visible]);
   const handleFormat = useCallback(
     (format) => {
       editor.dispatchCommand(FORMAT_TEXT_COMMAND, format);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haklex/rich-plugin-floating-toolbar",
-  "version": "0.0.103",
+  "version": "0.0.105",
   "description": "Floating toolbar plugin",
   "repository": {
     "type": "git",
@@ -21,9 +21,9 @@
     "dist"
   ],
   "dependencies": {
-    "@haklex/rich-editor": "0.0.103",
-    "@haklex/rich-editor-ui": "0.0.103",
-    "@haklex/rich-style-token": "0.0.103"
+    "@haklex/rich-editor": "0.0.105",
+    "@haklex/rich-editor-ui": "0.0.105",
+    "@haklex/rich-style-token": "0.0.105"
   },
   "devDependencies": {
     "@lexical/link": "^0.42.0",