@haklex/rich-plugin-floating-toolbar 0.0.62 → 0.0.63

package/dist/FloatingToolbarPlugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FloatingToolbarPlugin.d.ts","sourceRoot":"","sources":["../src/FloatingToolbarPlugin.tsx"],"names":[],"mappings":"AAuCA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AAkMzC,wBAAgB,qBAAqB,IAAI,YAAY,GAAG,IAAI,CAghB3D"}
+{"version":3,"file":"FloatingToolbarPlugin.d.ts","sourceRoot":"","sources":["../src/FloatingToolbarPlugin.tsx"],"names":[],"mappings":"AA2CA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AA0MzC,wBAAgB,qBAAqB,IAAI,YAAY,GAAG,IAAI,CA0hB3D"}

package/dist/index.mjs

@@ -1,7 +1,7 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { $createRubyNode, $isRubyNode } from "@haklex/rich-editor";
 import { ColorPicker } from "@haklex/rich-editor-ui";
-import { usePortalTheme, vars } from "@haklex/rich-style-token";
+import { usePortalTheme, usePortalContainer, vars } from "@haklex/rich-style-token";
 import { TOGGLE_LINK_COMMAND, $isLinkNode, $isAutoLinkNode } from "@lexical/link";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { $patchStyleText, $getSelectionStyleValueForProperty } from "@lexical/selection";
@@ -96,19 +96,24 @@ function getSelectionState(selection) {
     fontColor: $getSelectionStyleValueForProperty(selection, "color", "")
   };
 }
-function computePosition(nativeSelection, toolbar2) {
+function computePosition(nativeSelection, toolbar2, container) {
   const range = nativeSelection.getRangeAt(0);
   const rect = range.getBoundingClientRect();
   if (rect.width === 0 && rect.height === 0) return null;
   const toolbarWidth = toolbar2.offsetWidth;
   const toolbarHeight = toolbar2.offsetHeight;
-  const rawLeft = rect.left + rect.width / 2 - toolbarWidth / 2;
+  const isBody = container === document.body;
+  const containerRect = isBody ? void 0 : container.getBoundingClientRect();
+  const offsetX = containerRect?.left ?? 0;
+  const offsetY = containerRect?.top ?? 0;
+  const availableWidth = containerRect?.width ?? window.innerWidth;
+  const rawLeft = rect.left - offsetX + rect.width / 2 - toolbarWidth / 2;
   const clampedLeft = Math.max(
     8,
-    Math.min(rawLeft, window.innerWidth - toolbarWidth - 8)
+    Math.min(rawLeft, availableWidth - toolbarWidth - 8)
   );
   return {
-    top: rect.top - toolbarHeight - 10,
+    top: rect.top - offsetY - toolbarHeight - 10,
     left: clampedLeft
   };
 }
@@ -159,6 +164,7 @@ const THEME_VAR_NAMES = Array.from(collectThemeVarNames(vars, /* @__PURE__ */ ne
 function FloatingToolbarPlugin() {
   const [editor] = useLexicalComposerContext();
   const { className: portalClassName } = usePortalTheme();
+  const portalContainer = usePortalContainer();
   const toolbarRef = useRef(null);
   const [visible, setVisible] = useState(false);
   const [state, setState] = useState(INITIAL_STATE);
@@ -222,7 +228,7 @@ function FloatingToolbarPlugin() {
         setVisible(false);
         return;
       }
-      const pos = computePosition(nativeSelection, toolbar2);
+      const pos = computePosition(nativeSelection, toolbar2, portalContainer);
       if (!pos) {
         setVisible(false);
         return;
@@ -417,13 +423,18 @@ function FloatingToolbarPlugin() {
       const rubyDom = editor.getElementByKey(rubyEdit.nodeKey);
       if (!rubyDom) return;
       const rect = rubyDom.getBoundingClientRect();
+      const isBody = portalContainer === document.body;
+      const containerRect = isBody ? void 0 : portalContainer.getBoundingClientRect();
+      const oX = containerRect?.left ?? 0;
+      const oY = containerRect?.top ?? 0;
+      const availW = containerRect?.width ?? window.innerWidth;
       const editorWidth = editorEl.offsetWidth;
-      const rawLeft = rect.left + rect.width / 2 - editorWidth / 2;
+      const rawLeft = rect.left - oX + rect.width / 2 - editorWidth / 2;
       const clampedLeft = Math.max(
         8,
-        Math.min(rawLeft, window.innerWidth - editorWidth - 8)
+        Math.min(rawLeft, availW - editorWidth - 8)
       );
-      editorEl.style.top = `${rect.bottom + 8}px`;
+      editorEl.style.top = `${rect.bottom - oY + 8}px`;
       editorEl.style.left = `${clampedLeft}px`;
     };
     requestAnimationFrame(positionEditor);
@@ -547,7 +558,7 @@ function FloatingToolbarPlugin() {
           ]
         }
       ),
-      document.body
+      portalContainer
     ),
     rubyEdit && createPortal(
       /* @__PURE__ */ jsxs(
@@ -631,7 +642,7 @@ function FloatingToolbarPlugin() {
           ]
         }
       ),
-      document.body
+      portalContainer
     )
   ] });
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@haklex/rich-plugin-floating-toolbar",
   "type": "module",
-  "version": "0.0.62",
+  "version": "0.0.63",
   "description": "Floating toolbar plugin",
   "license": "MIT",
   "exports": {
@@ -25,9 +25,9 @@
     "react-dom": ">=19"
   },
   "dependencies": {
-    "@haklex/rich-editor": "0.0.62",
-    "@haklex/rich-editor-ui": "0.0.62",
-    "@haklex/rich-style-token": "0.0.62"
+    "@haklex/rich-editor": "0.0.63",
+    "@haklex/rich-editor-ui": "0.0.63",
+    "@haklex/rich-style-token": "0.0.63"
   },
   "devDependencies": {
     "@lexical/link": "^0.41.0",