@squiz/formatted-text-editor 1.66.0 → 1.66.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## 1.66.1
+
+### Patch Changes
+
+- e01fd51: Fixed FTE floating toolbar overlap
+
 ## 1.66.0
 
 ### Minor Changes

package/lib/utils/createToolbarPositioner.js

@@ -74,11 +74,20 @@ const createToolbarPositioner = ({ types }) => {
             const leftmost = Math.min(from.left, to.left);
             // The position nearest the top.
             const topmost = Math.min(from.top, to.top);
+            const bottommost = Math.max(from.bottom, to.bottom);
             const left = parent.scrollLeft + (spansMultipleLines ? to.left - parentRect.left : leftmost - parentRect.left);
             const top = parent.scrollTop + topmost - parentRect.top;
             const width = spansMultipleLines ? 1 : Math.abs(from.left - to.right);
             const rect = new DOMRect(spansMultipleLines ? to.left : leftmost, topmost, width, height);
-            return { rect, y: top, x: left, height, width, visible };
+            // Get header toolbar by class inside the current element/editor
+            const headerToolbar = element.parentElement?.getElementsByClassName('header-toolbar')?.[0];
+            const headerBarRects = headerToolbar?.getBoundingClientRect();
+            const headerBarHeight = headerBarRects?.height ?? 0;
+            const headerBarBottom = (headerBarRects?.top ?? 0) + headerBarHeight;
+            // If floating toolbar will overlap fixed toolbar, set position to under selection
+            const isOverlapping = headerBarBottom + headerBarHeight > topmost;
+            const y = isOverlapping ? bottommost + 62 : top; // FIXME: need to calculate rather than hard-code
+            return { rect, y, x: left, height, width, visible };
         },
     });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squiz/formatted-text-editor",
-  "version": "1.66.0",
+  "version": "1.66.1",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "private": false,
@@ -35,7 +35,7 @@
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "14.0.0",
     "@testing-library/user-event": "14.4.3",
-    "@types/node": "18.15.2",
+    "@types/node": "20.11.24",
     "@types/react": "^18.2.45",
     "@types/react-dom": "^18.2.18",
     "@vitejs/plugin-react": "3.0.0",

package/src/utils/createToolbarPositioner.ts

@@ -103,13 +103,24 @@ export const createToolbarPositioner = ({ types }: ToolbarPositionerProps) => {
 
       // The position nearest the top.
       const topmost = Math.min(from.top, to.top);
+      const bottommost = Math.max(from.bottom, to.bottom);
 
       const left = parent.scrollLeft + (spansMultipleLines ? to.left - parentRect.left : leftmost - parentRect.left);
       const top = parent.scrollTop + topmost - parentRect.top;
       const width = spansMultipleLines ? 1 : Math.abs(from.left - to.right);
       const rect = new DOMRect(spansMultipleLines ? to.left : leftmost, topmost, width, height);
 
-      return { rect, y: top, x: left, height, width, visible };
+      // Get header toolbar by class inside the current element/editor
+      const headerToolbar = element.parentElement?.getElementsByClassName('header-toolbar')?.[0];
+      const headerBarRects = headerToolbar?.getBoundingClientRect();
+      const headerBarHeight = headerBarRects?.height ?? 0;
+      const headerBarBottom = (headerBarRects?.top ?? 0) + headerBarHeight;
+
+      // If floating toolbar will overlap fixed toolbar, set position to under selection
+      const isOverlapping = headerBarBottom + headerBarHeight > topmost;
+      const y = isOverlapping ? bottommost + 62 : top; // FIXME: need to calculate rather than hard-code
+
+      return { rect, y, x: left, height, width, visible };
     },
   });
 };