@squiz/formatted-text-editor 2.6.4 → 2.6.6

package/src/Extensions/LinkExtension/DamLinkExtension.ts

@@ -0,0 +1,137 @@
+import {
+  ApplySchemaAttributes,
+  ExtensionPriority,
+  FromToProps,
+  isElementDomNode,
+  MarkExtensionSpec,
+  MarkSpecOverride,
+} from 'remirror';
+import { command, CommandFunction, extension, MarkExtension, omitExtraAttributes, removeMark } from '@remirror/core';
+import { LinkTarget, validateTarget } from './common';
+import { CommandsExtension } from '../CommandsExtension/CommandsExtension';
+import { MarkName } from '../Extensions';
+
+export type DAMLinkAttributes = {
+  damObjectId: string;
+  damSystemIdentifier: string;
+  damSystemType: string;
+  damAdditional?: {
+    variant: string;
+  };
+  target: LinkTarget;
+  href: string;
+  url: string;
+};
+
+export type DAMLinkOptions = {
+  defaultTarget?: LinkTarget;
+  supportedTargets?: LinkTarget[];
+};
+
+export type UpdateDAMLinkProps = {
+  text: string;
+  attrs: Partial<DAMLinkAttributes>;
+  range: FromToProps;
+};
+
+@extension<DAMLinkOptions>({
+  defaultOptions: {
+    defaultTarget: LinkTarget.Self,
+    supportedTargets: [LinkTarget.Self, LinkTarget.Blank],
+  },
+  defaultPriority: ExtensionPriority.High,
+})
+export class DAMLinkExtension extends MarkExtension<DAMLinkOptions> {
+  get name(): string {
+    return MarkName.DAMLink;
+  }
+
+  createMarkSpec(extra: ApplySchemaAttributes, override: MarkSpecOverride): MarkExtensionSpec {
+    return {
+      inclusive: false,
+      excludes: [this.name, MarkName.Link, MarkName.AssetLink].join(' '),
+      ...override,
+      attrs: {
+        ...extra.defaults(),
+        damObjectId: {},
+        damSystemIdentifier: {},
+        damSystemType: {},
+        damAdditional: { default: undefined },
+        href: { default: '' },
+        target: { default: this.options.defaultTarget },
+      },
+      parseDOM: [
+        {
+          tag: 'a[data-dam-object-id]',
+          getAttrs: (node) => {
+            if (!isElementDomNode(node)) {
+              return false;
+            }
+            const damObjectId = node.getAttribute('data-dam-object-id');
+            const damSystemIdentifier = node.getAttribute('data-dam-system-identifier');
+            const damSystemType = node.getAttribute('data-dam-system-type');
+            let damAdditional = node.getAttribute('data-dam-additional') || undefined;
+
+            if (!damObjectId || !damSystemIdentifier || !damSystemType) {
+              return false;
+            }
+
+            if (damAdditional) {
+              damAdditional = JSON.parse(damAdditional);
+            }
+
+            return {
+              ...extra.parse(node),
+              damObjectId,
+              damSystemIdentifier,
+              damSystemType,
+              damAdditional,
+              target: validateTarget(
+                node.getAttribute('target'),
+                this.options.supportedTargets,
+                this.options.defaultTarget,
+              ),
+              href: node.getAttribute('href') || '',
+            };
+          },
+        },
+      ],
+      toDOM: (node) => {
+        const { damObjectId, damSystemIdentifier, damSystemType, damAdditional, target, href, ...rest } =
+          omitExtraAttributes(node.attrs, extra);
+        const rel = 'noopener noreferrer nofollow';
+        return [
+          'a',
+          {
+            ...extra.dom(node),
+            ...rest,
+            rel,
+            href,
+            target: validateTarget(target, this.options.supportedTargets, this.options.defaultTarget),
+            'data-dam-object-id': damObjectId,
+            'data-dam-system-identifier': damSystemIdentifier,
+            'data-dam-system-type': damSystemType,
+            'data-dam-additional': damAdditional ? JSON.stringify(damAdditional) : undefined,
+          },
+          0,
+        ];
+      },
+    };
+  }
+
+  @command()
+  updateDAMLink({ text, attrs, range }: UpdateDAMLinkProps): CommandFunction {
+    return this.store.getExtension(CommandsExtension).updateMark({
+      attrs: { ...attrs, href: attrs.url },
+      text,
+      range,
+      mark: this.type,
+      removeMark: !attrs.damObjectId,
+    });
+  }
+
+  @command()
+  removeDAMLink(): CommandFunction {
+    return removeMark({ type: this.type });
+  }
+}

