@squiz/formatted-text-editor 1.66.1 → 1.66.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squiz/formatted-text-editor",
-  "version": "1.66.1",
+  "version": "1.66.2",
   "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);
       }
     },