@squiz/formatted-text-editor 1.40.1-alpha.23 → 1.40.1-alpha.25

package/demo/AppContext.tsx

@@ -10,9 +10,20 @@ export const AppContext = ({ children }: AppContextProps) => (
   <ResourceBrowserContext.Provider
     value={{
       onRequestSources: (): Promise<Source> => Promise.resolve(sources),
-      onRequestChildren: (): Promise<Resource[]> => Promise.resolve(resources),
-      onRequestResource: (reference: ResourceReference): Promise<Resource | null> =>
-        Promise.resolve(resources.find((resource) => resource.id === reference.resource) || null),
+      onRequestChildren: (source: Source, resource: Resource | null): Promise<Resource[]> =>
+        Promise.resolve(resource._children || resources),
+      onRequestResource: (reference: ResourceReference): Promise<Resource | null> => {
+        const flattenResources = (resources: unknown[]) => {
+          return [
+            ...resources,
+            ...resources.flatMap((resource) => ('_children' in resource ? flattenResources(resource._children) : [])),
+          ];
+        };
+
+        return Promise.resolve(
+          flattenResources(resources).find((resource) => resource.id === reference.resource) || null,
+        );
+      },
     }}
   >
     <EditorContext.Provider

package/demo/resources.json

@@ -9,11 +9,26 @@
       "code": "live",
       "name": "Live"
     },
-    "name": "Example image",
-    "childCount": 0
+    "name": "Example image one",
+    "childCount": 0,
+    "url": "https://picsum.photos/200/300"
   },
   {
     "id": "2",
+    "type": {
+      "code": "image",
+      "name": "Image"
+    },
+    "status": {
+      "code": "live",
+      "name": "Live"
+    },
+    "name": "Example image two",
+    "childCount": 0,
+    "url": "https://picsum.photos/200/300"
+  },
+  {
+    "id": "3",
     "type": {
       "code": "page_standard",
       "name": "Standard Page"
@@ -23,6 +38,123 @@
       "name": "Live"
     },
     "name": "Example page",
-    "childCount": 0
+    "childCount": 0,
+    "url": "https://picsum.photos/200/300"
+  },
+  {
+    "id": "4",
+    "type": {
+      "code": "folder",
+      "name": "Folder"
+    },
+    "status": {
+      "code": "live",
+      "name": "Live"
+    },
+    "name": "Example folder",
+    "childCount": 10,
+    "url": "",
+    "_children": [
+      {
+        "id": "5",
+        "type": {
+          "code": "image",
+          "name": "Image"
+        },
+        "status": {
+          "code": "live",
+          "name": "Live"
+        },
+        "name": "Example image one #2",
+        "childCount": 0,
+        "url": "https://picsum.photos/200/300"
+      },
+      {
+        "id": "6",
+        "type": {
+          "code": "image",
+          "name": "Image"
+        },
+        "status": {
+          "code": "live",
+          "name": "Live"
+        },
+        "name": "Example image two #2",
+        "childCount": 0,
+        "url": "https://picsum.photos/200/300"
+      },
+      {
+        "id": "7",
+        "type": {
+          "code": "page_standard",
+          "name": "Standard Page"
+        },
+        "status": {
+          "code": "live",
+          "name": "Live"
+        },
+        "name": "Example page #2",
+        "childCount": 0,
+        "url": "https://picsum.photos/200/300"
+      },
+      {
+        "id": "8",
+        "type": {
+          "code": "folder",
+          "name": "Folder"
+        },
+        "status": {
+          "code": "live",
+          "name": "Live"
+        },
+        "name": "Example folder #2",
+        "childCount": 10,
+        "url": "",
+        "_children": [
+          {
+            "id": "9",
+            "type": {
+              "code": "image",
+              "name": "Image"
+            },
+            "status": {
+              "code": "live",
+              "name": "Live"
+            },
+            "name": "Example image one #3",
+            "childCount": 0,
+            "url": "https://picsum.photos/200/300"
+          },
+          {
+            "id": "10",
+            "type": {
+              "code": "image",
+              "name": "Image"
+            },
+            "status": {
+              "code": "live",
+              "name": "Live"
+            },
+            "name": "Example image two #3",
+            "childCount": 0,
+            "url": "https://picsum.photos/200/300"
+          },
+          {
+            "id": "11",
+            "type": {
+              "code": "page_standard",
+              "name": "Standard Page"
+            },
+            "status": {
+              "code": "live",
+              "name": "Live"
+            },
+            "name": "Example page #3",
+            "childCount": 0,
+            "url": "https://picsum.photos/200/300"
+          }
+        ]
+      }
+    ]
   }
 ]

