@squiz/formatted-text-editor 1.33.1-alpha.2 → 1.33.1-alpha.4

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 { Select, SelectOptions } from '../../../../ui/Fields/Select/Select';
-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;
@@ -20,9 +20,9 @@ export type ImageFormData = {
   assetImage: AssetImageAttributes;
 };
 
-const imageTypeOptions: SelectOptions = {
-  [NodeName.Image]: { label: 'External image' },
-  [NodeName.AssetImage]: { label: 'Asset image' },
+const imageTypeOptions: TabOptions = {
+  [NodeName.AssetImage]: { label: 'From source' },
+  [NodeName.Image]: { label: 'From URL' },
 };
 
 export type FormProps = {
@@ -33,6 +33,7 @@ export type Dimensions = 'image.width' | 'image.height';
 
 const ImageForm = ({ data, onSubmit }: FormProps): ReactElement => {
   const {
+    control,
     register,
     handleSubmit,
     setValue,
@@ -41,8 +42,7 @@ const ImageForm = ({ data, onSubmit }: FormProps): ReactElement => {
   } = useForm<ImageFormData>({
     defaultValues: data,
   });
-  const imageType = watch('imageType') || NodeName.Image;
-  const context = useContext(EditorContext);
+  const imageType = watch('imageType') || NodeName.AssetImage;
   const [aspectRatioFromWidth, setAspectRatioFromWidth] = useState(9 / 16);
   const [aspectRatioFromHeight, setAspectRatioFromHeight] = useState(16 / 9);
   const [aspectRatioLocked, setAspectRatioLocked] = useState(true);
@@ -88,10 +88,8 @@ const ImageForm = ({ data, onSubmit }: FormProps): ReactElement => {
 
   return (
     <form className="squiz-fte-form" onSubmit={handleSubmit(onSubmit)}>
-      <div className="squiz-fte-form-group mb-2">
-        <Select
-          name="imageType"
-          label="Type"
+      <div className="squiz-fte-form-group mb-4">
+        <Tabs
           value={imageType}
           options={imageTypeOptions}
           onChange={(value) => setValue('imageType', value as NodeName)}
@@ -121,19 +119,6 @@ const ImageForm = ({ data, onSubmit }: FormProps): ReactElement => {
               })}
             />
           </div>
-          <div className="squiz-fte-form-group mb-2">
-            <Input
-              label="Alternative description"
-              required
-              error={errors?.image?.alt?.message}
-              {...register('image.alt', {
-                required: 'Alternative description is required',
-                validate: {
-                  noEmptySpaces: noEmptySpacesValidation,
-                },
-              })}
-            />
-          </div>
           <div className="flex flex-row">
             <div className="squiz-fte-form-group mb-2">
               <Input
@@ -146,7 +131,7 @@ const ImageForm = ({ data, onSubmit }: FormProps): ReactElement => {
                   required: 'Width is required',
                   validate: {
                     isValidWidth: (value) => {
-                      if (value && !(value > 0)) {
+                      if (value && !((value as number) > 0)) {
                         return 'Must be higher than 0';
                       }
                     },
@@ -175,7 +160,7 @@ const ImageForm = ({ data, onSubmit }: FormProps): ReactElement => {
                   required: 'Height is required',
                   validate: {
                     isValidHeight: (value) => {
-                      if (value && !(value > 0)) {
+                      if (value && !((value as number) > 0)) {
                         return 'Must be higher than 0';
                       }
                     },
@@ -184,32 +169,31 @@ const ImageForm = ({ data, onSubmit }: FormProps): ReactElement => {
               />
             </div>
           </div>
-        </>
-      )}
-      {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,
-                },
-              })}
-            />
+            <Input label="Alternative description" error={errors?.image?.alt?.message} {...register('image.alt')} />
           </div>
         </>
       )}
+      {imageType === NodeName.AssetImage && (
+        <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, select } from '../../../../tests';
+import { renderWithEditor, mockResourceBrowserContext } from '../../../../tests';
 import ImageButton from './ImageButton';
 import { getImageSize } from 'react-image-size';
 
@@ -12,6 +12,7 @@ describe('ImageButton', () => {
   const openModal = async () => {
     fireEvent.click(screen.getByRole('button', { name: 'Image (cmd+L)' }));
     await screen.findByRole('button', { name: 'Apply' });
+    fireEvent.click(screen.getByRole('button', { name: 'From URL' }));
   };
 
   beforeEach(() => {
@@ -28,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('Source')).toHaveValue('');
+    expect(await screen.findByRole('button', { name: 'Choose image' })).toBeInTheDocument();
   });
 
   it('Adds a new image', async () => {
@@ -215,7 +215,10 @@ describe('ImageButton', () => {
     fireEvent.change(screen.getByLabelText('Source'), { target: { value: 'https://httpcats.com/529.jpg' } });
     fireEvent.change(screen.getByLabelText('Alternative description'), { target: { value: '' } });
     fireEvent.click(screen.getByRole('button', { name: 'Apply' }));
-    expect(await screen.findByText('Alternative description is required')).toBeInTheDocument();
+
+    await waitFor(() => {
+      expect(document.querySelector('img[src="https://httpcats.com/529.jpg"]')).toBeInTheDocument();
+    });
   });
 
   it('Adds a new image with no width or height text', async () => {
@@ -233,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();
-    select(screen.getByLabelText('Type'), 'Asset image');
-    fireEvent.change(screen.getByLabelText('Asset ID'), { target: { value: '100' } });
+    fireEvent.click(screen.getByRole('button', { name: 'From source' }));
+    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' }));
@@ -258,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' },
       ],
@@ -268,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();
-    select(screen.getByLabelText('Type'), 'Asset image');
-    fireEvent.change(screen.getByLabelText('Asset ID'), { target: { value: '100' } });
+    fireEvent.click(screen.getByRole('button', { name: 'From source' }));
+    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' }));
@@ -298,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();
-      select(screen.getByLabelText('Type'), 'Asset image');
-      fireEvent.change(screen.getByLabelText('Asset ID'), { target: { value: assetId } });
-      await act(() => fireEvent.click(screen.getByRole('button', { name: 'Apply' })));
+  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(expectedError)).toBeInTheDocument();
-    },
-  );
+    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 />);
@@ -332,11 +362,8 @@ describe('ImageButton', () => {
     await act(async () => {
       fireEvent.change(screen.getByLabelText('Source'), { target: { value: ' ' } });
     });
-    await act(async () => {
-      fireEvent.change(screen.getByLabelText('Alternative description'), { target: { value: ' ' } });
-    });
     await act(() => fireEvent.click(screen.getByRole('button', { name: 'Apply' })));
 
-    expect(screen.getAllByText('Empty space is not allowed')).toHaveLength(2);
+    expect(screen.getAllByText('Empty space is not allowed')).toHaveLength(1);
   });
 });

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

@@ -13,6 +13,7 @@ const mockSubmitFunction = jest.fn();
 const mockCancelFunction = jest.fn();
 const setup = async () => {
   const utils = await renderWithEditor(<ImageModal onCancel={mockCancelFunction} onSubmit={mockSubmitFunction} />);
+  fireEvent.click(screen.getByRole('button', { name: 'From URL' }));
   const sourceInput = screen.getByRole('textbox', { name: /source/i }) as HTMLInputElement;
   const altInput = screen.getByRole('textbox', { name: /alt/i }) as HTMLInputElement;
   const widthInput = screen.getByRole('spinbutton', { name: /Width/i }) as HTMLInputElement;

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

@@ -1,6 +1,7 @@
 import ImageForm, { ImageFormData } from './Form/ImageForm';
 import React from 'react';
 import { useCurrentSelection } from '@remirror/react';
+import ImageRoundedIcon from '@mui/icons-material/ImageRounded';
 import FormModal from '../../../ui/Modal/FormModal';
 import { SubmitHandler } from 'react-hook-form';
 import { NodeSelection } from 'prosemirror-state';
@@ -16,13 +17,13 @@ const ImageModal = ({ onCancel, onSubmit }: ImageModalProps) => {
   const currentImage = selection?.node;
   const currentImageAttrs = { ...currentImage?.attrs };
   const formData = {
-    imageType: currentImage?.type.name === NodeName.AssetImage ? NodeName.AssetImage : NodeName.Image,
+    imageType: currentImage?.type.name === NodeName.Image ? NodeName.Image : NodeName.AssetImage,
     image: currentImage?.type?.name === NodeName.Image ? currentImageAttrs : {},
     assetImage: currentImage?.type?.name === NodeName.AssetImage ? currentImageAttrs : {},
   };
 
   return (
-    <FormModal title="Image" onCancel={onCancel}>
+    <FormModal title="Image" icon={<ImageRoundedIcon />} onCancel={onCancel}>
       <ImageForm data={formData} onSubmit={onSubmit} />
     </FormModal>
   );

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();
@@ -27,32 +28,40 @@ describe('Link Form', () => {
   it('Renders the form with expected default values when no data is provided', () => {
     render(<LinkForm onSubmit={handleSubmit} />);
 
-    expect(screen.getByLabelText('Type')).toHaveTextContent('Link to URL');
-    expect(screen.getByLabelText('URL')).toHaveValue('');
+    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(screen.getByLabelText('Title')).toHaveValue('');
-    expect(screen.getByLabelText('Target')).toHaveTextContent('Current window');
-    expect(document.querySelectorAll('label')).toHaveLength(5);
+    expect(document.querySelector('div.squiz-fte-checkbox')).toHaveTextContent('Open link in new window');
+    expect(document.querySelectorAll('label')).toHaveLength(1);
   });
 
   it('Renders the form with the expected fields for arbitrary links', () => {
     render(<LinkForm data={data} onSubmit={handleSubmit} />);
 
-    expect(screen.getByLabelText('Type')).toHaveTextContent('Link to URL');
+    expect(document.querySelector('div[data-headlessui-state="selected"]')).toHaveTextContent('From URL');
     expect(screen.getByLabelText('URL')).toHaveValue('https://www.squiz.net/link-form');
     expect(screen.getByLabelText('Text')).toHaveValue('Link text');
     expect(screen.getByLabelText('Title')).toHaveValue('Link title');
-    expect(screen.getByLabelText('Target')).toHaveTextContent('New window');
-    expect(document.querySelectorAll('label')).toHaveLength(5);
+    expect(document.querySelector('div.squiz-fte-checkbox')).toHaveTextContent('Open link in new window');
+    expect(document.querySelectorAll('label')).toHaveLength(3);
   });
 
   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' }],
+    });
 
-    expect(screen.getByLabelText('Type')).toHaveTextContent('Link to asset');
-    expect(screen.getByLabelText('Asset ID')).toHaveValue('100');
+    render(
+      <MockResourceBrowserContext>
+        <LinkForm data={{ ...data, linkType: MarkName.AssetLink }} onSubmit={handleSubmit} />
+      </MockResourceBrowserContext>,
+    );
+
+    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(screen.getByLabelText('Target')).toHaveTextContent('New window');
-    expect(document.querySelectorAll('label')).toHaveLength(4);
+    expect(document.querySelector('div.squiz-fte-checkbox')).toHaveTextContent('Open link in new window');
+    expect(document.querySelectorAll('label')).toHaveLength(1);
   });
 });

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

@@ -1,16 +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 { Select, SelectOptions } from '../../../../ui/Fields/Select/Select';
+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;
@@ -25,19 +26,14 @@ export type FormProps = {
   onSubmit: SubmitHandler<LinkFormData>;
 };
 
-const linkTypeOptions: SelectOptions = {
-  [MarkName.Link]: { label: 'Link to URL' },
-  [MarkName.AssetLink]: { label: 'Link to asset' },
-};
-
-const targetOptions: SelectOptions = {
-  [LinkTarget.Self]: { label: 'Current window' },
-  [LinkTarget.Blank]: { label: 'New window' },
+const linkTypeOptions: TabOptions = {
+  [MarkName.AssetLink]: { label: 'From source' },
+  [MarkName.Link]: { label: 'From URL' },
 };
 
 export const LinkForm = ({ data, onSubmit }: FormProps): ReactElement => {
-  const context = useContext(EditorContext);
   const {
+    control,
     register,
     handleSubmit,
     setValue,
@@ -46,14 +42,12 @@ export const LinkForm = ({ data, onSubmit }: FormProps): ReactElement => {
   } = useForm<LinkFormData>({
     defaultValues: data,
   });
-  const linkType = watch('linkType') || MarkName.Link;
+  const linkType = watch('linkType') || MarkName.AssetLink;
 
   return (
     <form className="squiz-fte-form" onSubmit={handleSubmit(onSubmit)}>
-      <div className="squiz-fte-form-group mb-2">
-        <Select
-          name="linkType"
-          label="Type"
+      <div className="squiz-fte-form-group mb-4">
+        <Tabs
           value={linkType}
           options={linkTypeOptions}
           onChange={(value) => setValue('linkType', value as MarkName)}
@@ -90,25 +84,15 @@ export const LinkForm = ({ data, onSubmit }: FormProps): ReactElement => {
             />
           </div>
           <div className={clsx('squiz-fte-form-group mb-2')}>
-            <Input
-              label="Title"
-              required
-              error={errors?.link?.title?.message}
-              {...register('link.title', {
-                required: 'Title is required',
-                validate: {
-                  noEmptySpaces: noEmptySpacesValidation,
-                },
-              })}
-            />
+            <Input label="Title" error={errors?.link?.title?.message} {...register('link.title')} />
           </div>
-          <div className={clsx('squiz-fte-form-group mb-0')}>
-            <Select
-              name="link.target"
-              label="Target"
-              value={data?.link?.target || '_self'}
-              options={targetOptions}
+          <div className={clsx('squiz-fte-form-group mb-2')}>
+            <Checkbox
+              label="Open link in new window"
               onChange={(value) => setValue('link.target', value as LinkTarget)}
+              defaultChecked={data?.link?.target === LinkTarget.Blank}
+              unchecked={LinkTarget.Self}
+              checked={LinkTarget.Blank}
             />
           </div>
         </>
@@ -117,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')}>
@@ -147,13 +125,13 @@ export const LinkForm = ({ data, onSubmit }: FormProps): ReactElement => {
               })}
             />
           </div>
-          <div className={clsx('squiz-fte-form-group mb-0')}>
-            <Select
-              name="assetLink.target"
-              label="Target"
-              value={data?.assetLink?.target || '_self'}
-              options={targetOptions}
+          <div className={clsx('squiz-fte-form-group mb-2')}>
+            <Checkbox
+              label="Open link in new window"
               onChange={(value) => setValue('assetLink.target', value as LinkTarget)}
+              defaultChecked={data?.assetLink?.target === '_blank'}
+              unchecked={'_self' as LinkTarget}
+              checked={'_blank' as LinkTarget}
             />
           </div>
         </>