@squiz/formatted-text-editor 2.1.0 → 2.2.0

package/src/Extensions/ImageExtension/DAMImageExtension.ts

@@ -0,0 +1,119 @@
+import {
+  ApplySchemaAttributes,
+  command,
+  extension,
+  ExtensionPriority,
+  ExtensionTag,
+  isElementDomNode,
+  NodeExtension,
+  NodeExtensionSpec,
+  NodeSpecOverride,
+  omitExtraAttributes,
+  CommandFunction,
+} from '@remirror/core';
+import { getTextSelection } from 'remirror';
+import { NodeName } from '../Extensions';
+
+export type DAMImageAttributes = {
+  damObjectId: string;
+  damSystemIdentifier: string;
+  damSystemType: string;
+  damAdditional?: {
+    variant: string;
+  };
+  url: string;
+};
+
+@extension({
+  defaultOptions: {},
+  defaultPriority: ExtensionPriority.High,
+})
+export class DAMImageExtension extends NodeExtension {
+  get name() {
+    return NodeName.DAMImage as const;
+  }
+
+  createTags() {
+    return [ExtensionTag.InlineNode, ExtensionTag.Media];
+  }
+
+  createNodeSpec(extra: ApplySchemaAttributes, override: NodeSpecOverride): NodeExtensionSpec {
+    return {
+      inline: true,
+      draggable: true,
+      selectable: true,
+      ...override,
+      attrs: {
+        ...extra.defaults(),
+        damObjectId: {},
+        damSystemIdentifier: {},
+        damSystemType: {},
+        damAdditional: { default: undefined },
+        src: { default: '' },
+      },
+      parseDOM: [
+        {
+          tag: 'img[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,
+              src: '',
+            };
+          },
+        },
+      ],
+      toDOM: (node) => {
+        const { damObjectId, damSystemIdentifier, damSystemType, damAdditional, src, ...rest } = omitExtraAttributes(
+          node.attrs,
+          extra,
+        );
+
+        return [
+          'img',
+          {
+            ...extra.dom(node),
+            ...rest,
+            src,
+            'data-dam-object-id': damObjectId,
+            'data-dam-system-identifier': damSystemIdentifier,
+            'data-dam-system-type': damSystemType,
+            'data-dam-additional': damAdditional ? JSON.stringify(damAdditional) : undefined,
+          },
+        ];
+      },
+    };
+  }
+
+  @command()
+  insertDAMImage(attrs: DAMImageAttributes): CommandFunction {
+    return ({ tr, dispatch }) => {
+      const { from, to } = getTextSelection(tr.selection, tr.doc);
+      const node = this.type.create({ ...attrs, src: attrs.url });
+
+      dispatch?.(tr.replaceRangeWith(from, to, node));
+
+      return true;
+    };
+  }
+}

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

