@squiz/formatted-text-editor 1.21.1-alpha.19 → 1.21.1-alpha.20

package/src/types.ts

@@ -0,0 +1,5 @@
+export type DeepPartial<T> = T extends Record<string, unknown>
+  ? {
+      [P in keyof T]?: DeepPartial<T[P]>;
+    }
+  : T;

package/src/ui/Button/Button.tsx

@@ -20,10 +20,8 @@ const Button = ({ handleOnClick, isDisabled, isActive, label, text, icon }: Butt
       disabled={isDisabled}
       className={clsx('squiz-fte-btn', isActive && 'squiz-fte-btn--is-active', icon && ' squiz-fte-btn--is-icon')}
     >
-      <>
-        {text && <span>{text}</span>}
-        {icon && icon}
-      </>
+      {text && <span>{text}</span>}
+      {icon && icon}
     </button>
   );
 };

package/src/ui/Fields/Input/Input.tsx

@@ -1,19 +1,33 @@
 import React, { ForwardedRef, forwardRef, InputHTMLAttributes } from 'react';
+import clsx from 'clsx';
 
 type InputProps = InputHTMLAttributes<HTMLInputElement> & {
   label?: string;
+  error?: string;
 };
 
-const InputInternal = ({ name, label, type = 'text', ...rest }: InputProps, ref: ForwardedRef<HTMLInputElement>) => {
+const InputInternal = (
+  { name, label, type = 'text', error, ...rest }: InputProps,
+  ref: ForwardedRef<HTMLInputElement>,
+) => {
   return (
-    <>
+    <div className={clsx(error && 'squiz-fte-invalid-form-field')}>
       {label && (
         <label htmlFor={name} className="squiz-fte-form-label">
           {label}
         </label>
       )}
-      <input ref={ref} id={name} name={name} type={type} className="squiz-fte-form-control" {...rest} />
-    </>
+      <input
+        ref={ref}
+        id={name}
+        name={name}
+        type={type}
+        aria-invalid={!!error}
+        className="squiz-fte-form-control"
+        {...rest}
+      />
+      {error && <div className="squiz-fte-form-error">{error}</div>}
+    </div>
   );
 };
 

package/src/ui/Modal/Modal.tsx

@@ -2,6 +2,7 @@ import React, { ForwardedRef, forwardRef, ReactElement, useEffect, useMemo } fro
 import { createPortal } from 'react-dom';
 import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
 import { FocusTrap } from '@mui/base';
+import clsx from 'clsx';
 
 export type ModalProps = {
   title: string;
@@ -50,7 +51,7 @@ const Modal = (
   return createPortal(
     <>
       <FocusTrap open>
-        <div ref={ref} className={`squiz-fte-modal-wrapper ${className ? className : ''}`} tabIndex={-1}>
+        <div ref={ref} className={clsx('squiz-fte-modal-wrapper', className)} tabIndex={-1}>
           <div className="w-modal-sm my-6 mx-auto">
             <div className="squiz-fte-modal">
               <div className="squiz-fte-modal-header p-6 pb-2">

package/src/ui/_forms.scss

@@ -13,4 +13,18 @@
       box-shadow: none;
     }
   }
+  &-invalid-form-field {
+    .squiz-fte-form-control {
+      @apply border-red-300 bg-no-repeat;
+      background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHdpZHRoPSIyNCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0ibm9uZSIvPjxnIGNsYXNzPSJjdXJyZW50TGF5ZXIiPjxwYXRoIGQ9Ik00LjQ3IDIxaDE1LjA2YzEuNTQgMCAyLjUtMS42NyAxLjczLTNMMTMuNzMgNC45OWMtLjc3LTEuMzMtMi42OS0xLjMzLTMuNDYgMEwyLjc0IDE4Yy0uNzcgMS4zMy4xOSAzIDEuNzMgM3pNMTIgMTRjLS41NSAwLTEtLjQ1LTEtMXYtMmMwLS41NS40NS0xIDEtMXMxIC40NSAxIDF2MmMwIC41NS0uNDUgMS0xIDF6bTEgNGgtMnYtMmgydjJ6IiBjbGFzcz0ic2VsZWN0ZWQiIGZpbGw9IiNkNzIzMjEiLz48L2c+PC9zdmc+');
+      background-position: top 0.25rem right 0.25rem;
+      background-size: 1.5rem;
+    }
+  }
+  &-form-error {
+    @apply text-red-300;
+    font-size: 13px;
+    line-height: 1.23;
+    padding-top: 0.25rem;
+  }
 }

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

@@ -1,4 +1,5 @@
 import { FORMATTED_TEXT_MODELS as FormattedTextModels } from '@squiz/dx-json-schema-lib';
+import { RemirrorJSON } from '@remirror/core';
 
 export const mockSquizNodeJson: FormattedTextModels.v1.FormattedText = [
   {
@@ -73,3 +74,179 @@ export const mockSquizNodeTextJson: FormattedTextModels.v1.FormattedText = [
     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: 'bold' },
+        {
+          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: 'tag',
+            tag: 'span',
+            font: { bold: true },
+            children: [{ type: 'text', value: 'Hello' }],
+          },
+        ],
+      },
+    ],
+  },
+];
+
+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',
+          },
+        },
+      ],
+    },
+  },
+];

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

@@ -2,6 +2,8 @@ import { FORMATTED_TEXT_MODELS as FormattedTextModels } from '@squiz/dx-json-sch
 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;
 
