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

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

@@ -0,0 +1,179 @@
+import { FORMATTED_TEXT_MODELS } from '@squiz/dx-json-schema-lib';
+import { htmlToSquizNode } from './htmlToSquizNode';
+
+type FormattedText = FORMATTED_TEXT_MODELS.v1.FormattedText;
+
+describe('htmlToSquizNode', () => {
+  it.each([
+    ['empty string', '', undefined],
+    [
+      'HTML with missing closing tag is converted',
+      '<p>Some invalid HTML content',
+      [
+        {
+          children: [
+            {
+              type: 'text',
+              value: 'Some invalid HTML content',
+            },
+          ],
+          tag: 'p',
+          type: 'tag',
+        },
+      ] as FormattedText,
+    ],
+    ['unsupported HTML is removed', '<script>var hello = "script tags are not supported";</script>', undefined],
+    [
+      'unsupported HTML is removed, supported HTML is retained',
+      '<p>Paragraphs are support</p><script>var hello = "script tags are not supported";</script>' +
+        '<p>Another paragraph</p>',
+      [
+        {
+          children: [
+            {
+              type: 'text',
+              value: 'Paragraphs are support',
+            },
+          ],
+          tag: 'p',
+          type: 'tag',
+        },
+        {
+          children: [
+            {
+              type: 'text',
+              value: 'Another paragraph',
+            },
+          ],
+          tag: 'p',
+          type: 'tag',
+        },
+      ] as FormattedText,
+    ],
+    [
+      'plain text content is nested inside a paragraph tag',
+      'Plain text input',
+      [
+        {
+          children: [
+            {
+              type: 'text',
+              value: 'Plain text input',
+            },
+          ],
+          tag: 'p',
+          type: 'tag',
+        },
+      ] as FormattedText,
+    ],
+    [
+      'HTML tags that are styled via classes are transformed',
+      '<em>Italicised text</em>, <strong>Bold text</strong>',
+      [
+        {
+          children: [
+            {
+              type: 'tag',
+              tag: 'em',
+              children: [
+                {
+                  type: 'text',
+                  value: 'Italicised text',
+                },
+              ],
+            },
+            {
+              type: 'text',
+              value: ', ',
+            },
+            {
+              type: 'tag',
+              tag: 'strong',
+              children: [
+                {
+                  type: 'text',
+                  value: 'Bold text',
+                },
+              ],
+            },
+          ],
+          tag: 'p',
+          type: 'tag',
+        },
+      ] as FormattedText,
+    ],
+    [
+      'HTML tags with attributes are transformed',
+      '<a href="https://www.google.com">Google</a>',
+      [
+        {
+          children: [
+            {
+              type: 'tag',
+              tag: 'a',
+              children: [
+                {
+                  type: 'text',
+                  value: 'Google',
+                },
+              ],
+              attributes: {
+                href: 'https://www.google.com',
+                target: '_self',
+              },
+            },
+          ],
+          tag: 'p',
+          type: 'tag',
+        },
+      ] as FormattedText,
+    ],
+    [
+      'nested block level tags are un-nested/normalised to a supported structure',
+      "<div><p>Div tags are not support, <p>Nested block element also aren't</p></p>" +
+        '<span>Span tags are not supported</span>',
+      [
+        {
+          children: [
+            {
+              type: 'text',
+              value: 'Div tags are not support,',
+            },
+          ],
+          tag: 'p',
+          type: 'tag',
+        },
+        {
+          children: [
+            {
+              type: 'text',
+              value: "Nested block element also aren't",
+            },
+          ],
+          tag: 'p',
+          type: 'tag',
+        },
+        {
+          children: [],
+          tag: 'p',
+          type: 'tag',
+        },
+        {
+          children: [
+            {
+              type: 'text',
+              value: 'Span tags are not supported',
+            },
+          ],
+          tag: 'p',
+          type: 'tag',
+        },
+      ] as FormattedText,
+    ],
+  ])(
+    'should convert HTML to Squiz formatted text JSON - %s',
+    (description: string, content: string, expected: FormattedText | undefined) => {
+      expect(htmlToSquizNode({ content })).toEqual(expected);
+    },
+  );
+});

