@squiz/formatted-text-editor 1.33.1-alpha.3 → 1.33.1-alpha.5

package/src/Editor/EditorContext.spec.tsx

@@ -1,26 +1,24 @@
-import React, { useContext } from 'react';
-import { EditorContext } from './EditorContext';
+import React from 'react';
+import { EditorContext, EditorContextOptions } from './EditorContext';
 import { render } from '@testing-library/react';
 
 describe('EditorContext', () => {
-  const defaultContextFn = jest.fn();
-  const Component = () => {
-    defaultContextFn(useContext(EditorContext));
-    return null;
-  };
-
   it('Has expected defaults', async () => {
-    render(<Component />);
+    let defaultContext: EditorContextOptions | null = null;
 
-    const defaultContext = defaultContextFn.mock.calls[0][0];
+    render(
+      <EditorContext.Consumer>
+        {(value) => {
+          defaultContext = value;
+          return null;
+        }}
+      </EditorContext.Consumer>,
+    );
 
     expect(defaultContext).toEqual({
       matrix: {
-        resolveMatrixAsset: expect.any(Function),
         matrixDomain: '',
-        matrixIdentifier: '',
       },
     });
-    expect(await defaultContext.matrix.resolveMatrixAsset('fake-asset-id')).toBeNull();
   });
 });

package/src/Editor/EditorContext.ts

@@ -1,25 +1,14 @@
 import React from 'react';
 
-export type MatrixAsset = {
-  id: string;
-  type: string | 'image';
-};
-
-export type MatrixAssetResolver = (assetId: string) => Promise<MatrixAsset | null>;
-
 export type EditorContextOptions = {
   matrix: {
-    matrixIdentifier: string;
     matrixDomain: string;
-    resolveMatrixAsset: MatrixAssetResolver;
   };
 };
 
 export const defaultEditorContext: EditorContextOptions = {
   matrix: {
-    matrixIdentifier: '',
     matrixDomain: '',
-    resolveMatrixAsset: () => Promise.resolve(null),
   },
 };
 

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

@@ -3,6 +3,7 @@ import { render, screen, act, fireEvent } from '@testing-library/react';
 import React from 'react';
 import ImageForm from './ImageForm';
 import { NodeName } from '../../../../Extensions/Extensions';
