@squiz/formatted-text-editor 2.4.0 → 2.6.0

package/src/hooks/useFocus/useFocus.spec.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { screen } from '@testing-library/react';
+import { useFocus } from './useFocus';
+import { render, renderHook } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+describe('useFocus', () => {
+  beforeEach(() => {
+    jest.useRealTimers();
+    global.requestAnimationFrame = process.nextTick as any;
+  });
+
+  it.each([true, false])('Should set the focus value from initial state - %s', (initialState: boolean) => {
+    const isChildElement = jest.fn();
+    const { result } = renderHook(() => useFocus(initialState, isChildElement));
+
+    expect(result.current.isFocused).toBe(initialState);
+  });
+
+  it('Should update the focused value when an element is focused or blurred', async () => {
+    const isChildElement = jest.fn((element: Element) => !!element.closest('.focus-container'));
+    let lastIsFocused: boolean | undefined = undefined;
+    const Component = () => {
+      const { isFocused, handleFocus, handleBlur } = useFocus(false, isChildElement);
+      lastIsFocused = isFocused;
+
+      return (
+        <>
+          <div className="focus-container" onFocus={handleFocus} onBlur={handleBlur}>
+            <button type="button">Child element</button>
+          </div>
+          <div>
+            <button type="button">Non-child element</button>
+          </div>
+        </>
+      );
+    };
+
+    const { rerender } = render(<Component />);
+
+    await userEvent.click(screen.getByRole('button', { name: 'Child element' }));
+    expect(lastIsFocused).toBe(true);
+
+    await userEvent.click(screen.getByRole('button', { name: 'Non-child element' }));
+    rerender(<Component />);
+    expect(lastIsFocused).toBe(false);
+  });
+});

package/src/hooks/useFocus/useFocus.ts

@@ -0,0 +1,71 @@
+import { useState, useCallback, FocusEvent as ReactFocusEvent, FocusEventHandler } from 'react';
+
+export const useFocus = (
+  initialState: boolean,
+  isChildElement: (element: Element) => boolean,
+): {
+  handleFocus: (event: ReactFocusEvent) => void;
+  handleBlur: FocusEventHandler<HTMLDivElement>;
+  isFocused: boolean;
+} => {
+  const [isFocused, setIsFocused] = useState(initialState);
+  const getFocusedElement = useCallback((): Element | null => {
+    let element = document.activeElement;
+
+    while (element instanceof HTMLIFrameElement) {
+      element = element.contentDocument?.activeElement || null;
+    }
+
+    return element?.parentElement ? element : null;
+  }, []);
+
+  const handleFocus = useCallback((event: ReactFocusEvent) => {
+    // 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?.closest('.fte-ignore')) {
+      setIsFocused(true);
+    }
+  }, []);
+
+  const handleBlur = useCallback(
+    (event: ReactFocusEvent<Element>) => {
+      // 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).
+      // TODO: PLATFORM-1611 this shit still doesn't work properly, notably issues with the link/image modals.
+      requestAnimationFrame(() => {
+        // "relatedTarget" in the event object will be null if the element gaining focus is in a different
+        // document to the element being blurred (eg. floating toolbar rendered in top level frame,
+        // editor rendered in iframe). instead grab the active element to determine current focus.
+        const isBlurringEditor = isChildElement(event.target);
+        const focusedElement = event.relatedTarget || getFocusedElement();
+        const isFocusedInEditor = focusedElement && isChildElement(focusedElement);
+
+        // Detect if the blur event happens when the related/clicked target is the floating popover
+        const isClickingFloatingToolbar = !!focusedElement?.closest('.squiz-fte-scope__floating-popover');
+
+        if (isBlurringEditor && !isFocusedInEditor && !isClickingFloatingToolbar) {
+          setIsFocused(false);
+        }
+      });
+    },
+    [getFocusedElement, isChildElement],
+  );
+
+  return { handleFocus, handleBlur, isFocused };
+};

package/src/ui/EditorInput/EditorInput.props.ts