package/src/utils/converters/htmlToSquizNode/htmlToSquizNode.ts

@@ -0,0 +1,27 @@
+import { htmlToProsemirrorNode } from 'remirror';
+import { FORMATTED_TEXT_MODELS } from '@squiz/dx-json-schema-lib';
+import { remirrorNodeToSquizNode } from '../remirrorNodeToSquizNode/remirrorNodeToSquizNode';
+import { RemirrorManager } from '@remirror/core';
+import { createExtensions } from '../../../Extensions/Extensions';
+import { HtmlToSquizNodeProps } from './htmlToSquizNode.props';
+
+type FormattedText = FORMATTED_TEXT_MODELS.v1.FormattedText;
+
+export const htmlToSquizNode = ({ content }: HtmlToSquizNodeProps): FormattedText | undefined => {
+  const extensions = createExtensions({
+    matrix: {
+      matrixDomain: 'unsupported',
+    },
+    resolveNodeToUrl: () => {
+      throw new Error('Resolving Url is not supported.');
+    },
+  });
+  const manager = RemirrorManager.create(extensions);
+
+  return remirrorNodeToSquizNode(
+    htmlToProsemirrorNode({
+      content,
+      schema: manager.schema,
+    }),
+  );
+};

package/src/utils/converters/mocks/squizNodeJson.mock.ts

