@squiz/formatted-text-editor 2.6.4 → 2.6.6

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) => {
@@ -212,6 +216,16 @@ const transformMark = (mark, node) => {
                 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/lib/utils/converters/squizNodeToRemirrorNode/squizNodeToRemirrorNode.js

@@ -8,6 +8,7 @@ const getNodeType = (node) => {
         'link-to-matrix-asset': Extensions_1.NodeName.Text,
         'matrix-image': Extensions_1.NodeName.AssetImage,
         'dam-image': Extensions_1.NodeName.DAMImage,
+        'link-to-dam-asset': Extensions_1.NodeName.Text,
         text: 'text',
     };
     const tagMap = {
@@ -125,6 +126,18 @@ const getNodeMarks = (node) => {
             },
         });
     }
+    else if (node.type === 'link-to-dam-asset') {
+        marks.push({
+            type: Extensions_1.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' });
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squiz/formatted-text-editor",
-  "version": "2.6.4",
+  "version": "2.6.6",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "private": false,
@@ -25,7 +25,7 @@
     "@mui/icons-material": "5.15.18",
     "@remirror/extension-react-tables": "^2.2.21",
     "@remirror/react": "2.0.35",
-    "@squiz/dx-json-schema-lib": "^1.80.1",
+    "@squiz/dx-json-schema-lib": "^1.81.4",
     "@squiz/dxp-content-tools-modal": "^0.4.0",
     "clsx": "2.1.1",
     "react-hook-form": "7.51.4",
@@ -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/EditorToolbar/Tools/Link/Form/LinkForm.tsx

@@ -5,19 +5,20 @@ import { FromToProps } from 'remirror';
 import { Input } from '../../../../ui/Fields/Input/Input';
 import { Checkbox } from '../../../../ui/Fields/Checkbox/Checkbox';
 import { UpdateLinkProps } from '../../../../Extensions/LinkExtension/LinkExtension';
-import { UpdateAssetLinkProps } from '../../../../Extensions/LinkExtension/AssetLinkExtension';
 import { LinkTarget } from '../../../../Extensions/LinkExtension/common';
 import { MarkName } from '../../../../Extensions/Extensions';
 import { DeepPartial } from '../../../../types';
-import { hasProperties, noEmptySpacesValidation } from '../../../../utils/validation';
+import { noEmptySpacesValidation } from '../../../../utils/validation';
 import { TabOptions, Tabs } from '../../../../ui/Tabs/Tabs';
 import { MatrixAsset } from '../../../../ui/Fields/MatrixAsset/MatrixAsset';
+import { UpdateAssetLinkProps } from '../../../../Extensions/LinkExtension/AssetLinkExtension';
+import { UpdateDAMLinkProps } from '../../../../Extensions/LinkExtension/DamLinkExtension';
 
 export type LinkFormData = {
   linkType: MarkName;
   text: string;
   link: UpdateLinkProps['attrs'];
-  assetLink: UpdateAssetLinkProps['attrs'];
+  assetLink: Partial<UpdateDAMLinkProps['attrs'] & UpdateAssetLinkProps['attrs']>;
   range: FromToProps;
 };
 
@@ -48,7 +49,7 @@ export const LinkForm = ({ data, onSubmit }: FormProps): ReactElement => {
     <form className="squiz-fte-form" onSubmit={handleSubmit(onSubmit)}>
       <div className="squiz-fte-form-group mb-4">
         <Tabs
-          value={linkType}
+          value={linkType === MarkName.DAMLink ? MarkName.AssetLink : linkType}
           options={linkTypeOptions}
           onChange={(value) => setValue('linkType', value as MarkName)}
         />
@@ -98,17 +99,35 @@ export const LinkForm = ({ data, onSubmit }: FormProps): ReactElement => {
         </>
       )}
       {/* Asset link form fields */}
-      {linkType === MarkName.AssetLink && (
+      {(linkType === MarkName.AssetLink || linkType === MarkName.DAMLink) && (
         <>
           <div className={clsx('squiz-fte-form-group mb-2')}>
             <Controller
               control={control}
               name="assetLink"
               rules={{
-                validate: hasProperties('An asset must be selected', ['matrixIdentifier', 'matrixAssetId']),
+                validate: (value) => {
+                  if (value?.damObjectId || value?.damSystemIdentifier) {
+                    return value.damObjectId && value.damSystemIdentifier ? true : 'A DAM asset must be selected';
+                  }
+                  return value?.matrixAssetId && value?.matrixIdentifier ? true : 'An asset must be selected';
+                },
               }}
               render={({ field: { onChange, value }, fieldState: { error } }) => (
-                <MatrixAsset modalTitle="Insert link" value={value} onChange={onChange} error={error?.message} />
+                <MatrixAsset
+                  modalTitle="Insert link"
+                  value={value}
+                  onChange={(newValue) => {
+                    onChange(newValue);
+                    const updated = newValue.target.value;
+                    if (updated.damSystemIdentifier && updated.damObjectId) {
+                      setValue('linkType', MarkName.DAMLink);
+                    } else {
+                      setValue('linkType', MarkName.AssetLink);
+                    }
+                  }}
+                  error={error?.message}
+                />
               )}
             />
           </div>

package/src/EditorToolbar/Tools/Link/LinkButton.spec.tsx

@@ -1,8 +1,15 @@
 import '@testing-library/jest-dom';
 import { act, screen, fireEvent, waitForElementToBeRemoved, waitFor } from '@testing-library/react';
 import React from 'react';
-import { renderWithEditor, mockResourceBrowserContext } from '../../../../tests';
+import { renderWithEditor, mockResourceBrowserContext, mockResourceBrowser } from '../../../../tests';
 import LinkButton from './LinkButton';
+import { ResourceBrowserResource } from '@squiz/resource-browser';
+
+const { setSelectedResource, setShouldUseMockResourceBrowser, mockResourceBrowserImpl } = mockResourceBrowser();
+jest.mock('@squiz/resource-browser', () => ({
+  ...jest.requireActual('@squiz/resource-browser'),
+  ResourceBrowser: (props: any) => mockResourceBrowserImpl(props),
+}));
 
 describe('LinkButton', () => {
   const openModal = async () => {
@@ -399,4 +406,70 @@ describe('LinkButton', () => {
 
     expect(screen.getAllByText('Empty space is not allowed')).toHaveLength(2);
   });
+
+  it('Updates an existing link to be a DAM link', 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(<LinkButton />, {
+      content: '<a href="https://www.example.org/my-link">Sample link</a> with text',
+      context: {
+        editor: {
+          matrix: {
+            matrixDomain: 'https://my-matrix.squiz.net',
+          },
+        },
+      },
+    });
+
+    await act(() => editor.selectText(5));
+
+    await openModal();
+    fireEvent.click(screen.getByRole('button', { name: 'From source' }));
+    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: [
+        {
+          type: 'text',
+          marks: [
+            {
+              type: 'DAMLink',
+              attrs: {
+                damObjectId: 'my-resource-id',
+                damSystemIdentifier: 'my-source-id',
+                damSystemType: 'bynder',
+                href: 'myResourceUrl',
+                target: '_self',
+                damAdditional: undefined,
+              },
+            },
+          ],
+          text: 'Sample link',
+        },
+        {
+          type: 'text',
+          text: ' with text',
+        },
+      ],
+    });
+  });
 });

package/src/EditorToolbar/Tools/Link/LinkButton.tsx

@@ -5,8 +5,9 @@ import { LinkFormData } from './Form/LinkForm';
 import Button from '../../../ui/Button/Button';
 import { useActive, useCommands, useKeymap } from '@remirror/react';
 import { LinkExtension } from '../../../Extensions/LinkExtension/LinkExtension';
-import { CommandsExtension } from '../../../Extensions/CommandsExtension/CommandsExtension';
 import { AssetLinkExtension } from '../../../Extensions/LinkExtension/AssetLinkExtension';
+import { DAMLinkExtension } from '../../../Extensions/LinkExtension/DamLinkExtension';
+import { CommandsExtension } from '../../../Extensions/CommandsExtension/CommandsExtension';
 import { MarkName } from '../../../Extensions/Extensions';
 import { ImageExtension } from '../../../Extensions/ImageExtension/ImageExtension';
 import { CodeBlockExtension } from 'remirror/dist-types/extensions';
@@ -18,8 +19,13 @@ export type LinkButtonProps = {
 
 const LinkButton = ({ inPopover = false }: LinkButtonProps) => {
   const [showModal, setShowModal] = useState(false);
-  const { updateLink, updateAssetLink } = useCommands<AssetLinkExtension | LinkExtension | CommandsExtension>();
-  const active = useActive<LinkExtension | AssetLinkExtension | ImageExtension | CodeBlockExtension>();
+  const { updateLink, updateAssetLink, updateDAMLink } = useCommands<
+    AssetLinkExtension | LinkExtension | CommandsExtension | DAMLinkExtension
+  >();
+  const active = useActive<
+    LinkExtension | AssetLinkExtension | ImageExtension | CodeBlockExtension | DAMLinkExtension
+  >();
+
   // If the image tool is active, disable the link tool as they shouldn't work at the same time
   const disabled = active.image() || active.codeBlock();
   const handleClick = () => {
@@ -34,10 +40,15 @@ const LinkButton = ({ inPopover = false }: LinkButtonProps) => {
   }, []);
 
   const handleSubmit = (data: LinkFormData) => {
-    if (data.linkType === MarkName.AssetLink) {
-      updateAssetLink({ text: data.text, attrs: data.assetLink, range: data.range });
-    } else {
-      updateLink({ text: data.text, attrs: data.link, range: data.range });
+    switch (data.linkType) {
+      case MarkName.AssetLink:
+        updateAssetLink({ text: data.text, attrs: data.assetLink, range: data.range });
+        break;
+      case MarkName.DAMLink:
+        updateDAMLink({ text: data.text, attrs: data.assetLink, range: data.range });
+        break;
+      default:
+        updateLink({ text: data.text, attrs: data.link, range: data.range });
     }
 
     setShowModal(false);
@@ -54,7 +65,7 @@ const LinkButton = ({ inPopover = false }: LinkButtonProps) => {
     <>
       <Button
         handleOnClick={handleClick}
-        isActive={active.link() || active.assetLink()}
+        isActive={active.link() || active.assetLink() || active.DAMLink()}
         icon={<InsertLinkRoundedIcon />}
         label={`Link (${getShortcutSymbol()}+K)`}
         isDisabled={disabled}

package/src/EditorToolbar/Tools/Link/LinkModal.tsx

@@ -17,13 +17,18 @@ const LinkModal = ({ onCancel, onSubmit }: LinkModalProps) => {
     helpers,
     view: { state },
   } = useRemirrorContext();
-  const { selection, marks } = useExpandedSelection([MarkName.Link, MarkName.AssetLink]);
+  const { selection, marks } = useExpandedSelection([MarkName.Link, MarkName.AssetLink, MarkName.DAMLink]);
   const selectedText = helpers.getTextBetween(selection.from, selection.to, state.doc);
-  const data = {
-    linkType: marks[0]?.type?.name === MarkName.Link ? MarkName.Link : MarkName.AssetLink,
+
+  const data: LinkFormData = {
+    assetLink: { ...marks.find((m) => m.type.name === MarkName.DAMLink || m.type.name === MarkName.AssetLink)?.attrs },
+    link: { ...marks.find((m) => m.type.name === 'link')?.attrs },
     text: selectedText,
-    link: { ...marks.find((mark) => mark.type.name === 'link')?.attrs },
-    assetLink: { ...marks.find((mark) => mark.type.name === MarkName.AssetLink)?.attrs },
+    linkType: marks.find((m) => m.type.name === MarkName.DAMLink)
+      ? MarkName.DAMLink
+      : marks[0]?.type.name === MarkName.Link
+      ? MarkName.Link
+      : MarkName.AssetLink,
     range: { from: selection.from, to: selection.to },
   };
 

package/src/EditorToolbar/Tools/Link/RemoveLinkButton.tsx

@@ -4,16 +4,17 @@ import Button from '../../../ui/Button/Button';
 import LinkOffIcon from '@mui/icons-material/LinkOff';
 import { AssetLinkExtension } from '../../../Extensions/LinkExtension/AssetLinkExtension';
 import { LinkExtension } from '../../../Extensions/LinkExtension/LinkExtension';
+import { DAMLinkExtension } from '../../../Extensions/LinkExtension/DamLinkExtension';
 import { LinkButtonProps } from './LinkButton';
 import { getShortcutSymbol } from '../../../utils/getShortcutSymbol';
 
 const RemoveLinkButton = ({ inPopover = false }: LinkButtonProps) => {
   const chain = useChainedCommands();
-  const active = useActive<LinkExtension | AssetLinkExtension>();
-  const disabled = !active.link() && !active.assetLink();
+  const active = useActive<LinkExtension | AssetLinkExtension | DAMLinkExtension>();
+  const disabled = !active.link() && !active.assetLink() && !active.DAMLink();
 
   const handleClick = () => {
-    chain.removeLink().removeAssetLink().focus().run();
+    chain.removeLink().removeAssetLink().removeDAMLink().focus().run();
   };
   const handleShortcut = useCallback(() => {
     handleClick();

package/src/Extensions/Extensions.ts

@@ -30,6 +30,7 @@ import { UnsupportedNodeExtension } from './UnsuportedExtension/UnsupportedNodeE
 import { FetchUrlExtension } from './FetchUrlExtension/FetchUrlExtension';
 import { TableExtension } from '@remirror/extension-react-tables';
 import { ReactComponentExtension } from '@remirror/extension-react-component';
+import { DAMLinkExtension } from './LinkExtension/DamLinkExtension';
 
 export enum NodeName {
   Image = 'image',
@@ -46,6 +47,7 @@ export enum NodeName {
 export enum MarkName {
   Link = 'link',
   AssetLink = 'assetLink',
+  DAMLink = 'DAMLink',
 }
 
 export const createExtensions = (context: EditorContextOptions, enableDecorations: boolean = true) => {
@@ -69,6 +71,7 @@ export const createExtensions = (context: EditorContextOptions, enableDecoration
         matrixDomain: context.matrix.matrixDomain,
       }),
       new DAMImageExtension(),
+      new DAMLinkExtension(),
       new LinkExtension(),
       new AssetLinkExtension({
         matrixDomain: context.matrix.matrixDomain,

package/src/Extensions/FetchUrlExtension/FetchUrlExtension.ts

@@ -51,6 +51,16 @@ export class FetchUrlExtension extends PlainExtension<FetchUrlOptions> {
           }),
         );
       }
+
+      const damLinkMark = this.findDAMLinkMark(node.marks as Mark[]);
+      if (node.type.name === 'text' && damLinkMark) {
+        promises.push(
+          this.fetchAndReplace(damLinkMark.attrs, (url: string) => {
+            const updatedMark = damLinkMark.type.create({ ...damLinkMark.attrs, href: url });
+            tr.addMark(pos, pos + node.nodeSize, updatedMark);
+          }),
+        );
+      }
     });
 
     if (promises.length) {
@@ -64,6 +74,10 @@ export class FetchUrlExtension extends PlainExtension<FetchUrlOptions> {
     return marks.find((mark) => mark.type.name === MarkName.AssetLink && mark.attrs.href === '');
   }
 
+  private findDAMLinkMark(marks: Mark[]): Mark | undefined {
+    return marks.find((mark) => mark.type.name === MarkName.DAMLink && mark.attrs.href === '');
+  }
+
   private fetchAndReplace(nodeAttrs: ResolveNodeType, onFetched: (url: string) => void): Promise<void> {
     return this.options
       .fetchUrl(nodeAttrs)

package/src/Extensions/LinkExtension/AssetLinkExtension.ts

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

package/src/Extensions/LinkExtension/DamLinkExtension.spec.ts

@@ -0,0 +1,110 @@
+import { renderWithEditor } from '../../../tests';
+
+describe('DAMLinkExtension', () => {
+  it('Parses HTML content representing a DAM link', async () => {
+    const { getJsonContent } = await renderWithEditor(null, {
+      content: `<a data-dam-object-id="123"
+                  data-dam-system-identifier="sys-id"
+                  data-dam-system-type="type"
+                  data-dam-additional='{"variant":"primary"}'
+                  href="https://example.org/page"
+                  target="_blank">
+                  Link Text
+                </a>`,
+    });
+
+    expect(getJsonContent()).toEqual({
+      type: 'paragraph',
+      attrs: expect.any(Object),
+      content: [
+        {
+          type: 'text',
+          text: 'Link Text',
+          marks: [
+            {
+              type: 'DAMLink',
+              attrs: {
+                damObjectId: '123',
+                damSystemIdentifier: 'sys-id',
+                damSystemType: 'type',
+                damAdditional: { variant: 'primary' },
+                href: 'https://example.org/page',
+                target: '_blank',
+              },
+            },
+          ],
+        },
+      ],
+    });
+  });
+
+  it('Outputs expected HTML', async () => {
+    const { getHtmlContent } = await renderWithEditor(null, {
+      content: {
+        type: 'paragraph',
+        content: [
+          {
+            type: 'text',
+            text: 'Link Text',
+            marks: [
+              {
+                type: 'DAMLink',
+                attrs: {
+                  damObjectId: '123',
+                  damSystemIdentifier: 'sys-id',
+                  damSystemType: 'type',
+                  damAdditional: { variant: 'primary' },
+                  href: 'https://example.org/page',
+                  target: '_blank',
+                },
+              },
+            ],
+          },
+        ],
+      },
+    });
+
+    expect(getHtmlContent()).toEqual(
+      '<a rel="noopener noreferrer nofollow" ' +
+        'href="https://example.org/page" ' +
+        'target="_blank" ' +
+        'data-dam-object-id="123" ' +
+        'data-dam-system-identifier="sys-id" ' +
+        'data-dam-system-type="type" ' +
+        'data-dam-additional="{&quot;variant&quot;:&quot;primary&quot;}">' +
+        'Link Text' +
+        '</a>',
+    );
+  });
+
+  it('Resolves to a regular link if HTML content is missing some of the expected attributes', async () => {
+    const { getJsonContent } = await renderWithEditor(null, {
+      content: `<a href="https://my-bynder-link.com"
+                  target="_self"
+                  data-dam-object-id="123">
+                  Hello!
+                </a>`,
+    });
+
+    expect(getJsonContent()).toEqual({
+      type: 'paragraph',
+      attrs: expect.any(Object),
+      content: [
+        {
+          type: 'text',
+          text: 'Hello!',
+          marks: [
+            {
+              type: 'link',
+              attrs: {
+                href: 'https://my-bynder-link.com',
+                target: '_self',
+                title: null,
+              },
+            },
+          ],
+        },
+      ],
+    });
+  });
+});