@squiz/formatted-text-editor 2.6.5 → 2.6.6

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

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(),