@squiz/formatted-text-editor 1.21.1-alpha.35 → 1.21.1-alpha.39

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

@@ -2,14 +2,11 @@ import '@testing-library/jest-dom';
 import { screen, fireEvent, waitForElementToBeRemoved, act } from '@testing-library/react';
 import { NodeSelection } from 'prosemirror-state';
 import React from 'react';
-import { renderWithEditor } from '../../../../tests';
+import { renderWithEditor, select } from '../../../../tests';
 import ImageButton from './ImageButton';
 import { getImageSize } from 'react-image-size';
 
 jest.mock('react-image-size');
-beforeEach(() => {
-  (getImageSize as jest.Mock).mockResolvedValue({ width: 2, height: 2 });
-});
 
 describe('ImageButton', () => {
   const openModal = async () => {
@@ -17,6 +14,10 @@ describe('ImageButton', () => {
     await screen.findByRole('button', { name: 'Apply' });
   };
 
+  beforeEach(() => {
+    (getImageSize as jest.Mock).mockResolvedValue({ width: 2, height: 2 });
+  });
+
   it('Opens the modal when clicking on the image button', async () => {
     await renderWithEditor(<ImageButton />);
 
@@ -98,8 +99,8 @@ describe('ImageButton', () => {
           attrs: {
             alt: 'Updated cats!',
             crop: null,
-            height: null,
-            width: null,
+            height: 2,
+            width: 2,
             rotate: null,
             src: 'https://httpcats.com/303.jpg',
             title: '',
@@ -138,7 +139,8 @@ describe('ImageButton', () => {
     fireEvent.click(screen.getByRole('button', { name: 'Cancel' }));
     expect(modalHeading).not.toBeInTheDocument();
   });
-  it('Adds a new image with Source field', async () => {
+
+  it('Adds a new image with no source field', async () => {
     await renderWithEditor(<ImageButton />, { content: 'Some nonsense content here' });
 
     // open the modal and add an image.
@@ -148,6 +150,30 @@ describe('ImageButton', () => {
     expect(await screen.findByText('Source is required')).toBeInTheDocument();
   });
 
+  it('Adds a new image with data URI in source field', async () => {
+    await renderWithEditor(<ImageButton />);
+
+    const dataUri = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
+
+    // open the modal and add an image.
+    await openModal();
+    fireEvent.change(screen.getByLabelText('Source'), { target: { value: dataUri } });
+    fireEvent.click(screen.getByRole('button', { name: 'Apply' }));
+    expect(await screen.findByText('Must not be a data URI')).toBeInTheDocument();
+  });
+
+  it('Adds a new image with a non-image URL in source field', async () => {
+    (getImageSize as jest.Mock).mockRejectedValue('error: not an image');
+
+    await renderWithEditor(<ImageButton />);
+
+    // open the modal and add an image.
+    await openModal();
+    fireEvent.change(screen.getByLabelText('Source'), { target: { value: 'https://not-an-image.com/not-an-image' } });
+    fireEvent.click(screen.getByRole('button', { name: 'Apply' }));
+    expect(await screen.findByText('Must be a valid image URL')).toBeInTheDocument();
+  });
+
   it('Adds a new image with no alt text', async () => {
     await renderWithEditor(<ImageButton />, { content: 'Some tacos here' });
 
@@ -170,4 +196,99 @@ describe('ImageButton', () => {
     expect(await screen.findByText('Width is required')).toBeInTheDocument();
     expect(await screen.findByText('Height is required')).toBeInTheDocument();
   });
+
+  it('Adds a new asset image', async () => {
+    const matrixIdentifier = 'matrix-api-identifier';
+    const matrixDomain = 'https://my-matrix.squiz.net';
+    const { getJsonContent } = await renderWithEditor(<ImageButton />, {
+      content: 'Some nonsense content here',
+      context: {
+        matrix: {
+          matrixIdentifier,
+          matrixDomain,
+          resolveMatrixAsset: () => Promise.resolve({ id: '100', type: 'image' }),
+        },
+      },
+    });
+
+    // open the modal and add an image.
+    await openModal();
+    select(screen.getByLabelText('Type'), 'Asset image');
+    fireEvent.change(screen.getByLabelText('Asset ID'), { target: { value: '100' } });
+    fireEvent.click(screen.getByRole('button', { name: 'Apply' }));
+
+    await waitForElementToBeRemoved(() => screen.getByRole('button', { name: 'Apply' }));
+
+    expect(getJsonContent()).toEqual({
+      type: 'paragraph',
+      attrs: expect.any(Object),
+      content: [
+        {
+          type: 'assetImage',
+          attrs: { matrixAssetId: '100', matrixIdentifier, matrixDomain },
+        },
+        { type: 'text', text: 'Some nonsense content here' },
+      ],
+    });
+  });
+
+  it('Updates the attributes of an existing asset image', async () => {
+    const matrixIdentifier = 'matrix-api-identifier';
+    const matrixDomain = 'https://my-matrix.squiz.net';
+    const { editor, getJsonContent } = await renderWithEditor(<ImageButton />, {
+      content: 'Some <img src="https://httpcats.com/529.jpg" alt="hi" /> nonsense',
+      context: {
+        matrix: {
+          matrixIdentifier,
+          matrixDomain,
+          resolveMatrixAsset: () => Promise.resolve({ id: '100', type: 'image' }),
+        },
+      },
+    });
+
+    await act(() => editor.selectText(new NodeSelection(editor.state.doc.resolve(6))));
+
+    await openModal();
+    select(screen.getByLabelText('Type'), 'Asset image');
+    fireEvent.change(screen.getByLabelText('Asset ID'), { target: { value: '100' } });
+    fireEvent.click(screen.getByRole('button', { name: 'Apply' }));
+
+    await waitForElementToBeRemoved(() => screen.getByRole('button', { name: 'Apply' }));
+
+    expect(getJsonContent()).toEqual({
+      type: 'paragraph',
+      attrs: expect.any(Object),
+      content: [
+        {
+          text: 'Some ',
+          type: 'text',
+        },
+        {
+          type: 'assetImage',
+          attrs: { matrixAssetId: '100', matrixIdentifier, matrixDomain },
+        },
+        { type: 'text', text: ' nonsense' },
+      ],
+    });
+  });
+
+  it.each([
+    ['Asset ID not provided', '', null, 'Asset ID is required'],
+    ['Asset does not exist', '100', null, 'Asset ID is invalid or not an image'],
+    ['Asset is not an image', '100', { id: 100, type: 'physical_file' }, 'Asset ID is invalid or not an image'],
+  ])(
+    'Shows an error if an invalid asset ID is provided - %s',
+    async (description: string, assetId: string, asset: any, expectedError: string) => {
+      const resolveMatrixAsset = jest.fn(() => Promise.resolve(asset));
+
+      await renderWithEditor(<ImageButton />, { context: { matrix: { resolveMatrixAsset } } });
+
+      await openModal();
+      select(screen.getByLabelText('Type'), 'Asset image');
+      fireEvent.change(screen.getByLabelText('Asset ID'), { target: { value: assetId } });
+      await act(() => fireEvent.click(screen.getByRole('button', { name: 'Apply' })));
+
+      expect(screen.getByText(expectedError)).toBeInTheDocument();
+    },
+  );
 });

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

@@ -1,11 +1,12 @@
-import React, { useState, useCallback, useMemo } from 'react';
+import React, { useCallback, useState } from 'react';
+import { useActive, useCommands, useCurrentSelection, useKeymap } from '@remirror/react';
 import ImageRoundedIcon from '@mui/icons-material/ImageRounded';
 import ImageModal from './ImageModal';
 import { ImageFormData } from './Form/ImageForm';
 import Button from '../../../ui/Button/Button';
-import { useCommands, useKeymap, useActive, usePositioner } from '@remirror/react';
 import { ImageExtension } from '../../../Extensions/ImageExtension/ImageExtension';
-import { createToolbarPositioner, ToolbarPositionerRange } from '../../../utils/createToolbarPositioner';
+import { NodeName } from '../../../Extensions/Extensions';
+import { AssetImageExtension } from '../../../Extensions/ImageExtension/AssetImageExtension';
 
 type ImageButtonProps = {
   inPopover?: boolean;
@@ -13,27 +14,24 @@ type ImageButtonProps = {
 
 const ImageButton = ({ inPopover = false }: ImageButtonProps) => {
   const [showModal, setShowModal] = useState(false);
-  const { insertImage } = useCommands();
-  const active = useActive<ImageExtension>();
-  const positioner = useMemo(() => createToolbarPositioner({ types: ['link'] }), []);
-  const { data } = usePositioner<Partial<ToolbarPositionerRange>>(positioner, []);
+  const { insertImage, insertAssetImage } = useCommands<ImageExtension | AssetImageExtension>();
+  const active = useActive<ImageExtension | AssetImageExtension>();
+  const selection = useCurrentSelection();
   // if the active selection is not an image, disable the button as it means it will be text
-  const disabled = data.isSelectionInView && !active.image() ? true : false;
+  const disabled = !selection.empty && !active.image() && !active.assetImage();
 
   const handleClick = () => {
     if (!showModal) {
-      // form element are uncontrolled, let the event loop run to
-      // update the selected text in state before showing the modal.
-      requestAnimationFrame(() => {
-        setShowModal(true);
-      });
+      setShowModal(true);
     }
   };
 
   const insertImageFromData = (data: ImageFormData) => {
-    const { src, alt, width, height } = data;
-    if (src) {
-      insertImage({ src, alt, width, height });
+    const { imageType, image, assetImage } = data;
+    if (imageType === NodeName.Image) {
+      insertImage(image);
+    } else {
+      insertAssetImage(assetImage);
     }
   };
 
@@ -59,7 +57,7 @@ const ImageButton = ({ inPopover = false }: ImageButtonProps) => {
     <>
       <Button
         handleOnClick={handleClick}
-        isActive={active.image()}
+        isActive={active.image() || active.assetImage()}
         icon={<ImageRoundedIcon />}
         label="Image (cmd+L)"
         isDisabled={disabled}

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

@@ -4,6 +4,7 @@ import { useCurrentSelection } from '@remirror/react';
 import FormModal from '../../../ui/Modal/FormModal';
 import { SubmitHandler } from 'react-hook-form';
 import { NodeSelection } from 'prosemirror-state';
+import { NodeName } from '../../../Extensions/Extensions';
 
 type ImageModalProps = {
   onCancel: () => void;
@@ -13,10 +14,15 @@ type ImageModalProps = {
 const ImageModal = ({ onCancel, onSubmit }: ImageModalProps) => {
   const selection = useCurrentSelection() as NodeSelection;
   const currentImage = selection?.node;
+  const formData = {
+    imageType: currentImage?.type.name === NodeName.AssetImage ? NodeName.AssetImage : NodeName.Image,
+    image: currentImage?.type?.name === NodeName.Image ? currentImage?.attrs : {},
+    assetImage: currentImage?.type?.name === NodeName.AssetImage ? currentImage?.attrs : {},
+  };
 
   return (
     <FormModal title="Image" onCancel={onCancel}>
-      <ImageForm data={{ ...currentImage?.attrs, src: currentImage?.attrs.src }} onSubmit={onSubmit} />
+      <ImageForm data={formData} onSubmit={onSubmit} />
     </FormModal>
   );
 };

package/src/EditorToolbar/Tools/Link/Form/LinkForm.tsx

@@ -91,7 +91,7 @@ export const LinkForm = ({ data, onSubmit }: FormProps): ReactElement => {
               {...register('assetLink.matrixAssetId', {
                 validate: {
                   isValidAsset: async (assetId: string | undefined) => {
-                    if (assetId && !(await context.matrix.isValidMatrixAssetId(assetId))) {
+                    if (assetId && !(await context.matrix.resolveMatrixAsset(assetId))) {
                       return 'Invalid asset ID';
                     }
                   },

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

@@ -261,7 +261,13 @@ describe('LinkButton', () => {
     const matrixIdentifier = 'matrix-api-identifier';
     const matrixDomain = 'https://my-matrix.squiz.net';
     const { getJsonContent } = await renderWithEditor(<LinkButton />, {
-      context: { matrix: { matrixIdentifier, matrixDomain } },
+      context: {
+        matrix: {
+          matrixIdentifier,
+          matrixDomain,
+          resolveMatrixAsset: () => Promise.resolve({ id: '100', type: 'physical_file' }),
+        },
+      },
     });
 
     await openModal();
@@ -297,7 +303,13 @@ describe('LinkButton', () => {
       content:
         '<a href="https://www.example.org/my-link">Sample link</a> with ' +
         '<a href="https://www.example.org/another-link">another link</a>',
-      context: { matrix: { matrixIdentifier, matrixDomain } },
+      context: {
+        matrix: {
+          matrixIdentifier,
+          matrixDomain,
+          resolveMatrixAsset: () => Promise.resolve({ id: '100', type: 'physical_file' }),
+        },
+      },
     });
 
     await act(() => editor.selectText(5));
@@ -340,9 +352,9 @@ describe('LinkButton', () => {
   });
 
   it('Shows an error if an invalid asset ID is provided', async () => {
-    const isValidMatrixAssetId = jest.fn(() => Promise.resolve(false));
+    const resolveMatrixAsset = jest.fn(() => Promise.resolve(null));
 
-    await renderWithEditor(<LinkButton />, { context: { matrix: { isValidMatrixAssetId } } });
+    await renderWithEditor(<LinkButton />, { context: { matrix: { resolveMatrixAsset } } });
 
     await openModal();
     select(screen.getByLabelText('Type'), 'Link to asset');
@@ -350,6 +362,6 @@ describe('LinkButton', () => {
     await act(() => fireEvent.click(screen.getByRole('button', { name: 'Apply' })));
 
     expect(screen.getByText('Invalid asset ID')).toBeInTheDocument();
-    expect(isValidMatrixAssetId).toHaveBeenCalledWith('invalid-asset-id');
+    expect(resolveMatrixAsset).toHaveBeenCalledWith('invalid-asset-id');
   });
 });

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

@@ -7,6 +7,7 @@ import RemoveLinkButton from './RemoveLinkButton';
 describe('RemoveLinkButton', () => {
   it('Removes a link', async () => {
     const { editor, getJsonContent } = await renderWithEditor(<RemoveLinkButton />, {
+      context: { matrix: { matrixDomain: 'my-matrix.squiz.net' } },
       content: {
         type: 'doc',
         content: [

package/src/Extensions/Extensions.ts

@@ -14,6 +14,13 @@ import { LinkExtension } from './LinkExtension/LinkExtension';
 import { ImageExtension } from './ImageExtension/ImageExtension';
 import { CommandsExtension } from './CommandsExtension/CommandsExtension';
 import { EditorContextOptions } from '../Editor/EditorContext';
+import { AssetImageExtension } from './ImageExtension/AssetImageExtension';
+
+export enum NodeName {
+  Image = 'image',
+  AssetImage = 'assetImage',
+  Text = 'text',
+}
 
 export enum MarkName {
   Link = 'link',
@@ -34,6 +41,10 @@ export const createExtensions = (context: EditorContextOptions) => {
       new HistoryExtension(),
       new ImageExtension(),
       new ImageExtension({ preferPastedTextContent: false }),
+      new AssetImageExtension({
+        matrixIdentifier: context.matrix.matrixIdentifier,
+        matrixDomain: context.matrix.matrixDomain,
+      }),
       new LinkExtension(),
       new AssetLinkExtension({
         matrixIdentifier: context.matrix.matrixIdentifier,

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

@@ -0,0 +1,76 @@
+import { renderWithEditor } from '../../../tests';
+
+describe('AssetImageExtension', () => {
+  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-matrix-asset-id="123"
+                  data-matrix-identifier="matrix-api-identifier"
+                  data-matrix-domain="https://matrix-domain.squiz.net" />`,
+    });
+
+    expect(getJsonContent()).toEqual({
+      type: 'paragraph',
+      attrs: expect.any(Object),
+      content: [
+        {
+          type: 'assetImage',
+          attrs: {
+            matrixAssetId: '123',
+            matrixDomain: 'https://matrix-domain.squiz.net',
+            matrixIdentifier: 'matrix-api-identifier',
+          },
+        },
+      ],
+    });
+  });
+
+  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-matrix-asset-id="123" />',
+    });
+
+    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: 'assetImage',
+            attrs: {
+              matrixAssetId: '123',
+              matrixDomain: 'https://matrix-domain.squiz.net',
+              matrixIdentifier: 'matrix-api-identifier',
+            },
+          },
+        ],
+      },
+    });
+
+    expect(getHtmlContent()).toEqual(
+      '<img ' +
+        'src="https://matrix-domain.squiz.net/_nocache?a=123" ' +
+        'data-matrix-asset-id="123" ' +
+        'data-matrix-identifier="matrix-api-identifier" ' +
+        'data-matrix-domain="https://matrix-domain.squiz.net" ' +
+        'draggable="true">' +
+        '<img class="ProseMirror-separator" alt="">' +
+        '<br class="ProseMirror-trailingBreak">',
+    );
+  });
+});

package/src/Extensions/ImageExtension/AssetImageExtension.ts

@@ -0,0 +1,111 @@
+import {
+  ApplySchemaAttributes,
+  command,
+  extension,
+  ExtensionPriority,
+  ExtensionTag,
+  isElementDomNode,
+  NodeExtension,
+  NodeExtensionSpec,
+  NodeSpecOverride,
+  omitExtraAttributes,
+  CommandFunction,
+} from '@remirror/core';
+import { getTextSelection } from 'remirror';
+import { resolveMatrixAssetUrl } from '../../utils/resolveMatrixAssetUrl';
+import { NodeName } from '../Extensions';
+
+export type AssetImageOptions = {
+  matrixIdentifier?: string;
+  matrixDomain?: string;
+};
+
+export type AssetImageAttributes = {
+  matrixAssetId: string;
+  matrixIdentifier: string;
+  matrixDomain: string;
+};
+
+@extension<AssetImageOptions>({
+  defaultOptions: {
+    matrixIdentifier: '',
+    matrixDomain: '',
+  },
+  defaultPriority: ExtensionPriority.High,
+})
+export class AssetImageExtension extends NodeExtension<AssetImageOptions> {
+  get name() {
+    return NodeName.AssetImage 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(),
+        matrixAssetId: {},
+        matrixIdentifier: { default: this.options.matrixIdentifier },
+        matrixDomain: { default: this.options.matrixDomain },
+      },
+      parseDOM: [
+        {
+          tag: 'img[data-matrix-asset-id]',
+          getAttrs: (node) => {
+            if (!isElementDomNode(node)) {
+              return false;
+            }
+
+            const matrixAssetId = node.getAttribute('data-matrix-asset-id');
+            const matrixIdentifier = node.getAttribute('data-matrix-identifier');
+            const matrixDomain = node.getAttribute('data-matrix-domain');
+
+            if (!matrixAssetId || !matrixIdentifier || !matrixDomain) {
+              return false;
+            }
+
+            return {
+              ...extra.parse(node),
+              matrixAssetId,
+              matrixIdentifier,
+              matrixDomain,
+            };
+          },
+        },
+      ],
+      toDOM: (node) => {
+        const { matrixAssetId, matrixIdentifier, matrixDomain, ...rest } = omitExtraAttributes(node.attrs, extra);
+
+        return [
+          'img',
+          {
+            ...extra.dom(node),
+            ...rest,
+            src: resolveMatrixAssetUrl(String(matrixAssetId), String(matrixDomain)),
+            'data-matrix-asset-id': matrixAssetId,
+            'data-matrix-identifier': matrixIdentifier,
+            'data-matrix-domain': matrixDomain,
+          },
+        ];
+      },
+    };
+  }
+
+  @command()
+  insertAssetImage(attrs: AssetImageAttributes): CommandFunction {
+    return ({ tr, dispatch }) => {
+      const { from, to } = getTextSelection(tr.selection, tr.doc);
+      const node = this.type.create(attrs);
+
+      dispatch?.(tr.replaceRangeWith(from, to, node));
+
+      return true;
+    };
+  }
+}

package/src/Extensions/ImageExtension/ImageExtension.ts

@@ -1,112 +1,19 @@
 import { ImageExtension as RemirrorImageExtension } from 'remirror/extensions';
 import { PasteRule } from 'prosemirror-paste-rules';
-import {
-  isElementDomNode,
-  omitExtraAttributes,
-  ApplySchemaAttributes,
-  NodeSpecOverride,
-  NodeExtensionSpec,
-  getTextSelection,
-  PrimitiveSelection,
-} from '@remirror/core';
-import { ImageAttributes } from '@remirror/extension-image/dist-types/image-extension';
-import { CommandFunction } from '@remirror/pm';
-
-/**
- * Get the width and the height of the image.
- */
-function getDimensions(element: HTMLElement) {
-  let { width, height } = element.style;
-  width = width || element.getAttribute('width') || '';
-  height = height || element.getAttribute('height') || '';
-
-  return { width, height };
-}
-
-/**
- * Retrieve attributes from the dom for the image extension.
- */
-function getImageAttributes({ element, parse }: { element: HTMLElement; parse: ApplySchemaAttributes['parse'] }) {
-  const { width, height } = getDimensions(element);
-
-  return {
-    ...parse(element),
-    alt: element.getAttribute('alt') ?? '',
-    height: Number.parseInt(height || '0', 10) || null,
-    src: element.getAttribute('src') ?? null,
-    title: element.getAttribute('title') ?? '',
-    width: Number.parseInt(width || '0', 10) || null,
-    fileName: element.getAttribute('data-file-name') ?? null,
-  };
-}
+import { ApplySchemaAttributes, NodeSpecOverride, NodeExtensionSpec } from '@remirror/core';
 
 export class ImageExtension extends RemirrorImageExtension {
   createPasteRules(): PasteRule[] {
-    return [
-      {
-        type: 'file',
-        regexp: /image/i,
-        fileHandler: (): boolean => {
-          return false;
-        },
-      },
-    ];
+    // override super behaviour of handling file uploads.
+    return [];
   }
 
   createNodeSpec(extra: ApplySchemaAttributes, override: NodeSpecOverride): NodeExtensionSpec {
-    const { preferPastedTextContent } = this.options;
+    const spec = super.createNodeSpec(extra, override);
+
     return {
-      inline: true,
-      draggable: true,
+      ...spec,
       selectable: true,
-      ...override,
-      attrs: {
-        ...extra.defaults(),
-        alt: { default: '' },
-        crop: { default: null },
-        height: { default: null },
-        width: { default: null },
-        rotate: { default: null },
-        src: { default: null },
-        title: { default: '' },
-        fileName: { default: null },
-
-        resizable: { default: false },
-      },
-      parseDOM: [
-        {
-          tag: 'img[src]',
-          getAttrs: (element) => {
-            if (isElementDomNode(element)) {
-              const attrs = getImageAttributes({ element, parse: extra.parse });
-
-              if (preferPastedTextContent && attrs.src?.startsWith('file:///')) {
-                return false;
-              }
-
-              return attrs;
-            }
-
-            return {};
-          },
-        },
-        ...(override.parseDOM ?? []),
-      ],
-      toDOM: (node) => {
-        const attrs = omitExtraAttributes(node.attrs, extra);
-        return ['img', { ...extra.dom(node), ...attrs }];
-      },
-    };
-  }
-
-  insertImage(attributes: ImageAttributes, selection?: PrimitiveSelection): CommandFunction {
-    return ({ tr, dispatch }) => {
-      const { from, to } = getTextSelection(selection ?? tr.selection, tr.doc);
-      const node = this.type.create(attributes);
-
-      dispatch?.(tr.replaceRangeWith(from, to, node));
-
-      return true;
     };
   }
 }

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

@@ -92,7 +92,7 @@ describe('AssetLinkExtension', () => {
 
     expect(getHtmlContent()).toEqual(
       '<a rel="noopener noreferrer nofollow" ' +
-        'href="/?a=123" ' +
+        'href="https://matrix-domain.squiz.net/_nocache?a=123" ' +
         'target="_blank" ' +
         'data-matrix-asset-id="123" ' +
         'data-matrix-identifier="matrix-api-identifier" ' +