@squiz/formatted-text-editor 2.1.0 → 2.2.0

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

@@ -0,0 +1,88 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ResourceBrowserSelector = void 0;
+const react_1 = __importStar(require("react"));
+const resource_browser_1 = require("@squiz/resource-browser");
+const InputContainer_1 = require("../InputContainer/InputContainer");
+const Extensions_1 = require("../../../Extensions/Extensions");
+const ResourceBrowserSelector = ({ modalTitle, allowedTypes, value, onChange, ...props }) => {
+    const convertFormDataToResourceBrowserValue = (0, react_1.useCallback)((value) => {
+        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 = (0, react_1.useCallback)((resource) => {
+        // Clear out any key properties for clear resource use case
+        let onChangeData = {
+            ...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: Extensions_1.NodeName.AssetImage,
+            };
+        }
+        else if (resource?.source?.type === 'dam') {
+            onChangeData = {
+                ...value,
+                damSystemIdentifier: resource?.source?.id,
+                damObjectId: resource?.id,
+                damSystemType: (resource?.source).configuration.externalType,
+                url: resource?.url,
+                nodeType: Extensions_1.NodeName.DAMImage,
+            };
+        }
+        onChange({
+            target: {
+                value: {
+                    ...onChangeData,
+                },
+            },
+        });
+    }, []);
+    return (react_1.default.createElement(InputContainer_1.InputContainer, { ...props },
+        react_1.default.createElement(resource_browser_1.ResourceBrowser, { modalTitle: modalTitle, allowedTypes: allowedTypes, value: convertFormDataToResourceBrowserValue(value), onChange: handleResourceChange })));
+};
+exports.ResourceBrowserSelector = ResourceBrowserSelector;

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

@@ -117,6 +117,15 @@ const transformNode = (node) => {
             matrixDomain: node.attrs.matrixDomain,
         };
     }