@@ -0,0 +1,5 @@
+import { HTMLAttributes } from 'react';
+
+export type EditorInputProps = HTMLAttributes<HTMLDivElement> & {
+  container?: Element | null;
+};

package/src/ui/EditorInput/EditorInput.spec.tsx

@@ -0,0 +1,38 @@
+import '@testing-library/jest-dom';
+import React from 'react';
+import { render, screen, within } from '@testing-library/react';
+import { EditorInput } from './EditorInput';
+import { Remirror, useRemirror } from '@remirror/react';
+import { EditorInputProps } from './EditorInput.props';
+
+describe('EditorInput', () => {
+  const inputLabel = 'Text editor';
+
+  const Component = (props: EditorInputProps) => {
+    const { manager, state } = useRemirror({
+      content: 'Hello world',
+      stringHandler: 'html',
+    });
+
+    return (
+      <Remirror manager={manager} state={state} label={inputLabel}>
+        <EditorInput {...props} />
+      </Remirror>
+    );
+  };
+
+  it('Mounts the input inline if container is not provided', () => {
+    render(<Component />);
+
+    expect(screen.getByRole('textbox', { name: 'Text editor' })).toBeInTheDocument();
+  });
+
+  it('Mounts the input inside the container if provided', () => {
+    const container = document.createElement('div');
+    document.body.append(container);
+
+    render(<Component container={container} />);
+
+    expect(within(container).getByRole('textbox', { name: 'Text editor' })).toBeInTheDocument();
+  });
+});

package/src/ui/EditorInput/EditorInput.tsx

@@ -0,0 +1,30 @@
+import { useEditorEvent, useRemirrorContext } from '@remirror/react';
+import React, { useCallback } from 'react';
+import { ClipboardEventHandler } from '@remirror/extension-events/dist-types/events-extension';
+import { createPortal } from 'react-dom';
+import { EditorInputProps } from './EditorInput.props';
+
+export const EditorInput = ({ container, ...other }: EditorInputProps) => {
+  const { getRootProps } = useRemirrorContext();
+  const { key, ...rootProps } = getRootProps();
+  const preventImagePaste = useCallback((event) => {
+    const { clipboardData } = event;
+    const pastedData = clipboardData?.files[0];
+    if (
+      pastedData?.type &&
+      pastedData?.type.startsWith('image/') &&
+      // Still allow paste of any text that came through (Word, etc)
+      !clipboardData?.types.includes('text/plain')
+    ) {
+      event.preventDefault();
+    }
+
+    // Allow other paste event handlers to be run.
+    return false;
+  }, []) as ClipboardEventHandler;
+  const input = <div key={key} {...rootProps} {...other} />;
+
+  useEditorEvent('paste', preventImagePaste);
+
+  return container ? createPortal(input, container) : input;
+};

package/src/utils/converters/remirrorNodeToSquizNode/remirrorNodeToSquizNode.spec.ts

@@ -102,9 +102,7 @@ describe('remirrorNodeToSquizNode', () => {
         type: 'tag',
         tag: 'code',
         children: [{ type: 'text', value: 'Hello world' }],
-        attributes: {
-          language: 'js',
-        },
+        attributes: {},
       },
     ];
 

package/src/utils/converters/remirrorNodeToSquizNode/remirrorNodeToSquizNode.ts

@@ -22,10 +22,6 @@ export const resolveNodeTag = (node: ProsemirrorNode): string => {
     return 'span';
   }
 
