@squiz/formatted-text-editor 2.6.5 → 2.6.6

package/src/ui/Fields/MatrixAsset/MatrixAsset.tsx

@@ -1,14 +1,33 @@
-import React from 'react';
-import { ResourceBrowserResource, ResourceBrowser } from '@squiz/resource-browser';
+import React, { useCallback } from 'react';
+import { DAMResource, DamResourceBrowserSource } from '@squiz/dam-resource-browser-plugin';
+import { ResourceBrowser, ResourceBrowserResource, ResourceBrowserUnresolvedResource } from '@squiz/resource-browser';
 import { InputContainer, InputContainerProps } from '../InputContainer/InputContainer';
+import { LinkTarget } from '../../../Extensions/LinkExtension/common';
 
 type MatrixAssetValue = {
   matrixIdentifier?: string;
   matrixAssetId?: string;
-  url?: string;
+  matrixDomain?: string;
 };
 
-export type MatrixAssetProps<T extends MatrixAssetValue> = Omit<InputContainerProps, 'children'> & {
+type DAMAssetValue = {
+  damSystemIdentifier?: string;
+  damObjectId?: string;
+  damSystemType?: string;
+  damAdditional?: { variant: string };
+};
+
+export type ResourceBrowserSelectorValue = MatrixAssetValue &
+  DAMAssetValue & {
+    url?: string;
+    target?: LinkTarget;
+    subType?: 'matrix' | 'dam';
+  };
+
+export type ResourceBrowserSelectorProps<T extends ResourceBrowserSelectorValue> = Omit<
+  InputContainerProps,
+  'children'
+> & {
   modalTitle: string;
   allowedTypes?: string[];
   value?: T | null;
@@ -19,38 +38,76 @@ export type MatrixAssetProps<T extends MatrixAssetValue> = Omit<InputContainerPr
   onChange: (value: { target: { value: T } }) => void;
 };
 
-export const MatrixAsset = <T extends MatrixAssetValue>({
+export const MatrixAsset = <T extends ResourceBrowserSelectorValue>({
   modalTitle,
   allowedTypes,
   value,
   onChange,
   ...props
-}: MatrixAssetProps<T>) => {
+}: ResourceBrowserSelectorProps<T>) => {
+  const convertFormDataToResourceBrowserValue = useCallback(
+    (value: T | null): ResourceBrowserUnresolvedResource | null => {
+      if (value && value.damSystemIdentifier && value.damObjectId) {
+        return {
+          sourceId: value.damSystemIdentifier,
+          resourceId: value.damObjectId,
+          variant: value.damAdditional?.variant,
+        };
+      }
+      if (value && value.matrixIdentifier && value.matrixAssetId) {
+        return {
+          sourceId: value.matrixIdentifier,
+          resourceId: value.matrixAssetId,
+        };
+      }
+      return null;
+    },
+    [],
+  );
+
+  const handleResourceChange = useCallback(
+    (resource: ResourceBrowserResource | null) => {
+      let onChangeData: ResourceBrowserSelectorValue = {
+        ...value,
+        matrixIdentifier: undefined,
+        matrixAssetId: undefined,
+        damSystemIdentifier: undefined,
+        damObjectId: undefined,
+        damSystemType: undefined,
+        damAdditional: undefined,
+      };
+
+      if (resource?.source?.type === 'dam') {
+        const damResource = resource as DAMResource;
+        onChangeData = {
+          ...onChangeData,
+          damSystemIdentifier: resource.source.id,
+          damObjectId: resource.id,
+          damSystemType: (resource.source as DamResourceBrowserSource).configuration.externalType,
+          damAdditional: damResource.variant ? { variant: damResource.variant } : undefined,
+          url: resource.url,
+        };
+      }
+      if (resource?.source.type === 'matrix') {
+        onChangeData = {
+          ...onChangeData,
+          matrixIdentifier: resource?.source?.id,
+          matrixAssetId: resource?.id,
+          url: resource?.url,
+        };
+      }
+      onChange({ target: { value: onChangeData as T } });
+    },
+    [value],
+  );
+
   return (
     <InputContainer {...props}>
       <ResourceBrowser
         modalTitle={modalTitle}
         allowedTypes={allowedTypes}
-        value={
-          value && value.matrixIdentifier && value.matrixAssetId
-            ? {
-                sourceId: value.matrixIdentifier,
-                resourceId: value.matrixAssetId,
-              }
-            : null
-        }
-        onChange={(resource: ResourceBrowserResource | null) => {
-          onChange({
-            target: {
-              value: {
-                ...value,
-                matrixIdentifier: resource?.source?.id,
-                matrixAssetId: resource?.id,
-                url: resource?.url,
-              } as T,
-            },
-          });
-        }}
+        value={convertFormDataToResourceBrowserValue(value as T)}
+        onChange={handleResourceChange}
       />
     </InputContainer>
   );

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

@@ -288,4 +288,52 @@ export const squizOnlyNodeExamples: NodeExample[] = [
       ],
     },
   },
+  {
+    description: 'Link to DAM asset',
+    squizNode: [
+      {
+        type: 'tag',
+        tag: 'span',
+        children: [
+          {
+            type: 'link-to-dam-asset',
+            damObjectId: '123-456-789',
+            damSystemIdentifier: 'zzz-xxx-ccc',
+            damSystemType: 'bynder',
+            damAdditional: { variant: 'xyz' },
+            target: '_blank',
+            children: [
+              {
+                type: 'tag',
+                tag: 'span',
+                children: [
+                  {
+                    type: 'tag',
+                    tag: 'span',
+                    children: [{ type: 'text', value: 'Hello' }],
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+    ],
+    remirrorNode: {
+      type: 'text',
+      text: 'Hello',
+      marks: [
+        {
+          type: 'DAMLink',
+          attrs: {
+            target: '_blank',
+            damObjectId: '123-456-789',
+            damSystemIdentifier: 'zzz-xxx-ccc',
+            damSystemType: 'bynder',
+            damAdditional: JSON.stringify({ variant: 'xyz' }),
+          },
+        },
+      ],
+    },
+  },
 ];

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

@@ -1053,4 +1053,67 @@ describe('resolveNodeTag', () => {
     };
     expect(() => resolveNodeTag(node)).toThrow('Unexpected Remirror node encountered, cannot resolve tag.');
   });
+
+  it('should convert a DAMLink mark to a link-to-dam-asset node', async () => {
+    const content: RemirrorJSON = {
+      type: 'doc',
+      content: [
+        {
+          type: 'paragraph',
+          attrs: {
+            nodeIndent: null,
+            nodeTextAlignment: null,
+            nodeLineHeight: null,
+            style: '',
+          },
+          content: [
+            {
+              type: 'text',
+              text: 'Click here for DAM asset',
+              marks: [
+                {
+                  type: 'DAMLink',
+                  attrs: {
+                    target: '_blank',
+                    damSystemType: 'bynder',
+                    damSystemIdentifier: 'idA',
+                    damObjectId: 'objA',
+                    damAdditional: { variant: 'primary' },
+                  },
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    };
+
+    const { editor } = await renderWithEditor(null, { content });
+
+    const expected: FormattedTextModels.v1.FormattedText = [
+      {
+        type: 'tag',
+        tag: 'p',
+        children: [
+          {
+            type: 'link-to-dam-asset',
+            target: '_blank',
+            damSystemType: 'bynder',
+            damSystemIdentifier: 'idA',
+            damObjectId: 'objA',
+            damAdditional: { variant: 'primary' },
+            children: [
+              {
+                type: 'text',
+                value: 'Click here for DAM asset',
+              },
+            ],
+          },
+        ],
+      },
+    ];
+
+    const result = remirrorNodeToSquizNode(editor.doc);
+    expect(result).toEqual(expected);
+  });
 });

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

@@ -282,6 +282,16 @@ const transformMark = (mark: Mark, node: FormattedNode): FormattedNode => {
         matrixAssetId: mark.attrs.matrixAssetId,
         children: [],
       });
+    case 'DAMLink':
+      return wrapNodeIfNeeded(node, {
+        type: 'link-to-dam-asset',
+        target: mark.attrs.target,
+        damSystemType: mark.attrs.damSystemType,
+        damSystemIdentifier: mark.attrs.damSystemIdentifier,
+        damObjectId: mark.attrs.damObjectId,
+        damAdditional: mark.attrs.damAdditional,
+        children: [],
+      });
   }
 
   throw new Error(`Unsupported mark "${mark.type.name}" was applied to node.`);

package/src/utils/converters/squizNodeToRemirrorNode/squizNodeToRemirrorNode.ts

@@ -12,6 +12,7 @@ const getNodeType = (node: FormattedNodes): string => {
     'link-to-matrix-asset': NodeName.Text,
     'matrix-image': NodeName.AssetImage,
     'dam-image': NodeName.DAMImage,
+    'link-to-dam-asset': NodeName.Text,
     text: 'text',
   };
 
@@ -134,6 +135,17 @@ const getNodeMarks = (node: FormattedNodes): ObjectMark[] => {
         target: node.target,
       },
     });
+  } else if (node.type === 'link-to-dam-asset') {
+    marks.push({
+      type: MarkName.DAMLink,
+      attrs: {
+        damSystemType: node.damSystemType,
+        damSystemIdentifier: node.damSystemIdentifier,
+        damObjectId: node.damObjectId,
+        damAdditional: node.damAdditional ? JSON.stringify(node.damAdditional) : undefined,
+        target: node.target,
+      },
+    });
   } else if (node.type === 'tag' && node.tag === 'strong') {
     marks.push({ type: 'bold' });
   } else if (node.type === 'tag' && node.tag === 'em') {

package/src/utils/getMarkNamesByGroup.spec.ts

@@ -15,6 +15,6 @@ describe('getMarkNamesGroup', () => {
     // Marks in the first array will be transformed to a paragraph when formatting is cleared.
     // Mark in the second array will be left as-is.
     expect(formattingMarkNames).toEqual(['bold', 'italic', 'underline']);
-    expect(otherMarkNames).toEqual(['assetLink', 'link']);
+    expect(otherMarkNames).toEqual(['DAMLink', 'assetLink', 'link']);
   });
 });