+    if (node.type.name === Extensions_1.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/lib/utils/converters/squizNodeToRemirrorNode/squizNodeToRemirrorNode.js

@@ -7,6 +7,7 @@ const getNodeType = (node) => {
     const typeMap = {
         'link-to-matrix-asset': Extensions_1.NodeName.Text,
         'matrix-image': Extensions_1.NodeName.AssetImage,
+        'dam-image': Extensions_1.NodeName.DAMImage,
         text: 'text',
     };
     const tagMap = {
@@ -87,6 +88,14 @@ const getNodeAttributes = (node) => {
             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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squiz/formatted-text-editor",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "private": false,
@@ -24,11 +24,12 @@
     "@mui/icons-material": "5.15.18",
     "@remirror/extension-react-tables": "^2.2.19",
     "@remirror/react": "2.0.35",
-    "@squiz/dx-json-schema-lib": "^1.65.1",
+    "@squiz/dx-json-schema-lib": "^1.72.0",
     "@squiz/dxp-ai-client-react": "^0.1.3-alpha",
     "@squiz/matrix-resource-browser-plugin": "^2.0.0",
     "@squiz/resource-browser": "^2.0.0",
     "@squiz/sds": "^1.0.0-alpha.50",
+    "@squiz/dam-resource-browser-plugin": "^0.9.0-rc.0",
     "clsx": "2.1.1",
     "react-hook-form": "7.51.4",
     "react-image-size": "2.0.0",
@@ -58,6 +59,7 @@
     "react": "18.2.0",
     "react-diff-viewer-continued": "3.2.6",
     "react-dom": "18.2.0",
+    "react-query": "^3.19.6",
     "rimraf": "5.0.7",
     "tailwindcss": "3.2.6",
     "ts-jest": "29.0.5",

package/src/EditorToolbar/FloatingToolbar.spec.tsx

@@ -31,13 +31,15 @@ describe('FloatingToolbar', () => {
   it.each([
     ['Image selected', 1, ['Image (Ctrl+L)']],
     ['Asset image selected', 2, ['Image (Ctrl+L)']],
+    ['DAM image selected', 3, ['Image (Ctrl+L)']],
   ])(
     'Renders formatting buttons when node is selected - %s',
     async (description: string, pos: number, expectedButtons: string[]) => {
       const { editor } = await renderWithEditor(null, {
         content:
           '<img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />' +
-          '<img data-matrix-asset-id="100" data-matrix-identifier="key" data-matrix-domain="my-matrix.squiz.net" />',
+          '<img data-matrix-asset-id="100" data-matrix-identifier="key" data-matrix-domain="my-matrix.squiz.net" />' +
+          '<img data-dam-object-id="5ce8e8dc-1adc-4254-87a8-d1f5a5c9045a" data-dam-system-identifier="byder001" data-dam-system-type="bynder" />',
         editable: true,
       });
 

package/src/EditorToolbar/FloatingToolbar.tsx

@@ -30,7 +30,7 @@ export const FloatingToolbar = () => {
     extensionNames.underline && <UnderlineButton key="underline" />,
   ];
 
-  if (active.image() || active.assetImage()) {
+  if (active.image() || active.assetImage() || active.DAMImage()) {
     buttons = [<ImageButton key="add-image" inPopover={true} />];
   } else if (marks?.[MarkName.Link].isExclusivelyActive || marks?.[MarkName.AssetLink].isExclusivelyActive) {
     // if all of the selected text is a link show the options to update/remove the link instead of the regular

package/src/EditorToolbar/Tools/Image/Form/ImageForm.spec.tsx

@@ -3,7 +3,13 @@ import { render, screen, act, fireEvent, waitFor } from '@testing-library/react'
 import React from 'react';
 import ImageForm from './ImageForm';
 import { NodeName } from '../../../../Extensions/Extensions';
-import { mockResourceBrowserContext } from '../../../../../tests';
+import { mockResourceBrowser, mockResourceBrowserContext } from '../../../../../tests';
+
+const { setShouldUseMockResourceBrowser, mockResourceBrowserImpl } = mockResourceBrowser();
+jest.mock('@squiz/resource-browser', () => ({
+  ...jest.requireActual('@squiz/resource-browser'),
+  ResourceBrowser: (props: any) => mockResourceBrowserImpl(props),
+}));
 
 describe('Image Form', () => {
   const handleSubmit = jest.fn();
@@ -48,7 +54,7 @@ describe('Image Form', () => {
           data={{
             ...data,
             imageType: NodeName.AssetImage,
-            assetImage: { matrixAssetId: '100', matrixIdentifier: 'matrix-api-identifier' },
+            resourceImage: { matrixAssetId: '100', matrixIdentifier: 'matrix-api-identifier' },
           }}
           onSubmit={handleSubmit}
         />
@@ -61,6 +67,25 @@ describe('Image Form', () => {
     });
   });
 
+  it('Renders the form with the relevant fields for dam images', async () => {
+    setShouldUseMockResourceBrowser(true);
+    render(
+      <ImageForm
+        data={{
+          ...data,
+          imageType: NodeName.DAMImage,
+          resourceImage: { damObjectId: '100', damSystemIdentifier: 'dam-api-identifier' },
+        }}
+        onSubmit={handleSubmit}
+      />,
+    );
+
+    expect(document.querySelector('div[data-headlessui-state="selected"]')).toHaveTextContent('From source');
+    await waitFor(() => {
+      expect(screen.getByText('ResourceBrowser was rendered')).toBeInTheDocument();
+    });
+  });
+
   it('calculates the height when width changes and aspect ratio is locked', () => {
     render(<ImageForm data={data} onSubmit={handleSubmit} />);
     const widthInput = screen.getByLabelText('Width');

package/src/EditorToolbar/Tools/Image/Form/ImageForm.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement, useState } from 'react';
+import React, { ReactElement, useState, useCallback, useEffect } from 'react';
 import { Controller, SubmitHandler, useForm } from 'react-hook-form';
 import { getImageSize } from 'react-image-size';
 import clsx from 'clsx';
@@ -9,20 +9,25 @@ import LinkOffIcon from '@mui/icons-material/LinkOff';
 import InsertLinkRoundedIcon from '@mui/icons-material/InsertLinkRounded';
 import { NodeName } from '../../../../Extensions/Extensions';
 import { AssetImageAttributes } from '../../../../Extensions/ImageExtension/AssetImageExtension';
+import { DAMImageAttributes } from '../../../../Extensions/ImageExtension/DAMImageExtension';
 import { DeepPartial } from '../../../../types';
 import { noEmptySpacesValidation, regexDataURI, hasProperties } from '../../../../utils/validation';
 import { TabOptions, Tabs } from '../../../../ui/Tabs/Tabs';
-import { MatrixAsset } from '../../../../ui/Fields/MatrixAsset/MatrixAsset';
+import { ResourceBrowserSelector } from '../../../../ui/Fields/ResourceBrowserSelector/ResourceBrowserSelector';
 
 export type ImageFormData = {
   imageType: NodeName;
   image: Pick<ImageAttributes, 'src' | 'alt' | 'width' | 'height'>;
-  assetImage: AssetImageAttributes;
+  resourceImage: AssetImageAttributes & DAMImageAttributes;
 };
 
+enum ViewTypes {
+  Resource = 'Resource',
+  URL = 'URL',
+}
 const imageTypeOptions: TabOptions = {
-  [NodeName.AssetImage]: { label: 'From source' },
-  [NodeName.Image]: { label: 'From URL' },
+  [ViewTypes.Resource]: { label: 'From source' },
+  [ViewTypes.URL]: { label: 'From URL' },
 };
 
 export type FormProps = {
@@ -42,7 +47,8 @@ const ImageForm = ({ data, onSubmit }: FormProps): ReactElement => {
   } = useForm<ImageFormData>({
     defaultValues: data,
   });
-  const imageType = watch('imageType') || NodeName.AssetImage;
+  const imageType = watch('imageType');
+  const [viewType, setViewType] = useState<ViewTypes>(ViewTypes.Resource);
   const [aspectRatioFromWidth, setAspectRatioFromWidth] = useState(9 / 16);
   const [aspectRatioFromHeight, setAspectRatioFromHeight] = useState(16 / 9);
   const [aspectRatioLocked, setAspectRatioLocked] = useState(true);
@@ -86,16 +92,41 @@ const ImageForm = ({ data, onSubmit }: FormProps): ReactElement => {
     setAspectRatioLocked(!aspectRatioLocked);
   };
 
+  useEffect(() => {
+    if (imageType === NodeName.Image) {
+      setViewType(ViewTypes.URL);
+    } else {
+      setViewType(ViewTypes.Resource);
+    }
+  }, [imageType, setViewType]);
+
+  const handleChangeViewType = useCallback(
+    (value: string) => {
+      setViewType(value as ViewTypes);
+      // If its the URL field type we know what the imageType should be
+      if (value === ViewTypes.URL) {
+        console.log(`handleChangeViewType: ${value} NodeName.Image`);
+        setValue('imageType', NodeName.Image);
+      } else {
+        // Need a value here and this is the assumed default elsewhere
+        // Will be set again later once Resource Browser returns a resource value
+        console.log(`handleChangeViewType: ${value} NodeName.AssetImage`);
+        setValue('imageType', NodeName.AssetImage);
+      }
+    },
+    [setViewType, setValue],
+  );
+
   return (
     <form className="squiz-fte-form" onSubmit={handleSubmit(onSubmit)}>
       <div className="squiz-fte-form-group mb-4">
         <Tabs
-          value={imageType}
+          value={imageType === NodeName.Image ? ViewTypes.URL : ViewTypes.Resource}
           options={imageTypeOptions}
-          onChange={(value) => setValue('imageType', value as NodeName)}
+          onChange={handleChangeViewType}
         />
       </div>
-      {imageType === NodeName.Image && (
+      {viewType === ViewTypes.URL && (
         <>
           <div className="squiz-fte-form-group mb-2">
             <Input
@@ -174,20 +205,36 @@ const ImageForm = ({ data, onSubmit }: FormProps): ReactElement => {
           </div>
         </>
       )}
-      {imageType === NodeName.AssetImage && (
+      {viewType === ViewTypes.Resource && (
         <div className="squiz-fte-form-group mb-2">
           <Controller
             control={control}
-            name="assetImage"
+            name="resourceImage"
             rules={{
-              validate: hasProperties('An image must be selected', ['matrixIdentifier', 'matrixAssetId']),
+              validate: (value) => {
+                const matrixValidation = hasProperties('An image must be selected', [
+                  'matrixIdentifier',
+                  'matrixAssetId',
+                ])(value);
+                const damValidation = hasProperties('An image must be selected', [
+                  'damObjectId',
+                  'damSystemIdentifier',
+                ])(value);
+
+                // One of the two needs to validate
+                return matrixValidation && damValidation;
+              },
             }}
             render={({ field: { onChange, value }, fieldState: { error } }) => (
-              <MatrixAsset
+              <ResourceBrowserSelector
                 modalTitle="Insert image"
                 allowedTypes={['image']}
                 value={value}
-                onChange={onChange}
+                onChange={(value: { target: { value: any } }) => {
+                  console.log(`onChange: ${value}`);
+                  setValue('imageType', value.target.value.nodeType);
+                  onChange(value);
+                }}
                 error={error?.message}
               />
             )}

package/src/EditorToolbar/Tools/Image/ImageButton.spec.tsx

@@ -1,11 +1,18 @@
 import '@testing-library/jest-dom';
 import { screen, fireEvent, waitForElementToBeRemoved, act, waitFor } from '@testing-library/react';
+import { ResourceBrowserResource } from '@squiz/resource-browser';
 import { NodeSelection } from 'prosemirror-state';
 import React from 'react';
-import { renderWithEditor, mockResourceBrowserContext } from '../../../../tests';
+import { renderWithEditor, mockResourceBrowserContext, mockResourceBrowser } from '../../../../tests';
 import ImageButton from './ImageButton';
 import { getImageSize } from 'react-image-size';
 
+const { setSelectedResource, setShouldUseMockResourceBrowser, mockResourceBrowserImpl } = mockResourceBrowser();
+jest.mock('@squiz/resource-browser', () => ({
+  ...jest.requireActual('@squiz/resource-browser'),
+  ResourceBrowser: (props: any) => mockResourceBrowserImpl(props),
+}));
+
 jest.mock('react-image-size');
 
 describe('ImageButton', () => {
@@ -295,7 +302,7 @@ describe('ImageButton', () => {
     });
   });
 
-  it('Updates the attributes of an existing asset image', async () => {
+  it('assetImage: Updates the attributes of an existing asset image', async () => {
     const matrixIdentifier = 'matrix-api-identifier';
     const matrixDomain = 'https://my-matrix.squiz.net';
     const { MockResourceBrowserContext, selectResource } = mockResourceBrowserContext({
@@ -362,6 +369,67 @@ describe('ImageButton', () => {
     });
   });
 
+  it('DAMImage: Updates the attributes of an existing dam image', async () => {
+    setShouldUseMockResourceBrowser(true);
+    setSelectedResource({
+      id: 'my-resource-id',
+      name: 'My resource',
+      url: 'myResourceUrl',
+      source: {
+        id: 'my-source-id',
+        type: 'dam',
+        configuration: {
+          externalType: 'bynder',
+        },
+      },
+    } as unknown as ResourceBrowserResource);
+
+    const { editor, getJsonContent } = await renderWithEditor(<ImageButton />, {
+      content: 'Some <img src="https://httpcats.com/529.jpg" alt="hi" /> nonsense',
+      context: {
+        editor: {
+          matrix: {
+            matrixDomain: 'https://my-matrix.squiz.net',
+          },
+        },
+      },
+    });
+
+    await act(() => editor.selectText(new NodeSelection(editor.state.doc.resolve(6))));
+
+    await openModal();
+    fireEvent.click(screen.getByRole('button', { name: 'From source' }));
+    // Trigger the mock Resource Browser to invoke its onChange callback to fill the form with data
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: 'Select ResourceBrowser Resource' })).toBeInTheDocument();
+    });
+    fireEvent.click(await screen.findByRole('button', { name: 'Select ResourceBrowser Resource' }));
+    // Close the image selection modal
+    await act(() => fireEvent.click(screen.getByRole('button', { name: 'Apply' })));
+
+    expect(getJsonContent()).toEqual({
+      type: 'paragraph',
+      attrs: expect.any(Object),
+      content: [
+        {
+          text: 'Some ',
+          type: 'text',
+        },
+        {
+          type: 'DAMImage',
+          attrs: {
+            damObjectId: 'my-resource-id',
+            damSystemIdentifier: 'my-source-id',
+            damAdditional: undefined,
+            damSystemType: 'bynder',
+            src: 'myResourceUrl',
+          },
+        },
+        { type: 'text', text: ' nonsense' },
+      ],
+    });
+  });
+
   it('Shows an error if a resource is not selected', async () => {
     await renderWithEditor(<ImageButton />);
     await openModal();

package/src/EditorToolbar/Tools/Image/ImageButton.tsx

@@ -6,7 +6,8 @@ import { ImageFormData } from './Form/ImageForm';
 import Button from '../../../ui/Button/Button';
 import { ImageExtension } from '../../../Extensions/ImageExtension/ImageExtension';
 import { NodeName } from '../../../Extensions/Extensions';
-import { AssetImageExtension } from '../../../Extensions/ImageExtension/AssetImageExtension';
+import { AssetImageExtension, AssetImageAttributes } from '../../../Extensions/ImageExtension/AssetImageExtension';
+import { DAMImageExtension, DAMImageAttributes } from '../../../Extensions/ImageExtension/DAMImageExtension';
 import { CodeBlockExtension } from 'remirror/dist-types/extensions';
 import { getShortcutSymbol } from '../../../utils/getShortcutSymbol';
 
@@ -16,11 +17,14 @@ type ImageButtonProps = {
 
 const ImageButton = ({ inPopover = false }: ImageButtonProps) => {
   const [showModal, setShowModal] = useState(false);
-  const { insertImage, insertAssetImage } = useCommands<ImageExtension | AssetImageExtension>();
+  const { insertImage, insertAssetImage, insertDAMImage } = useCommands<
+    ImageExtension | AssetImageExtension | DAMImageExtension
+  >();
   const active = useActive<ImageExtension | AssetImageExtension | CodeBlockExtension>();
   const selection = useCurrentSelection();
   // if the active selection is not an image, disable the button as it means it will be text
-  const disabled = (!selection.empty && !active.image() && !active.assetImage()) || active.codeBlock();
+  const disabled =
+    (!selection.empty && !active.image() && !active.assetImage() && !active.DAMImage()) || active.codeBlock();
 
   const handleClick = () => {
     if (!showModal) {
@@ -29,11 +33,13 @@ const ImageButton = ({ inPopover = false }: ImageButtonProps) => {
   };
 
   const insertImageFromData = (data: ImageFormData) => {
-    const { imageType, image, assetImage } = data;
+    const { imageType, image, resourceImage } = data;
     if (imageType === NodeName.Image) {
       insertImage(image);
+    } else if (imageType === NodeName.DAMImage) {
+      insertDAMImage(resourceImage as DAMImageAttributes);
     } else {
-      insertAssetImage(assetImage);
+      insertAssetImage(resourceImage as AssetImageAttributes);
     }
   };
 
@@ -59,7 +65,7 @@ const ImageButton = ({ inPopover = false }: ImageButtonProps) => {
     <>
       <Button
         handleOnClick={handleClick}
-        isActive={active.image() || active.assetImage()}
+        isActive={active.image() || active.assetImage() || active.DAMImage()}
         icon={<ImageRoundedIcon />}
         label={`Image (${getShortcutSymbol()}+L)`}
         isDisabled={disabled}

package/src/EditorToolbar/Tools/Image/ImageModal.tsx

@@ -19,7 +19,10 @@ const ImageModal = ({ onCancel, onSubmit }: ImageModalProps) => {
   const formData = {
     imageType: currentImage?.type.name === NodeName.Image ? NodeName.Image : NodeName.AssetImage,
     image: currentImage?.type?.name === NodeName.Image ? currentImageAttrs : {},
-    assetImage: currentImage?.type?.name === NodeName.AssetImage ? currentImageAttrs : {},
+    resourceImage:
+      currentImage?.type?.name === NodeName.DAMImage || currentImage?.type?.name === NodeName.AssetImage
+        ? currentImageAttrs
+        : {},
   };
 
   return (

package/src/Extensions/Extensions.ts

@@ -23,6 +23,7 @@ import { ImageExtension } from './ImageExtension/ImageExtension';
 import { CommandsExtension } from './CommandsExtension/CommandsExtension';
 import { EditorContextOptions } from '../Editor/EditorContext';
 import { AssetImageExtension } from './ImageExtension/AssetImageExtension';
+import { DAMImageExtension } from './ImageExtension/DAMImageExtension';
 import { ExtendedCodeBlockExtension } from './CodeBlockExtension/CodeBlockExtension';
 import { ClearFormattingExtension } from './ClearFormattingExtension/ClearFormattingExtension';
 import { UnsupportedNodeExtension } from './UnsuportedExtension/UnsupportedNodeExtension';
@@ -34,6 +35,7 @@ export enum NodeName {
   Image = 'image',
   CodeBlock = 'codeBlock',
   AssetImage = 'assetImage',
+  DAMImage = 'DAMImage',
   Text = 'text',
   TableControllerCell = 'tableControllerCell',
   tableCell = 'tableCell',
@@ -66,6 +68,7 @@ export const createExtensions = (context: EditorContextOptions) => {
       new AssetImageExtension({
         matrixDomain: context.matrix.matrixDomain,
       }),
+      new DAMImageExtension(),
       new LinkExtension(),
       new AssetLinkExtension({
         matrixDomain: context.matrix.matrixDomain,

package/src/Extensions/FetchUrlExtension/FetchUrlExtension.ts

@@ -33,6 +33,15 @@ export class FetchUrlExtension extends PlainExtension<FetchUrlOptions> {
         );
       }
 
+      if (node.type.name === NodeName.DAMImage && node.attrs.src === '') {
+        promises.push(
+          this.fetchAndReplace(node.attrs, (url: string) => {
+            const newNode = state.schema.nodes[NodeName.DAMImage].create({ ...node.attrs, src: url });
+            tr.replaceWith(pos, pos + node.nodeSize, newNode);
+          }),
+        );
+      }
+
       const assetLinkMark = this.findAssetLinkMark(node.marks as Mark[]);
       if (node.type.name === 'text' && assetLinkMark) {
         promises.push(

package/src/Extensions/ImageExtension/DAMImageExtension.spec.ts

@@ -0,0 +1,87 @@
+import { renderWithEditor } from '../../../tests';
+
+describe('DAMImageExtension', () => {
+  it('Parses HTML content representing an asset image', async () => {
+    const { getJsonContent } = await renderWithEditor(null, {
+      content: `<img
+                  src="https://my-matrix.squiz.net/?a=this-is-actually-ignored"
+                  data-dam-object-id="5ce8e8dc-1adc-4254-87a8-d1f5a5c9045a"
+                  data-dam-system-identifier="byder001"
+                  data-dam-system-type="bynder" 
+                  data-dam-additional='{"variant":"xyz"}'
+                  />`,
+    });
+
+    expect(getJsonContent()).toEqual({
+      type: 'paragraph',
+      attrs: expect.any(Object),
+      content: [
+        {
+          type: 'DAMImage',
+          attrs: {
+            damObjectId: '5ce8e8dc-1adc-4254-87a8-d1f5a5c9045a',
+            damSystemIdentifier: 'byder001',
+            damSystemType: 'bynder',
+            damAdditional: {
+              variant: 'xyz',
+            },
+            src: 'https://default-resource/',
+          },
+        },
+      ],
+    });
+  });
+
+  it('Resolves to a regular image if HTML content is missing some of the expected attributes', async () => {
+    const { getJsonContent } = await renderWithEditor(null, {
+      content:
+        '<img src="https://my-matrix.squiz.net/?a=123" data-dam-object-id="5ce8e8dc-1adc-4254-87a8-d1f5a5c9045a" />',
+    });
+
+    expect(getJsonContent()).toEqual({
+      type: 'paragraph',
+      attrs: expect.any(Object),
+      content: [
+        {
+          type: 'image',
+          attrs: expect.objectContaining({
+            src: 'https://my-matrix.squiz.net/?a=123',
+          }),
+        },
+      ],
+    });
+  });
+
+  it('Outputs expected HTML', async () => {
+    const { getHtmlContent } = await renderWithEditor(null, {
+      content: {
+        type: 'paragraph',
+        content: [
+          {
+            type: 'DAMImage',
+            attrs: {
+              damObjectId: '5ce8e8dc-1adc-4254-87a8-d1f5a5c9045a',
+              damSystemIdentifier: 'byder001',
+              damSystemType: 'bynder',
+              damAdditional: {
+                variant: 'xyz',
+              },
+            },
+          },
+        ],
+      },
+    });
+
+    expect(getHtmlContent()).toEqual(
+      '<img ' +
+        'src="https://default-resource/" ' +
+        'data-dam-object-id="5ce8e8dc-1adc-4254-87a8-d1f5a5c9045a" ' +
+        'data-dam-system-identifier="byder001" ' +
+        'data-dam-system-type="bynder" ' +
+        'data-dam-additional="{&quot;variant&quot;:&quot;xyz&quot;}" ' +
+        'draggable="true">' +
+        '<img class="ProseMirror-separator" alt="">' +
+        '<br class="ProseMirror-trailingBreak">',
+    );
+  });
+});