@squiz/formatted-text-editor 1.71.0 → 2.0.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Change Log
 
+## 2.0.0
+
+### Major Changes
+
+- f7279c6: Migration to resource-browser 2.x.x and use of plugin model. Alterations to data fetching for url resolution for FTE due to changes in RB2.
+
+  Breaking change: change to resource-browser 2.x.x requires a different context wrapper to version 1.x.x which the component editing ui and the formatted text editor relies upon to render the resource picker when selecting a resource; making the internal update to RB2 incompatible with 1.x.x usages of these packages.
+
+  This change was made to expand the support the resource browser had for data sources other than Matrix.
+
+  Consumers need to update usages of ResourceBrowserContext.provider with ResourceBrowserContextProvider and provide plugins e.g. @squiz/matrix-resource-browser-plugin or @squiz/dam-resource-browser-plugin to the context interface. Consumers also need to provide a new url fetcher to the FTE EditorContext.Provider `resolveNodeToUrl` to resolve MatrixAsset nodes to a url form; previously this relied upon exposed parts of the ResourceBrowser which are no longer exposed outside the RB itself.
+
 ## 1.71.0
 
 ### Minor Changes

package/demo/App.tsx

@@ -76,7 +76,13 @@ function App() {
           <Editor
             editable={editable}
             border={border}
-            content={`<p>Hello <a href="https://www.google.com"><strong>Mr Bean</strong></a>, nice to <a href="https://www.google.com">meet you</a>.<img src="https://media2.giphy.com/media/3o6ozsIxg5legYvggo/giphy.gif" height="150" width="200"/></p>`}
+            content={`
+              <p>Hello
+              <a href="https://www.google.com"><strong>Mr Bean</strong></a>, nice to <a href="https://www.google.com">meet you</a>.
+              <img src="https://media2.giphy.com/media/3o6ozsIxg5legYvggo/giphy.gif" height="150" width="200"/>
+              <img data-matrix-asset-id="1" data-matrix-identifier="matrixIdentifier" data-matrix-domain="https://matrix-domain.squiz.net">
+              </p>
+            `}
             onChange={handleEditorChange}
             enableTableTool={enableTableTool}
           >

package/demo/AppContext.tsx

@@ -1,29 +1,48 @@
 import React, { PropsWithChildren } from 'react';
-import { ResourceBrowserContext, Source, Resource, ResourceReference } from '@squiz/resource-browser';
+import { ResourceBrowserSource, ResourceBrowserContextProvider } from '@squiz/resource-browser';
+import MatrixResourceBrowserPlugin, {
+  Source,
+  Resource,
+  ResourceReference,
+} from '@squiz/matrix-resource-browser-plugin';
 import { EditorContext } from '../src';
 import resources from './resources.json';
 import sources from './sources.json';
+import { ResolveNodeType } from '../src/types';
 
 export type AppContextProps = PropsWithChildren;
-
 export const AppContext = ({ children }: AppContextProps) => (
-  <ResourceBrowserContext.Provider
+  <ResourceBrowserContextProvider
     value={{
-      onRequestSources: (): Promise<Source> => Promise.resolve(sources),
-      onRequestChildren: (source: Source, resource: Resource | null): Promise<Resource[]> =>
-        Promise.resolve(resource._children || resources),
-      onRequestResource: (reference: ResourceReference): Promise<Resource | null> => {
-        const flattenResources = (resources: unknown[]) => {
-          return [
-            ...resources,
-            ...resources.flatMap((resource) => ('_children' in resource ? flattenResources(resource._children) : [])),
-          ];
-        };
+      onRequestSources: (): Promise<ResourceBrowserSource[]> =>
+        Promise.resolve([
+          {
+            name: 'Matrix',
+            id: 'matrixIdentifier',
+            type: 'matrix',
+          },
+        ]),
+      plugins: [
+        MatrixResourceBrowserPlugin({
+          onRequestSources: (): Promise<Source> => Promise.resolve(sources),
+          onRequestChildren: (source: Source, resource: Resource | null): Promise<Resource[]> =>
+            Promise.resolve(resource._children || resources),
+          onRequestResource: (reference: ResourceReference): Promise<Resource | null> => {
+            const flattenResources = (resources: unknown[]) => {
+              return [
+                ...resources,
+                ...resources.flatMap((resource) =>
+                  '_children' in resource ? flattenResources(resource._children) : [],
+                ),
+              ];
+            };
 
-        return Promise.resolve(
-          flattenResources(resources).find((resource) => resource.id === reference.resource) || null,
-        );
-      },
+            return Promise.resolve(
+              flattenResources(resources).find((resource) => resource.id === reference.resource) || null,
+            );
+          },
+        }),
+      ],
     }}
   >
     <EditorContext.Provider
@@ -31,9 +50,21 @@ export const AppContext = ({ children }: AppContextProps) => (
         matrix: {
           matrixDomain: 'https://matrix-domain.squiz.net',
         },
+        resolveNodeToUrl: (node: ResolveNodeType): Promise<string> => {
+          const nodeResource = node.matrixAssetId;
+          const flattenResources = (resources: unknown[]) => {
+            return [
+              ...resources,
+              ...resources.flatMap((resource) => ('_children' in resource ? flattenResources(resource._children) : [])),
+            ];
+          };
+
+          const resource = flattenResources(resources).find((resource) => resource.id === nodeResource);
+          return Promise.resolve(resource.url || '');
+        },
       }}
     >
       {children}
     </EditorContext.Provider>
-  </ResourceBrowserContext.Provider>
+  </ResourceBrowserContextProvider>
 );

package/demo/resources.json

@@ -9,6 +9,10 @@
       "code": "live",
       "name": "Live"
     },
+    "source": {
+      "id": "1",
+      "type": "matrix"
+    },
     "name": "Example image one",
     "childCount": 0,
     "url": "https://picsum.photos/200/300"
@@ -23,6 +27,10 @@
       "code": "live",
       "name": "Live"
     },
+    "source": {
+      "id": "1",
+      "type": "matrix"
+    },
     "name": "Example image two",
     "childCount": 0,
     "url": "https://picsum.photos/200/300"
@@ -37,6 +45,10 @@
       "code": "live",
       "name": "Live"
     },
