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

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

@@ -0,0 +1,480 @@
+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;
+
+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 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.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',
+              },
+            ],
+            font: {
+              bold: true,
+            },
+            tag: 'span',
+            type: 'tag',
+          },
+          {
+            type: 'text',
+            value: ' ',
+          },
+          {
+            children: [
+              {
+                type: 'text',
+                value: 'here',
+              },
+            ],
+            attributes: {
+              href: 'https://www.google.com/',
+              title: '',
+            },
+            font: {
+              italics: true,
+            },
+            tag: 'a',
+            type: 'tag',
+          },
+          {
+            children: [
+              {
+                type: 'text',
+                value: ' ',
+              },
+            ],
+            font: {
+              italics: true,
+            },
+            tag: 'span',
+            type: 'tag',
+          },
+          {
+            type: 'text',
+            value: 'to go to',
+          },
+          {
+            children: [
+              {
+                type: 'text',
+                value: ' GOOGLE!',
+              },
+            ],
+            font: {
+              bold: true,
+              italics: true,
+              underline: true,
+            },
+            tag: 'span',
+            type: 'tag',
+          },
+        ],
+        type: 'tag',
+        tag: 'p',
+      },
+    ];
+
+    const result = remirrorNodeToSquizNode(editor.doc);
+    expect(result).toEqual(expected);
+  });
+
+  describe('preserve text formatting', () => {
+    it('should preserve text alignment', async () => {
+      const content: RemirrorJSON = {
+        type: 'doc',
+        content: [
+          {
+            type: 'paragraph',
+            attrs: {
+              nodeIndent: null,
+              nodeTextAlignment: 'center',
+              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: {
+            alignment: 'center',
+          },
+          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).toEqual([]);
+  });
+
+  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.');
+  });
+});
+
+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.');
+  });
+});

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

