@squiz/formatted-text-editor 1.16.0 → 1.21.1-alpha.10

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

@@ -0,0 +1,445 @@
+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';
+
+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', () => {
+    const result = remirrorNodeToSquizNode(false as any);
+    expect(result).toEqual([]);
+  });
+
+  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([]);
+  });
+});
+
+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 return null for a node with a toDOM method that returns undefined', () => {
+    const node: any = {
+      type: {
+        spec: {
+          toDOM: () => undefined,
+        },
+      },
+    };
+    expect(resolveNodeTag(node)).toBeNull();
+  });
+
+  it('should return null for a node without a toDOM method', () => {
+    const node: any = {
+      type: {},
+    };
+    expect(resolveNodeTag(node)).toBeNull();
+  });
+});

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

@@ -0,0 +1,191 @@
+import { ProsemirrorNode, Fragment as ProsemirrorFragment } from 'remirror';
+import { FORMATTED_TEXT_MODELS as FormattedTextModels } from '@squiz/dx-json-schema-lib';
+import { validRemirrorNode } from '../validNodeTypes';
+
+type Fragment = ProsemirrorFragment & {
+  content?: Fragment[];
+};
+
+type FormattingOptions = FormattedTextModels.v1.FormattingOptions;
+type FontOptions = FormattedTextModels.v1.FormattedNodeFontProperties;
+type FormattedText = FormattedTextModels.v1.FormattedText;
+
+export const resolveNodeTag = (node: ProsemirrorNode): string | null => {
+  if (node.type.spec?.toDOM) {
+    const domNode = node.type.spec.toDOM(node) as any;
+
+    if (domNode instanceof window.Node) {
+      return domNode.nodeName.toLowerCase();
+    }
+
+    if (domNode?.dom instanceof window.Node) {
+      return domNode.dom.nodeName.toLowerCase();
+    }
+
+    if (domNode instanceof Array) {
+      // [ tag, attributes, ...children ]
+      return domNode[0].toLowerCase();
+    }
+  }
+
+  return null;
+};
+
+const resolveFormattingOptions = (node: ProsemirrorNode): FormattingOptions => {
+  const formattingOptions: FormattingOptions = {};
+
+  if (node.attrs.nodeTextAlignment) {
+    formattingOptions.alignment = node.attrs.nodeTextAlignment;
+  }
+
+  return formattingOptions;
+};
+
+const resolveFontOptions = (node: ProsemirrorNode): FontOptions => {
+  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;
+      default:
+        // Currently unsupported mark type
+        break;
+    }
+  });
+
+  return fontOptions;
+};
+
+const resolveAttributeOptions = (node: ProsemirrorNode, nodeType: string | null): Record<string, string> => {
+  let attributeOptions: any = {};
+
+  if (nodeType === 'image') {
+    attributeOptions = { ...node.attrs };
+  } else {
+    node.marks.forEach((mark) => {
+      switch (mark.type.name) {
+        case 'link':
+          attributeOptions = { ...mark.attrs };
+          break;
+        default:
+          // Currently unsupported mark type
+          break;
+      }
+    });
+  }
+
+  // Remove any non string elements from attributes, squiz component only accepts strings.
+  Object.keys(attributeOptions).forEach((key) => {
+    if (typeof attributeOptions[key] !== 'string' && typeof attributeOptions[key] !== 'number') {
+      delete attributeOptions[key];
+      // If it's a number we make it a string so its accepted by component service
+    } else {
+      attributeOptions[key] = String(attributeOptions[key]);
+    }
+  });
+
+  return attributeOptions;
+};
+
+/**
+ * Converts Remirror node JSON structure to Squiz component JSON structure.
+ * @param {ProsemirrorNode} node Remirror node to convert to component.
+ * @export
+ * @returns {FormattedText} The converted Squiz component JSON.
+ */
+export const remirrorNodeToSquizNode = (node: ProsemirrorNode): FormattedText => {
+  if (!validRemirrorNode(node)) return [];
+
+  const nodeType = node.type.name;
+  let nodeTag = resolveNodeTag(node);
+
+  // Filter out any children nodes that aren't currently supported.
+  const children = ((node.content as Fragment).content || []).map((child: any) => remirrorNodeToSquizNode(child));
+
+  let transformed: any = {
+    children,
+    formattingOptions: resolveFormattingOptions(node),
+    attributes: resolveAttributeOptions(node, nodeType),
+    font: resolveFontOptions(node),
+  };
+
+  if (nodeType === 'doc') {
+    return transformed.children;
+  }
+
+  // If we don't have a node tag yet, check if there is one needed
+  if (!nodeTag) {
+    node.marks.forEach((mark) => {
+      switch (mark.type.name) {
+        case 'link':
+          nodeTag = 'a';
+          break;
+        default:
+          // Currently unsupported mark type
+          break;
+      }
+    });
+  }
+
+  if (nodeTag) {
+    transformed = {
+      ...transformed,
+      type: 'tag',
+      tag: nodeTag,
+    };
+  }
+
+  if (
+    (Object.keys(transformed.font).length > 0 || Object.keys(transformed.attributes).length > 0) &&
+    !transformed.type
+  ) {
+    // Wrap in span so we can apply formatting to it
+    transformed = { ...transformed, tag: 'span', type: 'tag' };
+  }
+
+  if (nodeType === 'text') {
+    if (transformed.type) {
+      // If we have a tag already nest the text beneath it so we can preserve formatting options, etc.
+      transformed = {
+        ...transformed,
+        children: [
+          {
+            type: 'text',
+            value: node.text,
+          },
+        ],
+      };
+    } else {
+      // If we don't have a tag just rewrite the transformed value to be the text.
+      transformed = {
+        type: 'text',
+        value: node.text,
+      };
+    }
+  }
+
+  // Remove empty formatting options from transformed object.
+  if (transformed.formattingOptions && Object.keys(transformed.formattingOptions).length === 0) {
+    delete transformed.formattingOptions;
+  }
+
+  // Remove empty font options from transformed object.
+  if (transformed.font && Object.keys(transformed.font).length === 0) {
+    delete transformed.font;
+  }
+
+  // Remove empty attributes options from transformed object.
+  if (transformed.attributes && Object.keys(transformed.attributes).length === 0) {
+    delete transformed.attributes;
+  }
+
+  return transformed;
+};