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

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

@@ -0,0 +1,307 @@
+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';
+
+type FormattedText = FormattedTextModels.v1.FormattedText;
+
+describe('squizNodeToRemirrorNode', () => {
+  it('should convert complex Squiz component JSON to Remirror JSON', () => {
+    expect(squizNodeToRemirrorNode(mockSquizNodeJson)).toEqual({
+      type: 'doc',
+      content: [
+        {
+          type: 'paragraph',
+          attrs: {
+            nodeIndent: null,
+            nodeTextAlignment: null,
+            nodeLineHeight: null,
+            style: '',
+          },
+          content: [
+            {
+              type: 'text',
+              text: 'Hello ',
+            },
+            {
+              type: 'text',
+              marks: [
+                {
+                  type: 'link',
+                  attrs: {
+                    href: 'https://www.google.com',
+                    target: null,
+                    auto: false,
+                    title: null,
+                  },
+                },
+                {
+                  type: 'bold',
+                },
+              ],
+              text: 'Mr Bean',
+            },
+            {
+              type: 'text',
+              text: ', nice to ',
+            },
+            {
+              type: 'text',
+              marks: [
+                {
+                  type: 'link',
+                  attrs: {
+                    href: 'https://www.google.com',
+                    target: null,
+                    auto: false,
+                    title: null,
+                  },
+                },
+              ],
+              text: 'meet you',
+            },
+            {
+              type: 'text',
+              text: '.',
+            },
+            {
+              type: 'image',
+              attrs: {
+                alt: 'Test',
+                height: '150',
+                width: '200',
+                src: 'https://media2.giphy.com/media/3o6ozsIxg5legYvggo/giphy.gif',
+                title: '',
+              },
+            },
+          ],
+        },
+      ],
+    });
+  });
+
+  it('should convert top level text component JSON to Remirror JSON', () => {
+    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...',
+            },
+          ],
+        },
+      ],
+      type: 'doc',
+    });
+  });
+
+  it('should handle empty Squiz component JSON', () => {
+    expect(squizNodeToRemirrorNode([])).toEqual({ content: [], type: 'doc' });
+    expect(
+      squizNodeToRemirrorNode([
+        {
+          children: [],
+          type: 'tag',
+          tag: 'p',
+        },
+      ]),
+    ).toEqual({
+      content: [
+        {
+          attrs: { nodeIndent: null, nodeLineHeight: null, nodeTextAlignment: null, style: '' },
+          type: 'paragraph',
+        },
+      ],
+      type: 'doc',
+    });
+  });
+
+  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('should handle pre formatted text', () => {
+    const squizComponentJSON: FormattedText = [
+      {
+        children: [
+          {
+            type: 'text',
+            value: 'Hello world!',
+          },
+        ],
+        type: 'tag',
+        tag: 'pre',
+      },
+    ];
+
+    const expected: RemirrorJSON = {
+      content: [
+        {
+          attrs: { nodeIndent: null, nodeLineHeight: null, nodeTextAlignment: null, style: '' },
+          content: [{ text: 'Hello world!', type: 'text' }],
+          type: 'preformatted',
+        },
+      ],
+      type: 'doc',
+    };
+
+    const result = squizNodeToRemirrorNode(squizComponentJSON);
+    expect(result).toEqual(expected);
+  });
+
+  it('should handle images', () => {
+    const squizComponentJSON: FormattedText = [
+      {
+        children: [
+          {
+            children: [],
+            attributes: {
+              alt: 'This is a test alt',
+              height: '360',
+              width: '480',
+              src: 'https://media2.giphy.com/media/3o6ozsIxg5legYvggo/giphy.gif',
+              title: '',
+            },
+            type: 'tag',
+            tag: 'img',
+          },
+        ],
+        type: 'tag',
+        tag: 'p',
+      },
+    ];
+
+    const expected: RemirrorJSON = {
+      content: [
+        {
+          attrs: { nodeIndent: null, nodeLineHeight: null, nodeTextAlignment: null, style: '' },
+          content: [
+            {
+              type: 'image',
+              attrs: {
+                alt: 'This is a test alt',
+                height: '360',
+                width: '480',
+                src: 'https://media2.giphy.com/media/3o6ozsIxg5legYvggo/giphy.gif',
+                title: '',
+              },
+            },
+          ],
+          type: 'paragraph',
+        },
+      ],
+      type: 'doc',
+    };
+
+    const result = squizNodeToRemirrorNode(squizComponentJSON);
+    expect(result).toEqual(expected);
+  });
+
+  it.each([
+    ['italics', 'italic'],
+    ['bold', 'bold'],
+    ['underline', 'underline'],
+  ])('should handle %s formatting', (a, b) => {
+    const squizComponentJSON: FormattedText = [
+      {
+        children: [
+          {
+            children: [
+              {
+                type: 'text',
+                value: 'Hello world!',
+              },
+            ],
+            font: {
+              [a]: true,
+            },
+            tag: 'span',
+            type: 'tag',
+          },
+        ],
+        type: 'tag',
+        tag: 'p',
+      },
+    ];
+
+    const expected: RemirrorJSON = {
+      content: [
+        {
+          attrs: { nodeIndent: null, nodeLineHeight: null, nodeTextAlignment: null, style: '' },
+          content: [{ text: 'Hello world!', marks: [{ type: b }], type: 'text' }],
+          type: 'paragraph',
+        },
+      ],
+      type: 'doc',
+    };
+
+    const result = squizNodeToRemirrorNode(squizComponentJSON);
+    expect(result).toEqual(expected);
+  });
+
+  it.each([1, 2, 3, 4, 5, 6])('should handle heading %s and set it to level %s', (level) => {
+    const squizComponentJSON: FormattedText = [
+      {
+        children: [
+          {
+            type: 'text',
+            value: 'Hello world!',
+          },
+        ],
+        type: 'tag',
+        tag: `h${level}`,
+      },
+    ];
+
+    const expected: RemirrorJSON = {
+      content: [
+        {
+          attrs: { nodeIndent: null, nodeLineHeight: null, nodeTextAlignment: null, style: '', level },
+          content: [{ text: 'Hello world!', type: 'text' }],
+          type: 'heading',
+        },
+      ],
+      type: 'doc',
+    };
+
+    const result = squizNodeToRemirrorNode(squizComponentJSON);
+    expect(result).toEqual(expected);
+  });
+});

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