@@ -0,0 +1,270 @@
+import { FORMATTED_TEXT_MODELS as FormattedTextModels } from '@squiz/dx-json-schema-lib';
+import { RemirrorJSON } from '@remirror/core';
+
+export const mockSquizNodeJson: FormattedTextModels.v1.FormattedText = [
+  {
+    children: [
+      {
+        type: 'text',
+        value: 'Hello ',
+      },
+      {
+        children: [
+          {
+            type: 'text',
+            value: 'Mr Bean',
+          },
+        ],
+        attributes: {
+          href: 'https://www.google.com',
+        },
+        font: {
+          bold: true,
+        },
+        type: 'tag',
+        tag: 'a',
+      },
+      {
+        type: 'text',
+        value: ', nice to ',
+      },
+      {
+        children: [
+          {
+            type: 'text',
+            value: 'meet you',
+          },
+        ],
+        attributes: {
+          href: 'https://www.google.com',
+        },
+        type: 'tag',
+        tag: 'a',
+      },
+      {
+        type: 'text',
+        value: '.',
+      },
+      {
+        children: [],
+        attributes: {
+          alt: 'Test',
+          height: '150',
+          width: '200',
+          src: 'https://media2.giphy.com/media/3o6ozsIxg5legYvggo/giphy.gif',
+          title: '',
+          resizable: 'false',
+        },
+        type: 'tag',
+        tag: 'img',
+      },
+    ],
+    type: 'tag',
+    tag: 'p',
+  },
+];
+
+export const mockSquizNodeTextJson: FormattedTextModels.v1.FormattedText = [
+  {
+    value: 'Hello world!',
+    type: 'text',
+  },
+  {
+    value: 'Another one...',
+    type: 'text',
+  },
+];
+
+type NodeExample = {
+  description: string;
+  remirrorNode: RemirrorJSON;
+  squizNode: FormattedTextModels.v1.FormattedText;
+};
+
+export const sharedNodeExamples: NodeExample[] = [
+  {
+    description: 'Asset link',
+    remirrorNode: {
+      type: 'text',
+      text: 'Hello',
+      marks: [
+        {
+          type: 'assetLink',
+          attrs: {
+            target: '_blank',
+            matrixAssetId: '123',
+            matrixDomain: 'https://my-matrix.squiz.net',
+            matrixIdentifier: 'matrix-api-identifier',
+          },
+        },
+      ],
+    },
+    squizNode: [
+      {
+        type: 'link-to-matrix-asset',
+        target: '_blank',
+        matrixAssetId: '123',
+        matrixDomain: 'https://my-matrix.squiz.net',
+        matrixIdentifier: 'matrix-api-identifier',
+        children: [{ type: 'text', value: 'Hello' }],
+      },
+    ],
+  },
+  {
+    description: 'Asset link with formatting applied inside of the link',
+    remirrorNode: {
+      type: 'text',
+      text: 'Hello',
+      marks: [
+        {
+          type: 'assetLink',
+          attrs: {
+            target: '_blank',
+            matrixAssetId: '123',
+            matrixDomain: 'https://my-matrix.squiz.net',
+            matrixIdentifier: 'matrix-api-identifier',
+          },
+        },
+        { type: 'bold' },
+      ],
+    },
+    squizNode: [
+      {
+        type: 'tag',
+        tag: 'strong',
+        children: [
+          {
+            type: 'link-to-matrix-asset',
+            target: '_blank',
+            matrixAssetId: '123',
+            matrixDomain: 'https://my-matrix.squiz.net',
+            matrixIdentifier: 'matrix-api-identifier',
+            children: [{ type: 'text', value: 'Hello' }],
+          },
+        ],
+      },
+    ],
+  },
+  {
+    description: 'Asset image',
+    remirrorNode: {
+      type: 'assetImage',
+      attrs: {
+        matrixAssetId: '123',
+        matrixDomain: 'https://my-matrix.squiz.net',
+        matrixIdentifier: 'matrix-api-identifier',
+      },
+    },
+    squizNode: [
+      {
+        type: 'matrix-image',
+        matrixAssetId: '123',
+        matrixDomain: 'https://my-matrix.squiz.net',
+        matrixIdentifier: 'matrix-api-identifier',
+      },
+    ],
+  },
+];
+
+export const squizOnlyNodeExamples: NodeExample[] = [
+  {
+    description: 'Asset link with formatting applied inside, outside and with multiple levels of nesting',
+    squizNode: [
+      {
+        type: 'tag',
+        tag: 'span',
+        font: { bold: true },
+        children: [
+          {
+            type: 'link-to-matrix-asset',
+            target: '_blank',
+            matrixAssetId: '123',
+            matrixDomain: 'https://my-matrix.squiz.net',
+            matrixIdentifier: 'matrix-api-identifier',
+            children: [
+              {
+                type: 'tag',
+                tag: 'span',
+                font: { italics: true },
+                children: [
+                  {
+                    type: 'tag',
+                    tag: 'span',
+                    font: { underline: true },
+                    children: [{ type: 'text', value: 'Hello' }],
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+    ],
+    remirrorNode: {
+      // reverse operation covered by "Asset link with formatting applied inside of the link".
+      type: 'text',
+      text: 'Hello',
+      marks: [
+        { type: 'underline' },
+        { type: 'italic' },
+        {
+          type: 'assetLink',
+          attrs: {
+            target: '_blank',
+            matrixAssetId: '123',
+            matrixDomain: 'https://my-matrix.squiz.net',
+            matrixIdentifier: 'matrix-api-identifier',
+          },
+        },
+        { type: 'bold' },
+      ],
+    },
+  },
+  {
+    description: 'Asset link with multiple levels of un-necessary nesting',
+    squizNode: [
+      {
+        type: 'tag',
+        tag: 'span',
+        children: [
+          {
+            type: 'link-to-matrix-asset',
+            target: '_blank',
+            matrixAssetId: '123',
+            matrixDomain: 'https://my-matrix.squiz.net',
+            matrixIdentifier: 'matrix-api-identifier',
+            children: [
+              {
+                type: 'tag',
+                tag: 'span',
+                children: [
+                  {
+                    type: 'tag',
+                    tag: 'span',
+                    children: [{ type: 'text', value: 'Hello' }],
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+    ],
+    remirrorNode: {
+      // reverse operation covered by "Asset link".
+      type: 'text',
+      text: 'Hello',
+      marks: [
+        {
+          type: 'assetLink',
+          attrs: {
+            target: '_blank',
+            matrixAssetId: '123',
+            matrixDomain: 'https://my-matrix.squiz.net',
+            matrixIdentifier: 'matrix-api-identifier',
+          },
+        },
+      ],
+    },
+  },
+];