+    "source": {
+      "id": "1",
+      "type": "matrix"
+    },
     "name": "Example page",
     "childCount": 0,
     "url": "https://picsum.photos/200/300"
@@ -51,6 +63,10 @@
       "code": "live",
       "name": "Live"
     },
+    "source": {
+      "id": "1",
+      "type": "matrix"
+    },
     "name": "Example folder",
     "childCount": 10,
     "url": "",
@@ -65,6 +81,10 @@
           "code": "live",
           "name": "Live"
         },
+        "source": {
+          "id": "1",
+          "type": "matrix"
+        },
         "name": "Example image one #2",
         "childCount": 0,
         "url": "https://picsum.photos/200/300"
@@ -79,6 +99,10 @@
           "code": "live",
           "name": "Live"
         },
+        "source": {
+          "id": "1",
+          "type": "matrix"
+        },
         "name": "Example image two #2",
         "childCount": 0,
         "url": "https://picsum.photos/200/300"
@@ -93,6 +117,10 @@
           "code": "live",
           "name": "Live"
         },
+        "source": {
+          "id": "1",
+          "type": "matrix"
+        },
         "name": "Example page #2",
         "childCount": 0,
         "url": "https://picsum.photos/200/300"
@@ -107,6 +135,10 @@
           "code": "live",
           "name": "Live"
         },
+        "source": {
+          "id": "1",
+          "type": "matrix"
+        },
         "name": "Example folder #2",
         "childCount": 10,
         "url": "",
@@ -121,6 +153,10 @@
               "code": "live",
               "name": "Live"
             },
+            "source": {
+              "id": "1",
+              "type": "matrix"
+            },
             "name": "Example image one #3",
             "childCount": 0,
             "url": "https://picsum.photos/200/300"
@@ -135,6 +171,10 @@
               "code": "live",
               "name": "Live"
             },
+            "source": {
+              "id": "1",
+              "type": "matrix"
+            },
             "name": "Example image two #3",
             "childCount": 0,
             "url": "https://picsum.photos/200/300"
@@ -149,6 +189,10 @@
               "code": "live",
               "name": "Live"
             },
+            "source": {
+              "id": "1",
+              "type": "matrix"
+            },
             "name": "Example page #3",
             "childCount": 0,
             "url": "https://picsum.photos/200/300"

package/demo/sources.json

@@ -16,6 +16,10 @@
         "status": {
           "code": "live",
           "name": "Live"
+        },
+        "source": {
+          "id": "1",
+          "type": "matrix"
         }
       }
     ]

package/lib/Editor/Editor.js

