@squiz/formatted-text-editor 1.40.1-alpha.7 → 1.41.0

package/src/Editor/Editor.spec.tsx

@@ -1,27 +1,16 @@
+import '@testing-library/jest-dom';
 import React from 'react';
-import { act, fireEvent, render, screen } from '@testing-library/react';
+import { act, fireEvent, render, screen, within } from '@testing-library/react';
+import { ResourceBrowserContext } from '@squiz/resource-browser';
 import Editor from './Editor';
-import '@testing-library/jest-dom';
 import { renderWithEditor } from '../../tests';
 import ImageButton from '../EditorToolbar/Tools/Image/ImageButton';
+import * as useFocus from '../hooks/useFocus';
 
-const isVisible = jest.fn().mockReturnValue(false);
 const handleFocusMock = jest.fn();
 const handleBlurMock = jest.fn();
-jest.mock('../hooks/useFocus', () => ({
-  __esModule: true,
-  default: () => ({
-    isVisible: isVisible(),
-    handleFocus: handleFocusMock,
-    handleBlur: handleBlurMock,
-  }),
-}));
 
 describe('Formatted text editor', () => {
-  afterEach(() => {
-    jest.clearAllMocks();
-  });
-
   it('Renders the text editor', () => {
     render(<Editor />);
     expect(screen.getByRole('textbox')).toBeInTheDocument();
@@ -329,6 +318,13 @@ describe('Formatted text editor', () => {
   });
 
   it('triggers handleFocus when editor is focused', async () => {
+    jest.spyOn(useFocus, 'default').mockReturnValue({
+      isVisible: false,
+      handleFocus: handleFocusMock,
+      handleBlur: handleBlurMock,
+      wrapperRef: { current: null },
+    });
+
     const { getByLabelText } = render(<Editor />);
     const editorInput = getByLabelText('Text editor');
 
@@ -339,6 +335,13 @@ describe('Formatted text editor', () => {
   });
 
   it('triggers handleBlur when editor is blurred', () => {
+    jest.spyOn(useFocus, 'default').mockReturnValue({
+      isVisible: false,
+      handleFocus: handleFocusMock,
+      handleBlur: handleBlurMock,
+      wrapperRef: { current: null },
+    });
+
     const { getByLabelText } = render(<Editor />);
     const editorInput = getByLabelText('Text editor');
 
@@ -349,9 +352,81 @@ describe('Formatted text editor', () => {
   });
 
   it('should apply hide class when focus hook returns false', () => {
-    isVisible.mockReturnValue(true);
+    jest.spyOn(useFocus, 'default').mockReturnValue({
+      isVisible: true,
+      handleFocus: handleFocusMock,
+      handleBlur: handleBlurMock,
+      wrapperRef: { current: null },
+    });
+
     const { container } = render(<Editor />);
 
     expect(container.querySelector('.show-toolbar')).toBeInTheDocument();
   });
+
+  it('Interactivity in modals functions correctly, toolbar remains visible throughout', async () => {
+    const onRequestSources = jest.fn().mockResolvedValue([
+      {
+        id: 'my-matrix-instance',
+        name: 'My Matrix instance',
+        nodes: [],
+      },
+    ]);
+    const onRequestChildren = jest
+      .fn()
+      .mockResolvedValueOnce([
+        {
+          id: '1',
+          name: 'Folder 1',
+          type: { code: 'folder', name: 'Folder' },
+          status: { code: 'live', name: 'Live' },
+          childCount: 1,
+        },
+      ])
+      .mockResolvedValueOnce([
+        {
+          id: '2',
+          name: 'Folder 2',
+          type: { code: 'folder', name: 'Folder' },
+          status: { code: 'live', name: 'Live' },
+          childCount: 1,
+        },
+      ])
+      .mockResolvedValueOnce([
+        {
+          id: '3',
+          name: 'My image',
+          type: { code: 'image', name: 'Image' },
+          status: { code: 'live', name: 'Live' },
+          childCount: 0,
+        },
+      ]);
+    const onRequestResource = jest.fn().mockResolvedValue({
+      id: '3',
+      name: 'My image',
+      type: { code: 'image', name: 'Image' },
+      status: { code: 'live', name: 'Live' },
+      childCount: '1',
+    });
+
+    render(
+      <ResourceBrowserContext.Provider value={{ onRequestSources, onRequestChildren, onRequestResource }}>
+        <Editor />
+      </ResourceBrowserContext.Provider>,
+    );
+
+    await act(() => fireEvent.click(screen.getByRole('button', { name: 'Link (cmd+K)' })));
+    await act(() => fireEvent.click(screen.getByText('Choose asset')));
+    await act(() => fireEvent.click(screen.getByRole('button', { name: 'Drill down to My Matrix instance children' })));
+    await act(() => fireEvent.click(screen.getByRole('button', { name: 'Drill down to Folder 1 children' })));
+    await act(() => fireEvent.click(screen.getByRole('button', { name: 'Drill down to Folder 2 children' })));
+    await act(() => fireEvent.blur(screen.getByRole('button', { name: /My image/ })));
+
+    // Contents of "Folder 2" should be mounted.
+    // Toolbar (Link button) should be mounted.
+    // Toolbar should be shown (.show-toolbar class).
+    expect(screen.getByRole('button', { name: /My image/ })).toBeInTheDocument();
+    expect(within(document.body).getByRole('button', { name: 'Link (cmd+K)', hidden: true })).toBeInTheDocument();
+    expect(document.querySelector('.show-toolbar')).toBeInTheDocument();
+  });
 });

package/src/Editor/Editor.tsx

@@ -7,6 +7,7 @@ import { Toolbar, FloatingToolbar } from '../EditorToolbar';
 import { EditorContext } from './EditorContext';
 import { createExtensions } from '../Extensions/Extensions';
 import useFocus from '../hooks/useFocus';
+import { ResourceBrowserContext } from '@squiz/resource-browser';
 
 type EditorProps = {
   content?: RemirrorContentType;
@@ -34,7 +35,7 @@ const WrappedEditor = () => {
 
 const Editor = ({ content, editable = true, onChange, children, isFocused }: EditorProps) => {
   const { manager, state, setState } = useRemirror({
-    extensions: createExtensions(useContext(EditorContext)),
+    extensions: createExtensions(useContext(EditorContext), useContext(ResourceBrowserContext)),
     content,
     selection: 'start',
     stringHandler: 'html',
@@ -60,7 +61,7 @@ const Editor = ({ content, editable = true, onChange, children, isFocused }: Edi
         ref={wrapperRef}
         onBlur={handleBlur}
         onFocusCapture={handleFocus}
-        className={clsx('remirror-theme formatted-text-editor', !editable && 'formatted-text-editor--is-disabled')}
+        className={clsx('formatted-text-editor', !editable && 'formatted-text-editor--is-disabled')}
       >
         <Remirror
           manager={manager}

package/src/EditorToolbar/Toolbar.tsx

@@ -12,6 +12,7 @@ import LinkButton from './Tools/Link/LinkButton';
 import ImageButton from './Tools/Image/ImageButton';
 import RemoveLinkButton from './Tools/Link/RemoveLinkButton';
 import ClearFormattingButton from './Tools/ClearFormatting/ClearFormattingButton';
+import ListButtons from './Tools/Lists/ListButtons';
 import { useExtensionNames } from '../hooks';
 
 type ToolbarProps = {
@@ -38,6 +39,7 @@ export const Toolbar = ({ isVisible }: ToolbarProps) => {
       {extensionNames.italic && <ItalicButton />}
       {extensionNames.underline && <UnderlineButton />}
       {extensionNames.nodeFormatting && <TextAlignButtons />}
+      {extensionNames.listItem && <ListButtons />}
       {extensionNames.link && (
         <>
           <LinkButton />

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

@@ -280,7 +280,12 @@ describe('ImageButton', () => {
       content: [
         {
           type: 'assetImage',
-          attrs: { matrixAssetId: 'image-resource-id', matrixIdentifier, matrixDomain },
+          attrs: {
+            matrixAssetId: 'image-resource-id',
+            matrixIdentifier,
+            matrixDomain,
+            src: 'https://default-resource/',
+          },
         },
         { type: 'text', text: 'Some nonsense content here' },
       ],
@@ -339,7 +344,12 @@ describe('ImageButton', () => {
         },
         {
           type: 'assetImage',
-          attrs: { matrixAssetId: 'image-resource-id', matrixIdentifier, matrixDomain },
+          attrs: {
+            matrixAssetId: 'image-resource-id',
+            matrixIdentifier,
+            matrixDomain,
+            src: 'https://default-resource/',
+          },
         },
         { type: 'text', text: ' nonsense' },
       ],

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

@@ -36,7 +36,7 @@ const ImageButton = ({ inPopover = false }: ImageButtonProps) => {
     }
   };
 
-  const handleSubmit = (data: ImageFormData) => {
+  const handleSubmit = async (data: ImageFormData) => {
     insertImageFromData(data);
     setShowModal(false);
   };

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

@@ -274,7 +274,13 @@ describe('LinkButton', () => {
           marks: [
             {
               type: 'assetLink',
-              attrs: { matrixAssetId: 'my-resource-id', target: '_self', matrixDomain, matrixIdentifier },
+              attrs: {
+                matrixAssetId: 'my-resource-id',
+                target: '_self',
+                matrixDomain,
+                matrixIdentifier,
+                href: 'https://default-resource/',
+              },
             },
           ],
         },
@@ -328,7 +334,13 @@ describe('LinkButton', () => {
           marks: [
             {
               type: 'assetLink',
-              attrs: { matrixAssetId: 'my-resource-id', target: '_blank', matrixDomain, matrixIdentifier },
+              attrs: {
+                matrixAssetId: 'my-resource-id',
+                target: '_blank',
+                matrixDomain,
+                matrixIdentifier,
+                href: 'https://default-resource/',
+              },
             },
           ],
         },

package/src/EditorToolbar/Tools/Lists/ListButtons.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import OrderedListButton from './OrderedList/OrderedListButton';
+import UnorderedListButton from './UnorderedList/UnorderedListButton';
+import { VerticalDivider } from '@remirror/react-components';
+
+const ListButtons = () => (
+  <>
+    <UnorderedListButton />
+    <OrderedListButton />
+    <VerticalDivider />
+  </>
+);
+
+export default ListButtons;

package/src/EditorToolbar/Tools/Lists/OrderedList/OrderListButton.spec.tsx

@@ -0,0 +1,39 @@
+import '@testing-library/jest-dom';
+import { render, fireEvent } from '@testing-library/react';
+import Editor from '../../../../Editor/Editor';
+import React from 'react';
+
+describe('Ordered list button', () => {
+  it('Renders the ordered list button', () => {
+    const { baseElement, getByRole } = render(<Editor />);
+    expect(baseElement).toBeTruthy();
+    expect(getByRole('button', { name: 'Ordered list' })).toBeTruthy();
+  });
+
+  it('Applies ordered list after selecting ordered list button', () => {
+    const { baseElement, getByRole } = render(<Editor />);
+    expect(baseElement).toBeTruthy();
+
+    const OrderedListButton = getByRole('button', { name: 'Ordered list' });
+    expect(OrderedListButton).toBeTruthy();
+    expect(OrderedListButton.classList.contains('is-active')).toBeFalsy();
+
+    fireEvent.click(OrderedListButton);
+
+    setTimeout(() => {
+      expect(OrderedListButton.classList.contains('is-active')).toBeTruthy();
+    }, 50);
+  });
+
+  it('Should apply order list to editor after clicking button', () => {
+    const { baseElement, getByRole } = render(<Editor />);
+    expect(baseElement).toBeTruthy();
+    expect(baseElement.querySelector('ol')).toBeFalsy();
+
+    const OrderedListButton = getByRole('button', { name: 'Ordered list' });
+    expect(OrderedListButton).toBeTruthy();
+    fireEvent.click(OrderedListButton);
+
+    expect(baseElement.querySelector('ol')).toBeTruthy();
+  });
+});

package/src/EditorToolbar/Tools/Lists/OrderedList/OrderedListButton.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { useCommands, useActive, useChainedCommands } from '@remirror/react';
+import { OrderedListExtension } from '@remirror/extension-list';
+import Button from '../../../../ui/Button/Button';
+import FormatListNumberedIcon from '@mui/icons-material/FormatListNumbered';
+
+const OrderedListButton = () => {
+  const { toggleOrderedList } = useCommands();
+  const chain = useChainedCommands();
+
+  const active = useActive<OrderedListExtension>();
+  const enabled = toggleOrderedList.enabled();
+  const handleSelect = () => {
+    if (toggleOrderedList.enabled()) {
+      chain.toggleOrderedList().focus().run();
+    }
+  };
+
+  return (
+    <Button
+      handleOnClick={handleSelect}
+      isDisabled={!enabled}
+      isActive={active.orderedList()}
+      icon={<FormatListNumberedIcon />}
+      label="Ordered list"
+    />
+  );
+};
+
+export default OrderedListButton;

package/src/EditorToolbar/Tools/Lists/UnorderedList/UnorderedList.spec.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render, screen, fireEvent } from '@testing-library/react';
+import Editor from '../../../../Editor/Editor';
+
+describe('Unordered list button', () => {
+  it('Renders the unordered list button', () => {
+    render(<Editor />);
+    expect(screen.getByRole('button', { name: 'Unordered list' })).toBeInTheDocument();
+  });
+
+  it('Activates the button if clicked', () => {
+    render(<Editor />);
+    expect(screen.getByRole('button', { name: 'Unordered list' }).classList.contains('squiz-fte-btn')).toBeTruthy();
+    const ul = screen.getByRole('button', { name: 'Unordered list' });
+    fireEvent.click(ul);
+    expect(ul.classList.contains('squiz-fte-btn--is-active')).toBeTruthy();
+  });
+});

package/src/EditorToolbar/Tools/Lists/UnorderedList/UnorderedListButton.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { useCommands, useActive, useChainedCommands } from '@remirror/react';
+import { BulletListExtension } from 'remirror/extensions';
+import Button from '../../../../ui/Button/Button';
+import FormatListBulletedRoundedIcon from '@mui/icons-material/FormatListBulletedRounded';
+
+const UnorderedListButton = () => {
+  const { toggleBulletList } = useCommands();
+  const chain = useChainedCommands();
+
+  const active = useActive<BulletListExtension>();
+  const enabled = toggleBulletList.enabled();
+  const handleSelect = () => {
+    if (toggleBulletList.enabled()) {
+      chain.toggleBulletList().focus().run();
+    }
+  };
+
+  return (
+    <Button
+      handleOnClick={handleSelect}
+      isDisabled={!enabled}
+      isActive={active.bulletList()}
+      icon={<FormatListBulletedRoundedIcon />}
+      label="Unordered list"
+    />
+  );
+};
+
+export default UnorderedListButton;

package/src/Extensions/Extensions.ts

@@ -6,6 +6,10 @@ import {
   ParagraphExtension,
   UnderlineExtension,
   HistoryExtension,
+  OrderedListExtension,
+  BulletListExtension,
+  ListItemExtension,
+  PlaceholderExtension,
 } from 'remirror/extensions';
 import { Extension } from '@remirror/core';
 import { PreformattedExtension } from './PreformattedExtension/PreformattedExtension';
@@ -18,7 +22,8 @@ import { AssetImageExtension } from './ImageExtension/AssetImageExtension';
 import { ExtendedCodeBlockExtension } from './CodeBlockExtension/CodeBlockExtension';
 import { ClearFormattingExtension } from './ClearFormattingExtension/ClearFormattingExtension';
 import { UnsupportedNodeExtension } from './UnsuportedExtension/UnsupportedNodeExtension';
-
+import { ResourceBrowserContextProps } from '@squiz/resource-browser';
+import { FetchUrlExtension } from './FetchUrlExtension/FetchUrlExtension';
 export enum NodeName {
   Image = 'image',
   CodeBlock = 'codeBlock',
@@ -32,7 +37,7 @@ export enum MarkName {
   AssetLink = 'assetLink',
 }
 
-export const createExtensions = (context: EditorContextOptions) => {
+export const createExtensions = (context: EditorContextOptions, browserContext: ResourceBrowserContextProps) => {
   return (): Extension[] => {
     return [
       new CommandsExtension(),
@@ -56,6 +61,13 @@ export const createExtensions = (context: EditorContextOptions) => {
       }),
       new UnsupportedNodeExtension(),
       new ClearFormattingExtension(),
+      new BulletListExtension(),
+      new ListItemExtension(),
+      new OrderedListExtension(),
+      new PlaceholderExtension(),
+      new FetchUrlExtension({
+        fetchUrl: browserContext.onRequestResource,
+      }),
     ];
   };
 };

package/src/Extensions/FetchUrlExtension/FetchUrlExtension.ts

@@ -0,0 +1,73 @@
+import { extension, PlainExtension, Mark } from '@remirror/core';
+import { Dispose, EditorView } from '@remirror/core-types';
+import { Resource } from '@squiz/resource-browser';
+import { MarkName, NodeName } from '../Extensions';
+
+export type FetchUrlOptions = {
+  fetchUrl?: (params: { resource: string; source: string }) => Promise<any>;
+};
+
+@extension<FetchUrlOptions>({
+  defaultOptions: {
+    fetchUrl: () => Promise.resolve(),
+  },
+})
+export class FetchUrlExtension extends PlainExtension<FetchUrlOptions> {
+  get name() {
+    return 'fetchUrl';
+  }
+
+  // Implement the `onView` lifecycle method to scan for `[fetch]` and replace attributes
+  onView(view: EditorView): Dispose | void {
+    const { state } = view;
+    const { tr } = state;
+
+    const promises: Promise<void>[] = [];
+
+    state.doc.descendants((node, pos) => {
+      if (node.type.name === NodeName.AssetImage && node.attrs.src === '') {
+        promises.push(
+          this.fetchAndReplace(node.attrs.matrixAssetId, node.attrs.matrixIdentifier, (url: string) => {
+            const newNode = state.schema.nodes[NodeName.AssetImage].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(
+          this.fetchAndReplace(
+            assetLinkMark.attrs.matrixAssetId,
+            assetLinkMark.attrs.matrixIdentifier,
+            (url: string) => {
+              const updatedMark = assetLinkMark.type.create({ ...assetLinkMark.attrs, href: url });
+              tr.addMark(pos, pos + node.nodeSize, updatedMark);
+            },
+          ),
+        );
+      }
+    });
+
+    if (promises.length) {
+      Promise.all(promises).then(() => {
+        view.dispatch(tr);
+      });
+    }
+  }
+
+  private findAssetLinkMark(marks: Mark[]): Mark | undefined {
+    return marks.find((mark) => mark.type.name === MarkName.AssetLink && mark.attrs.href === '');
+  }
+
+  private fetchAndReplace(resource: string, source: string, onFetched: (url: string) => void): Promise<void> {
+    return this.options
+      .fetchUrl({ resource, source })
+      .then((asset: Resource) => {
+        onFetched(asset.url);
+      })
+      .catch((error) => {
+        console.error('Error fetching URL:', error);
+      });
+  }
+}

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

@@ -20,6 +20,7 @@ describe('AssetImageExtension', () => {
             matrixAssetId: '123',
             matrixDomain: 'https://matrix-domain.squiz.net',
             matrixIdentifier: 'matrix-api-identifier',
+            src: 'https://default-resource/',
           },
         },
       ],
@@ -64,7 +65,7 @@ describe('AssetImageExtension', () => {
 
     expect(getHtmlContent()).toEqual(
       '<img ' +
-        'src="https://matrix-domain.squiz.net/_nocache?a=123" ' +
+        'src="https://default-resource/" ' +
         'data-matrix-asset-id="123" ' +
         'data-matrix-identifier="matrix-api-identifier" ' +
         'data-matrix-domain="https://matrix-domain.squiz.net" ' +

package/src/Extensions/ImageExtension/AssetImageExtension.ts

@@ -12,7 +12,6 @@ import {
   CommandFunction,
 } from '@remirror/core';
 import { getTextSelection } from 'remirror';
-import { resolveMatrixAssetUrl } from '../../utils/resolveMatrixAssetUrl';
 import { NodeName } from '../Extensions';
 
 export type AssetImageOptions = {
@@ -23,6 +22,7 @@ export type AssetImageAttributes = {
   matrixAssetId: string;
   matrixIdentifier: string;
   matrixDomain: string;
+  url: string;
 };
 
 @extension<AssetImageOptions>({
@@ -51,6 +51,7 @@ export class AssetImageExtension extends NodeExtension<AssetImageOptions> {
         matrixAssetId: {},
         matrixIdentifier: {},
         matrixDomain: { default: this.options.matrixDomain },
+        src: { default: '' },
       },
       parseDOM: [
         {
@@ -78,14 +79,13 @@ export class AssetImageExtension extends NodeExtension<AssetImageOptions> {
         },
       ],
       toDOM: (node) => {
-        const { matrixAssetId, matrixIdentifier, matrixDomain, ...rest } = omitExtraAttributes(node.attrs, extra);
-
+        const { matrixAssetId, matrixIdentifier, matrixDomain, src, ...rest } = omitExtraAttributes(node.attrs, extra);
         return [
           'img',
           {
             ...extra.dom(node),
             ...rest,
-            src: resolveMatrixAssetUrl(String(matrixAssetId), String(matrixDomain)),
+            src,
             'data-matrix-asset-id': matrixAssetId,
             'data-matrix-identifier': matrixIdentifier,
             'data-matrix-domain': matrixDomain,
@@ -99,7 +99,7 @@ export class AssetImageExtension extends NodeExtension<AssetImageOptions> {
   insertAssetImage(attrs: AssetImageAttributes): CommandFunction {
     return ({ tr, dispatch }) => {
       const { from, to } = getTextSelection(tr.selection, tr.doc);
-      const node = this.type.create(attrs);
+      const node = this.type.create({ ...attrs, src: attrs.url });
 
       dispatch?.(tr.replaceRangeWith(from, to, node));
 

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

@@ -23,6 +23,7 @@ describe('AssetLinkExtension', () => {
             {
               type: 'assetLink',
               attrs: {
+                href: 'https://default-resource/',
                 matrixAssetId: '123',
                 matrixDomain: 'https://matrix-domain.squiz.net',
                 matrixIdentifier: 'matrix-api-identifier',
@@ -78,6 +79,7 @@ describe('AssetLinkExtension', () => {
               {
                 type: 'assetLink',
                 attrs: {
+                  href: 'https://default-resource/',
                   matrixAssetId: '123',
                   matrixDomain: 'https://matrix-domain.squiz.net',
                   matrixIdentifier: 'matrix-api-identifier',
@@ -92,7 +94,7 @@ describe('AssetLinkExtension', () => {
 
     expect(getHtmlContent()).toEqual(
       '<a rel="noopener noreferrer nofollow" ' +
-        'href="https://matrix-domain.squiz.net/_nocache?a=123" ' +
+        'href="https://default-resource/" ' +
         'target="_blank" ' +
         'data-matrix-asset-id="123" ' +
         'data-matrix-identifier="matrix-api-identifier" ' +

package/src/Extensions/LinkExtension/AssetLinkExtension.ts

@@ -10,13 +10,14 @@ import { command, CommandFunction, extension, MarkExtension, omitExtraAttributes
 import { LinkTarget, validateTarget } from './common';
 import { CommandsExtension } from '../CommandsExtension/CommandsExtension';
 import { MarkName } from '../Extensions';
-import { resolveMatrixAssetUrl } from '../../utils/resolveMatrixAssetUrl';
 
 export type AssetLinkAttributes = {
   matrixAssetId: string;
   matrixIdentifier: string;
   matrixDomain: string;
   target: LinkTarget;
+  href: string;
+  url: string;
 };
 
 export type AssetLinkOptions = {
@@ -53,6 +54,7 @@ export class AssetLinkExtension extends MarkExtension<AssetLinkOptions> {
         ...extra.defaults(),
         matrixAssetId: {},
         matrixIdentifier: {},
+        href: { default: '' },
         matrixDomain: { default: this.options.matrixDomain },
         target: { default: this.options.defaultTarget },
       },
@@ -87,7 +89,7 @@ export class AssetLinkExtension extends MarkExtension<AssetLinkOptions> {
         },
       ],
       toDOM: (node) => {
-        const { matrixAssetId, matrixIdentifier, matrixDomain, target, ...rest } = omitExtraAttributes(
+        const { matrixAssetId, matrixIdentifier, matrixDomain, target, href, ...rest } = omitExtraAttributes(
           node.attrs,
           extra,
         );
@@ -96,7 +98,7 @@ export class AssetLinkExtension extends MarkExtension<AssetLinkOptions> {
           ...extra.dom(node),
           ...rest,
           rel,
-          href: resolveMatrixAssetUrl(String(matrixAssetId), String(matrixDomain)),
+          href,
           target: validateTarget(target, this.options.supportedTargets, this.options.defaultTarget),
           'data-matrix-asset-id': matrixAssetId,
           'data-matrix-identifier': matrixIdentifier,
@@ -111,14 +113,13 @@ export class AssetLinkExtension extends MarkExtension<AssetLinkOptions> {
   @command()
   updateAssetLink({ text, attrs, range }: UpdateAssetLinkProps): CommandFunction {
     return this.store.getExtension(CommandsExtension).updateMark({
-      attrs,
+      attrs: { ...attrs, href: attrs.url },
       text,
       range,
       mark: this.type,
       removeMark: !attrs.matrixAssetId,
     });
   }
-
   @command()
   removeAssetLink(): CommandFunction {
     return removeMark({ type: this.type });