@@ -0,0 +1,123 @@
+import { RemirrorJSON, Literal, ObjectMark } from '@remirror/core';
+import { FORMATTED_TEXT_MODELS as FormattedTextModels } from '@squiz/dx-json-schema-lib';
+
+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> = {
+    h1: 'heading',
+    h2: 'heading',
+    h3: 'heading',
+    h4: 'heading',
+    h5: 'heading',
+    h6: 'heading',
+    img: 'image',
+    pre: 'preformatted',
+    p: 'paragraph',
+    text: 'paragraph',
+  };
+
+  const nodeType = nodeTypeMap[node.tag || node.type];
+
+  // Unsupported node type
+  if (!nodeType) throw new Error(`Unsupported node type provided: ${node.tag}`);
+
+  return nodeType;
+};
+
+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 resolveChild = (child: FormattedNodes): RemirrorJSON => {
+  if (child.type === 'text') {
+    return { type: 'text', text: child.value };
+  }
+
+  let text = '';
+  const marks: ObjectMark[] = [];
+
+  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') {
+      return {
+        type: 'image',
+        attrs: {
+          alt: child.attributes?.alt,
+          height: child.attributes?.height,
+          width: child.attributes?.width,
+          src: child.attributes?.src,
+          title: child.attributes?.title,
+        },
+      };
+    }
+
+    // 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 };
+};
+
+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;
+  }
+
+  if (node.type === 'text') {
+    content = [
+      {
+        type: 'text',
+        text: node.value,
+      },
+    ];
+  }
+
+  return {
+    type: getNodeType(node as FormattedTextTag),
+    attrs: getNodeAttributes(node as FormattedTextTag),
+    content,
+  };
+};
+
+/**
+ * Converts Squiz component JSON structure to Remirror node JSON structure.
+ * @param {FormattedText} nodes Squiz nodes to convert to Remirror.
+ * @export
+ * @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),
+  };
+};

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

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

package/src/utils/converters/validNodeTypes.ts

@@ -0,0 +1,21 @@
+import { ProsemirrorNode } from 'remirror';
+import { Extensions } from '../../Extensions/Extensions';
+
+export const validRemirrorNode = (node: ProsemirrorNode): boolean => {
+  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: Array<string> = [...Extensions().map((extension: any) => 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;
+};

package/tests/renderWithEditor.tsx

@@ -13,7 +13,7 @@ export type EditorRenderOptions = RenderOptions & {
 };
 
 type TestEditorProps = EditorRenderOptions & {
-  children: ReactElement;
+  children: ReactElement | null;
   onReady: (manager: RemirrorManager<Extension>) => void;
 };
 
@@ -76,7 +76,7 @@ const TestEditor = ({ children, extensions, content, onReady }: TestEditorProps)
  * @return {Promise<EditorRenderResult>}
  */
 export const renderWithEditor = async (
-  ui: ReactElement,
+  ui: ReactElement | null,
   options?: EditorRenderOptions,
 ): Promise<EditorRenderResult> => {
   const result: Partial<EditorRenderResult> = {