@@ -0,0 +1,219 @@
+import '@testing-library/jest-dom';
+import React from 'react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { ResourceBrowserResource } from '@squiz/resource-browser';
+import { ResourceBrowserSelector } from './ResourceBrowserSelector';
+import { mockResourceBrowser } from '../../../../tests';
+
+const resourceBrowserSpy = jest.fn();
+const { setSelectedResource, setShouldUseMockResourceBrowser, mockResourceBrowserImpl } = mockResourceBrowser();
+jest.mock('@squiz/resource-browser', () => ({
+  ...jest.requireActual('@squiz/resource-browser'),
+  ResourceBrowser: (props: any) => {
+    resourceBrowserSpy(props);
+    return mockResourceBrowserImpl(props);
+  },
+}));
+setShouldUseMockResourceBrowser(true);
+
+describe('ResourceBrowserSelector', () => {
+  it('Renders empty state when no value is provided', async () => {
+    render(<ResourceBrowserSelector modalTitle="Insert asset" onChange={jest.fn()} />);
+
+    expect(resourceBrowserSpy).toHaveBeenCalledWith(
+      expect.objectContaining({
+        value: null,
+      }),
+    );
+  });
+
+  it('AssetImage: Renders a selected state when a value is provided', async () => {
+    render(
+      <ResourceBrowserSelector
+        modalTitle="Insert asset"
+        value={{
+          matrixIdentifier: 'matrix-api-identifier',
+          matrixAssetId: 'my-resource-id',
+          addional: 'addditional data',
+        }}
+        onChange={jest.fn()}
+      />,
+    );
+
+    expect(resourceBrowserSpy).toHaveBeenCalledWith(
+      expect.objectContaining({
+        value: {
+          resourceId: 'my-resource-id',
+          sourceId: 'matrix-api-identifier',
+        },
+      }),
+    );
+  });
+
+  it('DAMImage: Renders a selected state when a value is provided', async () => {
+    render(
+      <ResourceBrowserSelector
+        modalTitle="Insert asset"
+        value={{
+          damObjectId: '123-456-789',
+          damSystemIdentifier: 'zzz-xxx-ccc',
+          addional: 'addditional data',
+        }}
+        onChange={jest.fn()}
+      />,
+    );
+
+    expect(resourceBrowserSpy).toHaveBeenCalledWith(
+      expect.objectContaining({
+        value: {
+          resourceId: '123-456-789',
+          sourceId: 'zzz-xxx-ccc',
+        },
+      }),
+    );
+  });
+
+  it('AssetImage: Calls onChange with expected value when resources is selected', async () => {
+    const handleChange = jest.fn();
+    setSelectedResource({
+      id: 'my-resource-id',
+      name: 'My resource',
+      url: 'myResourceUrl',
+      source: {
+        id: 'my-source-id',
+        type: 'matrix',
+      },
+    } 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',
+          matrixAssetId: 'my-resource-id',
+          matrixIdentifier: 'my-source-id',
+          url: 'myResourceUrl',
+          nodeType: 'assetImage',
+        },
+      },
+    });
+  });
+
+  it('DAMImage: Calls onChange with expected value when 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',
+        },
+      },
+    } 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',
+          url: 'myResourceUrl',
+          nodeType: 'DAMImage',
+        },
+      },
+    });
+  });
+
+  it('ImageAsset: Calls onChange with expected value when resources is cleared', async () => {
+    const handleChange = jest.fn();
+    setSelectedResource(null);
+
+    render(
+      <ResourceBrowserSelector
+        modalTitle="Insert asset"
+        value={{
+          matrixIdentifier: 'my-source-id',
+          matrixAssetId: 'my-resource-id',
+          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',
+        },
+      },
+    });
+  });
+
+  it('DAMImage: Calls onChange with expected value when resources is cleared', async () => {
+    const handleChange = jest.fn();
+    setSelectedResource(null);
+
+    render(
+      <ResourceBrowserSelector
+        modalTitle="Insert asset"
+        value={{
+          damObjectId: 'my-resource-id',
+          damSystemIdentifier: 'my-source-id',
+          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',
+        },
+      },
+    });
+  });
+});

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

@@ -0,0 +1,109 @@
+import React, { useCallback } from 'react';
+import { ResourceBrowserResource, ResourceBrowser } from '@squiz/resource-browser';
+import { DamResourceBrowserSource } from '@squiz/dam-resource-browser-plugin';
+import { InputContainer, InputContainerProps } from '../InputContainer/InputContainer';
+import { NodeName } from '../../../Extensions/Extensions';
+
+type MatrixAsset = {
+  matrixIdentifier?: string;
+  matrixAssetId?: string;
+};
+type DAMAsset = {
+  damSystemIdentifier?: string;
+  damObjectId?: string;
+  damSystemType?: string;
+};
+type ResourceBrowserSelectorValue = MatrixAsset &
+  DAMAsset & {
+    nodeType?: NodeName;
+    url?: string;
+  };
+
+export type ResourceBrowserSelectorProps<T extends ResourceBrowserSelectorValue> = Omit<
+  InputContainerProps,
+  'children'
+> & {
+  modalTitle: string;
+  allowedTypes?: string[];
+  value?: T | null;
+  // LinkForm contains a "target" property.
+  // react-hook-form treats the presence of this property as an "Event" object being passed through, see:
+  // https://github.com/react-hook-form/react-hook-form/blob/master/src/logic/getEventValue.ts
+  // Nest the value under a "target" object to work around the behaviour.
+  onChange: (value: { target: { value: T } }) => void;
+};
+
+export const ResourceBrowserSelector = <T extends ResourceBrowserSelectorValue>({
+  modalTitle,
+  allowedTypes,
+  value,
+  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,
+      };
+    }
+
+    return null;
+  }, []);
+
+  const handleResourceChange = useCallback((resource: ResourceBrowserResource | null) => {
+    // Clear out any key properties for clear resource use case
+    let onChangeData: ResourceBrowserSelectorValue = {
+      ...value,
+      matrixIdentifier: undefined,
+      matrixAssetId: undefined,
+      damSystemIdentifier: undefined,
+      damObjectId: undefined,
+      damSystemType: undefined,
+      url: undefined,
+    };
+
+    if (resource?.source?.type === 'matrix') {
+      onChangeData = {
+        ...value,
+        matrixIdentifier: resource?.source?.id,
+        matrixAssetId: resource?.id,
+        url: resource?.url,
+        nodeType: NodeName.AssetImage,
+      };
+    } else if (resource?.source?.type === 'dam') {
+      onChangeData = {
+        ...value,
+        damSystemIdentifier: resource?.source?.id,
+        damObjectId: resource?.id,
+        damSystemType: (resource?.source as DamResourceBrowserSource).configuration.externalType,
+        url: resource?.url,
+        nodeType: NodeName.DAMImage,
+      };
+    }
+
+    onChange({
+      target: {
+        value: {
+          ...onChangeData,
+        } as T,
+      },
+    });
+  }, []);
+
+  return (
+    <InputContainer {...props}>
+      <ResourceBrowser
+        modalTitle={modalTitle}
+        allowedTypes={allowedTypes}
+        value={convertFormDataToResourceBrowserValue(value as T)}
+        onChange={handleResourceChange}
+      />
+    </InputContainer>
+  );
+};

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