@@ -33,7 +33,6 @@ 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 extension_react_tables_1 = require("@remirror/extension-react-tables");
 const WrappedEditor = () => {
     const preventImagePaste = (0, react_1.useCallback)((event) => {
@@ -53,7 +52,7 @@ const WrappedEditor = () => {
 };
 const Editor = ({ content, className, border = true, editable = true, onChange, children, isFocused, attributes, enableTableTool = false, }) => {
     const { manager, state, setState } = (0, react_2.useRemirror)({
-        extensions: (0, Extensions_1.createExtensions)((0, react_1.useContext)(EditorContext_1.EditorContext), (0, react_1.useContext)(resource_browser_1.ResourceBrowserContext)),
+        extensions: (0, Extensions_1.createExtensions)((0, react_1.useContext)(EditorContext_1.EditorContext)),
         content,
         selection: 'start',
         stringHandler: 'html',

package/lib/Editor/EditorContext.d.ts

@@ -1,8 +1,10 @@
 import React from 'react';
+import { ResolveNodeToUrl } from '../types';
 export type EditorContextOptions = {
     matrix: {
         matrixDomain: string;
     };
+    resolveNodeToUrl: ResolveNodeToUrl;
 };
 export declare const defaultEditorContext: EditorContextOptions;
 export declare const EditorContext: React.Context<EditorContextOptions>;

package/lib/Editor/EditorContext.js

@@ -9,5 +9,8 @@ exports.defaultEditorContext = {
     matrix: {
         matrixDomain: '',
     },
+    resolveNodeToUrl: () => {
+        throw new Error('resolveNodeToUrl has not been configured.');
+    },
 };
 exports.EditorContext = react_1.default.createContext(exports.defaultEditorContext);

package/lib/Extensions/Extensions.d.ts

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

package/lib/Extensions/Extensions.js

@@ -30,7 +30,7 @@ var MarkName;
     MarkName["Link"] = "link";
     MarkName["AssetLink"] = "assetLink";
 })(MarkName = exports.MarkName || (exports.MarkName = {}));
-const createExtensions = (context, browserContext) => {
+const createExtensions = (context) => {
     return () => {
         return [
             new CommandsExtension_1.CommandsExtension(),
@@ -62,7 +62,7 @@ const createExtensions = (context, browserContext) => {
             new extensions_1.HorizontalRuleExtension(),
             new extensions_1.PlaceholderExtension(),
             new FetchUrlExtension_1.FetchUrlExtension({
-                fetchUrl: browserContext.onRequestResource,
+                fetchUrl: context.resolveNodeToUrl,
             }),
             new extensions_1.TextExtension(),
             new extension_react_tables_1.TableExtension(),

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

@@ -1,10 +1,8 @@
 import { PlainExtension } from '@remirror/core';
 import { Dispose, EditorView } from '@remirror/core-types';
+import { ResolveNodeToUrl } from '../../types';
 export type FetchUrlOptions = {
-    fetchUrl?: (params: {
-        resource: string;
-        source: string;
-    }) => Promise<any>;
+    fetchUrl?: ResolveNodeToUrl;
 };
 export declare class FetchUrlExtension extends PlainExtension<FetchUrlOptions> {
     get name(): string;

package/lib/Extensions/FetchUrlExtension/FetchUrlExtension.js

@@ -20,14 +20,14 @@ let FetchUrlExtension = class FetchUrlExtension extends core_1.PlainExtension {
         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) => {
+                promises.push(this.fetchAndReplace(node.attrs, (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) => {
+                promises.push(this.fetchAndReplace(assetLinkMark.attrs, (url) => {
                     const updatedMark = assetLinkMark.type.create({ ...assetLinkMark.attrs, href: url });
                     tr.addMark(pos, pos + node.nodeSize, updatedMark);
                 }));
@@ -42,11 +42,11 @@ let FetchUrlExtension = class FetchUrlExtension extends core_1.PlainExtension {
     findAssetLinkMark(marks) {
         return marks.find((mark) => mark.type.name === Extensions_1.MarkName.AssetLink && mark.attrs.href === '');
     }
-    fetchAndReplace(resource, source, onFetched) {
+    fetchAndReplace(nodeAttrs, onFetched) {
         return this.options
-            .fetchUrl({ resource, source })
-            .then((asset) => {
-            onFetched(asset.url);
+            .fetchUrl(nodeAttrs)
+            .then((url) => {
+            onFetched(url);
         })
             .catch((error) => {
             console.error('Error fetching URL:', error);
@@ -56,7 +56,7 @@ let FetchUrlExtension = class FetchUrlExtension extends core_1.PlainExtension {
 FetchUrlExtension = __decorate([
     (0, core_1.extension)({
         defaultOptions: {
-            fetchUrl: () => Promise.resolve(),
+            fetchUrl: () => Promise.resolve(''),
         },
     })
 ], FetchUrlExtension);

package/lib/index.d.ts

@@ -3,4 +3,6 @@ import { EditorContext } from './Editor/EditorContext';
 import { remirrorNodeToSquizNode } from './utils/converters/remirrorNodeToSquizNode/remirrorNodeToSquizNode';
 import { squizNodeToRemirrorNode } from './utils/converters/squizNodeToRemirrorNode/squizNodeToRemirrorNode';
 import { htmlToSquizNode } from './utils/converters/htmlToSquizNode/htmlToSquizNode';
+import { ResolveNodeType, ResolveNodeToUrl } from './types';
 export { Editor, EditorContext, remirrorNodeToSquizNode, squizNodeToRemirrorNode, htmlToSquizNode };
+export type { ResolveNodeType, ResolveNodeToUrl };

package/lib/types.d.ts

@@ -1,3 +1,7 @@
 export type DeepPartial<T> = {
     [P in keyof T]?: T[P] extends Array<infer U> ? Array<DeepPartial<U>> : T[P] extends ReadonlyArray<infer U> ? ReadonlyArray<DeepPartial<U>> : DeepPartial<T[P]>;
 };
+export type ResolveNodeType = {
+    [attr: string]: any;
+};
+export type ResolveNodeToUrl = (node: ResolveNodeType) => Promise<string>;

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

@@ -9,19 +9,19 @@ const resource_browser_1 = require("@squiz/resource-browser");
 const InputContainer_1 = require("../InputContainer/InputContainer");
 const MatrixAsset = ({ modalTitle, allowedTypes, value, onChange, ...props }) => {
     return (react_1.default.createElement(InputContainer_1.InputContainer, { ...props },
-        react_1.default.createElement(resource_browser_1.ResourceBrowserInput, { modalTitle: modalTitle, allowedTypes: allowedTypes, value: value && value.matrixIdentifier && value.matrixAssetId
+        react_1.default.createElement(resource_browser_1.ResourceBrowser, { modalTitle: modalTitle, allowedTypes: allowedTypes, value: value && value.matrixIdentifier && value.matrixAssetId
                 ? {
-                    source: value.matrixIdentifier,
-                    resource: value.matrixAssetId,
+                    sourceId: value.matrixIdentifier,
+                    resourceId: value.matrixAssetId,
                 }
-                : null, onChange: (reference) => {
+                : null, onChange: (resource) => {
                 onChange({
                     target: {
                         value: {
                             ...value,
-                            matrixIdentifier: reference?.source?.id,
-                            matrixAssetId: reference?.resource?.id,
-                            url: reference?.resource?.url,
+                            matrixIdentifier: resource?.source?.id,
+                            matrixAssetId: resource?.id,
+                            url: resource?.url,
                         },
                     },
                 });

package/lib/utils/converters/htmlToSquizNode/htmlToSquizNode.js

@@ -10,15 +10,8 @@ const htmlToSquizNode = ({ content }) => {
         matrix: {
             matrixDomain: 'unsupported',
         },
-    }, {
-        onRequestResource: () => {
-            throw new Error('Resolving Matrix assets is not supported.');
-        },
-        onRequestSources: () => {
-            throw new Error('Resolving Matrix assets is not supported.');
-        },
-        onRequestChildren: () => {
-            throw new Error('Resolving Matrix assets is not supported.');
+        resolveNodeToUrl: () => {
+            throw new Error('Resolving Url is not supported.');
         },
     });
     const manager = core_1.RemirrorManager.create(extensions);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squiz/formatted-text-editor",
-  "version": "1.71.0",
+  "version": "2.0.0",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "private": false,
@@ -21,15 +21,16 @@
   },
   "dependencies": {
     "@headlessui/react": "1.7.11",
-    "@mui/icons-material": "5.11.16",
+    "@mui/icons-material": "5.15.18",
     "@remirror/extension-react-tables": "^2.2.19",
-    "@remirror/react": "2.0.25",
+    "@remirror/react": "2.0.35",
     "@squiz/dx-json-schema-lib": "^1.65.1",
-    "@squiz/resource-browser": "^1.66.3",
-    "clsx": "1.2.1",
-    "react-hook-form": "7.43.2",
+    "@squiz/matrix-resource-browser-plugin": "^2.0.0",
+    "@squiz/resource-browser": "^2.0.0",
+    "clsx": "2.1.1",
+    "react-hook-form": "7.51.4",
     "react-image-size": "2.0.0",
-    "remirror": "2.0.26"
+    "remirror": "2.0.39"
   },
   "devDependencies": {
     "@testing-library/cypress": "9.0.0",
@@ -48,18 +49,18 @@
     "eslint-plugin-react": "7.32.2",
     "jest": "29.4.1",
     "jest-environment-jsdom": "29.4.1",
-    "jest-remirror": "2.1.3",
+    "jest-remirror": "2.1.5",
     "postcss": "8.4.31",
     "postcss-nested": "6.0.0",
     "postcss-prefix-selector": "1.16.0",
     "react": "18.2.0",
     "react-diff-viewer-continued": "3.2.6",
     "react-dom": "18.2.0",
-    "rimraf": "4.1.2",
+    "rimraf": "5.0.7",
     "tailwindcss": "3.2.6",
     "ts-jest": "29.0.5",
     "typescript": "4.9.3",
-    "vite": "^4.5.0"
+    "vite": "^4.5.3"
   },
   "peerDependencies": {
     "@types/react": "^16.14.0 || ^17 || ^18",

package/src/Editor/Editor.spec.tsx

@@ -1,9 +1,9 @@
 import '@testing-library/jest-dom';
 import React from 'react';
 import { act, fireEvent, render, screen, within } from '@testing-library/react';
-import { ResourceBrowserContext } from '@squiz/resource-browser';
+import { MatrixResourceBrowserPluginProps } from '@squiz/matrix-resource-browser-plugin';
 import Editor from './Editor';
-import { renderWithEditor } from '../../tests';
+import { renderWithEditor, mockResourceBrowserContext } from '../../tests';
 import ImageButton from '../EditorToolbar/Tools/Image/ImageButton';
 import * as useFocus from '../hooks/useFocus';
 
@@ -432,10 +432,20 @@ describe('Formatted text editor', () => {
       childCount: '1',
     });
 
+    const { MockResourceBrowserContext } = mockResourceBrowserContext({
+      sources: [],
+      resources: [],
+      pluginProps: {
+        onRequestSources,
+        onRequestChildren,
+        onRequestResource,
+      } as MatrixResourceBrowserPluginProps,
+    });
+
     render(
-      <ResourceBrowserContext.Provider value={{ onRequestSources, onRequestChildren, onRequestResource }}>
+      <MockResourceBrowserContext>
         <Editor />
-      </ResourceBrowserContext.Provider>,
+      </MockResourceBrowserContext>,
     );
 
     await act(() => fireEvent.click(screen.getByRole('button', { name: 'Link (Ctrl+K)' })));

package/src/Editor/Editor.tsx

@@ -7,7 +7,6 @@ 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';
 import { TableComponents } from '@remirror/extension-react-tables';
 
 type EditorProps = {
@@ -56,7 +55,7 @@ const Editor = ({
   enableTableTool = false,
 }: EditorProps) => {
   const { manager, state, setState } = useRemirror({
-    extensions: createExtensions(useContext(EditorContext), useContext(ResourceBrowserContext)),
+    extensions: createExtensions(useContext(EditorContext)),
     content,
     selection: 'start',
     stringHandler: 'html',

package/src/Editor/EditorContext.spec.tsx

@@ -19,6 +19,7 @@ describe('EditorContext', () => {
       matrix: {
         matrixDomain: '',
       },
+      resolveNodeToUrl: expect.any(Function),
     });
   });
 });

package/src/Editor/EditorContext.ts

@@ -1,15 +1,20 @@
 import React from 'react';
+import { ResolveNodeToUrl } from '../types';
 
 export type EditorContextOptions = {
   matrix: {
     matrixDomain: string;
   };
+  resolveNodeToUrl: ResolveNodeToUrl;
 };
 
 export const defaultEditorContext: EditorContextOptions = {
   matrix: {
     matrixDomain: '',
   },
+  resolveNodeToUrl: () => {
+    throw new Error('resolveNodeToUrl has not been configured.');
+  },
 };
 
 export const EditorContext = React.createContext(defaultEditorContext);

package/src/EditorToolbar/Tools/Image/Form/ImageForm.spec.tsx

@@ -1,5 +1,5 @@
 import '@testing-library/jest-dom';
-import { render, screen, act, fireEvent } from '@testing-library/react';
+import { render, screen, act, fireEvent, waitFor } from '@testing-library/react';
 import React from 'react';
 import ImageForm from './ImageForm';
 import { NodeName } from '../../../../Extensions/Extensions';
@@ -48,7 +48,7 @@ describe('Image Form', () => {
           data={{
             ...data,
             imageType: NodeName.AssetImage,
-            assetImage: { matrixAssetId: '100', matrixIdentifier: 'matrix-identifier' },
+            assetImage: { matrixAssetId: '100', matrixIdentifier: 'matrix-api-identifier' },
           }}
           onSubmit={handleSubmit}
         />
@@ -56,7 +56,9 @@ describe('Image Form', () => {
     );
 
     expect(document.querySelector('div[data-headlessui-state="selected"]')).toHaveTextContent('From source');
-    expect(screen.getByText('My selected image')).toBeInTheDocument();
+    await waitFor(() => {
+      expect(screen.getByText('My selected image')).toBeInTheDocument();
+    });
   });
 
   it('calculates the height when width changes and aspect ratio is locked', () => {

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

@@ -269,6 +269,9 @@ describe('ImageButton', () => {
     // open the modal and add an image.
     await openModal();
     fireEvent.click(screen.getByRole('button', { name: 'From source' }));
+    await waitFor(() => {
+      screen.getByRole('button', { name: 'Choose image' });
+    });
     await selectResource(screen.getByRole('button', { name: 'Choose image' }), 'My image resource');
     fireEvent.click(screen.getByRole('button', { name: 'Apply' }));
 
@@ -329,6 +332,9 @@ describe('ImageButton', () => {
 
     await openModal();
     fireEvent.click(screen.getByRole('button', { name: 'From source' }));
+    await waitFor(() => {
+      screen.getByRole('button', { name: 'Choose image' });
+    });
     await selectResource(screen.getByRole('button', { name: 'Choose image' }), 'My image resource');
     fireEvent.click(screen.getByRole('button', { name: 'Apply' }));
 

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

@@ -1,5 +1,5 @@
 import '@testing-library/jest-dom';
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import React from 'react';
 import { LinkForm } from './LinkForm';
 import { LinkTarget } from '../../../../Extensions/LinkExtension/common';
@@ -19,20 +19,28 @@ describe('Link Form', () => {
     },
     assetLink: {
       matrixAssetId: '100',
-      matrixIdentifier: 'matrix-identifier',
+      matrixIdentifier: 'matrix-api-identifier',
       matrixDomain: 'my-matrix.squiz.net',
       target: LinkTarget.Blank,
     },
   };
 
-  it('Renders the form with expected default values when no data is provided', () => {
-    render(<LinkForm onSubmit={handleSubmit} />);
+  it('Renders the form with expected default values when no data is provided', async () => {
+    const { MockResourceBrowserContext } = mockResourceBrowserContext({ sources: [], resources: [] });
+    render(
+      <MockResourceBrowserContext>
+        <LinkForm onSubmit={handleSubmit} />
+      </MockResourceBrowserContext>,
+    );
 
     expect(document.querySelector('div[data-headlessui-state="selected"]')).toHaveTextContent('From source');
-    expect(screen.queryByRole('button', { name: 'Choose asset' })).toBeInTheDocument();
     expect(screen.getByLabelText('Text')).toHaveValue('');
     expect(document.querySelector('div.squiz-fte-checkbox')).toHaveTextContent('Open link in new window');
     expect(document.querySelectorAll('label')).toHaveLength(1);
+
+    await waitFor(() => {
+      expect(screen.queryByRole('button', { name: 'Choose asset' })).toBeInTheDocument();
+    });
   });
 
   it('Renders the form with the expected fields for arbitrary links', () => {
@@ -46,7 +54,7 @@ describe('Link Form', () => {
     expect(document.querySelectorAll('label')).toHaveLength(3);
   });
 
-  it('Renders the form with the expected fields for asset links', () => {
+  it('Renders the form with the expected fields for asset links', async () => {
     const { MockResourceBrowserContext } = mockResourceBrowserContext({
       sources: [{ id: 'my-source-id' }],
       resources: [{ id: '100', name: 'My selected resource' }],
@@ -59,9 +67,13 @@ describe('Link Form', () => {
     );
 
     expect(document.querySelector('div[data-headlessui-state="selected"]')).toHaveTextContent('From source');
-    expect(screen.getByText('My selected resource')).toBeInTheDocument();
+
     expect(screen.getByLabelText('Text')).toHaveValue('Link text');
     expect(document.querySelector('div.squiz-fte-checkbox')).toHaveTextContent('Open link in new window');
     expect(document.querySelectorAll('label')).toHaveLength(1);
+
+    await waitFor(() => {
+      expect(screen.getByText('My selected resource')).toBeInTheDocument();
+    });
   });
 });

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

@@ -1,5 +1,5 @@
 import '@testing-library/jest-dom';
-import { act, screen, fireEvent, waitForElementToBeRemoved } from '@testing-library/react';
+import { act, screen, fireEvent, waitForElementToBeRemoved, waitFor } from '@testing-library/react';
 import React from 'react';
 import { renderWithEditor, mockResourceBrowserContext } from '../../../../tests';
 import LinkButton from './LinkButton';
@@ -258,6 +258,9 @@ describe('LinkButton', () => {
 
     await openModal();
     fireEvent.click(screen.getByRole('button', { name: 'From source' }));
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: 'Choose asset' })).toBeInTheDocument();
+    });
     await selectResource(screen.getByRole('button', { name: 'Choose asset' }), 'My resource');
     fireEvent.change(screen.getByLabelText('Text'), { target: { value: 'Link text' } });
     fireEvent.click(screen.getByRole('button', { name: 'Apply' }));
@@ -318,6 +321,9 @@ describe('LinkButton', () => {
 
     await openModal();
     fireEvent.click(screen.getByRole('button', { name: 'From source' }));
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: 'Choose asset' })).toBeInTheDocument();
+    });
     await selectResource(screen.getByRole('button', { name: 'Choose asset' }), 'My resource');
     fireEvent.click(document.querySelector('div.squiz-fte-checkbox button') as HTMLButtonElement);
     fireEvent.click(screen.getByRole('button', { name: 'Apply' }));

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

@@ -20,7 +20,7 @@ describe('RemoveLinkButton', () => {
                 marks: [
                   {
                     type: 'assetLink',
-                    attrs: { matrixAssetId: '123', matrixIdentifier: 'matrix-identifier', target: '_blank' },
+                    attrs: { matrixAssetId: '123', matrixIdentifier: 'matrix-api-identifier', target: '_blank' },
                   },
                 ],
               },
@@ -65,7 +65,7 @@ describe('RemoveLinkButton', () => {
                 marks: [
                   {
                     type: 'assetLink',
-                    attrs: { matrixAssetId: '123', matrixIdentifier: 'matrix-identifier', target: '_blank' },
+                    attrs: { matrixAssetId: '123', matrixIdentifier: 'matrix-api-identifier', target: '_blank' },
                   },
                 ],
               },
@@ -123,7 +123,7 @@ describe('RemoveLinkButton', () => {
                 marks: [
                   {
                     type: 'assetLink',
-                    attrs: { matrixAssetId: '123', matrixIdentifier: 'matrix-identifier', target: '_blank' },
+                    attrs: { matrixAssetId: '123', matrixIdentifier: 'matrix-api-identifier', target: '_blank' },
                   },
                 ],
               },

package/src/Extensions/Extensions.ts

@@ -26,7 +26,6 @@ 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';
 import { TableExtension } from '@remirror/extension-react-tables';
 import { ReactComponentExtension } from '@remirror/extension-react-component';
@@ -47,7 +46,7 @@ export enum MarkName {
   AssetLink = 'assetLink',
 }
 
-export const createExtensions = (context: EditorContextOptions, browserContext: ResourceBrowserContextProps) => {
+export const createExtensions = (context: EditorContextOptions) => {
   return (): Extension[] => {
     return [
       new CommandsExtension(),
@@ -79,7 +78,7 @@ export const createExtensions = (context: EditorContextOptions, browserContext:
       new HorizontalRuleExtension(),
       new PlaceholderExtension(),
       new FetchUrlExtension({
-        fetchUrl: browserContext.onRequestResource,
+        fetchUrl: context.resolveNodeToUrl,
       }),
       new TextExtension(),
       new TableExtension(),

package/src/Extensions/FetchUrlExtension/FetchUrlExtension.ts

@@ -1,15 +1,14 @@
 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';
+import { ResolveNodeToUrl, ResolveNodeType } from '../../types';
 
 export type FetchUrlOptions = {
-  fetchUrl?: (params: { resource: string; source: string }) => Promise<any>;
+  fetchUrl?: ResolveNodeToUrl;
 };
-
 @extension<FetchUrlOptions>({
   defaultOptions: {
-    fetchUrl: () => Promise.resolve(),
+    fetchUrl: () => Promise.resolve(''),
   },
 })
 export class FetchUrlExtension extends PlainExtension<FetchUrlOptions> {
@@ -27,7 +26,7 @@ export class FetchUrlExtension extends PlainExtension<FetchUrlOptions> {
     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) => {
+          this.fetchAndReplace(node.attrs, (url: string) => {
             const newNode = state.schema.nodes[NodeName.AssetImage].create({ ...node.attrs, src: url });
             tr.replaceWith(pos, pos + node.nodeSize, newNode);
           }),
@@ -37,14 +36,10 @@ export class FetchUrlExtension extends PlainExtension<FetchUrlOptions> {
       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);
-            },
-          ),
+          this.fetchAndReplace(assetLinkMark.attrs, (url: string) => {
+            const updatedMark = assetLinkMark.type.create({ ...assetLinkMark.attrs, href: url });
+            tr.addMark(pos, pos + node.nodeSize, updatedMark);
+          }),
         );
       }
     });
@@ -60,11 +55,11 @@ export class FetchUrlExtension extends PlainExtension<FetchUrlOptions> {
     return marks.find((mark) => mark.type.name === MarkName.AssetLink && mark.attrs.href === '');
   }
 
-  private fetchAndReplace(resource: string, source: string, onFetched: (url: string) => void): Promise<void> {
+  private fetchAndReplace(nodeAttrs: ResolveNodeType, onFetched: (url: string) => void): Promise<void> {
     return this.options
-      .fetchUrl({ resource, source })
-      .then((asset: Resource) => {
-        onFetched(asset.url);
+      .fetchUrl(nodeAttrs)
+      .then((url: string) => {
+        onFetched(url);
       })
       .catch((error) => {
         console.error('Error fetching URL:', error);

package/src/Extensions/UnsuportedExtension/UnsupportedNodeExtension.spec.ts

@@ -131,7 +131,7 @@ describe('UnsupportedNodeExtension', () => {
     });
 
     expect(getHtmlContent()).toBe(
-      '<span class="unsupported-node-node-view-wrapper" originalnode="null" errormessage="null" data-unsupported-node="{&quot;originalNode&quot;:null,&quot;errorMessage&quot;:null}"><div class="collapse-box" contenteditable="false"><button class="collapse-box__header" type="button"><svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium collapse-box__icon--warning css-i4bv87-MuiSvgIcon-root" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="MotionPhotosOffOutlinedIcon"><path d="M2.81 2.81 1.39 4.22l2.27 2.27C2.61 8.07 2 9.96 2 12c0 5.52 4.48 10 10 10 2.04 0 3.93-.61 5.51-1.66l2.27 2.27 1.41-1.42L2.81 2.81zM12 20c-4.41 0-8-3.59-8-8 0-1.48.41-2.86 1.12-4.06l10.93 10.94C14.86 19.59 13.48 20 12 20zm0-16c4.41 0 8 3.59 8 8 0 1.48-.41 2.86-1.12 4.05l1.45 1.45C21.39 15.93 22 14.04 22 12c0-5.52-4.48-10-10-10-2.04 0-3.93.61-5.51 1.66l1.45 1.45C9.14 4.41 10.52 4 12 4z"></path></svg><div class="collapse-box__label">This section cannot be displayed here due to unsupported HTML elements. The front-end view of your page won’t be affected.</div><svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="UnfoldLessOutlinedIcon"><path d="M7.41 18.59 8.83 20 12 16.83 15.17 20l1.41-1.41L12 14l-4.59 4.59zm9.18-13.18L15.17 4 12 7.17 8.83 4 7.41 5.41 12 10l4.59-4.59z"></path></svg></button><div class="collapse-box__content" hidden="" data-testid="content"><br>null</div></div></span>',
+      '<span class="unsupported-node-node-view-wrapper" originalnode="null" errormessage="null" data-unsupported-node="{&quot;originalNode&quot;:null,&quot;errorMessage&quot;:null}"><div class="collapse-box" contenteditable="false"><button class="collapse-box__header" type="button"><svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium collapse-box__icon--warning css-i4bv87-MuiSvgIcon-root" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="MotionPhotosOffOutlinedIcon"><path d="M2.81 2.81 1.39 4.22l2.27 2.27C2.61 8.07 2 9.96 2 12c0 5.52 4.48 10 10 10 2.04 0 3.93-.61 5.51-1.66l2.27 2.27 1.41-1.42zM12 20c-4.41 0-8-3.59-8-8 0-1.48.41-2.86 1.12-4.06l10.93 10.94C14.86 19.59 13.48 20 12 20m0-16c4.41 0 8 3.59 8 8 0 1.48-.41 2.86-1.12 4.05l1.45 1.45C21.39 15.93 22 14.04 22 12c0-5.52-4.48-10-10-10-2.04 0-3.93.61-5.51 1.66l1.45 1.45C9.14 4.41 10.52 4 12 4"></path></svg><div class="collapse-box__label">This section cannot be displayed here due to unsupported HTML elements. The front-end view of your page won’t be affected.</div><svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="UnfoldLessOutlinedIcon"><path d="M7.41 18.59 8.83 20 12 16.83 15.17 20l1.41-1.41L12 14zm9.18-13.18L15.17 4 12 7.17 8.83 4 7.41 5.41 12 10z"></path></svg></button><div class="collapse-box__content" hidden="" data-testid="content"><br>null</div></div></span>',
     );
   });
 });

package/src/index.ts

@@ -3,5 +3,7 @@ import { EditorContext } from './Editor/EditorContext';
 import { remirrorNodeToSquizNode } from './utils/converters/remirrorNodeToSquizNode/remirrorNodeToSquizNode';
 import { squizNodeToRemirrorNode } from './utils/converters/squizNodeToRemirrorNode/squizNodeToRemirrorNode';
 import { htmlToSquizNode } from './utils/converters/htmlToSquizNode/htmlToSquizNode';
+import { ResolveNodeType, ResolveNodeToUrl } from './types';
 
 export { Editor, EditorContext, remirrorNodeToSquizNode, squizNodeToRemirrorNode, htmlToSquizNode };
+export type { ResolveNodeType, ResolveNodeToUrl };

package/src/types.ts

@@ -5,3 +5,6 @@ export type DeepPartial<T> = {
     ? ReadonlyArray<DeepPartial<U>>
     : DeepPartial<T[P]>;
 };
+
+export type ResolveNodeType = { [attr: string]: any };
+export type ResolveNodeToUrl = (node: ResolveNodeType) => Promise<string>;

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

@@ -1,17 +1,27 @@
 import '@testing-library/jest-dom';
 import React from 'react';
-import { fireEvent, render, screen } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { MatrixAsset } from './MatrixAsset';
 import { mockResourceBrowserContext } from '../../../../tests';
 
 describe('MatrixAsset', () => {
-  it('Renders empty state when no value is provided', () => {
-    render(<MatrixAsset modalTitle="Insert asset" onChange={jest.fn()} />);
+  it('Renders empty state when no value is provided', async () => {
+    const { MockResourceBrowserContext } = mockResourceBrowserContext({
+      sources: [],
+      resources: [],
+    });
+    render(
+      <MockResourceBrowserContext>
+        <MatrixAsset modalTitle="Insert asset" onChange={jest.fn()} />
+      </MockResourceBrowserContext>,
+    );
 
-    expect(screen.getByRole('button', { name: 'Choose asset' })).toBeInTheDocument();
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: 'Choose asset' })).toBeInTheDocument();
+    });
   });
 
-  it('Renders a selected state when a value is provided', () => {
+  it('Renders a selected state when a value is provided', async () => {
     const { MockResourceBrowserContext } = mockResourceBrowserContext({
       sources: [{ id: 'my-source-id' }],
       resources: [{ id: 'my-resource-id', name: 'My resource' }],
@@ -22,7 +32,7 @@ describe('MatrixAsset', () => {
         <MatrixAsset
           modalTitle="Insert asset"
           value={{
-            matrixIdentifier: 'my-source-id',
+            matrixIdentifier: 'matrix-api-identifier',
             matrixAssetId: 'my-resource-id',
             addional: 'addditional data',
           }}
@@ -30,8 +40,9 @@ describe('MatrixAsset', () => {
         />
       </MockResourceBrowserContext>,
     );
-
-    expect(screen.getByText('My resource')).toBeInTheDocument();
+    await waitFor(() => {
+      expect(screen.getByText('My resource')).toBeInTheDocument();
+    });
   });
 
   it('Calls onChange with expected value when resources is selected', async () => {
@@ -51,6 +62,9 @@ describe('MatrixAsset', () => {
       </MockResourceBrowserContext>,
     );
 
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: 'Choose asset' })).toBeInTheDocument();
+    });
     await selectResource(screen.getByRole('button', { name: 'Choose asset' }), 'My resource');
 
     expect(handleChange).toHaveBeenCalledWith({
@@ -58,7 +72,7 @@ describe('MatrixAsset', () => {
         value: {
           additional: 'additional data',
           matrixAssetId: 'my-resource-id',
-          matrixIdentifier: 'my-source-id',
+          matrixIdentifier: 'matrix-api-identifier',
           url: 'https://default-resource/',
         },
       },
@@ -89,6 +103,9 @@ describe('MatrixAsset', () => {
       </MockResourceBrowserContext>,
     );
 
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: 'Remove selection' })).toBeInTheDocument();
+    });
     fireEvent.click(screen.getByRole('button', { name: 'Remove selection' }));
 
     expect(handleChange).toHaveBeenCalledWith({

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { HydratedResourceReference, ResourceBrowserInput } from '@squiz/resource-browser';
+import { ResourceBrowserResource, ResourceBrowser } from '@squiz/resource-browser';
 import { InputContainer, InputContainerProps } from '../InputContainer/InputContainer';
 
 type MatrixAssetValue = {
@@ -28,25 +28,25 @@ export const MatrixAsset = <T extends MatrixAssetValue>({
 }: MatrixAssetProps<T>) => {
   return (
     <InputContainer {...props}>
-      <ResourceBrowserInput
+      <ResourceBrowser
         modalTitle={modalTitle}
         allowedTypes={allowedTypes}
         value={
           value && value.matrixIdentifier && value.matrixAssetId
             ? {
-                source: value.matrixIdentifier,
-                resource: value.matrixAssetId,
+                sourceId: value.matrixIdentifier,
+                resourceId: value.matrixAssetId,
               }
             : null
         }
-        onChange={(reference: HydratedResourceReference | null) => {
+        onChange={(resource: ResourceBrowserResource | null) => {
           onChange({
             target: {
               value: {
                 ...value,
-                matrixIdentifier: reference?.source?.id,
-                matrixAssetId: reference?.resource?.id,
-                url: reference?.resource?.url,
+                matrixIdentifier: resource?.source?.id,
+                matrixAssetId: resource?.id,
+                url: resource?.url,
               } as T,
             },
           });

package/src/utils/converters/htmlToSquizNode/htmlToSquizNode.ts

@@ -8,24 +8,14 @@ import { HtmlToSquizNodeProps } from './htmlToSquizNode.props';
 type FormattedText = FORMATTED_TEXT_MODELS.v1.FormattedText;
 
 export const htmlToSquizNode = ({ content }: HtmlToSquizNodeProps): FormattedText | undefined => {
-  const extensions = createExtensions(
-    {
-      matrix: {
-        matrixDomain: 'unsupported',
-      },
+  const extensions = createExtensions({
+    matrix: {
+      matrixDomain: 'unsupported',
     },
-    {
-      onRequestResource: () => {
-        throw new Error('Resolving Matrix assets is not supported.');
-      },
-      onRequestSources: () => {
-        throw new Error('Resolving Matrix assets is not supported.');
-      },
-      onRequestChildren: () => {
-        throw new Error('Resolving Matrix assets is not supported.');
-      },
+    resolveNodeToUrl: () => {
+      throw new Error('Resolving Url is not supported.');
     },
-  );
+  });
   const manager = RemirrorManager.create(extensions);
 
   return remirrorNodeToSquizNode(

package/tests/mockResourceBrowserContext.tsx

@@ -1,11 +1,23 @@
 import React, { ReactNode } from 'react';
-import { ResourceBrowserContext, Source, Resource, ResourceReference } from '@squiz/resource-browser';
+import {
+  ResourceBrowserSource,
+  ResourceBrowserContextProvider,
+  ResourceBrowserPluginType,
+} from '@squiz/resource-browser';
+import MatrixResourceBrowserPlugin, {
+  Source,
+  Resource,
+  ResourceReference,
+  MatrixResourceBrowserPluginProps,
+} from '@squiz/matrix-resource-browser-plugin';
+
 import { fireEvent, screen } from '@testing-library/react';
 import { DeepPartial } from '../src/types';
 
 export type MockResourceBrowserContextOptions = DeepPartial<{
   sources: Source[];
   resources: Resource[];
+  pluginProps?: MatrixResourceBrowserPluginProps;
 }>;
 
 export const mockResource = (resource: DeepPartial<Resource> = {}): Resource =>
@@ -23,6 +35,10 @@ export const mockResource = (resource: DeepPartial<Resource> = {}): Resource =>
       code: 'live',
       name: 'Live',
     },
+    source: {
+      id: '1',
+      type: 'matrix' as ResourceBrowserPluginType,
+    },
     ...resource,
   } as Resource);
 
@@ -33,29 +49,49 @@ export const mockSource = (source: DeepPartial<Source> = {}): Source => ({
   nodes: (source.nodes || [mockResource()]).map((resource) => mockResource(resource)),
 });
 
-export const mockResourceBrowserContext = ({ sources, resources }: MockResourceBrowserContextOptions) => {
+export const mockResourceBrowserContext = ({ sources, resources, pluginProps }: MockResourceBrowserContextOptions) => {
   sources = (sources || []).map((source) => mockSource(source));
   resources = (resources || []).map((resource) => mockResource(resource));
 
-  const onRequestSources = jest.fn().mockResolvedValue(sources);
-  const onRequestChildren = jest.fn().mockResolvedValue(resources);
-  const onRequestResource = jest
-    .fn()
-    .mockImplementation(
-      (reference: ResourceReference) => resources?.find((resource) => resource.id === reference.resource) || null,
-    );
+  const onRequestSources = pluginProps?.onRequestSources || jest.fn().mockResolvedValue(sources);
+  const onRequestChildren = pluginProps?.onRequestChildren || jest.fn().mockResolvedValue(resources);
+  const onRequestResource =
+    pluginProps?.onRequestResource ||
+    jest
+      .fn()
+      .mockImplementation((reference: ResourceReference) =>
+        Promise.resolve(resources?.find((resource) => resource.id === reference.resource) || null),
+      );
 
   return {
     MockResourceBrowserContext: ({ children }: { children: ReactNode }) => (
-      <ResourceBrowserContext.Provider value={{ onRequestSources, onRequestChildren, onRequestResource }}>
+      <ResourceBrowserContextProvider
+        value={{
+          onRequestSources: (): Promise<ResourceBrowserSource[]> =>
+            Promise.resolve([
+              {
+                name: 'Matrix API',
+                id: 'matrix-api-identifier',
+                type: 'matrix',
+              },
+            ]),
+          plugins: [
+            MatrixResourceBrowserPlugin({
+              onRequestSources: onRequestSources,
+              onRequestChildren: onRequestChildren,
+              onRequestResource: onRequestResource,
+            } as MatrixResourceBrowserPluginProps),
+          ],
+        }}
+      >
         {children}
-      </ResourceBrowserContext.Provider>
+      </ResourceBrowserContextProvider>
     ),
     selectResource: async (opener: HTMLElement, resourceName: string) => {
       const sourceLabel = `Drill down to ${sources?.[0]?.nodes?.[0]?.name} children`;
 
       fireEvent.click(opener);
-      fireEvent.click(await screen.findByRole('button', { name: sourceLabel }));
+      fireEvent.click((await screen.findAllByRole('button', { name: sourceLabel }))[0]);
       fireEvent.click(await screen.findByTitle(resourceName));
       fireEvent.click(await screen.findByRole('button', { name: 'Select' }));
     },

package/tests/renderWithContext.tsx

@@ -4,7 +4,12 @@ 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 {
+  ResourceBrowserSource,
+  ResourceBrowserContextProvider,
+  ResourceBrowserPluginType,
+} from '@squiz/resource-browser';
+import MatrixResourceBrowserPlugin from '@squiz/matrix-resource-browser-plugin';
 import { mockSource } from './mockResourceBrowserContext';
 
 export type ContextRenderOptions = RenderOptions & {
@@ -31,17 +36,40 @@ export const renderWithContext = (ui: ReactElement | null, options?: ContextRend
         code: 'live',
         name: 'Live',
       },
+      source: {
+        id: '1',
+        type: 'matrix' as ResourceBrowserPluginType,
+      },
     },
   ];
   const onRequestSources = jest.fn().mockResolvedValue(sources);
   const onRequestChildren = jest.fn().mockResolvedValue(resources);
   const onRequestResource = jest.fn(() => Promise.resolve(resources[0]));
+  editorContext.resolveNodeToUrl = jest.fn(() => Promise.resolve(resources[0].url));
 
   return render(
     <EditorContext.Provider value={editorContext}>
-      <ResourceBrowserContext.Provider value={{ onRequestSources, onRequestChildren, onRequestResource }}>
+      <ResourceBrowserContextProvider
+        value={{
+          onRequestSources: (): Promise<ResourceBrowserSource[]> =>
+            Promise.resolve([
+              {
+                name: 'Matrix',
+                id: 'matrixIdentifier',
+                type: 'matrix',
+              },
+            ]),
+          plugins: [
+            MatrixResourceBrowserPlugin({
+              onRequestSources: onRequestSources,
+              onRequestChildren: onRequestChildren,
+              onRequestResource: onRequestResource,
+            }),
+          ],
+        }}
+      >
         {ui}
-      </ResourceBrowserContext.Provider>
+      </ResourceBrowserContextProvider>
     </EditorContext.Provider>,
   );
 };

package/tests/renderWithEditor.tsx

@@ -1,7 +1,6 @@
 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';
@@ -34,9 +33,8 @@ export 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, browserContext)(),
+    extensions: () => extensions || createExtensions(context)(),
     content: content,
     selection: 'start',
     stringHandler: 'html',

package/vite.config.ts

@@ -7,12 +7,12 @@ import react from '@vitejs/plugin-react';
 export default defineConfig({
   root: 'demo',
   optimizeDeps: {
-    include: ['@squiz/resource-browser'],
+    include: [],
   },
   build: {
     outDir: 'build/demo',
     commonjsOptions: {
-      include: [/node_modules/, /resource-browser/],
+      include: [/node_modules/],
     },
   },
   plugins: [