@squiz/formatted-text-editor 0.0.0-rbv2-20240530041851

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

@@ -0,0 +1,1058 @@
+import { FORMATTED_TEXT_MODELS as FormattedTextModels } from '@squiz/dx-json-schema-lib';
+import { remirrorNodeToSquizNode, resolveNodeTag } from './remirrorNodeToSquizNode';
+import { renderWithEditor } from '../../../../tests';
+import { RemirrorJSON } from '@remirror/core';
+import { sharedNodeExamples } from '../mocks/squizNodeJson.mock';
+import { ParagraphExtension, SupExtension } from 'remirror/extensions';
+
+type FormattedText = FormattedTextModels.v1.FormattedText;
+type FormattingOptions = FormattedTextModels.v1.FormattingOptions;
+
+describe('remirrorNodeToSquizNode', () => {
+  it('should convert a simple Remirror node to a Squiz component JSON object', async () => {
+    const content: RemirrorJSON = {
+      type: 'doc',
+      content: [
+        {
+          type: 'paragraph',
+          content: [
+            {
+              type: 'text',
+              text: 'Hello world!',
+            },
+          ],
+        },
+      ],
+    };
+
+    const { editor } = await renderWithEditor(null, { content });
+
+    const expected: FormattedText = [
+      {
+        type: 'tag',
+        tag: 'p',
+        children: [{ type: 'text', value: 'Hello world!' }],
+      },
+    ];
+
+    const result = remirrorNodeToSquizNode(editor.doc);
+    expect(result).toEqual(expected);
+  });
+
+  it('should handle preformatted formatting', async () => {
+    const content: RemirrorJSON = {
+      type: 'doc',
+      content: [
+        {
+          type: 'preformatted',
+          attrs: {
+            nodeIndent: null,
+            nodeTextAlignment: null,
+            nodeLineHeight: null,
+            style: '',
+          },
+          content: [
+            {
+              type: 'text',
+              text: 'Hello world',
+            },
+          ],
+        },
+      ],
+    };
+
+    const { editor } = await renderWithEditor(null, { content });
+
+    const expected: FormattedText = [
+      {
+        type: 'tag',
+        tag: 'pre',
+        children: [{ type: 'text', value: 'Hello world' }],
+      },
+    ];
+
+    const result = remirrorNodeToSquizNode(editor.doc);
+    expect(result).toEqual(expected);
+  });
+
+  it('should handle code block formatting', async () => {
+    const content: RemirrorJSON = {
+      type: 'doc',
+      content: [
+        {
+          type: 'codeBlock',
+          attrs: {
+            language: 'js',
+            wrap: true,
+          },
+          content: [
+            {
+              type: 'text',
+              text: 'Hello world',
+            },
+          ],
+        },
+      ],
+    };
+
+    const { editor } = await renderWithEditor(null, { content });
+
+    const expected: FormattedText = [
+      {
+        type: 'tag',
+        tag: 'code',
+        children: [{ type: 'text', value: 'Hello world' }],
+        attributes: {
+          language: 'js',
+        },
+      },
+    ];
+
+    const result = remirrorNodeToSquizNode(editor.doc);
+    expect(result).toEqual(expected);
+  });
+
+  it('should handle line break formatting', async () => {
+    const content: RemirrorJSON = {
+      type: 'doc',
+      content: [
+        {
+          type: 'hardBreak',
+        },
+      ],
+    };
+
+    const { editor } = await renderWithEditor(null, { content });
+
+    const expected: FormattedText = [
+      {
+        type: 'tag',
+        tag: 'br',
+        children: [],
+      },
+    ];
+
+    const result = remirrorNodeToSquizNode(editor.doc);
+    expect(result).toEqual(expected);
+  });
+
+  it('should handle images', async () => {
+    const content: RemirrorJSON = {
+      type: 'doc',
+      content: [
+        {
+          type: 'paragraph',
+          attrs: {
+            nodeIndent: null,
+            nodeTextAlignment: null,
+            nodeLineHeight: null,
+            style: '',
+          },
+          content: [
+            {
+              type: 'image',
+              attrs: {
+                alt: '',
+                crop: null,
+                height: 150,
+                width: 200,
+                rotate: null,
+                src: 'https://media2.giphy.com/media/3o6ozsIxg5legYvggo/giphy.gif',
+                title: '',
+                fileName: null,
+                resizable: false,
+              },
+            },
+          ],
+        },
+      ],
+    };
+
+    const { editor } = await renderWithEditor(null, { content });
+
+    const expected: FormattedText = [
+      {
+        type: 'tag',
+        tag: 'p',
+        children: [
+          {
+            children: [],
+            attributes: {
+              alt: '',
+              height: '150',
+              width: '200',
+              src: 'https://media2.giphy.com/media/3o6ozsIxg5legYvggo/giphy.gif',
+              title: '',
+            },
+            type: 'tag',
+            tag: 'img',
+          },
+        ],
+      },
+    ];
+
+    const result = remirrorNodeToSquizNode(editor.doc);
+    expect(result).toEqual(expected);
+  });
+
+  it('should handle horizontal lines', async () => {
+    const content: RemirrorJSON = {
+      type: 'doc',
+      content: [
+        {
+          type: 'horizontalRule',
+          attrs: {
+            nodeIndent: null,
+            nodeTextAlignment: null,
+            nodeLineHeight: null,
+            style: '',
+          },
+        },
+      ],
+    };
+
+    const { editor } = await renderWithEditor(null, { content });
+
+    const expected: FormattedText = [
+      {
+        type: 'tag',
+        tag: 'hr',
+        children: [],
+      },
+    ];
+
+    const result = remirrorNodeToSquizNode(editor.doc);
+    expect(result).toEqual(expected);
+  });
+
+  it('should handle tables', async () => {
+    const content: RemirrorJSON = {
+      type: 'doc',
+      content: [
+        {
+          type: 'table',
+          attrs: {
+            isControllersInjected: true,
+            insertButtonAttrs: null,
+          },
+          content: [
+            {
+              type: 'tableRow',
+              content: [
+                {
+                  type: 'tableControllerCell',
+                  attrs: {
+                    colspan: 1,
+                    rowspan: 1,
+                    colwidth: null,
+                    background: null,
+                  },
+                },
+                {
+                  type: 'tableControllerCell',
+                  attrs: {
+                    colspan: 1,
+                    rowspan: 1,
+                    colwidth: [100],
+                    background: null,
+                  },
+                },
+                {
+                  type: 'tableControllerCell',
+                  attrs: {
+                    colspan: 1,
+                    rowspan: 1,
+                    colwidth: null,
+                    background: null,
+                  },
+                },
+                {
+                  type: 'tableControllerCell',
+                  attrs: {
+                    colspan: 1,
+                    rowspan: 1,
+                    colwidth: null,
+                    background: null,
+                  },
+                },
+              ],
+            },
+            {
+              type: 'tableRow',
+              content: [
+                {
+                  type: 'tableControllerCell',
+                  attrs: {
+                    colspan: 1,
+                    rowspan: 1,
+                    colwidth: null,
+                    background: null,
+                  },
+                },
+                {
+                  type: 'tableCell',
+                  attrs: {
+                    colspan: 1,
+                    rowspan: 1,
+                    colwidth: [100],
+                    background: null,
+                  },
+                  content: [
+                    {
+                      type: 'paragraph',
+                      attrs: {
+                        nodeIndent: null,
+                        nodeTextAlignment: '',
+                        nodeLineHeight: null,
+                        style: '',
+                      },
+                      content: [
+                        {
+                          type: 'text',
+                          text: 'Col1Row1',
+                        },
+                      ],
+                    },
+                  ],
+                },
+                {
+                  type: 'tableCell',
+                  attrs: {
+                    colspan: 1,
+                    rowspan: 1,
+                    colwidth: null,
+                    background: null,
+                  },
+                  content: [
+                    {
+                      type: 'paragraph',
+                      attrs: {
+                        nodeIndent: null,
+                        nodeTextAlignment: '',
+                        nodeLineHeight: null,
+                        style: '',
+                      },
+                      content: [
+                        {
+                          type: 'text',
+                          text: 'Col2Row1',
+                        },
+                      ],
+                    },
+                  ],
+                },
+                {
+                  type: 'tableCell',
+                  attrs: {
+                    colspan: 1,
+                    rowspan: 1,
+                    colwidth: null,
+                    background: null,
+                  },
+                  content: [
+                    {
+                      type: 'paragraph',
+                      attrs: {
+                        nodeIndent: null,
+                        nodeTextAlignment: '',
+                        nodeLineHeight: null,
+                        style: '',
+                      },
+                      content: [
+                        {
+                          type: 'text',
+                          text: 'Col3Row1',
+                        },
+                      ],
+                    },
+                  ],
+                },
+              ],
+            },
+            {
+              type: 'tableRow',
+              content: [
+                {
+                  type: 'tableControllerCell',
+                  attrs: {
+                    colspan: 1,
+                    rowspan: 1,
+                    colwidth: null,
+                    background: null,
+                  },
+                },
+                {
+                  type: 'tableCell',
+                  attrs: {
+                    colspan: 1,
+                    rowspan: 1,
+                    colwidth: [100],
+                    background: null,
+                  },
+                  content: [
+                    {
+                      type: 'paragraph',
+                      attrs: {
+                        nodeIndent: null,
+                        nodeTextAlignment: '',
+                        nodeLineHeight: null,
+                        style: '',
+                      },
+                      content: [
+                        {
+                          type: 'text',
+                          text: 'Col1Row2',
+                        },
+                      ],
+                    },
+                  ],
+                },
+                {
+                  type: 'tableCell',
+                  attrs: {
+                    colspan: 1,
+                    rowspan: 1,
+                    colwidth: null,
+                    background: null,
+                  },
+                  content: [
+                    {
+                      type: 'paragraph',
+                      attrs: {
+                        nodeIndent: null,
+                        nodeTextAlignment: '',
+                        nodeLineHeight: null,
+                        style: '',
+                      },
+                      content: [
+                        {
+                          type: 'text',
+                          text: 'Col2Row2',
+                        },
+                      ],
+                    },
+                  ],
+                },
+                {
+                  type: 'tableCell',
+                  attrs: {
+                    colspan: 1,
+                    rowspan: 1,
+                    colwidth: null,
+                    background: null,
+                  },
+                  content: [
+                    {
+                      type: 'paragraph',
+                      attrs: {
+                        nodeIndent: null,
+                        nodeTextAlignment: '',
+                        nodeLineHeight: null,
+                        style: '',
+                      },
+                      content: [
+                        {
+                          type: 'text',
+                          text: 'Col3Row2',
+                        },
+                      ],
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    };
+
+    const { editor } = await renderWithEditor(null, { content });
+
+    const expected: FormattedText = [
+      {
+        type: 'tag',
+        tag: 'table',
+        children: [
+          {
+            type: 'tag',
+            tag: 'tr',
+            children: [
+              {
+                type: 'tag',
+                tag: 'th',
+                children: [],
+                attributes: {
+                  colspan: '1',
+                  rowspan: '1',
+                  tableControllerCell: 'true',
+                },
+              },
+              {
+                type: 'tag',
+                tag: 'th',
+                children: [],
+                attributes: {
+                  colspan: '1',
+                  rowspan: '1',
+                  tableControllerCell: 'true',
+                  colwidth: '100',
+                },
+              },
+              {
+                type: 'tag',
+                tag: 'th',
+                children: [],
+                attributes: {
+                  colspan: '1',
+                  rowspan: '1',
+                  tableControllerCell: 'true',
+                },
+              },
+              {
+                type: 'tag',
+                tag: 'th',
+                children: [],
+                attributes: {
+                  colspan: '1',
+                  rowspan: '1',
+                  tableControllerCell: 'true',
+                },
+              },
+            ],
+          },
+          {
+            type: 'tag',
+            tag: 'tr',
+            children: [
+              {
+                type: 'tag',
+                tag: 'th',
+                children: [],
+                attributes: {
+                  colspan: '1',
+                  rowspan: '1',
+                  tableControllerCell: 'true',
+                },
+              },
+              {
+                type: 'tag',
+                tag: 'td',
+                children: [
+                  {
+                    type: 'tag',
+                    tag: 'p',
+                    children: [
+                      {
+                        type: 'text',
+                        value: 'Col1Row1',
+                      },
+                    ],
+                  },
+                ],
+                attributes: {
+                  colspan: '1',
+                  rowspan: '1',
+                  colwidth: '100',
+                },
+              },
+              {
+                type: 'tag',
+                tag: 'td',
+                children: [
+                  {
+                    type: 'tag',
+                    tag: 'p',
+                    children: [
+                      {
+                        type: 'text',
+                        value: 'Col2Row1',
+                      },
+                    ],
+                  },
+                ],
+                attributes: {
+                  colspan: '1',
+                  rowspan: '1',
+                },
+              },
+              {
+                type: 'tag',
+                tag: 'td',
+                children: [
+                  {
+                    type: 'tag',
+                    tag: 'p',
+                    children: [
+                      {
+                        type: 'text',
+                        value: 'Col3Row1',
+                      },
+                    ],
+                  },
+                ],
+                attributes: {
+                  colspan: '1',
+                  rowspan: '1',
+                },
+              },
+            ],
+          },
+          {
+            type: 'tag',
+            tag: 'tr',
+            children: [
+              {
+                type: 'tag',
+                tag: 'th',
+                children: [],
+                attributes: {
+                  colspan: '1',
+                  rowspan: '1',
+                  tableControllerCell: 'true',
+                },
+              },
+              {
+                type: 'tag',
+                tag: 'td',
+                children: [
+                  {
+                    type: 'tag',
+                    tag: 'p',
+                    children: [
+                      {
+                        type: 'text',
+                        value: 'Col1Row2',
+                      },
+                    ],
+                  },
+                ],
+                attributes: {
+                  colspan: '1',
+                  rowspan: '1',
+                  colwidth: '100',
+                },
+              },
+              {
+                type: 'tag',
+                tag: 'td',
+                children: [
+                  {
+                    type: 'tag',
+                    tag: 'p',
+                    children: [
+                      {
+                        type: 'text',
+                        value: 'Col2Row2',
+                      },
+                    ],
+                  },
+                ],
+                attributes: {
+                  colspan: '1',
+                  rowspan: '1',
+                },
+              },
+              {
+                type: 'tag',
+                tag: 'td',
+                children: [
+                  {
+                    type: 'tag',
+                    tag: 'p',
+                    children: [
+                      {
+                        type: 'text',
+                        value: 'Col3Row2',
+                      },
+                    ],
+                  },
+                ],
+                attributes: {
+                  colspan: '1',
+                  rowspan: '1',
+                },
+              },
+            ],
+          },
+        ],
+      },
+    ];
+
+    const result = remirrorNodeToSquizNode(editor.doc);
+    expect(result).toEqual(expected);
+  });
+
+  it.each([1, 2, 3, 4, 5, 6])('should handle heading %s formatting', async (level) => {
+    const content: RemirrorJSON = {
+      type: 'doc',
+      content: [
+        {
+          type: 'heading',
+          attrs: {
+            nodeIndent: null,
+            nodeTextAlignment: null,
+            nodeLineHeight: null,
+            style: '',
+            level: level,
+          },
+          content: [
+            {
+              type: 'text',
+              text: 'Hello world',
+            },
+          ],
+        },
+      ],
+    };
+
+    const { editor } = await renderWithEditor(null, { content });
+
+    const expected: FormattedText = [
+      {
+        type: 'tag',
+        tag: `h${level}`,
+        children: [{ type: 'text', value: 'Hello world' }],
+      },
+    ];
+
+    const result = remirrorNodeToSquizNode(editor.doc);
+    expect(result).toEqual(expected);
+  });
+
+  it('should preserve font and attribute options', async () => {
+    const content: RemirrorJSON = {
+      type: 'doc',
+      content: [
+        {
+          type: 'paragraph',
+          content: [
+            {
+              type: 'text',
+              text: 'You can',
+            },
+            {
+              type: 'text',
+              marks: [
+                {
+                  type: 'bold',
+                },
+              ],
+              text: ' click',
+            },
+            {
+              type: 'text',
+              text: ' ',
+            },
+            {
+              type: 'text',
+              marks: [
+                {
+                  type: 'link',
+                  attrs: {
+                    href: 'https://www.google.com/',
+                    target: null,
+                    auto: false,
+                    title: '',
+                  },
+                },
+                {
+                  type: 'italic',
+                },
+              ],
+              text: 'here',
+            },
+            {
+              type: 'text',
+              marks: [
+                {
+                  type: 'italic',
+                },
+              ],
+              text: ' ',
+            },
+            {
+              type: 'text',
+              text: 'to go to',
+            },
+            {
+              type: 'text',
+              marks: [
+                {
+                  type: 'bold',
+                },
+                {
+                  type: 'italic',
+                },
+                {
+                  type: 'underline',
+                },
+              ],
+              text: ' GOOGLE!',
+            },
+          ],
+        },
+      ],
+    };
+
+    const { editor } = await renderWithEditor(null, { content });
+
+    const expected: FormattedText = [
+      {
+        children: [
+          {
+            type: 'text',
+            value: 'You can',
+          },
+          {
+            children: [
+              {
+                type: 'text',
+                value: ' click',
+              },
+            ],
+            tag: 'strong',
+            type: 'tag',
+          },
+          {
+            type: 'text',
+            value: ' ',
+          },
+          {
+            children: [
+              {
+                type: 'tag',
+                tag: 'a',
+                children: [
+                  {
+                    type: 'text',
+                    value: 'here',
+                  },
+                ],
+                attributes: {
+                  href: 'https://www.google.com/',
+                  title: '',
+                },
+              },
+            ],
+
+            tag: 'em',
+            type: 'tag',
+          },
+          {
+            children: [
+              {
+                type: 'text',
+                value: ' ',
+              },
+            ],
+            tag: 'em',
+            type: 'tag',
+          },
+          {
+            type: 'text',
+            value: 'to go to',
+          },
+          {
+            children: [
+              {
+                type: 'tag',
+                tag: 'em',
+                children: [
+                  {
+                    type: 'tag',
+                    tag: 'strong',
+                    children: [
+                      {
+                        type: 'text',
+                        value: ' GOOGLE!',
+                      },
+                    ],
+                  },
+                ],
+              },
+            ],
+            font: {
+              underline: true,
+            },
+            tag: 'span',
+            type: 'tag',
+          },
+        ],
+        type: 'tag',
+        tag: 'p',
+      },
+    ];
+
+    const result = remirrorNodeToSquizNode(editor.doc);
+    expect(result).toEqual(expected);
+  });
+
+  describe('preserve text formatting - %s', () => {
+    it.each([
+      ['left', { alignment: 'left' } as FormattingOptions],
+      ['right', { alignment: 'right' } as FormattingOptions],
+      ['center', { alignment: 'center' } as FormattingOptions],
+      ['justify', { alignment: 'justify' } as FormattingOptions],
+      ['start', { alignment: 'left' } as FormattingOptions],
+      ['end', { alignment: 'right' } as FormattingOptions],
+      ['none', undefined],
+      [undefined, undefined],
+    ])(
+      'should preserve text alignment',
+      async (remirrorTextAlignment: string | undefined, expectedFormattingOptions: FormattingOptions | undefined) => {
+        const content: RemirrorJSON = {
+          type: 'doc',
+          content: [
+            {
+              type: 'paragraph',
+              attrs: {
+                nodeIndent: null,
+                nodeTextAlignment: remirrorTextAlignment,
+                nodeLineHeight: null,
+                style: '',
+              },
+              content: [
+                {
+                  type: 'text',
+                  text: 'Hello world!',
+                },
+              ],
+            },
+          ],
+        };
+
+        const { editor } = await renderWithEditor(null, { content });
+
+        const expected: FormattedText = [
+          {
+            children: [
+              {
+                type: 'text',
+                value: 'Hello world!',
+              },
+            ],
+            formattingOptions: expectedFormattingOptions,
+            type: 'tag',
+            tag: 'p',
+          },
+        ];
+
+        const result = remirrorNodeToSquizNode(editor.doc);
+        expect(result).toEqual(expected);
+      },
+    );
+  });
+
+  it('should handle invalid Remirror node provided', () => {
+    expect(() => remirrorNodeToSquizNode(false as any)).toThrow(
+      'Unable to convert from Remirror to Node data structure, unexpected node provided.',
+    );
+  });
+
+  it('should handle no content provided by Remirror', async () => {
+    const content: RemirrorJSON = {
+      type: 'doc',
+    };
+
+    const { editor } = await renderWithEditor(null, { content });
+
+    const result = remirrorNodeToSquizNode(editor.doc);
+    expect(result).toBeUndefined();
+  });
+
+  it.each(sharedNodeExamples)(
+    'should convert a Remirror node to the expected Squiz representation - $description',
+    async ({ remirrorNode, squizNode }: any) => {
+      const { editor } = await renderWithEditor(null, {
+        content: {
+          type: 'doc',
+          content: [{ type: 'paragraph', content: [remirrorNode] }],
+        },
+      });
+
+      expect(remirrorNodeToSquizNode(editor.doc)).toEqual([
+        {
+          type: 'tag',
+          tag: 'p',
+          children: squizNode,
+        },
+      ]);
+    },
+  );
+
+  it('should throw if the remirror node has an unsupported mark applied', async () => {
+    const { editor } = await renderWithEditor(null, {
+      extensions: [new ParagraphExtension(), new SupExtension()],
+      content: {
+        type: 'doc',
+        content: [{ type: 'paragraph', marks: [{ type: 'sup' }], content: [] }],
+      },
+    });
+
+    expect(() => remirrorNodeToSquizNode(editor.doc)).toThrow('Unsupported mark "sup" was applied to node.');
+  });
+
+  it('should ignore empty root node', async () => {
+    const { editor } = await renderWithEditor(null, {
+      content: {
+        type: 'doc',
+        content: [{ type: 'paragraph', content: [] }],
+      },
+    });
+
+    expect(remirrorNodeToSquizNode(editor.doc)).toBeUndefined();
+  });
+});
+
+describe('resolveNodeTag', () => {
+  it('should return the correct tag name for a node with a toDOM method that returns a Node', () => {
+    const node: any = {
+      type: {
+        spec: {
+          toDOM: () => document.createElement('div'),
+        },
+      },
+    };
+    expect(resolveNodeTag(node)).toBe('div');
+  });
+
+  it('should return the correct tag name for a node with a toDOM method that returns an object with a dom property', () => {
+    const node: any = {
+      type: {
+        spec: {
+          toDOM: () => ({ dom: document.createElement('span') }),
+        },
+      },
+    };
+    expect(resolveNodeTag(node)).toBe('span');
+  });
+
+  it('should return the correct tag name for a node with a toDOM method that returns an array', () => {
+    const node: any = {
+      type: {
+        spec: {
+          toDOM: () => ['ul', { class: 'my-list' }],
+        },
+      },
+    };
+    expect(resolveNodeTag(node)).toBe('ul');
+  });
+
+  it('should throw for a node with a toDOM method that returns undefined', () => {
+    const node: any = {
+      type: {
+        spec: {
+          toDOM: () => undefined,
+        },
+      },
+    };
+    expect(() => resolveNodeTag(node)).toThrow('Unexpected Remirror node encountered, cannot resolve tag.');
+  });
+
+  it('should throw for a node without a toDOM method', () => {
+    const node: any = {
+      type: {},
+    };
+    expect(() => resolveNodeTag(node)).toThrow('Unexpected Remirror node encountered, cannot resolve tag.');
+  });
+});