@@ -164,6 +164,27 @@ export const sharedNodeExamples: NodeExample[] = [
       },
     ],
   },
+  {
+    description: 'DAM image',
+    remirrorNode: {
+      type: 'DAMImage',
+      attrs: {
+        damObjectId: '123-456-789',
+        damSystemIdentifier: 'zzz-xxx-ccc',
+        damSystemType: 'bynder',
+        damAdditional: JSON.stringify({ variant: 'xyz' }),
+      },
+    },
+    squizNode: [
+      {
+        type: 'dam-image',
+        damObjectId: '123-456-789',
+        damSystemIdentifier: 'zzz-xxx-ccc',
+        damSystemType: 'bynder',
+        damAdditional: { variant: 'xyz' },
+      },
+    ],
+  },
 ];
 
 export const squizOnlyNodeExamples: NodeExample[] = [

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

@@ -157,6 +157,16 @@ const transformNode = (node: ProsemirrorNode): FormattedNode => {
     };
   }
 
+  if (node.type.name === NodeName.DAMImage) {
+    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,
+    };
+  }
+
   node.marks.forEach((mark) => {
     transformedNode = transformMark(mark, transformedNode);
   });

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

@@ -11,6 +11,7 @@ const getNodeType = (node: FormattedNodes): string => {
   const typeMap: Record<string, string> = {
     'link-to-matrix-asset': NodeName.Text,
     'matrix-image': NodeName.AssetImage,
+    'dam-image': NodeName.DAMImage,
     text: 'text',
   };
 
@@ -95,6 +96,13 @@ const getNodeAttributes = (node: FormattedNodes): Attrs => {
       matrixDomain: node.matrixDomain,
       matrixIdentifier: node.matrixIdentifier,
     };
+  } else if (node.type === 'dam-image') {
+    return {
+      damObjectId: node.damObjectId,
+      damSystemIdentifier: node.damSystemIdentifier,
+      damSystemType: node.damSystemType,
+      damAdditional: node.damAdditional ? JSON.stringify(node.damAdditional) : undefined,
+    };
   } else if (node.type === 'tag') {
     return {
       nodeIndent: null,

package/src/utils/getNodeNamesByGroup.spec.ts

@@ -17,6 +17,7 @@ describe('getNodeNamesByGroup', () => {
     expect(formattingNodeNames).toEqual(['paragraph', 'heading', 'preformatted']);
     expect(otherNodeNames).toEqual([
       'assetImage',
+      'DAMImage',
       'doc',
       'text',
       'tableControllerCell',

package/tests/index.ts

@@ -1,4 +1,5 @@
 export * from './renderWithEditor';
 export * from './renderWithContext';
 export * from './mockResourceBrowserContext';
+export * from './mockResourceBrowser';
 export * from './select';

package/tests/mockResourceBrowser.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { ResourceBrowserResource, ResourceBrowserProps } from '@squiz/resource-browser';
+
+/*
+   When testing using the DAM plugin this needs to be mocked as its data fetch 
+   logic is internal, but most of the tests in this repo were written for the Matrix plugin
+   which can be controlled externally.
+
+   So this is mocked in this way so the original tests can run against the actual Resource Browser
+   and the DAMImage tests can be run against a completely mocked one.
+*/
+export const mockResourceBrowser = () => {
+  let shouldUseMockResourceBrowser = false;
+  let selectedResource: ResourceBrowserResource | null = null;
+  const actual = jest.requireActual('@squiz/resource-browser');
+
+  return {
+    setSelectedResource: (value: ResourceBrowserResource | null) => {
+      selectedResource = value;
+    },
+    setShouldUseMockResourceBrowser: (value: boolean) => {
+      shouldUseMockResourceBrowser = value;
+    },
+    mockResourceBrowserImpl: (props: ResourceBrowserProps) => {
+      if (!shouldUseMockResourceBrowser) {
+        return actual.ResourceBrowser(props);
+      }
+
+      // This would be easier if this repo allowed 'var' statements given jest mocks don't function easily without them
+      return (
+        <div>
+          ResourceBrowser was rendered
+          <button
+            id="selectResource"
+            type="button"
+            onClick={() => {
+              props.onChange(selectedResource);
+            }}
+          >
+            Select ResourceBrowser Resource
+          </button>
+        </div>
+      );
+    },
+  };
+};