@squiz/formatted-text-editor 1.70.0 → 2.0.0

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',
@@ -74,6 +73,13 @@ const Editor = ({
     if (isFocused) {
       manager.view.dom.focus();
     }
+
+    // TODO: May want to come back to this and see if there's a better solution
+    // We have to add a type button attribute to the delete buttons so they don't cause a submit by accident.
+    const tableDeleteButtons = document.querySelectorAll('.remirror-table-delete-inner-button');
+    tableDeleteButtons.forEach((button) => {
+      button.setAttribute('type', 'button');
+    });
   }, []);
 
   return (
@@ -91,7 +97,7 @@ const Editor = ({
     >
       <Remirror
         manager={manager}
-        state={state}
+        initialContent={state}
         editable={editable}
         onChange={handleChange}
         placeholder="Write something"

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';
@@ -36,6 +35,8 @@ export enum NodeName {
   CodeBlock = 'codeBlock',
   AssetImage = 'assetImage',
   Text = 'text',
+  TableControllerCell = 'tableControllerCell',
+  tableCell = 'tableCell',
   hardBreak = 'hardBreak',
   Unsupported = 'unsupportedNode',
 }
@@ -45,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(),
@@ -77,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(