@squiz/formatted-text-editor 2.6.4 → 2.6.5

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## 2.6.5
+
+### Patch Changes
+
+- ff44594: Update to pass dam variant
+
 ## 2.6.4
 
 ### Patch Changes

package/demo/diff/AppContext.tsx

@@ -1,4 +1,4 @@
-import DamResourceBrowserPlugin from '@squiz/dam-resource-browser-plugin';
+import DamResourceBrowserPlugin, { DamResourceBrowserSource } from '@squiz/dam-resource-browser-plugin';
 import { AiServiceProvider } from '@squiz/dxp-ai-client-react';
 import MatrixResourceBrowserPlugin, {
   Resource,
@@ -11,6 +11,7 @@ import { QueryClient, QueryClientProvider } from 'react-query';
 import { EditorContext, ResolveNodeType } from '../../src';
 import resources from './resources.json';
 import sources from './sources.json';
+import contentApi from './contentApi.json';
 
 export type AppContextProps = PropsWithChildren;
 
@@ -38,9 +39,36 @@ export const AppContext = ({ children }: AppContextProps) => (
               id: 'matrixIdentifier',
               type: 'matrix',
             },
+            {
+              name: 'Bynder',
+              id: 'bynder',
+              type: 'dam',
+              configuration: {
+                externalType: 'bynder',
+                externalRootUrl: 'https://squiz-sandbox.bynder.com',
+                authUrl: 'authUrl - See readme for local authToken instructions',
+                clientId: 'clientId - See readme for local authToken instructions',
+                redirectUrl: 'http://localhost:6006/',
+              },
+            } as DamResourceBrowserSource,
           ]),
         plugins: [
-          DamResourceBrowserPlugin(),
+          DamResourceBrowserPlugin({
+            onResourceRequestProxy: () => {
+              return Promise.resolve({
+                id: 'id1',
+                type: 'image',
+                fileSize: 300,
+                description: 'description1',
+                name: 'Bynder Image',
+                original: 'https://picsum.photos/300/250',
+                height: 100,
+                width: 200,
+                extension: ['jpeg'],
+                thumbnails: { thul: 'https://picsum.photos/300/250' },
+              });
+            },
+          }),
           MatrixResourceBrowserPlugin({
             onRequestSources: (): Promise<Source> => Promise.resolve(sources),
             onRequestChildren: (source: Source, resource: Resource | null): Promise<Resource[]> =>
@@ -72,6 +100,12 @@ export const AppContext = ({ children }: AppContextProps) => (
                   nextStart: null,
                 },
               }),
+            onRequestMatrixAsset: (assetId: string) => {
+              return Promise.resolve({
+                ...contentApi,
+                id: assetId,
+              });
+            },
           }),
         ],
       }}

package/demo/diff/contentApi.json

@@ -0,0 +1,21 @@
+{
+  "id": "3",
+  "type": "image",
+  "type_name": "Image",
+  "name": "Image",
+  "short_name": "Image",
+  "urls": ["https://picsum.photos/300/250"],
+  "url": "https://picsum.photos/300/250",
+  "attributes": {
+    "name": "Image",
+    "title": "Image",
+    "width": 640,
+    "height": 438,
+    "size": 99384,
+    "variety_count": 5,
+    "allow_unrestricted": true,
+    "caption": "",
+    "alt": ""
+  },
+  "children": []
+}

package/demo/diff/index.scss

@@ -1,5 +1,7 @@
+@import '../../../../node_modules/@squiz/sds/lib/package.css';
 @import '../../../../node_modules/@squiz/resource-browser/lib/index.css';
 @import '../../../../node_modules/@squiz/matrix-resource-browser-plugin/lib/index.css';