@@ -0,0 +1,212 @@
+import { ProsemirrorNode, Fragment as ProsemirrorFragment, Mark } from 'remirror';
+import { Attrs } from 'prosemirror-model';
+import { FORMATTED_TEXT_MODELS as FormattedTextModels } from '@squiz/dx-json-schema-lib';
+import { undefinedIfEmpty } from '../../undefinedIfEmpty';
+import { NodeName } from '../../../Extensions/Extensions';
+
+type Fragment = ProsemirrorFragment & {
+  content?: Fragment[];
+};
+
+type FormattingOptions = FormattedTextModels.v1.FormattingOptions;
+type FontOptions = FormattedTextModels.v1.FormattedNodeFontProperties;
+type FormattedText = FormattedTextModels.v1.FormattedText;
+type FormattedNode = FormattedTextModels.v1.FormattedNodes;
+type FormattedNodeFontProperties = FormattedTextModels.v1.FormattedNodeFontProperties;
+type FormattedNodeWithChildren = Extract<FormattedNode, { children: FormattedNode[] }>;
+
+export const resolveNodeTag = (node: ProsemirrorNode): string => {
+  if (node.type.name === 'text') {
+    return 'span';
+  }
+
+  if (node.type.spec?.toDOM) {
+    const domNode = node.type.spec.toDOM(node);
+
+    if (domNode instanceof window.Node) {
+      return domNode.nodeName.toLowerCase();
+    }
+
+    if (typeof domNode === 'object' && 'dom' in domNode && domNode.dom instanceof window.Node) {
+      return domNode.dom.nodeName.toLowerCase();
+    }
+
+    if (domNode instanceof Array) {
+      // [ tag, attributes, ...children ]
+      return domNode[0].toLowerCase();
+    }
+  }
+
+  throw new Error('Unexpected Remirror node encountered, cannot resolve tag.');
+};
+
+const resolveFormattingOptions = (node: ProsemirrorNode): FormattingOptions => {
+  const formattingOptions: FormattingOptions = {};
+
+  if (node.attrs.nodeTextAlignment) {
+    formattingOptions.alignment = node.attrs.nodeTextAlignment;
+  }
+
+  return formattingOptions;
+};
+
+const resolveFontOptions = (node: ProsemirrorNode): FormattedNodeFontProperties => {
+  const fontOptions: FontOptions = {};
+
+  node.marks.forEach((mark) => {
+    switch (mark.type.name) {
+      case 'bold':
+        fontOptions.bold = true;
+        break;
+      case 'italic':
+        fontOptions.italics = true;
+        break;
+      case 'underline':
+        fontOptions.underline = true;
+        break;
+    }
+  });
+
+  return fontOptions;
+};
+
+const transformAttributes = (attributes: Attrs): Record<string, string> => {
+  const transformed: Record<string, string> = {};
+
+  Object.keys(attributes).forEach((key) => {
+    // Component service requires attributes to be a string, cast as needed.
+    if (typeof attributes[key] === 'string' || typeof attributes[key] === 'number') {
+      transformed[key] = String(attributes[key]);
+    }
+  });
+
+  return transformed;
+};
+
+const transformFragment = (fragment: Fragment): FormattedText => {
+  const transformed: FormattedText = [];
+
+  fragment.forEach((child) => transformed.push(transformNode(child)));
+
+  return transformed;
+};
+
+const transformNode = (node: ProsemirrorNode): FormattedNode => {
+  const attributes = node.type.name === NodeName.Image ? transformAttributes(node.attrs) : undefined;
+  const formattingOptions = undefinedIfEmpty(resolveFormattingOptions(node));
+  const font = undefinedIfEmpty(resolveFontOptions(node));
+  let transformedNode: FormattedNode = { type: 'text', value: node.text || '' };
+
+  // Squiz "text" nodes can't have formatting/font options but Remirror "text" nodes can.
+  // If the node has formatting options wrap in a tag.
+  // If the node isn't a text type assume it is a tag type and wrap in a tag.
+  // If we pick the wrong tag here it will be corrected later as part of looping through the
+  // non-font marks.
+  if (node.type.name !== NodeName.Text || attributes || formattingOptions || font) {
+    transformedNode = {
+      type: 'tag',
+      tag: resolveNodeTag(node),
+      children: node.type.name === NodeName.Text ? [transformedNode] : transformFragment(node.content),
+      attributes,
+      formattingOptions,
+      font,
+    };
+  }
+
+  if (node.type.name === NodeName.AssetImage) {
+    transformedNode = {
+      type: 'matrix-image',
+      matrixAssetId: node.attrs.matrixAssetId,
+      matrixIdentifier: node.attrs.matrixIdentifier,
+      matrixDomain: node.attrs.matrixDomain,
+    };
+  }
+
+  node.marks.forEach((mark) => {
+    switch (mark.type.name) {
+      case 'bold':
+      case 'italic':
+      case 'underline':
+        break;
+      default:
+        transformedNode = transformMark(mark, transformedNode);
+    }
+  });
+
+  return transformedNode;
+};
+
+/**
+ * Merges 2 nodes together if they are compatible without losing any important details.
+ * Otherwise will wrap the node.
+ *
+ * @param {FormattedNode} node
+ * @param {FormattedNodeWithChildren} wrappingNode
+ *
+ * @return {FormattedNode}
+ */
+const wrapNodeIfNeeded = (node: FormattedNode, wrappingNode: FormattedNodeWithChildren): FormattedNode => {
+  if (node.type === 'tag' && wrappingNode.type === 'tag' && (node.tag === 'span' || node.tag === wrappingNode.tag)) {
+    // if the node we are wrapping with is a DOM node, and the node being wrapped is
+    // a plain looking DOM node merge the 2 nodes.
+    return {
+      ...node,
+      ...wrappingNode,
+      formattingOptions: undefinedIfEmpty({
+        ...node.formattingOptions,
+        ...wrappingNode.formattingOptions,
+      }),
+      attributes: undefinedIfEmpty({
+        ...node.attributes,
+        ...wrappingNode.attributes,
+      }),
+      font: undefinedIfEmpty({
+        ...node.font,
+        ...wrappingNode.font,
+      }),
+      children: [...node.children, ...wrappingNode.children],
+    };
+  }
+
+  // if the node we are wrapping or the wrapping nodes are not compatible merge them.
+  return {
+    ...wrappingNode,
+    children: [node, ...wrappingNode.children],
+  };
+};
+
+const transformMark = (mark: Mark, node: FormattedNode): FormattedNode => {
+  switch (mark.type.name) {
+    case 'link':
+      return wrapNodeIfNeeded(node, {
+        type: 'tag',
+        tag: 'a',
+        attributes: transformAttributes(mark.attrs),
+        children: [],
+      });
+    case 'assetLink':
+      return wrapNodeIfNeeded(node, {
+        type: 'link-to-matrix-asset',
+        target: mark.attrs.target,
+        matrixIdentifier: mark.attrs.matrixIdentifier,
+        matrixDomain: mark.attrs.matrixDomain,
+        matrixAssetId: mark.attrs.matrixAssetId,
+        children: [],
+      });
+  }
+
+  throw new Error(`Unsupported mark "${mark.type.name}" was applied to node.`);
+};
+
+/**
+ * Converts Remirror node JSON structure to Squiz component JSON structure.
+ * @param {ProsemirrorNode} node Remirror node to convert to component.
+ * @returns {FormattedText} The converted Squiz component JSON.
+ */
+export const remirrorNodeToSquizNode = (node: ProsemirrorNode): FormattedText => {
+  if (node?.type?.name !== 'doc') {
+    throw new Error('Unable to convert from Remirror to Node data structure, unexpected node provided.');
+  }
+
+  return transformFragment(node.content);
+};