@squiz/formatted-text-editor 1.49.1-alpha.5 → 1.49.1-alpha.7

package/lib/hooks/useFocus.d.ts

@@ -1,6 +1,6 @@
-import { FocusEventHandler, RefObject } from 'react';
+import { FocusEvent, FocusEventHandler, RefObject } from 'react';
 declare const useFocus: (initialState: boolean) => {
-    handleFocus: () => void;
+    handleFocus: (event: FocusEvent) => void;
     handleBlur: FocusEventHandler<HTMLDivElement>;
     isVisible: boolean;
     wrapperRef: RefObject<HTMLDivElement>;

package/lib/hooks/useFocus.js

@@ -4,8 +4,13 @@ const react_1 = require("react");
 const useFocus = (initialState) => {
     const wrapperRef = (0, react_1.createRef)();
     const [isVisible, setIsVisible] = (0, react_1.useState)(initialState);
-    const handleFocus = (0, react_1.useCallback)(() => {
-        setIsVisible(true);
+    const handleFocus = (0, react_1.useCallback)((event) => {
+        // Ignore elements flagged to be ignored, this allows us to add extra, clickable, elements
+        // without triggering a focus, such as action menus.
+        if (!event.target?.classList?.contains('fte-ignore') &&
+            !event.target?.parentElement?.classList?.contains('fte-ignore')) {
+            setIsVisible(true);
+        }
     }, [wrapperRef]);
     const handleBlur = (0, react_1.useCallback)((event) => {
         // React event bubbling is interesting, it bubbles up the React tree rather than the DOM tree.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squiz/formatted-text-editor",
-  "version": "1.49.1-alpha.5",
+  "version": "1.49.1-alpha.7",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "scripts": {
@@ -20,8 +20,8 @@
     "@headlessui/react": "1.7.11",
     "@mui/icons-material": "5.11.16",
     "@remirror/react": "2.0.25",
-    "@squiz/dx-json-schema-lib": "1.49.1-alpha.5",
-    "@squiz/resource-browser": "1.49.1-alpha.5",
+    "@squiz/dx-json-schema-lib": "1.49.1-alpha.7",
+    "@squiz/resource-browser": "1.49.1-alpha.7",
     "clsx": "1.2.1",
     "react-hook-form": "7.43.2",
     "react-image-size": "2.0.0",
@@ -75,5 +75,5 @@
   "volta": {
     "node": "18.15.0"
   },
-  "gitHead": "9814f923e3c7bdd1098e403a150d33c6a34db1b3"
+  "gitHead": "55080e70b7105892e90c002a21c0c283c240d5af"
 }

package/src/hooks/useFocus.ts

@@ -3,7 +3,7 @@ import { useState, useCallback, FocusEvent, FocusEventHandler, RefObject, create
 const useFocus = (
   initialState: boolean,
 ): {
-  handleFocus: () => void;
+  handleFocus: (event: FocusEvent) => void;
   handleBlur: FocusEventHandler<HTMLDivElement>;
   isVisible: boolean;
   wrapperRef: RefObject<HTMLDivElement>;
@@ -11,9 +11,19 @@ const useFocus = (
   const wrapperRef = createRef<HTMLDivElement>();
   const [isVisible, setIsVisible] = useState(initialState);
 
-  const handleFocus = useCallback(() => {
-    setIsVisible(true);
-  }, [wrapperRef]);
+  const handleFocus = useCallback(
+    (event: FocusEvent) => {
+      // Ignore elements flagged to be ignored, this allows us to add extra, clickable, elements
+      // without triggering a focus, such as action menus.
+      if (
+        !event.target?.classList?.contains('fte-ignore') &&
+        !event.target?.parentElement?.classList?.contains('fte-ignore')
+      ) {
+        setIsVisible(true);
+      }
+    },
+    [wrapperRef],
+  );
 
   const handleBlur = useCallback(
     (event: FocusEvent<HTMLDivElement>) => {