@squiz/formatted-text-editor 1.40.1-alpha.27 → 1.40.1-alpha.29

package/lib/Editor/Editor.js

@@ -33,6 +33,7 @@ const EditorToolbar_1 = require("../EditorToolbar");
 const EditorContext_1 = require("./EditorContext");
 const Extensions_1 = require("../Extensions/Extensions");
 const useFocus_1 = __importDefault(require("../hooks/useFocus"));
+const resource_browser_1 = require("@squiz/resource-browser");
 const WrappedEditor = () => {
     const preventImagePaste = (0, react_1.useCallback)((event) => {
         const { clipboardData } = event;
@@ -48,7 +49,7 @@ const WrappedEditor = () => {
 };
 const Editor = ({ content, editable = true, onChange, children, isFocused }) => {
     const { manager, state, setState } = (0, react_2.useRemirror)({
-        extensions: (0, Extensions_1.createExtensions)((0, react_1.useContext)(EditorContext_1.EditorContext)),
+        extensions: (0, Extensions_1.createExtensions)((0, react_1.useContext)(EditorContext_1.EditorContext), (0, react_1.useContext)(resource_browser_1.ResourceBrowserContext)),
         content,
         selection: 'start',
         stringHandler: 'html',

package/lib/EditorToolbar/Tools/Image/ImageButton.js

@@ -53,7 +53,7 @@ const ImageButton = ({ inPopover = false }) => {
             insertAssetImage(assetImage);
         }
     };
-    const handleSubmit = (data) => {
+    const handleSubmit = async (data) => {
         insertImageFromData(data);
         setShowModal(false);
     };

package/lib/Extensions/Extensions.d.ts

@@ -1,5 +1,6 @@
 import { Extension } from '@remirror/core';
 import { EditorContextOptions } from '../Editor/EditorContext';
+import { ResourceBrowserContextProps } from '@squiz/resource-browser';
 export declare enum NodeName {
     Image = "image",
     CodeBlock = "codeBlock",
@@ -11,4 +12,4 @@ export declare enum MarkName {
     Link = "link",
     AssetLink = "assetLink"
 }
-export declare const createExtensions: (context: EditorContextOptions) => () => Extension[];
+export declare const createExtensions: (context: EditorContextOptions, browserContext: ResourceBrowserContextProps) => () => Extension[];

package/lib/Extensions/Extensions.js

@@ -11,6 +11,7 @@ const AssetImageExtension_1 = require("./ImageExtension/AssetImageExtension");
 const CodeBlockExtension_1 = require("./CodeBlockExtension/CodeBlockExtension");
 const ClearFormattingExtension_1 = require("./ClearFormattingExtension/ClearFormattingExtension");
 const UnsupportedNodeExtension_1 = require("./UnsuportedExtension/UnsupportedNodeExtension");
+const FetchUrlExtension_1 = require("./FetchUrlExtension/FetchUrlExtension");
 var NodeName;
 (function (NodeName) {
     NodeName["Image"] = "image";
@@ -24,7 +25,7 @@ var MarkName;
     MarkName["Link"] = "link";
     MarkName["AssetLink"] = "assetLink";
 })(MarkName = exports.MarkName || (exports.MarkName = {}));
-const createExtensions = (context) => {
+const createExtensions = (context, browserContext) => {
     return () => {
         return [
             new CommandsExtension_1.CommandsExtension(),
@@ -51,6 +52,10 @@ const createExtensions = (context) => {
             new extensions_1.BulletListExtension(),
             new extensions_1.ListItemExtension(),
             new extensions_1.OrderedListExtension(),
+            new extensions_1.PlaceholderExtension(),
+            new FetchUrlExtension_1.FetchUrlExtension({
+                fetchUrl: browserContext.onRequestResource,
+            }),
         ];
     };
 };

package/lib/Extensions/FetchUrlExtension/FetchUrlExtension.d.ts

@@ -0,0 +1,14 @@
+import { PlainExtension } from '@remirror/core';
+import { Dispose, EditorView } from '@remirror/core-types';
+export type FetchUrlOptions = {
+    fetchUrl?: (params: {
+        resource: string;
+        source: string;
+    }) => Promise<any>;
+};
+export declare class FetchUrlExtension extends PlainExtension<FetchUrlOptions> {
+    get name(): string;
+    onView(view: EditorView): Dispose | void;
+    private findAssetLinkMark;
+    private fetchAndReplace;
+}

package/lib/Extensions/FetchUrlExtension/FetchUrlExtension.js

@@ -0,0 +1,63 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FetchUrlExtension = void 0;
+const core_1 = require("@remirror/core");
+const Extensions_1 = require("../Extensions");
+let FetchUrlExtension = class FetchUrlExtension extends core_1.PlainExtension {
+    get name() {
+        return 'fetchUrl';
+    }
+    // Implement the `onView` lifecycle method to scan for `[fetch]` and replace attributes
+    onView(view) {
+        const { state } = view;
+        const { tr } = state;
+        const promises = [];
+        state.doc.descendants((node, pos) => {
+            if (node.type.name === Extensions_1.NodeName.AssetImage && node.attrs.src === '') {
+                promises.push(this.fetchAndReplace(node.attrs.matrixAssetId, node.attrs.matrixIdentifier, (url) => {
+                    const newNode = state.schema.nodes[Extensions_1.NodeName.AssetImage].create({ ...node.attrs, src: url });
+                    tr.replaceWith(pos, pos + node.nodeSize, newNode);
+                }));
+            }
+            const assetLinkMark = this.findAssetLinkMark(node.marks);
+            if (node.type.name === 'text' && assetLinkMark) {
+                promises.push(this.fetchAndReplace(assetLinkMark.attrs.matrixAssetId, assetLinkMark.attrs.matrixIdentifier, (url) => {
+                    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);
+            });
+        }
+    }
+    findAssetLinkMark(marks) {
+        return marks.find((mark) => mark.type.name === Extensions_1.MarkName.AssetLink && mark.attrs.href === '');
+    }
+    fetchAndReplace(resource, source, onFetched) {
+        return this.options
+            .fetchUrl({ resource, source })
+            .then((asset) => {
+            onFetched(asset.url);
+        })
+            .catch((error) => {
+            console.error('Error fetching URL:', error);
+        });
+    }
+};
+FetchUrlExtension = __decorate([
+    (0, core_1.extension)({
+        defaultOptions: {
+            fetchUrl: () => Promise.resolve(),
+        },
+    })
+], FetchUrlExtension);
+exports.FetchUrlExtension = FetchUrlExtension;

package/lib/Extensions/ImageExtension/AssetImageExtension.d.ts

@@ -7,6 +7,7 @@ export type AssetImageAttributes = {
     matrixAssetId: string;
     matrixIdentifier: string;
     matrixDomain: string;
+    url: string;
 };
 export declare class AssetImageExtension extends NodeExtension<AssetImageOptions> {
     get name(): NodeName.AssetImage;

package/lib/Extensions/ImageExtension/AssetImageExtension.js

@@ -9,7 +9,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AssetImageExtension = void 0;
 const core_1 = require("@remirror/core");
 const remirror_1 = require("remirror");
-const resolveMatrixAssetUrl_1 = require("../../utils/resolveMatrixAssetUrl");
 const Extensions_1 = require("../Extensions");
 let AssetImageExtension = class AssetImageExtension extends core_1.NodeExtension {
     get name() {
@@ -29,6 +28,7 @@ let AssetImageExtension = class AssetImageExtension extends core_1.NodeExtension
                 matrixAssetId: {},
                 matrixIdentifier: {},
                 matrixDomain: { default: this.options.matrixDomain },
+                src: { default: '' },
             },
             parseDOM: [
                 {
@@ -53,13 +53,13 @@ let AssetImageExtension = class AssetImageExtension extends core_1.NodeExtension
                 },
             ],
             toDOM: (node) => {
-                const { matrixAssetId, matrixIdentifier, matrixDomain, ...rest } = (0, core_1.omitExtraAttributes)(node.attrs, extra);
+                const { matrixAssetId, matrixIdentifier, matrixDomain, src, ...rest } = (0, core_1.omitExtraAttributes)(node.attrs, extra);
                 return [
                     'img',
                     {
                         ...extra.dom(node),
                         ...rest,
-                        src: (0, resolveMatrixAssetUrl_1.resolveMatrixAssetUrl)(String(matrixAssetId), String(matrixDomain)),
+                        src,
                         'data-matrix-asset-id': matrixAssetId,
                         'data-matrix-identifier': matrixIdentifier,
                         'data-matrix-domain': matrixDomain,
@@ -71,7 +71,7 @@ let AssetImageExtension = class AssetImageExtension extends core_1.NodeExtension
     insertAssetImage(attrs) {
         return ({ tr, dispatch }) => {
             const { from, to } = (0, remirror_1.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));
             return true;
         };

package/lib/Extensions/LinkExtension/AssetLinkExtension.d.ts

@@ -6,6 +6,8 @@ export type AssetLinkAttributes = {
     matrixIdentifier: string;
     matrixDomain: string;
     target: LinkTarget;
+    href: string;
+    url: string;
 };
 export type AssetLinkOptions = {
     matrixDomain?: string;

package/lib/Extensions/LinkExtension/AssetLinkExtension.js

@@ -12,7 +12,6 @@ const core_1 = require("@remirror/core");
 const common_1 = require("./common");
 const CommandsExtension_1 = require("../CommandsExtension/CommandsExtension");
 const Extensions_1 = require("../Extensions");
-const resolveMatrixAssetUrl_1 = require("../../utils/resolveMatrixAssetUrl");
 let AssetLinkExtension = class AssetLinkExtension extends core_1.MarkExtension {
     get name() {
         return Extensions_1.MarkName.AssetLink;
@@ -26,6 +25,7 @@ let AssetLinkExtension = class AssetLinkExtension extends core_1.MarkExtension {
                 ...extra.defaults(),
                 matrixAssetId: {},
                 matrixIdentifier: {},
+                href: { default: '' },
                 matrixDomain: { default: this.options.matrixDomain },
                 target: { default: this.options.defaultTarget },
             },
@@ -53,13 +53,13 @@ let AssetLinkExtension = class AssetLinkExtension extends core_1.MarkExtension {
                 },
             ],
             toDOM: (node) => {
-                const { matrixAssetId, matrixIdentifier, matrixDomain, target, ...rest } = (0, core_1.omitExtraAttributes)(node.attrs, extra);
+                const { matrixAssetId, matrixIdentifier, matrixDomain, target, href, ...rest } = (0, core_1.omitExtraAttributes)(node.attrs, extra);
                 const rel = 'noopener noreferrer nofollow';
                 const attrs = {
                     ...extra.dom(node),
                     ...rest,
                     rel,
-                    href: (0, resolveMatrixAssetUrl_1.resolveMatrixAssetUrl)(String(matrixAssetId), String(matrixDomain)),
+                    href,
                     target: (0, common_1.validateTarget)(target, this.options.supportedTargets, this.options.defaultTarget),
                     'data-matrix-asset-id': matrixAssetId,
                     'data-matrix-identifier': matrixIdentifier,
@@ -71,7 +71,7 @@ let AssetLinkExtension = class AssetLinkExtension extends core_1.MarkExtension {
     }
     updateAssetLink({ text, attrs, range }) {
         return this.store.getExtension(CommandsExtension_1.CommandsExtension).updateMark({
-            attrs,
+            attrs: { ...attrs, href: attrs.url },
             text,
             range,
             mark: this.type,

package/lib/ui/Fields/MatrixAsset/MatrixAsset.d.ts

@@ -2,6 +2,7 @@ import { InputContainerProps } from '../InputContainer/InputContainer';
 type MatrixAssetValue = {
     matrixIdentifier?: string;
     matrixAssetId?: string;
+    url?: string;
 };
 export type MatrixAssetProps<T extends MatrixAssetValue> = Omit<InputContainerProps, 'children'> & {
     modalTitle: string;

package/lib/ui/Fields/MatrixAsset/MatrixAsset.js

@@ -21,6 +21,7 @@ const MatrixAsset = ({ modalTitle, allowedTypes, value, onChange, ...props }) =>
                             ...value,
                             matrixIdentifier: reference?.source?.id,
                             matrixAssetId: reference?.resource?.id,
+                            url: reference?.resource?.url,
                         },
                     },
                 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squiz/formatted-text-editor",
-  "version": "1.40.1-alpha.27",
+  "version": "1.40.1-alpha.29",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "scripts": {
@@ -20,8 +20,8 @@
     "@headlessui/react": "1.7.11",
     "@mui/icons-material": "5.11.16",
     "@remirror/react": "2.0.25",
-    "@squiz/dx-json-schema-lib": "1.40.1-alpha.27",
-    "@squiz/resource-browser": "1.40.1-alpha.27",
+    "@squiz/dx-json-schema-lib": "1.40.1-alpha.29",
+    "@squiz/resource-browser": "1.40.1-alpha.29",
     "clsx": "1.2.1",
     "react-hook-form": "7.43.2",
     "react-image-size": "2.0.0",
@@ -75,5 +75,5 @@
   "volta": {
     "node": "18.15.0"
   },
-  "gitHead": "c7d710fd2b564d3ed3f308cf937acd8a3d8fcba1"
+  "gitHead": "9326d74cc366fdc140e2f699675778defce1f14a"
 }

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',

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/Extensions/Extensions.ts

@@ -9,6 +9,7 @@ import {
   OrderedListExtension,
   BulletListExtension,
   ListItemExtension,
+  PlaceholderExtension,
 } from 'remirror/extensions';
 import { Extension } from '@remirror/core';
 import { PreformattedExtension } from './PreformattedExtension/PreformattedExtension';
@@ -21,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',
@@ -35,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(),
@@ -62,6 +64,10 @@ export const createExtensions = (context: EditorContextOptions) => {
       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 });

package/src/ui/Fields/MatrixAsset/MatrixAsset.spec.tsx

@@ -59,6 +59,7 @@ describe('MatrixAsset', () => {
           additional: 'additional data',
           matrixAssetId: 'my-resource-id',
           matrixIdentifier: 'my-source-id',
+          url: 'https://default-resource/',
         },
       },
     });

package/src/ui/Fields/MatrixAsset/MatrixAsset.tsx

@@ -5,6 +5,7 @@ import { InputContainer, InputContainerProps } from '../InputContainer/InputCont
 type MatrixAssetValue = {
   matrixIdentifier?: string;
   matrixAssetId?: string;
+  url?: string;
 };
 
 export type MatrixAssetProps<T extends MatrixAssetValue> = Omit<InputContainerProps, 'children'> & {
@@ -45,6 +46,7 @@ export const MatrixAsset = <T extends MatrixAssetValue>({
                 ...value,
                 matrixIdentifier: reference?.source?.id,
                 matrixAssetId: reference?.resource?.id,
+                url: reference?.resource?.url,
               } as T,
             },
           });

package/tests/mockResourceBrowserContext.tsx

@@ -8,7 +8,7 @@ export type MockResourceBrowserContextOptions = DeepPartial<{
   resources: Resource[];
 }>;
 
-const mockResource = (resource: DeepPartial<Resource> = {}): Resource =>
+export const mockResource = (resource: DeepPartial<Resource> = {}): Resource =>
   ({
     id: 'default-resource',
     name: 'Default resource',
@@ -26,7 +26,7 @@ const mockResource = (resource: DeepPartial<Resource> = {}): Resource =>
     ...resource,
   } as Resource);
 
-const mockSource = (source: DeepPartial<Source>): Source => ({
+export const mockSource = (source: DeepPartial<Source> = {}): Source => ({
   id: 'default-source',
   name: 'Default source',
   ...source,

package/tests/renderWithContext.tsx

@@ -4,6 +4,8 @@ import merge from 'deepmerge';
 import { EditorContext } from '../src';
 import { defaultEditorContext, EditorContextOptions } from '../src/Editor/EditorContext';
 import { DeepPartial } from '../src/types';
+import { ResourceBrowserContext } from '@squiz/resource-browser';
+import { mockSource } from './mockResourceBrowserContext';
 
 export type ContextRenderOptions = RenderOptions & {
   context?: DeepPartial<{
@@ -13,6 +15,33 @@ export type ContextRenderOptions = RenderOptions & {
 
 export const renderWithContext = (ui: ReactElement | null, options?: ContextRenderOptions): RenderResult => {
   const editorContext = merge(defaultEditorContext, options?.context?.editor || {}) as EditorContextOptions;
+  const sources = mockSource();
+  const resources = [
+    {
+      id: 'default-resource',
+      name: 'Default resource',
+      url: 'https://default-resource/',
+      urls: [],
+      childCount: 0,
+      type: {
+        code: 'unspecified',
+        name: 'Unspecified',
+      },
+      status: {
+        code: 'live',
+        name: 'Live',
+      },
+    },
+  ];
+  const onRequestSources = jest.fn().mockResolvedValue(sources);
+  const onRequestChildren = jest.fn().mockResolvedValue(resources);
+  const onRequestResource = jest.fn(() => Promise.resolve(resources[0]));
 
-  return render(<EditorContext.Provider value={editorContext}>{ui}</EditorContext.Provider>);
+  return render(
+    <EditorContext.Provider value={editorContext}>
+      <ResourceBrowserContext.Provider value={{ onRequestSources, onRequestChildren, onRequestResource }}>
+        {ui}
+      </ResourceBrowserContext.Provider>
+    </EditorContext.Provider>,
+  );
 };

package/tests/renderWithEditor.tsx

@@ -1,6 +1,7 @@
 import React, { ReactElement, useContext, useEffect } from 'react';
 import { Extension, RemirrorContentType, RemirrorManager } from '@remirror/core';
 import { CorePreset } from '@remirror/preset-core';
+import { ResourceBrowserContext } from '@squiz/resource-browser';
 import { BuiltinPreset } from 'remirror';
 import { EditorComponent, Remirror, useRemirror } from '@remirror/react';
 import { RemirrorTestChain } from 'jest-remirror';
@@ -8,6 +9,7 @@ import { createExtensions } from '../src/Extensions/Extensions';
 import { EditorContext } from '../src';
 import { FloatingToolbar } from '../src/EditorToolbar';
 import { renderWithContext, ContextRenderOptions } from './renderWithContext';
+import { act } from '@testing-library/react';
 
 export type EditorRenderOptions = ContextRenderOptions & {
   content?: RemirrorContentType;
@@ -20,7 +22,7 @@ type TestEditorProps = EditorRenderOptions & {
   onReady: (manager: RemirrorManager<Extension>) => void;
 };
 
-type EditorRenderResult = {
+export type EditorRenderResult = {
   editor: RemirrorTestChain<Extension | CorePreset | BuiltinPreset>;
   getHtmlContent: () => string | undefined;
   getJsonContent: () => any;
@@ -32,8 +34,9 @@ type EditorRenderResult = {
 
 const TestEditor = ({ children, extensions, content, onReady, editable }: TestEditorProps) => {
   const context = useContext(EditorContext);
+  const browserContext = useContext(ResourceBrowserContext);
   const { manager, state, setState } = useRemirror({
-    extensions: () => extensions || createExtensions(context)(),
+    extensions: () => extensions || createExtensions(context, browserContext)(),
     content: content,
     selection: 'start',
     stringHandler: 'html',
@@ -95,17 +98,19 @@ export const renderWithEditor = async (
   };
   let isReady = false;
 
-  const { container } = renderWithContext(
-    <TestEditor
-      onReady={(manager) => {
-        result.editor = RemirrorTestChain.create(manager);
-        isReady = true;
-      }}
-      {...options}
-    >
-      {ui}
-    </TestEditor>,
-    options,
+  const { container } = await act(() =>
+    renderWithContext(
+      <TestEditor
+        onReady={(manager) => {
+          result.editor = RemirrorTestChain.create(manager);
+          isReady = true;
+        }}
+        {...options}
+      >
+        {ui}
+      </TestEditor>,
+      options,
+    ),
   );
 
   if (!isReady) {

package/lib/utils/resolveMatrixAssetUrl.d.ts

@@ -1 +0,0 @@
-export declare const resolveMatrixAssetUrl: (id: string, matrixDomain: string) => string;

package/lib/utils/resolveMatrixAssetUrl.js

@@ -1,10 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.resolveMatrixAssetUrl = void 0;
-const resolveMatrixAssetUrl = (id, matrixDomain) => {
-    if (matrixDomain.indexOf('://') < 0) {
-        matrixDomain = `${window.location.protocol}//${matrixDomain}`;
-    }
-    return new URL(`/_nocache?a=${encodeURIComponent(id)}`, matrixDomain).toString();
-};
-exports.resolveMatrixAssetUrl = resolveMatrixAssetUrl;

package/src/utils/resolveMatrixAssetUrl.spec.ts

@@ -1,26 +0,0 @@
-import { resolveMatrixAssetUrl } from './resolveMatrixAssetUrl';
-
-describe('resolveMatrixAssetUrl', () => {
-  it.each([
-    [
-      'domain with no scheme',
-      '123:hello?.txt',
-      'matrix.labs.squiz.test',
-      'http://matrix.labs.squiz.test/_nocache?a=123%3Ahello%3F.txt',
-    ],
-    [
-      'domain with scheme',
-      '123:hello?.txt',
-      'https://matrix.labs.squiz.test',
-      'https://matrix.labs.squiz.test/_nocache?a=123%3Ahello%3F.txt',
-    ],
-    [
-      'domain with path',
-      '123:hello?.txt',
-      'https://matrix.labs.squiz.test/site-1',
-      'https://matrix.labs.squiz.test/_nocache?a=123%3Ahello%3F.txt',
-    ],
-  ])('Resolves to expected URL for %s', (description: string, id: string, matrixDomain: string, expected: string) => {
-    expect(resolveMatrixAssetUrl(id, matrixDomain)).toBe(expected);
-  });
-});

package/src/utils/resolveMatrixAssetUrl.ts

@@ -1,7 +0,0 @@
-export const resolveMatrixAssetUrl = (id: string, matrixDomain: string): string => {
-  if (matrixDomain.indexOf('://') < 0) {
-    matrixDomain = `${window.location.protocol}//${matrixDomain}`;
-  }
-
-  return new URL(`/_nocache?a=${encodeURIComponent(id)}`, matrixDomain).toString();
-};