package/lib/Editor/Editor.js

@@ -65,7 +65,7 @@ const Editor = ({ content, editable = true, onChange, children, isFocused }) =>
         }
     }, []);
     return (react_1.default.createElement("div", { className: "squiz-fte-scope" },
-        react_1.default.createElement("div", { ref: wrapperRef, onBlur: handleBlur, onFocusCapture: handleFocus, className: (0, clsx_1.default)('remirror-theme formatted-text-editor', !editable && 'formatted-text-editor--is-disabled') },
+        react_1.default.createElement("div", { ref: wrapperRef, onBlur: handleBlur, onFocusCapture: handleFocus, className: (0, clsx_1.default)('formatted-text-editor', !editable && 'formatted-text-editor--is-disabled') },
             react_1.default.createElement(react_2.Remirror, { manager: manager, state: state, editable: editable, onChange: handleChange, placeholder: "Write something", label: "Text editor" },
                 editable && react_1.default.createElement(EditorToolbar_1.Toolbar, { isVisible: isVisible }),
                 children,

package/lib/hooks/useFocus.js

@@ -6,13 +6,32 @@ const useFocus = (initialState) => {
     const [isVisible, setIsVisible] = (0, react_1.useState)(initialState);
     const handleFocus = (0, react_1.useCallback)(() => {
         setIsVisible(true);
-    }, []);
-    const handleBlur = (event) => {
-        const isOutside = wrapperRef.current !== null && !wrapperRef.current.contains(event.relatedTarget);
-        if (isOutside) {
+    }, [wrapperRef]);
+    const handleBlur = (0, react_1.useCallback)((event) => {
+        // React event bubbling is interesting, it bubbles up the React tree rather than the DOM tree.
+        // The tree deviates when rendering portals (eg. for modals).
+        //
+        // Only hide the toolbar if:
+        // 1. We are blurring a node in the editor **DOM** tree.
+        // 2. We are focusing on something that is not in the editor DOM tree
+        //    (elements in the portal won't be in the tree but don't influence the focus state per #1).
+        //
+        // This avoids the scenario where an element in a portal is blurred and another one in the portal focused.
+        // Without this logic the blur and focus handlers are called (in that order). The impact of these handlers being
+        // called is that the "isFocused" state changes inconsistently. This state changing then causes subtle issues.
+        // eg. unable to drill down in resource browser, toolbar appearing/disappearing.
+        //
+        // Ideally we would instead solely seeing if the "relatedTarget" is in the React tree. This isn't easily
+        // identifiable however without reaching into React internals.
+        //
+        // An assumption here is that anything in a portal will only blur to another element that is also in the portal
+        // (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) {
             setIsVisible(false);
         }
-    };
+    }, [wrapperRef]);
     return { handleFocus, handleBlur, isVisible, wrapperRef };
 };
 exports.default = useFocus;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squiz/formatted-text-editor",
-  "version": "1.40.1-alpha.23",
+  "version": "1.40.1-alpha.25",
   "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.40.1-alpha.23",
-    "@squiz/resource-browser": "1.40.1-alpha.23",
+    "@squiz/dx-json-schema-lib": "1.40.1-alpha.25",
+    "@squiz/resource-browser": "1.40.1-alpha.25",
     "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": "32156ccf2be6ae91cfcaa42df6cee5c449f1fa26"
+  "gitHead": "1691925a1778532593a87010af01419c49ff02a4"
 }

package/src/Editor/Editor.spec.tsx

@@ -1,27 +1,16 @@
+import '@testing-library/jest-dom';
 import React from 'react';
-import { act, fireEvent, render, screen } from '@testing-library/react';
+import { act, fireEvent, render, screen, within } from '@testing-library/react';
+import { ResourceBrowserContext } from '@squiz/resource-browser';
 import Editor from './Editor';
-import '@testing-library/jest-dom';
 import { renderWithEditor } from '../../tests';
 import ImageButton from '../EditorToolbar/Tools/Image/ImageButton';
+import * as useFocus from '../hooks/useFocus';
 
-const isVisible = jest.fn().mockReturnValue(false);
 const handleFocusMock = jest.fn();
 const handleBlurMock = jest.fn();
-jest.mock('../hooks/useFocus', () => ({
-  __esModule: true,
-  default: () => ({
-    isVisible: isVisible(),
-    handleFocus: handleFocusMock,
-    handleBlur: handleBlurMock,
-  }),
-}));
 
 describe('Formatted text editor', () => {
-  afterEach(() => {
-    jest.clearAllMocks();
-  });
-
   it('Renders the text editor', () => {
     render(<Editor />);
     expect(screen.getByRole('textbox')).toBeInTheDocument();
@@ -329,6 +318,13 @@ describe('Formatted text editor', () => {
   });
 
   it('triggers handleFocus when editor is focused', async () => {
+    jest.spyOn(useFocus, 'default').mockReturnValue({
+      isVisible: false,
+      handleFocus: handleFocusMock,
+      handleBlur: handleBlurMock,
+      wrapperRef: { current: null },
+    });
+
     const { getByLabelText } = render(<Editor />);
     const editorInput = getByLabelText('Text editor');
 
@@ -339,6 +335,13 @@ describe('Formatted text editor', () => {
   });
 
   it('triggers handleBlur when editor is blurred', () => {
+    jest.spyOn(useFocus, 'default').mockReturnValue({
+      isVisible: false,
+      handleFocus: handleFocusMock,
+      handleBlur: handleBlurMock,
+      wrapperRef: { current: null },
+    });
+
     const { getByLabelText } = render(<Editor />);
     const editorInput = getByLabelText('Text editor');
 
@@ -349,9 +352,81 @@ describe('Formatted text editor', () => {
   });
 
   it('should apply hide class when focus hook returns false', () => {
-    isVisible.mockReturnValue(true);
+    jest.spyOn(useFocus, 'default').mockReturnValue({
+      isVisible: true,
+      handleFocus: handleFocusMock,
+      handleBlur: handleBlurMock,
+      wrapperRef: { current: null },
+    });
+
     const { container } = render(<Editor />);
 
     expect(container.querySelector('.show-toolbar')).toBeInTheDocument();
   });
+
+  it('Interactivity in modals functions correctly, toolbar remains visible throughout', async () => {
+    const onRequestSources = jest.fn().mockResolvedValue([
+      {
+        id: 'my-matrix-instance',
+        name: 'My Matrix instance',
+        nodes: [],
+      },
+    ]);
+    const onRequestChildren = jest
+      .fn()
+      .mockResolvedValueOnce([
+        {
+          id: '1',
+          name: 'Folder 1',
+          type: { code: 'folder', name: 'Folder' },
+          status: { code: 'live', name: 'Live' },
+          childCount: 1,
+        },
+      ])
+      .mockResolvedValueOnce([
+        {
+          id: '2',
+          name: 'Folder 2',
+          type: { code: 'folder', name: 'Folder' },
+          status: { code: 'live', name: 'Live' },
+          childCount: 1,
+        },
+      ])
+      .mockResolvedValueOnce([
+        {
+          id: '3',
+          name: 'My image',
+          type: { code: 'image', name: 'Image' },
+          status: { code: 'live', name: 'Live' },
+          childCount: 0,
+        },
+      ]);
+    const onRequestResource = jest.fn().mockResolvedValue({
+      id: '3',
+      name: 'My image',
+      type: { code: 'image', name: 'Image' },
+      status: { code: 'live', name: 'Live' },
+      childCount: '1',
+    });
+
+    render(
+      <ResourceBrowserContext.Provider value={{ onRequestSources, onRequestChildren, onRequestResource }}>
+        <Editor />
+      </ResourceBrowserContext.Provider>,
+    );
+
+    await act(() => fireEvent.click(screen.getByRole('button', { name: 'Link (cmd+K)' })));
+    await act(() => fireEvent.click(screen.getByText('Choose asset')));
+    await act(() => fireEvent.click(screen.getByRole('button', { name: 'Drill down to My Matrix instance children' })));
+    await act(() => fireEvent.click(screen.getByRole('button', { name: 'Drill down to Folder 1 children' })));
+    await act(() => fireEvent.click(screen.getByRole('button', { name: 'Drill down to Folder 2 children' })));
+    await act(() => fireEvent.blur(screen.getByRole('button', { name: /My image/ })));
+
+    // Contents of "Folder 2" should be mounted.
+    // Toolbar (Link button) should be mounted.
+    // Toolbar should be shown (.show-toolbar class).
+    expect(screen.getByRole('button', { name: /My image/ })).toBeInTheDocument();
+    expect(within(document.body).getByRole('button', { name: 'Link (cmd+K)', hidden: true })).toBeInTheDocument();
+    expect(document.querySelector('.show-toolbar')).toBeInTheDocument();
+  });
 });

package/src/Editor/Editor.tsx

@@ -60,7 +60,7 @@ const Editor = ({ content, editable = true, onChange, children, isFocused }: Edi
         ref={wrapperRef}
         onBlur={handleBlur}
         onFocusCapture={handleFocus}
-        className={clsx('remirror-theme formatted-text-editor', !editable && 'formatted-text-editor--is-disabled')}
+        className={clsx('formatted-text-editor', !editable && 'formatted-text-editor--is-disabled')}
       >
         <Remirror
           manager={manager}

package/src/hooks/useFocus.ts

@@ -13,14 +13,37 @@ const useFocus = (
 
   const handleFocus = useCallback(() => {
     setIsVisible(true);
-  }, []);
+  }, [wrapperRef]);
 
-  const handleBlur: FocusEventHandler<HTMLDivElement> = (event: FocusEvent<HTMLDivElement>) => {
-    const isOutside = wrapperRef.current !== null && !wrapperRef.current.contains(event.relatedTarget as Node);
-    if (isOutside) {
-      setIsVisible(false);
-    }
-  };
+  const handleBlur = useCallback(
+    (event: FocusEvent<HTMLDivElement>) => {
+      // React event bubbling is interesting, it bubbles up the React tree rather than the DOM tree.
+      // The tree deviates when rendering portals (eg. for modals).
+      //
+      // Only hide the toolbar if:
+      // 1. We are blurring a node in the editor **DOM** tree.
+      // 2. We are focusing on something that is not in the editor DOM tree
+      //    (elements in the portal won't be in the tree but don't influence the focus state per #1).
+      //
+      // This avoids the scenario where an element in a portal is blurred and another one in the portal focused.
+      // Without this logic the blur and focus handlers are called (in that order). The impact of these handlers being
+      // called is that the "isFocused" state changes inconsistently. This state changing then causes subtle issues.
+      // eg. unable to drill down in resource browser, toolbar appearing/disappearing.
+      //
+      // Ideally we would instead solely seeing if the "relatedTarget" is in the React tree. This isn't easily
+      // identifiable however without reaching into React internals.
+      //
+      // An assumption here is that anything in a portal will only blur to another element that is also in the portal
+      // (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) {
+        setIsVisible(false);
+      }
+    },
+    [wrapperRef],
+  );
 
   return { handleFocus, handleBlur, isVisible, wrapperRef };
 };