@squiz/formatted-text-editor 1.40.1-alpha.7 → 1.41.0

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 };
 };

package/src/ui/Fields/MatrixAsset/MatrixAsset.spec.tsx

@@ -59,6 +59,7 @@ describe('MatrixAsset', () => {
           additional: 'additional data',
           matrixAssetId: 'my-resource-id',
           matrixIdentifier: 'my-source-id',
+          url: 'https://default-resource/',
         },
       },
     });

package/src/ui/Fields/MatrixAsset/MatrixAsset.tsx

@@ -5,6 +5,7 @@ import { InputContainer, InputContainerProps } from '../InputContainer/InputCont
 type MatrixAssetValue = {
   matrixIdentifier?: string;
   matrixAssetId?: string;
+  url?: string;
 };
 
 export type MatrixAssetProps<T extends MatrixAssetValue> = Omit<InputContainerProps, 'children'> & {
@@ -45,6 +46,7 @@ export const MatrixAsset = <T extends MatrixAssetValue>({
                 ...value,
                 matrixIdentifier: reference?.source?.id,
                 matrixAssetId: reference?.resource?.id,
+                url: reference?.resource?.url,
               } as T,
             },
           });

package/src/ui/_typography.scss

@@ -1,9 +1,14 @@
+// Add any formatting we want the editor to have for the tools we have added - all default styling has been removed by the reset
 .remirror-editor {
   a {
     @apply text-blue-300;
     text-decoration: underline;
   }
 
+  p {
+    margin-block-end: 0.8rem;
+  }
+
   h1 {
     font-size: 1.625rem;
     font-weight: 600;
@@ -71,4 +76,15 @@
       padding-bottom: 0.75rem;
     }
   }
+
+  ul,
+  ol {
+    list-style-type: disc;
+    padding: 0 0 0 2.5rem;
+    margin: 1rem 0;
+  }
+
+  ol {
+    list-style-type: decimal;
+  }
 }

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

@@ -425,4 +425,195 @@ describe('squizNodeToRemirrorNode', () => {
       });
     },
   );
