@squiz/formatted-text-editor 1.66.0 → 1.66.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Change Log
 
+## 1.66.2
+
+### Patch Changes
+
+- 629a64f: Fixed FTE bubble menu from staying visible when unfocusing from editor
+
+## 1.66.1
+
+### Patch Changes
+
+- e01fd51: Fixed FTE floating toolbar overlap
+
 ## 1.66.0
 
 ### Minor Changes

package/lib/Editor/Editor.js

@@ -70,6 +70,6 @@ const Editor = ({ content, className, border = true, editable = true, onChange,
             editable && react_1.default.createElement(EditorToolbar_1.Toolbar, { isVisible: isVisible }),
             children && react_1.default.createElement("div", { className: "squiz-fte-scope__editor__children" }, children),
             react_1.default.createElement(WrappedEditor, null),
-            editable && react_1.default.createElement(EditorToolbar_1.FloatingToolbar, null))));
+            editable && isVisible && react_1.default.createElement(EditorToolbar_1.FloatingToolbar, null))));
 };
 exports.default = Editor;

package/lib/hooks/useFocus.js

@@ -32,7 +32,9 @@ const useFocus = (initialState) => {
         // (and therefore still in our React tree resulting in the element still effectively being focused).
         const isBlurringEditor = wrapperRef.current?.contains(event.target);
         const isFocusedInEditor = wrapperRef.current?.contains(event.relatedTarget);
-        if (isBlurringEditor && !isFocusedInEditor) {
+        // Detect if the blur event happens when the related/clicked target is the floating popover
+        const isClickingFloatingToolbar = !!event.relatedTarget?.closest('.squiz-fte-scope__floating-popover');
+        if (isBlurringEditor && !isFocusedInEditor && !isClickingFloatingToolbar) {
             setIsVisible(false);
         }
     }, [wrapperRef]);

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.2",
   "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.tsx

@@ -93,7 +93,7 @@ const Editor = ({
         {editable && <Toolbar isVisible={isVisible} />}
         {children && <div className="squiz-fte-scope__editor__children">{children}</div>}
         <WrappedEditor />
-        {editable && <FloatingToolbar />}
+        {editable && isVisible && <FloatingToolbar />}
       </Remirror>
     </div>
   );

package/src/hooks/useFocus.ts

@@ -45,7 +45,10 @@ const useFocus = (
       const isBlurringEditor = wrapperRef.current?.contains(event.target);
       const isFocusedInEditor = wrapperRef.current?.contains(event.relatedTarget);
 
-      if (isBlurringEditor && !isFocusedInEditor) {
+      // Detect if the blur event happens when the related/clicked target is the floating popover
+      const isClickingFloatingToolbar = !!event.relatedTarget?.closest('.squiz-fte-scope__floating-popover');
+
+      if (isBlurringEditor && !isFocusedInEditor && !isClickingFloatingToolbar) {
         setIsVisible(false);
       }
     },

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