@squiz/formatted-text-editor 1.21.1-alpha.9 → 1.22.0

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

@@ -1,7 +1,12 @@
 import { FORMATTED_TEXT_MODELS as FormattedTextModels } from '@squiz/dx-json-schema-lib';
 import { RemirrorJSON } from '@remirror/core';
 import { squizNodeToRemirrorNode } from './squizNodeToRemirrorNode';
-import { mockSquizNodeJson, mockSquizNodeTextJson } from '../mocks/squizNodeJson.mock';
+import {
+  mockSquizNodeJson,
+  mockSquizNodeTextJson,
+  sharedNodeExamples,
+  squizOnlyNodeExamples,
+} from '../mocks/squizNodeJson.mock';
 
 type FormattedText = FormattedTextModels.v1.FormattedText;
 
@@ -84,19 +89,12 @@ describe('squizNodeToRemirrorNode', () => {
     expect(squizNodeToRemirrorNode(mockSquizNodeTextJson)).toEqual({
       content: [
         {
-          attrs: { nodeIndent: null, nodeLineHeight: null, nodeTextAlignment: null, style: '' },
           type: 'paragraph',
           content: [
             {
               type: 'text',
               text: 'Hello world!',
             },
-          ],
-        },
-        {
-          attrs: { nodeIndent: null, nodeLineHeight: null, nodeTextAlignment: null, style: '' },
-          type: 'paragraph',
-          content: [
             {
               type: 'text',
               text: 'Another one...',
@@ -129,32 +127,40 @@ describe('squizNodeToRemirrorNode', () => {
     });
   });
 
-  it('should throw an error for non supported node types', () => {
-    const squizComponentJSON: FormattedText = [
-      {
-        children: [
-          {
-            type: 'text',
-            value: 'Hello world!',
-          },
-        ],
-        type: 'tag',
-        tag: 'p',
-      },
-      // This should be filtered out, as we don't currently support <code> tags
-      {
-        children: [
-          {
-            type: 'text',
-            value: 'Should be filtered out...',
-          },
-        ],
-        type: 'tag',
-        tag: 'code',
-      },
-    ];
-
-    expect(() => squizNodeToRemirrorNode(squizComponentJSON)).toThrow(`Unsupported node type provided: code`);
+  it.each([
+    [
+      'Unsupported DOM tag',
+      [
+        {
+          children: [
+            {
+              type: 'text',
+              value: 'Should throw an error.',
+            },
+          ],
+          type: 'tag',
+          tag: 'code',
+        },
+      ],
+      'Unsupported node type provided: tag (tag: code)',
+    ],
+    [
+      'Unsupported node type',
+      [
+        {
+          children: [
+            {
+              type: 'text',
+              value: 'Should throw an error.',
+            },
+          ],
+          type: 'unsupported-type',
+        },
+      ],
+      'Unsupported node type provided: unsupported-type',
+    ],
+  ])('should throw an error for non supported node types', (description: string, node: any, expectedError: string) => {
+    expect(() => squizNodeToRemirrorNode(node)).toThrow(expectedError);
   });
 
   it('should handle pre formatted text', () => {
@@ -304,4 +310,32 @@ describe('squizNodeToRemirrorNode', () => {
     const result = squizNodeToRemirrorNode(squizComponentJSON);
     expect(result).toEqual(expected);
   });
+
+  it.each([...sharedNodeExamples, ...squizOnlyNodeExamples])(
+    'should convert a Squiz node to the expected Remirror representation - $description',
+    async ({ remirrorNode, squizNode }: any) => {
+      const result = squizNodeToRemirrorNode([
+        {
+          type: 'tag',
+          tag: 'p',
+          children: squizNode,
+        },
+      ]);
+      expect(result).toEqual({
+        type: 'doc',
+        content: [
+          {
+            type: 'paragraph',
+            attrs: {
+              nodeIndent: null,
+              nodeLineHeight: null,
+              nodeTextAlignment: null,
+              style: '',
+            },
+            content: [remirrorNode],
+          },
+        ],
+      });
+    },
+  );
 });

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

@@ -1,12 +1,20 @@
-import { RemirrorJSON, Literal, ObjectMark } from '@remirror/core';
+import { RemirrorJSON, ObjectMark } from '@remirror/core';
+import { Attrs } from 'prosemirror-model';
 import { FORMATTED_TEXT_MODELS as FormattedTextModels } from '@squiz/dx-json-schema-lib';
+import { undefinedIfEmpty } from '../../undefinedIfEmpty';
+import { MarkName, NodeName } from '../../../Extensions/Extensions';
 
 type FormattedText = FormattedTextModels.v1.FormattedText;
-type FormattedTextTag = FormattedTextModels.v1.FormattedTextTag;
 type FormattedNodes = FormattedTextModels.v1.FormattedNodes;
 
-const getNodeType = (node: FormattedTextTag): string => {
-  const nodeTypeMap: Record<string, string> = {
+const getNodeType = (node: FormattedNodes): string => {
+  const typeMap: Record<string, string> = {
+    'link-to-matrix-asset': NodeName.Text,
+    'matrix-image': NodeName.AssetImage,
+    text: 'text',
+  };
+
+  const tagMap: Record<string, string> = {
     h1: 'heading',
     h2: 'heading',
     h3: 'heading',
@@ -16,97 +24,118 @@ const getNodeType = (node: FormattedTextTag): string => {
     img: 'image',
     pre: 'preformatted',
     p: 'paragraph',
-    text: 'paragraph',
+    a: NodeName.Text,
+    span: NodeName.Text,
   };
 
-  const nodeType = nodeTypeMap[node.tag || node.type];
+  if (typeMap[node.type]) {
+    return typeMap[node.type];
+  }
 
-  // Unsupported node type
-  if (!nodeType) throw new Error(`Unsupported node type provided: ${node.tag}`);
+  if (node.type === 'tag' && tagMap[node.tag]) {
+    return tagMap[node.tag];
+  }
 
-  return nodeType;
+  // Unsupported node type
+  throw new Error(
+    node.type === 'tag'
+      ? `Unsupported node type provided: ${node.type} (tag: ${node.tag})`
+      : `Unsupported node type provided: ${node.type}`,
+  );
 };
 
-const getNodeAttributes = (node: FormattedTextTag): Record<string, Literal> => {
-  const { alignment } = node.formattingOptions || {};
-  return {
-    nodeIndent: null,
-    nodeTextAlignment: alignment ?? null,
-    nodeLineHeight: null,
-    style: '',
-    level: node.tag?.startsWith('h') ? parseInt(node.tag.substring(1)) : undefined,
-  };
+const getNodeAttributes = (node: FormattedNodes): Attrs => {
+  if (node.type === 'tag' && node.tag === 'img') {
+    return {
+      alt: node.attributes?.alt,
+      height: node.attributes?.height,
+      width: node.attributes?.width,
+      src: node.attributes?.src,
+      title: node.attributes?.title,
+    };
+  } else if (node.type === 'matrix-image') {
+    return {
+      matrixAssetId: node.matrixAssetId,
+      matrixDomain: node.matrixDomain,
+      matrixIdentifier: node.matrixIdentifier,
+    };
+  } else if (node.type === 'tag') {
+    return {
+      nodeIndent: null,
+      nodeTextAlignment: node.formattingOptions?.alignment || null,
+      nodeLineHeight: null,
+      style: '',
+      level: node.tag?.startsWith('h') ? parseInt(node.tag.substring(1)) : undefined,
+    };
+  }
+
+  return {};
 };
 
-const resolveChild = (child: FormattedNodes): RemirrorJSON => {
-  if (child.type === 'text') {
-    return { type: 'text', text: child.value };
+const getNodeMarks = (node: FormattedNodes): ObjectMark[] => {
+  const marks: ObjectMark[] = [];
+
+  if (node.type === 'tag' && node.tag === 'a') {
+    marks.push({
+      type: MarkName.Link,
+      attrs: {
+        href: node.attributes?.href,
+        target: node.attributes?.target ?? null,
+        auto: false,
+        title: node.attributes?.title ?? null,
+      },
+    });
+  } else if (node.type === 'link-to-matrix-asset') {
+    marks.push({
+      type: MarkName.AssetLink,
+      attrs: {
+        matrixAssetId: node.matrixAssetId,
+        matrixDomain: node.matrixDomain,
+        matrixIdentifier: node.matrixIdentifier,
+        target: node.target,
+      },
+    });
   }
 
-  let text = '';
-  const marks: ObjectMark[] = [];
+  // Handle font formatting
+  if ('font' in node) {
+    node.font?.bold && marks.push({ type: 'bold' });
+    node.font?.italics && marks.push({ type: 'italic' });
+    node.font?.underline && marks.push({ type: 'underline' });
+  }
+
+  return marks;
+};
 
-  if (child.type === 'tag') {
-    // Handle link type
-    if (child.tag === 'a') {
-      marks.push({
-        type: 'link',
-        attrs: {
-          href: child.attributes?.href,
-          target: child.attributes?.target ?? null,
-          auto: false,
-          title: child.attributes?.title ?? null,
-        },
-      });
-    }
-
-    // Handle image type
-    if (child.tag === 'img') {
+const unwrapNodeIfNeeded = (node: RemirrorJSON): RemirrorJSON[] => {
+  if (node.type === 'text' && node.content?.length) {
+    return node.content.map((child) => {
       return {
-        type: 'image',
-        attrs: {
-          alt: child.attributes?.alt,
-          height: child.attributes?.height,
-          width: child.attributes?.width,
-          src: child.attributes?.src,
-          title: child.attributes?.title,
-        },
+        ...child,
+        marks: [...(child.marks || []), ...(node.marks || [])],
       };
-    }
-
-    // Handle font formatting
-    child.font?.bold && marks.push({ type: 'bold' });
-    child.font?.italics && marks.push({ type: 'italic' });
-    child.font?.underline && marks.push({ type: 'underline' });
-
-    // For now all children types should be "text"
-    text = child.children[0].type === 'text' ? child.children[0].value : '';
+    });
   }
 
-  return { type: 'text', marks, text };
+  return [node];
 };
 
-const formatNode = (node: FormattedNodes): RemirrorJSON => {
-  let content: RemirrorJSON[] | undefined;
-
-  if (node.type === 'tag') {
-    content = node.children.length ? node.children.map((child: FormattedNodes) => resolveChild(child)) : undefined;
-  }
+const formatNode = (node: FormattedNodes): RemirrorJSON[] => {
+  const children: RemirrorJSON[] = [];
 
-  if (node.type === 'text') {
-    content = [
-      {
-        type: 'text',
-        text: node.value,
-      },
-    ];
+  if ('children' in node) {
+    node.children.forEach((child: FormattedNodes) => {
+      children.push(...formatNode(child));
+    });
   }
 
-  return {
-    type: getNodeType(node as FormattedTextTag),
-    attrs: getNodeAttributes(node as FormattedTextTag),
-    content,
-  };
+  return unwrapNodeIfNeeded({
+    type: getNodeType(node),
+    attrs: undefinedIfEmpty(getNodeAttributes(node)),
+    marks: undefinedIfEmpty(getNodeMarks(node)),
+    text: node.type === 'text' ? node.value : undefined,
+    content: undefinedIfEmpty(children),
+  });
 };
 
 /**
@@ -116,8 +145,15 @@ const formatNode = (node: FormattedNodes): RemirrorJSON => {
  * @returns {RemirrorJSON} The converted Remirror JSON.
  */
 export const squizNodeToRemirrorNode = (nodes: FormattedText): RemirrorJSON => {
-  return {
-    type: 'doc',
-    content: nodes.filter((node: FormattedNodes) => getNodeType(node as FormattedTextTag)).map(formatNode),
-  };
+  let children: RemirrorJSON[] = [];
+
+  nodes.forEach((node) => {
+    children.push(...formatNode(node));
+  });
+
+  if (children.find((child) => child.type === 'text')) {
+    children = [{ type: 'paragraph', content: children }];
+  }
+
+  return { type: 'doc', content: children };
 };

package/src/utils/resolveMatrixAssetUrl.spec.ts

@@ -0,0 +1,26 @@
+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

@@ -0,0 +1,7 @@
+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();
+};

package/src/utils/undefinedIfEmpty.spec.ts

@@ -0,0 +1,12 @@
+import { undefinedIfEmpty } from './undefinedIfEmpty';
+
+describe('undefinedIfEmpty', () => {
+  it.each([
+    ['empty object', {}, undefined],
+    ['non-empty object', { a: 'not empty' }, { a: 'not empty' }],
+    ['empty array', [], undefined],
+    ['non-empty array', ['not empty'], ['not empty']],
+  ])('Returns expected for %s', (description: string, object: object, expected: object | undefined) => {
+    expect(undefinedIfEmpty(object)).toEqual(expected);
+  });
+});

package/src/utils/undefinedIfEmpty.ts

@@ -0,0 +1,3 @@
+export const undefinedIfEmpty = <T extends object>(object: T): T | undefined => {
+  return Object.keys(object).length > 0 ? object : undefined;
+};

package/tailwind.config.cjs

@@ -75,6 +75,9 @@ module.exports = {
           300: '#0774d2',
           400: '#044985',
         },
+        red: {
+          300: '#d72321',
+        },
       },
     },
   },

package/tests/renderWithEditor.tsx

@@ -1,15 +1,22 @@
-import React, { ReactElement, useEffect } from 'react';
+import React, { ReactElement, useContext, useEffect } from 'react';
 import { render, RenderOptions } from '@testing-library/react';
 import { Extension, RemirrorContentType, RemirrorManager } from '@remirror/core';
 import { CorePreset } from '@remirror/preset-core';
 import { BuiltinPreset } from 'remirror';
 import { EditorComponent, Remirror, useRemirror } from '@remirror/react';
-import { Extensions } from '../src/Extensions/Extensions';
 import { RemirrorTestChain } from 'jest-remirror';
+import merge from 'deepmerge';
+import { createExtensions } from '../src/Extensions/Extensions';
+import { EditorContext } from '../src/Editor/EditorContext';
+import { FloatingToolbar } from '../src/EditorToolbar/FloatingToolbar';
+import { defaultEditorContext, EditorContextOptions } from '../src/Editor/EditorContext';
+import { DeepPartial } from '../src/types';
 
 export type EditorRenderOptions = RenderOptions & {
   content?: RemirrorContentType;
+  editable?: boolean;
   extensions?: Extension[];
+  context?: DeepPartial<EditorContextOptions>;
 };
 
 type TestEditorProps = EditorRenderOptions & {
@@ -27,9 +34,10 @@ type EditorRenderResult = {
   };
 };
 
-const TestEditor = ({ children, extensions, content, onReady }: TestEditorProps) => {
+const TestEditor = ({ children, extensions, content, onReady, editable }: TestEditorProps) => {
+  const context = useContext(EditorContext);
   const { manager, state, setState } = useRemirror({
-    extensions: () => extensions || Extensions(),
+    extensions: () => extensions || createExtensions(context)(),
     content: content,
     selection: 'start',
     stringHandler: 'html',
@@ -43,12 +51,14 @@ const TestEditor = ({ children, extensions, content, onReady }: TestEditorProps)
     <Remirror
       manager={manager}
       state={state}
+      editable={editable}
       onChange={(params) => {
         setState(params.state);
       }}
     >
       {children}
       <EditorComponent />
+      {editable && <FloatingToolbar />}
     </Remirror>
   );
 };
@@ -79,6 +89,7 @@ export const renderWithEditor = async (
   ui: ReactElement | null,
   options?: EditorRenderOptions,
 ): Promise<EditorRenderResult> => {
+  const context = merge(defaultEditorContext, options?.context || {}) as EditorContextOptions;
   const result: Partial<EditorRenderResult> = {
     getHtmlContent: () => document.querySelector('.remirror-editor')?.innerHTML,
     getJsonContent: () => result.editor?.state.doc.content.child(0).toJSON(),
@@ -87,15 +98,17 @@ export const renderWithEditor = async (
   let isReady = false;
 
   const { container } = render(
-    <TestEditor
-      onReady={(manager) => {
-        result.editor = RemirrorTestChain.create(manager);
-        isReady = true;
-      }}
-      {...options}
-    >
-      {ui}
-    </TestEditor>,
+    <EditorContext.Provider value={context}>
+      <TestEditor
+        onReady={(manager) => {
+          result.editor = RemirrorTestChain.create(manager);
+          isReady = true;
+        }}
+        {...options}
+      >
+        {ui}
+      </TestEditor>
+    </EditorContext.Provider>,
   );
 
   if (!isReady) {

package/tsconfig.json

@@ -11,7 +11,7 @@
     "strict": true,
     "forceConsistentCasingInFileNames": true,
     "module": "CommonJS",
-    "moduleResolution": "Node",
+    "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "react",

package/lib/FormattedTextEditor.d.ts

@@ -1,2 +0,0 @@
-import Editor from './Editor/Editor';
-export default Editor;

package/lib/FormattedTextEditor.js

@@ -1,7 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const Editor_1 = __importDefault(require("./Editor/Editor"));
-exports.default = Editor_1.default;

package/lib/utils/converters/validNodeTypes.d.ts

@@ -1,2 +0,0 @@
-import { ProsemirrorNode } from 'remirror';
-export declare const validRemirrorNode: (node: ProsemirrorNode) => boolean;

package/lib/utils/converters/validNodeTypes.js

@@ -1,21 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.validRemirrorNode = void 0;
-const Extensions_1 = require("../../Extensions/Extensions");
-const validRemirrorNode = (node) => {
-    if (!node)
-        return false;
-    const nodeType = node.type.name;
-    const nodeMarks = node.marks;
-    // This is pulling in the currently supported extensions, this works for now...
-    // Could also just hard code these in as we go, but this should make it easier as we add more extensions
-    const supportedNodes = [...(0, Extensions_1.Extensions)().map((extension) => extension.name), 'doc', 'text'];
-    if (!supportedNodes.includes(nodeType))
-        return false;
-    for (let i = 0; i < nodeMarks.length; i++) {
-        if (!supportedNodes.includes(nodeMarks[i].type.name))
-            return false;
-    }
-    return true;
-};
-exports.validRemirrorNode = validRemirrorNode;

package/src/Editor/Editor.mock.tsx

@@ -1,43 +0,0 @@
-import { Remirror, useRemirror, useRemirrorContext } from '@remirror/react';
-import React from 'react';
-import { Toolbar, FloatingToolbar } from '../EditorToolbar';
-import { Extensions } from '../Extensions/Extensions';
-
-type MockEditorProps = {
-  setContent?: any;
-};
-
-/**
- * @deprecated Use "renderWithEditor" and render the specific component being tested instead.
- */
-export const MockEditor = ({ setContent }: MockEditorProps) => {
-  const { manager, state, setState } = useRemirror({
-    extensions: Extensions,
-    selection: 'start',
-    stringHandler: 'html',
-  });
-
-  const Component = () => {
-    setContent && setContent.mockImplementation(useRemirrorContext().setContent);
-    return null;
-  };
-
-  const handleChange = (parameter: { state: any }) => {
-    setState(parameter.state);
-  };
-
-  return (
-    <Remirror
-      manager={manager}
-      onChange={handleChange}
-      placeholder="Write something"
-      label="Text editor"
-      state={state}
-      autoRender="start"
-    >
-      <Toolbar />
-      <Component />
-      <FloatingToolbar />
-    </Remirror>
-  );
-};

package/src/FormattedTextEditor.spec.tsx

@@ -1,10 +0,0 @@
-import { render } from '@testing-library/react';
-import { FormattedTextEditor } from './';
-import React from 'react';
-
-describe('<FormattedTextEditor />', () => {
-  it('should render "<FormattedTextEditor />" component', () => {
-    const { baseElement } = render(<FormattedTextEditor />);
-    expect(baseElement).toBeTruthy();
-  });
-});

package/src/FormattedTextEditor.tsx

@@ -1,3 +0,0 @@
-import Editor from './Editor/Editor';
-
-export default Editor;

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

@@ -1,33 +0,0 @@
-import { validRemirrorNode } from './validNodeTypes';
-
-describe('validRemirrorNode', () => {
-  it('returns false for null input', () => {
-    expect(validRemirrorNode(null as any)).toBe(false);
-  });
-
-  it('returns false for unsupported node type', () => {
-    const node = { type: { name: 'unsupported' }, marks: [] };
-    expect(validRemirrorNode(node as any)).toBe(false);
-  });
-
-  it('returns false for unsupported mark type', () => {
-    const node = {
-      type: { name: 'doc' },
-      marks: [{ type: { name: 'unsupported' } }],
-    };
-    expect(validRemirrorNode(node as any)).toBe(false);
-  });
-
-  it('returns true for supported node type with no marks', () => {
-    const node = { type: { name: 'doc' }, marks: [] };
-    expect(validRemirrorNode(node as any)).toBe(true);
-  });
-
-  it('returns true for supported node type with supported mark type', () => {
-    const node = {
-      type: { name: 'doc' },
-      marks: [{ type: { name: 'bold' } }],
-    };
-    expect(validRemirrorNode(node as any)).toBe(true);
-  });
-});