+import { mockResourceBrowserContext } from '../../../../../tests';
 
 describe('Image Form', () => {
   const handleSubmit = jest.fn();
@@ -26,20 +27,36 @@ describe('Image Form', () => {
     expect(screen.getByLabelText('Height')).toHaveValue(1400);
   });
 
-  it('Renders the form with the relevant fields for asset images', () => {
+  it('Renders the form with the relevant fields for asset images', async () => {
+    const { MockResourceBrowserContext } = mockResourceBrowserContext({
+      sources: [{ id: 'my-source-id' }],
+      resources: [
+        {
+          id: '100',
+          name: 'My selected image',
+          type: {
+            code: 'image',
+            name: 'Image',
+          },
+        },
+      ],
+    });
+
     render(
-      <ImageForm
-        data={{
-          ...data,
-          imageType: NodeName.AssetImage,
-          assetImage: { matrixAssetId: '100' },
-        }}
-        onSubmit={handleSubmit}
-      />,
+      <MockResourceBrowserContext>
+        <ImageForm
+          data={{
+            ...data,
+            imageType: NodeName.AssetImage,
+            assetImage: { matrixAssetId: '100', matrixIdentifier: 'matrix-identifier' },
+          }}
+          onSubmit={handleSubmit}
+        />
+      </MockResourceBrowserContext>,
     );
 
     expect(document.querySelector('div[data-headlessui-state="selected"]')).toHaveTextContent('From source');
-    expect(screen.getByLabelText('Asset ID')).toHaveValue('100');
+    expect(screen.getByText('My selected image')).toBeInTheDocument();
   });
 
   it('calculates the height when width changes and aspect ratio is locked', () => {

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

@@ -1,18 +1,18 @@
-import React, { ReactElement, useContext, useState } from 'react';
-import { Input } from '../../../../ui/Fields/Input/Input';
-import { SubmitHandler, useForm } from 'react-hook-form';
+import React, { ReactElement, useState } from 'react';
+import { Controller, SubmitHandler, useForm } from 'react-hook-form';
 import { getImageSize } from 'react-image-size';
+import clsx from 'clsx';
+import { Input } from '../../../../ui/Fields/Input/Input';
 import { ImageAttributes } from '@remirror/extension-image/dist-types/image-extension';
 import Button from '../../../../ui/Button/Button';
 import LinkOffIcon from '@mui/icons-material/LinkOff';
 import InsertLinkRoundedIcon from '@mui/icons-material/InsertLinkRounded';
-import clsx from 'clsx';
 import { NodeName } from '../../../../Extensions/Extensions';
 import { AssetImageAttributes } from '../../../../Extensions/ImageExtension/AssetImageExtension';
 import { DeepPartial } from '../../../../types';
-import { EditorContext } from '../../../../Editor/EditorContext';
-import { noEmptySpacesValidation, regexDataURI } from '../../../../utils/validation';
+import { noEmptySpacesValidation, regexDataURI, hasProperties } from '../../../../utils/validation';
 import { TabOptions, Tabs } from '../../../../ui/Tabs/Tabs';
+import { MatrixAsset } from '../../../../ui/Fields/MatrixAsset/MatrixAsset';
 
 export type ImageFormData = {
   imageType: NodeName;
@@ -33,6 +33,7 @@ export type Dimensions = 'image.width' | 'image.height';
 
 const ImageForm = ({ data, onSubmit }: FormProps): ReactElement => {
   const {
+    control,
     register,
     handleSubmit,
     setValue,
@@ -42,7 +43,6 @@ const ImageForm = ({ data, onSubmit }: FormProps): ReactElement => {
     defaultValues: data,
   });
   const imageType = watch('imageType') || NodeName.AssetImage;
-  const context = useContext(EditorContext);
   const [aspectRatioFromWidth, setAspectRatioFromWidth] = useState(9 / 16);
   const [aspectRatioFromHeight, setAspectRatioFromHeight] = useState(16 / 9);
   const [aspectRatioLocked, setAspectRatioLocked] = useState(true);
@@ -175,28 +175,24 @@ const ImageForm = ({ data, onSubmit }: FormProps): ReactElement => {
         </>
       )}
       {imageType === NodeName.AssetImage && (
-        <>
-          <div className="squiz-fte-form-group mb-2">
-            <Input
-              label="Asset ID"
-              required
-              error={errors?.assetImage?.matrixAssetId?.message}
-              {...register('assetImage.matrixAssetId', {
-                required: 'Asset ID is required',
-                validate: {
-                  isImage: async (assetId) => {
-                    const asset = await context.matrix.resolveMatrixAsset(assetId);
-
-                    if (asset?.type !== 'image') {
-                      return 'Asset ID is invalid or not an image';
-                    }
-                  },
-                  noEmptySpaces: noEmptySpacesValidation,
-                },
-              })}
-            />
-          </div>
-        </>
+        <div className="squiz-fte-form-group mb-2">
+          <Controller
+            control={control}
+            name="assetImage"
+            rules={{
+              validate: hasProperties('An image must be selected', ['matrixIdentifier', 'matrixAssetId']),
+            }}
+            render={({ field: { onChange, value }, fieldState: { error } }) => (
+              <MatrixAsset
+                modalTitle="Insert image"
+                allowedTypes={['image']}
+                value={value}
+                onChange={onChange}
+                error={error?.message}
+              />
+            )}
+          />
+        </div>
       )}
     </form>
   );

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

@@ -2,7 +2,7 @@ import '@testing-library/jest-dom';
 import { screen, fireEvent, waitForElementToBeRemoved, act, waitFor } from '@testing-library/react';
 import { NodeSelection } from 'prosemirror-state';
 import React from 'react';
-import { renderWithEditor } from '../../../../tests';
+import { renderWithEditor, mockResourceBrowserContext } from '../../../../tests';
 import ImageButton from './ImageButton';
 import { getImageSize } from 'react-image-size';
 
@@ -29,14 +29,13 @@ describe('ImageButton', () => {
   });
 
   it('Opens the modal when clicking the keyboard shortcut', async () => {
-    const { editor, elements } = await renderWithEditor(<ImageButton />);
+    const { elements } = await renderWithEditor(<ImageButton />);
 
     // press the keyboard shortcut.
     fireEvent.keyDown(elements.editor, { key: 'l', ctrlKey: true });
 
     // verify the modal opens
-    await act(() => editor.selectText(2));
-    expect(await screen.findByLabelText('Asset ID')).toHaveValue('');
+    expect(await screen.findByRole('button', { name: 'Choose image' })).toBeInTheDocument();
   });
 
   it('Adds a new image', async () => {
@@ -237,21 +236,40 @@ describe('ImageButton', () => {
   it('Adds a new asset image', async () => {
     const matrixIdentifier = 'matrix-api-identifier';
     const matrixDomain = 'https://my-matrix.squiz.net';
-    const { getJsonContent } = await renderWithEditor(<ImageButton />, {
-      content: 'Some nonsense content here',
-      context: {
-        matrix: {
-          matrixIdentifier,
-          matrixDomain,
-          resolveMatrixAsset: () => Promise.resolve({ id: '100', type: 'image' }),
+    const { MockResourceBrowserContext, selectResource } = mockResourceBrowserContext({
+      sources: [{ id: matrixIdentifier }],
+      resources: [
+        {
+          id: 'image-resource-id',
+          name: 'My image resource',
+          type: {
+            code: 'image',
+            name: 'Image',
+          },
         },
-      },
+      ],
     });
 
+    const { getJsonContent } = await renderWithEditor(
+      <MockResourceBrowserContext>
+        <ImageButton />
+      </MockResourceBrowserContext>,
+      {
+        content: 'Some nonsense content here',
+        context: {
+          editor: {
+            matrix: {
+              matrixDomain,
+            },
+          },
+        },
+      },
+    );
+
     // open the modal and add an image.
     await openModal();
     fireEvent.click(screen.getByRole('button', { name: 'From source' }));
-    fireEvent.change(screen.getByLabelText('Asset ID'), { target: { value: '100' } });
+    await selectResource(screen.getByRole('button', { name: 'Choose image' }), 'My image resource');
     fireEvent.click(screen.getByRole('button', { name: 'Apply' }));
 
     await waitForElementToBeRemoved(() => screen.getByRole('button', { name: 'Apply' }));
@@ -262,7 +280,7 @@ describe('ImageButton', () => {
       content: [
         {
           type: 'assetImage',
-          attrs: { matrixAssetId: '100', matrixIdentifier, matrixDomain },
+          attrs: { matrixAssetId: 'image-resource-id', matrixIdentifier, matrixDomain },
         },
         { type: 'text', text: 'Some nonsense content here' },
       ],
@@ -272,22 +290,41 @@ describe('ImageButton', () => {
   it('Updates the attributes of an existing asset image', async () => {
     const matrixIdentifier = 'matrix-api-identifier';
     const matrixDomain = 'https://my-matrix.squiz.net';
-    const { editor, getJsonContent } = await renderWithEditor(<ImageButton />, {
-      content: 'Some <img src="https://httpcats.com/529.jpg" alt="hi" /> nonsense',
-      context: {
-        matrix: {
-          matrixIdentifier,
-          matrixDomain,
-          resolveMatrixAsset: () => Promise.resolve({ id: '100', type: 'image' }),
+    const { MockResourceBrowserContext, selectResource } = mockResourceBrowserContext({
+      sources: [{ id: matrixIdentifier }],
+      resources: [
+        {
+          id: 'image-resource-id',
+          name: 'My image resource',
+          type: {
+            code: 'image',
+            name: 'Image',
+          },
         },
-      },
+      ],
     });
 
+    const { editor, getJsonContent } = await renderWithEditor(
+      <MockResourceBrowserContext>
+        <ImageButton />
+      </MockResourceBrowserContext>,
+      {
+        content: 'Some <img src="https://httpcats.com/529.jpg" alt="hi" /> nonsense',
+        context: {
+          editor: {
+            matrix: {
+              matrixDomain,
+            },
+          },
+        },
+      },
+    );
+
     await act(() => editor.selectText(new NodeSelection(editor.state.doc.resolve(6))));
 
     await openModal();
     fireEvent.click(screen.getByRole('button', { name: 'From source' }));
-    fireEvent.change(screen.getByLabelText('Asset ID'), { target: { value: '100' } });
+    await selectResource(screen.getByRole('button', { name: 'Choose image' }), 'My image resource');
     fireEvent.click(screen.getByRole('button', { name: 'Apply' }));
 
     await waitForElementToBeRemoved(() => screen.getByRole('button', { name: 'Apply' }));
@@ -302,32 +339,21 @@ describe('ImageButton', () => {
         },
         {
           type: 'assetImage',
-          attrs: { matrixAssetId: '100', matrixIdentifier, matrixDomain },
+          attrs: { matrixAssetId: 'image-resource-id', matrixIdentifier, matrixDomain },
         },
         { type: 'text', text: ' nonsense' },
       ],
     });
   });
 
-  it.each([
-    ['Asset ID not provided', '', null, 'Asset ID is required'],
-    ['Asset does not exist', '100', null, 'Asset ID is invalid or not an image'],
-    ['Asset is not an image', '100', { id: 100, type: 'physical_file' }, 'Asset ID is invalid or not an image'],
-  ])(
-    'Shows an error if an invalid asset ID is provided - %s',
-    async (description: string, assetId: string, asset: any, expectedError: string) => {
-      const resolveMatrixAsset = jest.fn(() => Promise.resolve(asset));
-
-      await renderWithEditor(<ImageButton />, { context: { matrix: { resolveMatrixAsset } } });
-
-      await openModal();
-      fireEvent.click(screen.getByRole('button', { name: 'From source' }));
-      fireEvent.change(screen.getByLabelText('Asset ID'), { target: { value: assetId } });
-      await act(() => fireEvent.click(screen.getByRole('button', { name: 'Apply' })));
-
-      expect(screen.getByText(expectedError)).toBeInTheDocument();
-    },
-  );
+  it('Shows an error if a resource is not selected', async () => {
+    await renderWithEditor(<ImageButton />);
+    await openModal();
+    fireEvent.click(screen.getByRole('button', { name: 'From source' }));
+    await act(() => fireEvent.click(screen.getByRole('button', { name: 'Apply' })));
+
+    expect(screen.getByText('An image must be selected')).toBeInTheDocument();
+  });
 
   it('Shows an error if the field value is just an empty space', async () => {
     await renderWithEditor(<ImageButton />);

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

@@ -4,6 +4,7 @@ import React from 'react';
 import { LinkForm } from './LinkForm';
 import { LinkTarget } from '../../../../Extensions/LinkExtension/common';
 import { MarkName } from '../../../../Extensions/Extensions';
+import { mockResourceBrowserContext } from '../../../../../tests';
 
 describe('Link Form', () => {
   const handleSubmit = jest.fn();
@@ -28,10 +29,10 @@ describe('Link Form', () => {
     render(<LinkForm onSubmit={handleSubmit} />);
 
     expect(document.querySelector('div[data-headlessui-state="selected"]')).toHaveTextContent('From source');
-    expect(screen.getByLabelText('Asset ID')).toHaveValue('');
+    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(2);
+    expect(document.querySelectorAll('label')).toHaveLength(1);
   });
 
   it('Renders the form with the expected fields for arbitrary links', () => {
@@ -46,12 +47,21 @@ describe('Link Form', () => {
   });
 
   it('Renders the form with the expected fields for asset links', () => {
-    render(<LinkForm data={{ ...data, linkType: MarkName.AssetLink }} onSubmit={handleSubmit} />);
+    const { MockResourceBrowserContext } = mockResourceBrowserContext({
+      sources: [{ id: 'my-source-id' }],
+      resources: [{ id: '100', name: 'My selected resource' }],
+    });
+
+    render(
+      <MockResourceBrowserContext>
+        <LinkForm data={{ ...data, linkType: MarkName.AssetLink }} onSubmit={handleSubmit} />
+      </MockResourceBrowserContext>,
+    );
 
     expect(document.querySelector('div[data-headlessui-state="selected"]')).toHaveTextContent('From source');
-    expect(screen.getByLabelText('Asset ID')).toHaveValue('100');
+    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(2);
+    expect(document.querySelectorAll('label')).toHaveLength(1);
   });
 });

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

@@ -1,17 +1,17 @@
-import React, { ReactElement, useContext } from 'react';
+import React, { ReactElement } from 'react';
 import clsx from 'clsx';
-import { SubmitHandler, useForm } from 'react-hook-form';
+import { Controller, SubmitHandler, useForm } from 'react-hook-form';
 import { FromToProps } from 'remirror';
 import { Input } from '../../../../ui/Fields/Input/Input';
 import { Checkbox } from '../../../../ui/Fields/Checkbox/Checkbox';
 import { UpdateLinkProps } from '../../../../Extensions/LinkExtension/LinkExtension';
 import { UpdateAssetLinkProps } from '../../../../Extensions/LinkExtension/AssetLinkExtension';
 import { LinkTarget } from '../../../../Extensions/LinkExtension/common';
-import { EditorContext } from '../../../../Editor/EditorContext';
 import { MarkName } from '../../../../Extensions/Extensions';
 import { DeepPartial } from '../../../../types';
-import { noEmptySpacesValidation } from '../../../../utils/validation';
+import { hasProperties, noEmptySpacesValidation } from '../../../../utils/validation';
 import { TabOptions, Tabs } from '../../../../ui/Tabs/Tabs';
+import { MatrixAsset } from '../../../../ui/Fields/MatrixAsset/MatrixAsset';
 
 export type LinkFormData = {
   linkType: MarkName;
@@ -32,8 +32,8 @@ const linkTypeOptions: TabOptions = {
 };
 
 export const LinkForm = ({ data, onSubmit }: FormProps): ReactElement => {
-  const context = useContext(EditorContext);
   const {
+    control,
     register,
     handleSubmit,
     setValue,
@@ -101,21 +101,15 @@ export const LinkForm = ({ data, onSubmit }: FormProps): ReactElement => {
       {linkType === MarkName.AssetLink && (
         <>
           <div className={clsx('squiz-fte-form-group mb-2')}>
-            <Input
-              label="Asset ID"
-              required
-              error={errors?.assetLink?.matrixAssetId?.message}
-              {...register('assetLink.matrixAssetId', {
-                required: 'Asset ID is required',
-                validate: {
-                  isValidAsset: async (assetId: string | undefined) => {
-                    if (assetId && !(await context.matrix.resolveMatrixAsset(assetId))) {
-                      return 'Invalid asset ID';
-                    }
-                  },
-                  noEmptySpaces: noEmptySpacesValidation,
-                },
-              })}
+            <Controller
+              control={control}
+              name="assetLink"
+              rules={{
+                validate: hasProperties('An asset must be selected', ['matrixIdentifier', 'matrixAssetId']),
+              }}
+              render={({ field: { onChange, value }, fieldState: { error } }) => (
+                <MatrixAsset modalTitle="Insert link" value={value} onChange={onChange} error={error?.message} />
+              )}
             />
           </div>
           <div className={clsx('squiz-fte-form-group mb-2')}>

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

@@ -1,7 +1,7 @@
 import '@testing-library/jest-dom';
 import { act, screen, fireEvent, waitForElementToBeRemoved } from '@testing-library/react';
 import React from 'react';
-import { renderWithEditor } from '../../../../tests';
+import { renderWithEditor, mockResourceBrowserContext } from '../../../../tests';
 import LinkButton from './LinkButton';
 
 describe('LinkButton', () => {
@@ -236,19 +236,29 @@ describe('LinkButton', () => {
   it('Add a new asset link', async () => {
     const matrixIdentifier = 'matrix-api-identifier';
     const matrixDomain = 'https://my-matrix.squiz.net';
-    const { getJsonContent } = await renderWithEditor(<LinkButton />, {
-      context: {
-        matrix: {
-          matrixIdentifier,
-          matrixDomain,
-          resolveMatrixAsset: () => Promise.resolve({ id: '100', type: 'physical_file' }),
+    const { MockResourceBrowserContext, selectResource } = mockResourceBrowserContext({
+      sources: [{ id: matrixIdentifier }],
+      resources: [{ id: 'my-resource-id', name: 'My resource' }],
+    });
+
+    const { getJsonContent } = await renderWithEditor(
+      <MockResourceBrowserContext>
+        <LinkButton />
+      </MockResourceBrowserContext>,
+      {
+        context: {
+          editor: {
+            matrix: {
+              matrixDomain,
+            },
+          },
         },
       },
-    });
+    );
 
     await openModal();
     fireEvent.click(screen.getByRole('button', { name: 'From source' }));
-    fireEvent.change(screen.getByLabelText('Asset ID'), { target: { value: '123' } });
+    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' }));
 
@@ -264,7 +274,7 @@ describe('LinkButton', () => {
           marks: [
             {
               type: 'assetLink',
-              attrs: { matrixAssetId: '123', target: '_self', matrixDomain, matrixIdentifier },
+              attrs: { matrixAssetId: 'my-resource-id', target: '_self', matrixDomain, matrixIdentifier },
             },
           ],
         },
@@ -275,24 +285,34 @@ describe('LinkButton', () => {
   it('Updates an existing link to be an asset link', async () => {
     const matrixIdentifier = 'matrix-api-identifier';
     const matrixDomain = 'https://my-matrix.squiz.net';
-    const { editor, getJsonContent } = await renderWithEditor(<LinkButton />, {
-      content:
-        '<a href="https://www.example.org/my-link">Sample link</a> with ' +
-        '<a href="https://www.example.org/another-link">another link</a>',
-      context: {
-        matrix: {
-          matrixIdentifier,
-          matrixDomain,
-          resolveMatrixAsset: () => Promise.resolve({ id: '100', type: 'physical_file' }),
+    const { MockResourceBrowserContext, selectResource } = mockResourceBrowserContext({
+      sources: [{ id: matrixIdentifier }],
+      resources: [{ id: 'my-resource-id', name: 'My resource' }],
+    });
+
+    const { editor, getJsonContent } = await renderWithEditor(
+      <MockResourceBrowserContext>
+        <LinkButton />
+      </MockResourceBrowserContext>,
+      {
+        content:
+          '<a href="https://www.example.org/my-link">Sample link</a> with ' +
+          '<a href="https://www.example.org/another-link">another link</a>',
+        context: {
+          editor: {
+            matrix: {
+              matrixDomain,
+            },
+          },
         },
       },
-    });
+    );
 
     await act(() => editor.selectText(5));
 
     await openModal();
     fireEvent.click(screen.getByRole('button', { name: 'From source' }));
-    fireEvent.change(screen.getByLabelText('Asset ID'), { target: { value: '123' } });
+    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' }));
 
@@ -308,7 +328,7 @@ describe('LinkButton', () => {
           marks: [
             {
               type: 'assetLink',
-              attrs: { matrixAssetId: '123', target: '_blank', matrixDomain, matrixIdentifier },
+              attrs: { matrixAssetId: 'my-resource-id', target: '_blank', matrixDomain, matrixIdentifier },
             },
           ],
         },
@@ -327,18 +347,14 @@ describe('LinkButton', () => {
     });
   });
 
-  it('Shows an error if an invalid asset ID is provided', async () => {
-    const resolveMatrixAsset = jest.fn(() => Promise.resolve(null));
-
-    await renderWithEditor(<LinkButton />, { context: { matrix: { resolveMatrixAsset } } });
+  it('Shows an error if no asset is selected', async () => {
+    await renderWithEditor(<LinkButton />);
 
     await openModal();
     fireEvent.click(screen.getByRole('button', { name: 'From source' }));
-    fireEvent.change(screen.getByLabelText('Asset ID'), { target: { value: 'invalid-asset-id' } });
     await act(() => fireEvent.click(screen.getByRole('button', { name: 'Apply' })));
 
-    expect(screen.getByText('Invalid asset ID')).toBeInTheDocument();
-    expect(resolveMatrixAsset).toHaveBeenCalledWith('invalid-asset-id');
+    expect(screen.getByText('An asset must be selected')).toBeInTheDocument();
   });
 
   it('Shows an error if a required field is not provided', async () => {