@squiz/formatted-text-editor 1.66.1 → 1.66.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Change Log
 
+## 1.66.3
+
+### Patch Changes
+
+- 7234d6c: Fixed FTE popover menu from having unusual positioning in certain circumstances
+
+## 1.66.2
+
+### Patch Changes
+
+- 629a64f: Fixed FTE bubble menu from staying visible when unfocusing from editor
+
 ## 1.66.1
 
 ### Patch 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

@@ -86,7 +86,9 @@ const createToolbarPositioner = ({ types }) => {
             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
+            // This is a good bottom position instead of it being on top of the toolbar when there is an overlap
+            const bottomPosition = parent.scrollTop + bottommost - parentRect.top + 62;
+            const y = isOverlapping ? bottomPosition : top;
             return { rect, y, x: left, height, width, visible };
         },
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squiz/formatted-text-editor",
-  "version": "1.66.1",
+  "version": "1.66.3",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "private": false,

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

@@ -118,7 +118,9 @@ export const createToolbarPositioner = ({ types }: ToolbarPositionerProps) => {
 
       // 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
+      // This is a good bottom position instead of it being on top of the toolbar when there is an overlap
+      const bottomPosition = parent.scrollTop + bottommost - parentRect.top + 62;
+      const y = isOverlapping ? bottomPosition : top;
 
       return { rect, y, x: left, height, width, visible };
     },