@haklex/rich-plugin-floating-toolbar 0.0.35 → 0.0.37

package/dist/FloatingToolbarPlugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FloatingToolbarPlugin.d.ts","sourceRoot":"","sources":["../src/FloatingToolbarPlugin.tsx"],"names":[],"mappings":"AA2BA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AAyIzC,wBAAgB,qBAAqB,IAAI,YAAY,GAAG,IAAI,CAoO3D"}
+{"version":3,"file":"FloatingToolbarPlugin.d.ts","sourceRoot":"","sources":["../src/FloatingToolbarPlugin.tsx"],"names":[],"mappings":"AA2BA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AA0IzC,wBAAgB,qBAAqB,IAAI,YAAY,GAAG,IAAI,CAuP3D"}

package/dist/index.mjs

@@ -50,13 +50,13 @@ function computePosition(nativeSelection, toolbar2) {
   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 + window.scrollX;
+  const rawLeft = rect.left + rect.width / 2 - toolbarWidth / 2;
   const clampedLeft = Math.max(
     8,
-    Math.min(rawLeft, window.innerWidth - toolbarWidth - 8 + window.scrollX)
+    Math.min(rawLeft, window.innerWidth - toolbarWidth - 8)
   );
   return {
-    top: rect.top - toolbarHeight - 10 + window.scrollY,
+    top: rect.top - toolbarHeight - 10,
     left: clampedLeft
   };
 }
@@ -174,7 +174,22 @@ function FloatingToolbarPlugin() {
       toolbar2.style.left = `${pos.left}px`;
     };
     requestAnimationFrame(positionToolbar);
-  }, [applyThemeVars, visible, state]);
+    const rootElement = editor.getRootElement();
+    if (!rootElement) return;
+    let scrollParent = window;
+    let el = rootElement.parentElement;
+    while (el) {
+      const { overflowY } = window.getComputedStyle(el);
+      if (overflowY === "auto" || overflowY === "scroll") {
+        scrollParent = el;
+        break;
+      }
+      el = el.parentElement;
+    }
+    const onScroll = () => requestAnimationFrame(positionToolbar);
+    scrollParent.addEventListener("scroll", onScroll, { passive: true });
+    return () => scrollParent.removeEventListener("scroll", onScroll);
+  }, [applyThemeVars, editor, visible, state]);
   const handleFormat = useCallback(
     (format) => {
       editor.dispatchCommand(FORMAT_TEXT_COMMAND, format);
@@ -220,7 +235,7 @@ function FloatingToolbarPlugin() {
         className: toolbarClassName,
         role: "toolbar",
         "aria-label": "Text formatting",
-        style: { position: "absolute", zIndex: 50 },
+        style: { position: "fixed", zIndex: 50 },
         children: [
           /* @__PURE__ */ jsx(
             ToolbarButton,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haklex/rich-plugin-floating-toolbar",
-  "version": "0.0.35",
+  "version": "0.0.37",
   "description": "Floating toolbar plugin",
   "license": "MIT",
   "type": "module",
@@ -16,8 +16,8 @@
     "dist"
   ],
   "dependencies": {
-    "@haklex/rich-editor-ui": "0.0.35",
-    "@haklex/rich-style-token": "0.0.35"
+    "@haklex/rich-editor-ui": "0.0.37",
+    "@haklex/rich-style-token": "0.0.37"
   },
   "devDependencies": {
     "@lexical/link": "^0.41.0",