package/src/Extensions/LinkExtension/LinkExtension.ts

@@ -43,7 +43,7 @@ export class LinkExtension extends MarkExtension<LinkOptions> {
   createMarkSpec(extra: ApplySchemaAttributes, override: MarkSpecOverride): MarkExtensionSpec {
     return {
       inclusive: false,
-      excludes: [this.name, MarkName.AssetLink].join(' '),
+      excludes: [this.name, MarkName.AssetLink, MarkName.DAMLink].join(' '),
       ...override,
       attrs: {
         ...extra.defaults(),

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/ui/Fields/ResourceBrowserSelector/ResourceBrowserSelector.spec.tsx

@@ -57,7 +57,6 @@ describe('ResourceBrowserSelector', () => {
         value={{
           damObjectId: '123-456-789',
           damSystemIdentifier: 'zzz-xxx-ccc',
-          additional: 'addditional data',
         }}
         onChange={jest.fn()}
       />,
@@ -71,6 +70,30 @@ describe('ResourceBrowserSelector', () => {
         },
       }),
     );
+
+    render(
+      <ResourceBrowserSelector
+        modalTitle="Insert asset"
+        value={{
+          damObjectId: '123-456-789',
+          damSystemIdentifier: 'zzz-xxx-ccc',
+          damAdditional: {
+            variant: 'v1',
+          },
+        }}
+        onChange={jest.fn()}
+      />,
+    );
+
+    expect(resourceBrowserSpy).toHaveBeenCalledWith(
+      expect.objectContaining({
+        value: {
+          resourceId: '123-456-789',
+          sourceId: 'zzz-xxx-ccc',
+          variant: 'v1',
+        },
+      }),
+    );
   });
 
   it('AssetImage: Calls onChange with expected value when resources is selected', async () => {
@@ -155,6 +178,53 @@ describe('ResourceBrowserSelector', () => {
     });
   });
 
+  it('DAMImage: Calls onChange with expected value when variant resources is selected', async () => {
+    const handleChange = jest.fn();
+    setSelectedResource({
+      id: 'my-resource-id',
+      name: 'My resource',
+      url: 'myResourceUrl',
+      source: {
+        id: 'my-source-id',
+        type: 'dam',
+        configuration: {
+          externalType: 'bynder',
+        },
+      },
+      variant: 'v1',
+    } as unknown as ResourceBrowserResource);
+
+    render(
+      <ResourceBrowserSelector
+        modalTitle="Insert asset"
+        value={{ matrixIdentifier: undefined, matrixAssetId: undefined, additional: 'additional data' }}
+        onChange={handleChange}
+      />,
+    );
+
+    // Trigger the onChange handler to be called
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: 'Select ResourceBrowser Resource' })).toBeInTheDocument();
+    });
+    fireEvent.click(await screen.findByRole('button', { name: 'Select ResourceBrowser Resource' }));
+
+    expect(handleChange).toHaveBeenCalledWith({
+      target: {
+        value: {
+          additional: 'additional data',
+          damObjectId: 'my-resource-id',
+          damSystemIdentifier: 'my-source-id',
+          damSystemType: 'bynder',
+          damAdditional: {
+            variant: 'v1',
+          },
+          url: 'myResourceUrl',
+          nodeType: 'DAMImage',
+        },
+      },
+    });
+  });
+
   it('ImageAsset: Calls onChange with expected value when resources is cleared', async () => {
     const handleChange = jest.fn();
     setSelectedResource(null);

package/src/ui/Fields/ResourceBrowserSelector/ResourceBrowserSelector.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react';
-import { ResourceBrowserResource, ResourceBrowser } from '@squiz/resource-browser';
-import { DamResourceBrowserSource } from '@squiz/dam-resource-browser-plugin';
+import { ResourceBrowserUnresolvedResource, ResourceBrowserResource, ResourceBrowser } from '@squiz/resource-browser';
+import { DamResourceBrowserSource, DAMResource } from '@squiz/dam-resource-browser-plugin';
 import { InputContainer, InputContainerProps } from '../InputContainer/InputContainer';
 import { NodeName } from '../../../Extensions/Extensions';
 
@@ -12,6 +12,9 @@ type DAMAsset = {
   damSystemIdentifier?: string;
   damObjectId?: string;
   damSystemType?: string;
+  damAdditional?: {
+    variant: string;
+  };
 };
 type ResourceBrowserSelectorValue = MatrixAsset &
   DAMAsset & {
@@ -40,21 +43,25 @@ export const ResourceBrowserSelector = <T extends ResourceBrowserSelectorValue>(
   onChange,
   ...props
 }: ResourceBrowserSelectorProps<T>) => {
-  const convertFormDataToResourceBrowserValue = useCallback((value: T | null) => {
-    if (value?.matrixIdentifier && value?.matrixAssetId) {
-      return {
-        sourceId: value.matrixIdentifier,
-        resourceId: value.matrixAssetId,
-      };
-    } else if (value?.damSystemIdentifier && value?.damObjectId) {
-      return {
-        sourceId: value.damSystemIdentifier,
-        resourceId: value.damObjectId,
-      };
-    }
+  const convertFormDataToResourceBrowserValue = useCallback(
+    (value: T | null): ResourceBrowserUnresolvedResource | null => {
+      if (value?.matrixIdentifier && value?.matrixAssetId) {
+        return {
+          sourceId: value.matrixIdentifier,
+          resourceId: value.matrixAssetId,
+        };
+      } else if (value?.damSystemIdentifier && value?.damObjectId) {
+        return {
+          sourceId: value.damSystemIdentifier,
+          resourceId: value.damObjectId,
+          variant: value.damAdditional?.variant,
+        };
+      }
 
-    return null;
-  }, []);
+      return null;
+    },
+    [],
+  );
 
   const handleResourceChange = useCallback((resource: ResourceBrowserResource | null) => {
     // Clear out any key properties for clear resource use case
@@ -65,6 +72,7 @@ export const ResourceBrowserSelector = <T extends ResourceBrowserSelectorValue>(
       damSystemIdentifier: undefined,
       damObjectId: undefined,
       damSystemType: undefined,
+      damAdditional: undefined,
       url: undefined,
     };
 
@@ -77,11 +85,17 @@ export const ResourceBrowserSelector = <T extends ResourceBrowserSelectorValue>(
         nodeType: NodeName.AssetImage,
       };
     } else if (resource?.source?.type === 'dam') {
+      const damResource = resource as DAMResource;
       onChangeData = {
         ...value,
         damSystemIdentifier: resource?.source?.id,
         damObjectId: resource?.id,
         damSystemType: (resource?.source as DamResourceBrowserSource).configuration.externalType,
+        damAdditional: damResource.variant
+          ? {
+              variant: damResource.variant,
+            }
+          : undefined,
         url: resource?.url,
         nodeType: NodeName.DAMImage,
       };

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

@@ -154,12 +154,17 @@ const transformNode = (node: ProsemirrorNode): FormattedNode => {
   }
 
   if (node.type.name === NodeName.DAMImage) {
+    let damAdditional = node.attrs.damAdditional;
+    if (damAdditional && typeof node.attrs.damAdditional === 'string') {
+      damAdditional = JSON.parse(node.attrs.damAdditional);
+    }
+
     transformedNode = {
       type: 'dam-image',
       damObjectId: node.attrs.damObjectId,
       damSystemIdentifier: node.attrs.damSystemIdentifier,
       damSystemType: node.attrs.damSystemType,
-      damAdditional: node.attrs.damAdditional ? JSON.parse(node.attrs.damAdditional) : undefined,
+      damAdditional,
     };
   }
 
@@ -277,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']);
   });
 });

package/tests/renderWithContext.tsx

@@ -46,6 +46,7 @@ export const renderWithContext = (ui: ReactElement | null, options?: ContextRend
   const onRequestChildren = jest.fn().mockResolvedValue(resources);
   const onRequestResource = jest.fn(() => Promise.resolve(resources[0]));
   const onSearchRequest = jest.fn();
+  const onRequestMatrixAsset = jest.fn();
   editorContext.resolveNodeToUrl = jest.fn(() => Promise.resolve(resources[0].url));
 
   return render(
@@ -67,6 +68,7 @@ export const renderWithContext = (ui: ReactElement | null, options?: ContextRend
               onRequestChildren: onRequestChildren,
               onRequestResource: onRequestResource,
               onSearchRequest,
+              onRequestMatrixAsset,
             }),
           ],
         }}