@@ -375,8 +377,9 @@ describe('remirrorNodeToSquizNode', () => {
   });
 
   it('should handle invalid Remirror node provided', () => {
-    const result = remirrorNodeToSquizNode(false as any);
-    expect(result).toEqual([]);
+    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 () => {
@@ -389,6 +392,38 @@ describe('remirrorNodeToSquizNode', () => {
     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', () => {
@@ -425,7 +460,7 @@ describe('resolveNodeTag', () => {
     expect(resolveNodeTag(node)).toBe('ul');
   });
 
-  it('should return null for a node with a toDOM method that returns undefined', () => {
+  it('should throw for a node with a toDOM method that returns undefined', () => {
     const node: any = {
       type: {
         spec: {
@@ -433,13 +468,13 @@ describe('resolveNodeTag', () => {
         },
       },
     };
-    expect(resolveNodeTag(node)).toBeNull();
+    expect(() => resolveNodeTag(node)).toThrow('Unexpected Remirror node encountered, cannot resolve tag.');
   });
 
-  it('should return null for a node without a toDOM method', () => {
+  it('should throw for a node without a toDOM method', () => {
     const node: any = {
       type: {},
     };
-    expect(resolveNodeTag(node)).toBeNull();
+    expect(() => resolveNodeTag(node)).toThrow('Unexpected Remirror node encountered, cannot resolve tag.');
   });
 });

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

@@ -1,6 +1,7 @@
-import { ProsemirrorNode, Fragment as ProsemirrorFragment } from 'remirror';
+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 { validRemirrorNode } from '../validNodeTypes';
+import { undefinedIfEmpty } from '../../undefinedIfEmpty';
 
 type Fragment = ProsemirrorFragment & {
   content?: Fragment[];
@@ -9,16 +10,23 @@ type Fragment = ProsemirrorFragment & {
 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';
+  }
 
-export const resolveNodeTag = (node: ProsemirrorNode): string | null => {
   if (node.type.spec?.toDOM) {
-    const domNode = node.type.spec.toDOM(node) as any;
+    const domNode = node.type.spec.toDOM(node);
 
     if (domNode instanceof window.Node) {
       return domNode.nodeName.toLowerCase();
     }
 
-    if (domNode?.dom instanceof window.Node) {
+    if (typeof domNode === 'object' && 'dom' in domNode && domNode.dom instanceof window.Node) {
       return domNode.dom.nodeName.toLowerCase();
     }
 
@@ -28,7 +36,7 @@ export const resolveNodeTag = (node: ProsemirrorNode): string | null => {
     }
   }
 
-  return null;
+  throw new Error('Unexpected Remirror node encountered, cannot resolve tag.');
 };
 
 const resolveFormattingOptions = (node: ProsemirrorNode): FormattingOptions => {
@@ -41,7 +49,7 @@ const resolveFormattingOptions = (node: ProsemirrorNode): FormattingOptions => {
   return formattingOptions;
 };
 
-const resolveFontOptions = (node: ProsemirrorNode): FontOptions => {
+const resolveFontOptions = (node: ProsemirrorNode): FormattedNodeFontProperties => {
   const fontOptions: FontOptions = {};
 
   node.marks.forEach((mark) => {
@@ -55,137 +63,140 @@ const resolveFontOptions = (node: ProsemirrorNode): FontOptions => {
       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;
-      }
-    });
-  }
+const transformAttributes = (attributes: Attrs): Record<string, string> => {
+  const transformed: Record<string, string> = {};
 
-  // 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]);
+  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 attributeOptions;
+  return transformed;
 };
 
-/**
- * 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),
-  };
+const transformFragment = (fragment: Fragment): FormattedText => {
+  const transformed: FormattedText = [];
 
-  if (nodeType === 'doc') {
-    return transformed.children;
-  }
+  fragment.forEach((child) => transformed.push(transformNode(child)));
 
-  // 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;
-      }
-    });
-  }
+  return transformed;
+};
 
-  if (nodeTag) {
-    transformed = {
-      ...transformed,
+const transformNode = (node: ProsemirrorNode): FormattedNode => {
+  const attributes = node.type.name === '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 !== 'text' || attributes || formattingOptions || font) {
+    transformedNode = {
       type: 'tag',
-      tag: nodeTag,
+      tag: resolveNodeTag(node),
+      children: node.type.name === 'text' ? [transformedNode] : transformFragment(node.content),
+      attributes,
+      formattingOptions,
+      font,
     };
   }
 
-  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,
-      };
+  node.marks.forEach((mark) => {
+    switch (mark.type.name) {
+      case 'bold':
+      case 'italic':
+      case 'underline':
+        break;
+      default:
+        transformedNode = transformMark(mark, transformedNode);
     }
-  }
+  });
+
+  return transformedNode;
+};
 
-  // Remove empty formatting options from transformed object.
-  if (transformed.formattingOptions && Object.keys(transformed.formattingOptions).length === 0) {
-    delete transformed.formattingOptions;
+/**
+ * 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],
+    };
   }
 
-  // Remove empty font options from transformed object.
-  if (transformed.font && Object.keys(transformed.font).length === 0) {
-    delete transformed.font;
+  // 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: [],
+      });
   }
 
-  // Remove empty attributes options from transformed object.
-  if (transformed.attributes && Object.keys(transformed.attributes).length === 0) {
-    delete transformed.attributes;
+  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 transformed;
+  return transformFragment(node.content);
 };