+
+  it('should handle ordered lists', () => {
+    const squizComponentJSON: FormattedText = [
+      {
+        type: 'tag',
+        tag: 'ol',
+        children: [
+          {
+            type: 'tag',
+            tag: 'li',
+            children: [
+              {
+                type: 'tag',
+                tag: 'p',
+                children: [
+                  {
+                    type: 'text',
+                    value: 'ddd',
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+    ];
+
+    const expected: RemirrorJSON = {
+      content: [
+        {
+          attrs: { level: undefined, nodeIndent: null, nodeLineHeight: null, nodeTextAlignment: null, style: '' },
+          type: 'orderedList',
+          marks: undefined,
+          text: undefined,
+          content: [
+            {
+              attrs: { level: undefined, nodeIndent: null, nodeLineHeight: null, nodeTextAlignment: null, style: '' },
+              type: 'listItem',
+              marks: undefined,
+              text: undefined,
+              content: [
+                {
+                  attrs: {
+                    level: undefined,
+                    nodeIndent: null,
+                    nodeLineHeight: null,
+                    nodeTextAlignment: null,
+                    style: '',
+                  },
+                  marks: undefined,
+                  text: undefined,
+                  type: 'paragraph',
+                  content: [
+                    {
+                      attrs: undefined,
+                      content: undefined,
+                      marks: undefined,
+                      text: 'ddd',
+                      type: 'text',
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+      ],
+      type: 'doc',
+    };
+
+    const result = squizNodeToRemirrorNode(squizComponentJSON);
+    expect(result).toEqual(expected);
+  });
+
+  it('should handle unordered lists', () => {
+    const squizComponentJSON: FormattedText = [
+      {
+        type: 'tag',
+        tag: 'ul',
+        children: [
+          {
+            type: 'tag',
+            tag: 'li',
+            children: [
+              {
+                type: 'tag',
+                tag: 'p',
+                children: [
+                  {
+                    type: 'text',
+                    value: 'chicken',
+                  },
+                ],
+              },
+            ],
+          },
+          {
+            type: 'tag',
+            tag: 'li',
+            children: [
+              {
+                type: 'tag',
+                tag: 'p',
+                children: [
+                  {
+                    type: 'text',
+                    value: 'egg',
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+    ];
+
+    const expected: RemirrorJSON = {
+      content: [
+        {
+          attrs: { level: undefined, nodeIndent: null, nodeLineHeight: null, nodeTextAlignment: null, style: '' },
+          type: 'bulletList',
+          marks: undefined,
+          text: undefined,
+          content: [
+            {
+              attrs: { level: undefined, nodeIndent: null, nodeLineHeight: null, nodeTextAlignment: null, style: '' },
+              type: 'listItem',
+              marks: undefined,
+              text: undefined,
+              content: [
+                {
+                  attrs: {
+                    level: undefined,
+                    nodeIndent: null,
+                    nodeLineHeight: null,
+                    nodeTextAlignment: null,
+                    style: '',
+                  },
+                  marks: undefined,
+                  text: undefined,
+                  type: 'paragraph',
+                  content: [
+                    {
+                      attrs: undefined,
+                      content: undefined,
+                      marks: undefined,
+                      text: 'chicken',
+                      type: 'text',
+                    },
+                  ],
+                },
+              ],
+            },
+            {
+              attrs: { level: undefined, nodeIndent: null, nodeLineHeight: null, nodeTextAlignment: null, style: '' },
+              type: 'listItem',
+              marks: undefined,
+              text: undefined,
+              content: [
+                {
+                  attrs: {
+                    level: undefined,
+                    nodeIndent: null,
+                    nodeLineHeight: null,
+                    nodeTextAlignment: null,
+                    style: '',
+                  },
+                  marks: undefined,
+                  text: undefined,
+                  type: 'paragraph',
+                  content: [
+                    {
+                      attrs: undefined,
+                      content: undefined,
+                      marks: undefined,
+                      text: 'egg',
+                      type: 'text',
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+      ],
+      type: 'doc',
+    };
+
+    const result = squizNodeToRemirrorNode(squizComponentJSON);
+    expect(result).toEqual(expected);
+  });
 });

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

@@ -24,6 +24,9 @@ const getNodeType = (node: FormattedNodes): string => {
     img: 'image',
     pre: 'preformatted',
     p: 'paragraph',
+    ol: 'orderedList',
+    li: 'listItem',
+    ul: 'bulletList',
     a: NodeName.Text,
     span: NodeName.Text,
     code: NodeName.CodeBlock,

package/src/utils/getNodeNamesByGroup.spec.ts

@@ -15,6 +15,16 @@ describe('getNodeNamesByGroup', () => {
     // Nodes in the first array will be transformed to a paragraph when formatting is cleared.
     // Nodes in the second array will be left as-is.
     expect(formattingNodeNames).toEqual(['paragraph', 'heading', 'preformatted']);
-    expect(otherNodeNames).toEqual(['assetImage', 'doc', 'text', 'codeBlock', 'image', 'unsupportedNode']);
+    expect(otherNodeNames).toEqual([
+      'assetImage',
+      'doc',
+      'text',
+      'codeBlock',
+      'image',
+      'unsupportedNode',
+      'bulletList',
+      'listItem',
+      'orderedList',
+    ]);
   });
 });

package/tests/mockResourceBrowserContext.tsx

@@ -8,7 +8,7 @@ export type MockResourceBrowserContextOptions = DeepPartial<{
   resources: Resource[];
 }>;
 
-const mockResource = (resource: DeepPartial<Resource> = {}): Resource =>
+export const mockResource = (resource: DeepPartial<Resource> = {}): Resource =>
   ({
     id: 'default-resource',
     name: 'Default resource',
@@ -26,7 +26,7 @@ const mockResource = (resource: DeepPartial<Resource> = {}): Resource =>
     ...resource,
   } as Resource);
 
-const mockSource = (source: DeepPartial<Source>): Source => ({
+export const mockSource = (source: DeepPartial<Source> = {}): Source => ({
   id: 'default-source',
   name: 'Default source',
   ...source,

package/tests/renderWithContext.tsx

@@ -4,6 +4,8 @@ import merge from 'deepmerge';
 import { EditorContext } from '../src';
 import { defaultEditorContext, EditorContextOptions } from '../src/Editor/EditorContext';
 import { DeepPartial } from '../src/types';
+import { ResourceBrowserContext } from '@squiz/resource-browser';
+import { mockSource } from './mockResourceBrowserContext';
 
 export type ContextRenderOptions = RenderOptions & {
   context?: DeepPartial<{
@@ -13,6 +15,33 @@ export type ContextRenderOptions = RenderOptions & {
 
 export const renderWithContext = (ui: ReactElement | null, options?: ContextRenderOptions): RenderResult => {
   const editorContext = merge(defaultEditorContext, options?.context?.editor || {}) as EditorContextOptions;
+  const sources = mockSource();
+  const resources = [
+    {
+      id: 'default-resource',
+      name: 'Default resource',
+      url: 'https://default-resource/',
+      urls: [],
+      childCount: 0,
+      type: {
+        code: 'unspecified',
+        name: 'Unspecified',
+      },
+      status: {
+        code: 'live',
+        name: 'Live',
+      },
+    },
+  ];
+  const onRequestSources = jest.fn().mockResolvedValue(sources);
+  const onRequestChildren = jest.fn().mockResolvedValue(resources);
+  const onRequestResource = jest.fn(() => Promise.resolve(resources[0]));
 
-  return render(<EditorContext.Provider value={editorContext}>{ui}</EditorContext.Provider>);
+  return render(
+    <EditorContext.Provider value={editorContext}>
+      <ResourceBrowserContext.Provider value={{ onRequestSources, onRequestChildren, onRequestResource }}>
+        {ui}
+      </ResourceBrowserContext.Provider>
+    </EditorContext.Provider>,
+  );
 };

package/tests/renderWithEditor.tsx

@@ -1,6 +1,7 @@
 import React, { ReactElement, useContext, useEffect } from 'react';
 import { Extension, RemirrorContentType, RemirrorManager } from '@remirror/core';
 import { CorePreset } from '@remirror/preset-core';
+import { ResourceBrowserContext } from '@squiz/resource-browser';
 import { BuiltinPreset } from 'remirror';
 import { EditorComponent, Remirror, useRemirror } from '@remirror/react';
 import { RemirrorTestChain } from 'jest-remirror';
@@ -8,6 +9,7 @@ import { createExtensions } from '../src/Extensions/Extensions';
 import { EditorContext } from '../src';
 import { FloatingToolbar } from '../src/EditorToolbar';
 import { renderWithContext, ContextRenderOptions } from './renderWithContext';
+import { act } from '@testing-library/react';
 
 export type EditorRenderOptions = ContextRenderOptions & {
   content?: RemirrorContentType;
@@ -20,7 +22,7 @@ type TestEditorProps = EditorRenderOptions & {
   onReady: (manager: RemirrorManager<Extension>) => void;
 };
 
-type EditorRenderResult = {
+export type EditorRenderResult = {
   editor: RemirrorTestChain<Extension | CorePreset | BuiltinPreset>;
   getHtmlContent: () => string | undefined;
   getJsonContent: () => any;
@@ -32,8 +34,9 @@ type EditorRenderResult = {
 
 const TestEditor = ({ children, extensions, content, onReady, editable }: TestEditorProps) => {
   const context = useContext(EditorContext);
+  const browserContext = useContext(ResourceBrowserContext);
   const { manager, state, setState } = useRemirror({
-    extensions: () => extensions || createExtensions(context)(),
+    extensions: () => extensions || createExtensions(context, browserContext)(),
     content: content,
     selection: 'start',
     stringHandler: 'html',
@@ -95,17 +98,19 @@ export const renderWithEditor = async (
   };
   let isReady = false;
 
-  const { container } = renderWithContext(
-    <TestEditor
-      onReady={(manager) => {
-        result.editor = RemirrorTestChain.create(manager);
-        isReady = true;
-      }}
-      {...options}
-    >
-      {ui}
-    </TestEditor>,
-    options,
+  const { container } = await act(() =>
+    renderWithContext(
+      <TestEditor
+        onReady={(manager) => {
+          result.editor = RemirrorTestChain.create(manager);
+          isReady = true;
+        }}
+        {...options}
+      >
+        {ui}
+      </TestEditor>,
+      options,
+    ),
   );
 
   if (!isReady) {

package/lib/utils/resolveMatrixAssetUrl.d.ts

@@ -1 +0,0 @@
-export declare const resolveMatrixAssetUrl: (id: string, matrixDomain: string) => string;

package/lib/utils/resolveMatrixAssetUrl.js

@@ -1,10 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.resolveMatrixAssetUrl = void 0;
-const resolveMatrixAssetUrl = (id, matrixDomain) => {
-    if (matrixDomain.indexOf('://') < 0) {
-        matrixDomain = `${window.location.protocol}//${matrixDomain}`;
-    }
-    return new URL(`/_nocache?a=${encodeURIComponent(id)}`, matrixDomain).toString();
-};
-exports.resolveMatrixAssetUrl = resolveMatrixAssetUrl;

package/src/utils/resolveMatrixAssetUrl.spec.ts

@@ -1,26 +0,0 @@
-import { resolveMatrixAssetUrl } from './resolveMatrixAssetUrl';
-
-describe('resolveMatrixAssetUrl', () => {
-  it.each([
-    [
-      'domain with no scheme',
-      '123:hello?.txt',
-      'matrix.labs.squiz.test',
-      'http://matrix.labs.squiz.test/_nocache?a=123%3Ahello%3F.txt',
-    ],
-    [
-      'domain with scheme',
-      '123:hello?.txt',
-      'https://matrix.labs.squiz.test',
-      'https://matrix.labs.squiz.test/_nocache?a=123%3Ahello%3F.txt',
-    ],
-    [
-      'domain with path',
-      '123:hello?.txt',
-      'https://matrix.labs.squiz.test/site-1',
-      'https://matrix.labs.squiz.test/_nocache?a=123%3Ahello%3F.txt',
-    ],
-  ])('Resolves to expected URL for %s', (description: string, id: string, matrixDomain: string, expected: string) => {
-    expect(resolveMatrixAssetUrl(id, matrixDomain)).toBe(expected);
-  });
-});

package/src/utils/resolveMatrixAssetUrl.ts

@@ -1,7 +0,0 @@
-export const resolveMatrixAssetUrl = (id: string, matrixDomain: string): string => {
-  if (matrixDomain.indexOf('://') < 0) {
-    matrixDomain = `${window.location.protocol}//${matrixDomain}`;
-  }
-
-  return new URL(`/_nocache?a=${encodeURIComponent(id)}`, matrixDomain).toString();
-};