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

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

@@ -0,0 +1,297 @@
+import { ProsemirrorNode, Fragment as ProsemirrorFragment, Mark, isDocNodeEmpty } 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[] }>;
+type RemirrorTextAlignment = Exclude<Remirror.Attributes['nodeTextAlignment'], undefined>;
+type FormattedTextAlignment = FormattingOptions['alignment'];
+
+export const resolveNodeTag = (node: ProsemirrorNode): string => {
+  if (node.type.name === NodeName.Text) {
+    return 'span';
+  }
+
+  if (node.type.name === NodeName.CodeBlock) {
+    return 'code';
+  }
+
+  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 = {};
+  const textAlignment = node.attrs.nodeTextAlignment as RemirrorTextAlignment | undefined;
+  const textAlignmentMap: Record<RemirrorTextAlignment, FormattedTextAlignment> = {
+    none: undefined,
+    left: 'left',
+    right: 'right',
+    center: 'center',
+    start: 'left',
+    end: 'right',
+    justify: 'justify',
+  };
+
+  if (textAlignment && textAlignmentMap[textAlignment]) {
+    formattingOptions.alignment = textAlignmentMap[textAlignment];
+  }
+
+  return formattingOptions;
+};
+
+const resolveFontOptions = (node: ProsemirrorNode): FormattedNodeFontProperties => {
+  const fontOptions: FontOptions = {};
+
+  node.marks.forEach((mark) => {
+    switch (mark.type.name) {
+      case 'underline':
+        fontOptions.underline = true;
+        break;
+    }
+  });
+
+  return fontOptions;
+};
+
+const transformAttributes = (attributes: Attrs, nodeType?: string): 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]);
+    }
+  });
+
+  // We assign an attribute here for table controller cells as we need to differentiate
+  // between them and regular table headers (th)
+  if (nodeType === NodeName.TableControllerCell) {
+    transformed[nodeType] = 'true';
+  }
+
+  // Another check here for more specific attributes for tables (column widths)
+  if (nodeType === NodeName.TableControllerCell || nodeType === NodeName.tableCell) {
+    if (Array.isArray(attributes.colwidth) && attributes.colwidth[0]) {
+      transformed.colwidth = String(attributes.colwidth[0]);
+    }
+  }
+
+  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 formattingOptions = undefinedIfEmpty(resolveFormattingOptions(node));
+  const font = undefinedIfEmpty(resolveFontOptions(node));
+  let attributes;
+
+  if (
+    node.type.name === NodeName.Image ||
+    node.type.name === NodeName.CodeBlock ||
+    node.type.name === NodeName.TableControllerCell ||
+    node.type.name === NodeName.tableCell
+  ) {
+    attributes = transformAttributes(node.attrs, node.type.name);
+  }
+
+  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) => {
+    transformedNode = transformMark(mark, transformedNode);
+  });
+
+  if (node.type.name === NodeName.Unsupported) {
+    const unsupportedNode = node.attrs?.originalNode;
+    return { ...unsupportedNode };
+  }
+
+  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,
+  copyFont: boolean = true,
+): FormattedNode => {
+  const wrappingNodeChildren = wrappingNode.children || [];
+
+  if (node.type === 'tag' && wrappingNode.type === 'tag' && (node.tag === 'span' || node.tag === wrappingNode.tag)) {
+    const nodeChildren = node.children || [];
+
+    // 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(
+        copyFont
+          ? {
+              ...node.font,
+              ...wrappingNode.font,
+            }
+          : {},
+      ),
+      children: [...nodeChildren, ...wrappingNodeChildren],
+    };
+  }
+
+  // if the node we are wrapping or the wrapping nodes are not compatible merge them.
+  return {
+    ...wrappingNode,
+    children: [node, ...wrappingNodeChildren],
+  };
+};
+
+const transformMark = (mark: Mark, node: FormattedNode): FormattedNode => {
+  switch (mark.type.name) {
+    case 'bold':
+      return wrapNodeIfNeeded(
+        node,
+        {
+          type: 'tag',
+          tag: 'strong',
+          children: [],
+        },
+        false,
+      );
+    case 'italic':
+      return wrapNodeIfNeeded(
+        node,
+        {
+          type: 'tag',
+          tag: 'em',
+          children: [],
+        },
+        false,
+      );
+    case 'underline':
+      return wrapNodeIfNeeded(node, {
+        type: 'tag',
+        tag: 'span',
+        children: [],
+        font: {
+          underline: mark.type.name === 'underline',
+        },
+      });
+    case 'link':
+      return wrapNodeIfNeeded(
+        node,
+        {
+          type: 'tag',
+          tag: 'a',
+          attributes: transformAttributes(mark.attrs),
+          children: [],
+        },
+        false,
+      );
+    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 | undefined => {
+  if (node?.type?.name !== 'doc') {
+    throw new Error('Unable to convert from Remirror to Node data structure, unexpected node provided.');
+  }
+
+  // Squiz FormattedText should be set to undefined
+  // To allow validation on required values
+  if (isDocNodeEmpty(node) || node.childCount === 0) {
+    return undefined;
+  }
+
+  const transformedFragment = transformFragment(node.content);
+  return transformedFragment;
+};