+@import '../../../../node_modules/@squiz/dam-resource-browser-plugin/lib/index.css';
 
 body {
   font-family: 'Open Sans';

package/lib/ui/Fields/ResourceBrowserSelector/ResourceBrowserSelector.d.ts

@@ -9,6 +9,9 @@ type DAMAsset = {
     damSystemIdentifier?: string;
     damObjectId?: string;
     damSystemType?: string;
+    damAdditional?: {
+        variant: string;
+    };
 };
 type ResourceBrowserSelectorValue = MatrixAsset & DAMAsset & {
     nodeType?: NodeName;

package/lib/ui/Fields/ResourceBrowserSelector/ResourceBrowserSelector.js

@@ -40,6 +40,7 @@ const ResourceBrowserSelector = ({ modalTitle, allowedTypes, value, onChange, ..
             return {
                 sourceId: value.damSystemIdentifier,
                 resourceId: value.damObjectId,
+                variant: value.damAdditional?.variant,
             };
         }
         return null;
@@ -53,6 +54,7 @@ const ResourceBrowserSelector = ({ modalTitle, allowedTypes, value, onChange, ..
             damSystemIdentifier: undefined,
             damObjectId: undefined,
             damSystemType: undefined,
+            damAdditional: undefined,
             url: undefined,
         };
         if (resource?.source?.type === 'matrix') {
@@ -65,11 +67,17 @@ const ResourceBrowserSelector = ({ modalTitle, allowedTypes, value, onChange, ..
             };
         }
         else if (resource?.source?.type === 'dam') {
+            const damResource = resource;
             onChangeData = {
                 ...value,
                 damSystemIdentifier: resource?.source?.id,
                 damObjectId: resource?.id,
                 damSystemType: (resource?.source).configuration.externalType,
+                damAdditional: damResource.variant
+                    ? {
+                        variant: damResource.variant,
+                    }
+                    : undefined,
                 url: resource?.url,
                 nodeType: Extensions_1.NodeName.DAMImage,
             };

package/lib/utils/converters/remirrorNodeToSquizNode/remirrorNodeToSquizNode.js

@@ -115,12 +115,16 @@ const transformNode = (node) => {
         };
     }
     if (node.type.name === Extensions_1.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,
         };
     }
     node.marks.forEach((mark) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squiz/formatted-text-editor",
-  "version": "2.6.4",
+  "version": "2.6.5",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "private": false,
@@ -33,16 +33,16 @@
     "remirror": "2.0.39"
   },
   "devDependencies": {
-    "@squiz/dam-resource-browser-plugin": "^3.1.0-rc.1",
+    "@squiz/dam-resource-browser-plugin": "^3.2.7",
     "@squiz/dxp-ai-client-react": "^1.0.0",
-    "@squiz/matrix-resource-browser-plugin": "^3.1.0-rc.5",
-    "@squiz/resource-browser": "^3.1.0-rc.0",
+    "@squiz/matrix-resource-browser-plugin": "^3.3.1",
+    "@squiz/resource-browser": "^3.2.2",
     "@squiz/sds": "^1.5.0",
     "@testing-library/cypress": "^10.0.2",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "14.0.0",
     "@testing-library/user-event": "14.4.3",
-    "@types/node": "20.12.4",
+    "@types/node": "22.10.5",
     "@types/react": "^18.2.45",
     "@types/react-dom": "^18.2.18",
     "@vitejs/plugin-react": "3.0.0",
@@ -70,10 +70,10 @@
     "vite": "^4.5.3"
   },
   "peerDependencies": {
-    "@squiz/dam-resource-browser-plugin": "^3.1.0-rc.1",
+    "@squiz/dam-resource-browser-plugin": "^3.1.0",
     "@squiz/dxp-ai-client-react": "^1.0.0",
-    "@squiz/matrix-resource-browser-plugin": "^3.1.0-rc.5",
-    "@squiz/resource-browser": "^3.1.0-rc.0",
+    "@squiz/matrix-resource-browser-plugin": "^3.1.0",
+    "@squiz/resource-browser": "^3.1.0",
     "@squiz/sds": "^1.5.0",
     "@types/react": "^16.14.0 || ^17 || ^18",
     "@types/react-dom": "^16.9.0 || ^17 || ^18",

package/src/Editor/Editor.spec.tsx

@@ -442,6 +442,7 @@ describe('Formatted text editor', () => {
         onRequestChildren,
         onRequestResource,
         onSearchRequest: jest.fn(),
+        onRequestMatrixAsset: jest.fn(),
       } as MatrixResourceBrowserPluginProps,
     });
 

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/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,
     };
   }
 

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,
             }),
           ],
         }}