-  if (node.type.name === NodeName.CodeBlock) {
-    return 'code';
-  }
-
   if (node.type.spec?.toDOM) {
     const domNode = node.type.spec.toDOM(node);
 

package/src/utils/converters/squizNodeToRemirrorNode/squizNodeToRemirrorNode.spec.ts

@@ -283,10 +283,7 @@ describe('squizNodeToRemirrorNode', () => {
       content: [
         {
           type: 'codeBlock',
-          attrs: {
-            language: 'markup',
-            wrap: true,
-          },
+          attrs: { nodeIndent: null, nodeLineHeight: null, nodeTextAlignment: null, style: '' },
           content: [
             {
               type: 'text',

package/src/utils/converters/squizNodeToRemirrorNode/squizNodeToRemirrorNode.ts

@@ -85,11 +85,6 @@ const getNodeAttributes = (node: FormattedNodes): Attrs => {
       src: node.attributes?.src,
       title: node.attributes?.title,
     };
-  } else if (node.type === 'tag' && node.tag === 'code') {
-    return {
-      language: node.attributes?.language || 'markup',
-      wrap: node.attributes?.wrap || true,
-    };
   } else if (node.type === 'matrix-image') {
     return {
       matrixAssetId: node.matrixAssetId,

package/tests/mockResourceBrowserContext.tsx

@@ -63,10 +63,25 @@ export const mockResourceBrowserContext = ({ sources, resources, pluginProps }:
         Promise.resolve(resources?.find((resource) => resource.id === reference.resource) || null),
       );
 
+  const onSearchRequest = () =>
+    Promise.resolve({
+      results: [],
+      filters: [],
+      resultsSummary: {
+        totalMatching: 0,
+        numRanks: 10,
+        currStart: 0,
+        currEnd: 0,
+        prevStart: null,
+        nextStart: null,
+      },
+    });
+
   return {
     MockResourceBrowserContext: ({ children }: { children: ReactNode }) => (
       <ResourceBrowserContextProvider
         value={{
+          searchEnabled: false,
           onRequestSources: (): Promise<ResourceBrowserSource[]> =>
             Promise.resolve([
               {
@@ -80,7 +95,8 @@ export const mockResourceBrowserContext = ({ sources, resources, pluginProps }:
               onRequestSources: onRequestSources,
               onRequestChildren: onRequestChildren,
               onRequestResource: onRequestResource,
-            } as MatrixResourceBrowserPluginProps),
+              onSearchRequest,
+            } as unknown as MatrixResourceBrowserPluginProps),
           ],
         }}
       >

package/tests/renderWithContext.tsx

@@ -45,12 +45,14 @@ export const renderWithContext = (ui: ReactElement | null, options?: ContextRend
   const onRequestSources = jest.fn().mockResolvedValue(sources);
   const onRequestChildren = jest.fn().mockResolvedValue(resources);
   const onRequestResource = jest.fn(() => Promise.resolve(resources[0]));
+  const onSearchRequest = jest.fn();
   editorContext.resolveNodeToUrl = jest.fn(() => Promise.resolve(resources[0].url));
 
   return render(
     <EditorContext.Provider value={editorContext}>
       <ResourceBrowserContextProvider
         value={{
+          searchEnabled: false,
           onRequestSources: (): Promise<ResourceBrowserSource[]> =>
             Promise.resolve([
               {
@@ -64,6 +66,7 @@ export const renderWithContext = (ui: ReactElement | null, options?: ContextRend
               onRequestSources: onRequestSources,
               onRequestChildren: onRequestChildren,
               onRequestResource: onRequestResource,
+              onSearchRequest,
             }),
           ],
         }}

package/lib/hooks/useFocus.d.ts

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

package/src/hooks/useFocus.ts

@@ -1,61 +0,0 @@
-import { useState, useCallback, FocusEvent, FocusEventHandler, RefObject, createRef } from 'react';
-
-const useFocus = (
-  initialState: boolean,
-): {
-  handleFocus: (event: FocusEvent) => void;
-  handleBlur: FocusEventHandler<HTMLDivElement>;
-  isVisible: boolean;
-  wrapperRef: RefObject<HTMLDivElement>;
-} => {
-  const wrapperRef = createRef<HTMLDivElement>();
-  const [isVisible, setIsVisible] = useState(initialState);
-
-  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?.closest('.fte-ignore')) {
-        setIsVisible(true);
-      }
-    },
-    [wrapperRef],
-  );
-
-  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);
-
-      // 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],
-  );
-
-  return { handleFocus, handleBlur, isVisible, wrapperRef };
-};
-
-export default useFocus;