@squiz/formatted-text-editor 1.65.1 → 1.66.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Change Log
 
+## 1.66.1
+
+### Patch Changes
+
+- e01fd51: Fixed FTE floating toolbar overlap
+
+## 1.66.0
+
+### Minor Changes
+
+- a5b0869: Update fte toolbar to max height 100% so that it can be flexible at any width and position placeholder
+
 ## 1.65.1
 
 ### Patch Changes

package/lib/index.css

@@ -822,6 +822,7 @@
   outline-width: 0px;
 }
 .squiz-fte-scope.squiz-fte-scope__editor .remirror-editor p {
+  position: relative;
   display: block;
 }
 .squiz-fte-scope.squiz-fte-scope__editor--bordered {
@@ -909,7 +910,7 @@
 }
 .squiz-fte-scope .header-toolbar.show-toolbar {
   opacity: 1;
-  max-height: 15vh;
+  max-height: 108px;
 }
 .squiz-fte-scope__floating-popover {
   display: flex;

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.65.1",
+  "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/Editor/_editor.scss

@@ -23,6 +23,7 @@
     }
 
     p {
+      position: relative; // ensures that the placeholder text is positioned correctly
       /* Make sure content aligned with "text-align: justify" is justified */
       @apply block;
     }

package/src/EditorToolbar/_toolbar.scss

@@ -32,6 +32,6 @@
 
   &.show-toolbar {
     opacity: 1;
-    max-height: 15vh;
+    max-height: 108px; // this should mean at least 3 icons can git vertically if needed
   }
 }

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 };
     },
   });
 };