@squiz/formatted-text-editor 1.21.1-alpha.2 → 1.21.1-alpha.21

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

@@ -0,0 +1,83 @@
+import '@testing-library/jest-dom';
+import { screen, fireEvent } from '@testing-library/react';
+import React from 'react';
+import { renderWithEditor } from '../../../../tests';
+import ImageModal from './ImageModal';
+
+const mockSubmitFunction = jest.fn();
+const mockCancelFunction = jest.fn();
+const setup = () => {
+  const utils = renderWithEditor(<ImageModal onCancel={mockCancelFunction} onSubmit={mockSubmitFunction} />);
+  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;
+  const heightInput = screen.getByRole('spinbutton', { name: /Height/i }) as HTMLInputElement;
+  return {
+    sourceInput,
+    altInput,
+    widthInput,
+    heightInput,
+    ...utils,
+  };
+};
+
+describe('ImageModal', () => {
+  it('Renders the modal with title', async () => {
+    await renderWithEditor(<ImageModal onCancel={mockCancelFunction} onSubmit={mockSubmitFunction} />);
+    const modalHeading = screen.getByRole('heading', { name: 'Image' });
+    expect(modalHeading).toBeInTheDocument();
+  });
+
+  it('Populates the source field when a source is supplied', async () => {
+    const { sourceInput } = setup();
+    fireEvent.change(sourceInput, { target: { value: 'https://httpcats.com/302.jpg' } });
+    expect(sourceInput.value).toBe('https://httpcats.com/302.jpg');
+  });
+
+  it('Renders empty width and height fields if the image source is empty', async () => {
+    const { sourceInput, widthInput, heightInput } = setup();
+    fireEvent.change(sourceInput, { target: { value: '' } });
+    expect(widthInput.value).toBe('');
+    expect(heightInput.value).toBe('');
+  });
+
+  it('Updates the height field with aspect ratio based value from width', async () => {
+    const { widthInput, heightInput } = setup();
+    fireEvent.change(widthInput, { target: { value: '300' } });
+    expect(widthInput.value).toBe('300');
+    expect(heightInput.value).toBe('168.75');
+  });
+  it('Updates the width field with aspect ratio based value from height', async () => {
+    const { widthInput, heightInput } = setup();
+    fireEvent.change(heightInput, { target: { value: '100' } });
+    expect(heightInput.value).toBe('100');
+    expect(widthInput.value).toBe('177.78');
+  });
+  it('Does not change the width when height is changed and aspect ratio link is off', () => {
+    const { widthInput, heightInput } = setup();
+    fireEvent.change(heightInput, { target: { value: '100' } });
+    expect(heightInput.value).toBe('100');
+    expect(widthInput.value).toBe('177.78');
+    fireEvent.click(screen.getByRole('button', { name: /constrain properties/i }));
+    fireEvent.change(heightInput, { target: { value: '200' } });
+    expect(heightInput.value).toBe('200');
+    expect(widthInput.value).toBe('177.78');
+  });
+  it('Does not change the height when width is changed and aspect ratio link is off', () => {
+    const { widthInput, heightInput } = setup();
+    fireEvent.change(widthInput, { target: { value: '450' } });
+    expect(widthInput.value).toBe('450');
+    expect(heightInput.value).toBe('253.13');
+    fireEvent.click(screen.getByRole('button', { name: /constrain properties/i }));
+    fireEvent.change(widthInput, { target: { value: '600' } });
+    expect(widthInput.value).toBe('600');
+    expect(heightInput.value).toBe('253.13');
+  });
+  it('Changes the icon when aspect ratio button is toggled', () => {
+    renderWithEditor(<ImageModal onCancel={mockCancelFunction} onSubmit={mockSubmitFunction} />);
+    expect(screen.getByTestId('InsertLinkRoundedIcon')).toBeInTheDocument();
+    fireEvent.click(screen.getByRole('button', { name: /constrain properties/i }));
+    expect(screen.queryByTestId('InsertLinkRoundedIcon')).not.toBeInTheDocument();
+    expect(screen.getByTestId('LinkOffIcon')).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,24 @@
+import ImageForm, { ImageFormData } from './Form/ImageForm';
+import React from 'react';
+import { useCurrentSelection } from '@remirror/react';
+import FormModal from '../../../ui/Modal/FormModal';
+import { SubmitHandler } from 'react-hook-form';
+import { NodeSelection } from 'prosemirror-state';
+
+type ImageModalProps = {
+  onCancel: () => void;
+  onSubmit: SubmitHandler<ImageFormData>;
+};
+
+const ImageModal = ({ onCancel, onSubmit }: ImageModalProps) => {
+  const selection = useCurrentSelection() as NodeSelection;
+  const currentImage = selection?.node;
+
+  return (
+    <FormModal title="Image" onCancel={onCancel}>
+      <ImageForm data={{ ...currentImage?.attrs, src: currentImage?.attrs.src }} onSubmit={onSubmit} />
+    </FormModal>
+  );
+};
+
+export default ImageModal;

package/src/EditorToolbar/Tools/Italic/ItalicButton.spec.tsx

@@ -14,6 +14,6 @@ describe('Italic button', () => {
     expect(screen.getByRole('button', { name: 'Italic (cmd+I)' }).classList.contains('squiz-fte-btn')).toBeTruthy();
     const italic = screen.getByRole('button', { name: 'Italic (cmd+I)' });
     fireEvent.click(italic);
-    expect(italic.classList.contains('is-active')).toBeTruthy();
+    expect(italic.classList.contains('squiz-fte-btn--is-active')).toBeTruthy();
   });
 });

package/src/EditorToolbar/Tools/Italic/ItalicButton.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useCommands, useActive, useChainedCommands } from '@remirror/react';
 import { ItalicExtension } from '@remirror/extension-italic';
-import ToolbarButton from '../../../ui/ToolbarButton/ToolbarButton';
+import Button from '../../../ui/Button/Button';
 import FormatItalicRoundedIcon from '@mui/icons-material/FormatItalicRounded';
 
 const ItalicButton = () => {
@@ -17,7 +17,7 @@ const ItalicButton = () => {
   };
 
   return (
-    <ToolbarButton
+    <Button
       handleOnClick={handleSelect}
       isDisabled={!enabled}
       isActive={active.italic()}

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

@@ -1,30 +1,58 @@
 import '@testing-library/jest-dom';
 import { render, screen } from '@testing-library/react';
 import React from 'react';
-import LinkForm from './LinkForm';
+import { LinkForm } from './LinkForm';
+import { LinkTarget } from '../../../../Extensions/LinkExtension/common';
+import { MarkName } from '../../../../Extensions/Extensions';
 
 describe('Link Form', () => {
   const handleSubmit = jest.fn();
   const data = {
-    href: 'https://www.squiz.net/link-form',
-    target: '_blank',
-    title: 'Link title',
+    linkType: MarkName.Link,
     text: 'Link text',
+    range: { from: 10, to: 15 },
+    link: {
+      href: 'https://www.squiz.net/link-form',
+      target: LinkTarget.Blank,
+      title: 'Link title',
+    },
+    assetLink: {
+      matrixAssetId: '100',
+      matrixIdentifier: 'matrix-identifier',
+      matrixDomain: 'my-matrix.squiz.net',
+      target: LinkTarget.Blank,
+    },
   };
 
-  it('Renders the form with the relevant fields', () => {
+  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(screen.getByLabelText('Text')).toHaveValue('');
+    expect(screen.getByLabelText('Title')).toHaveValue('');
+    expect(screen.getByLabelText('Target')).toHaveTextContent('Current window');
+    expect(document.querySelectorAll('label')).toHaveLength(5);
+  });
+
+  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(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);
   });
 
-  it('Renders the form with the specified class', () => {
-    render(<LinkForm data={data} onSubmit={handleSubmit} />);
+  it('Renders the form with the expected fields for asset links', () => {
+    render(<LinkForm data={{ ...data, linkType: MarkName.AssetLink }} onSubmit={handleSubmit} />);
 
-    const formClass = document.querySelector('.squiz-fte-form');
-    expect(formClass).toBeInTheDocument();
+    expect(screen.getByLabelText('Type')).toHaveTextContent('Link to asset');
+    expect(screen.getByLabelText('Asset ID')).toHaveValue('100');
+    expect(screen.getByLabelText('Text')).toHaveValue('Link text');
+    expect(screen.getByLabelText('Target')).toHaveTextContent('New window');
+    expect(document.querySelectorAll('label')).toHaveLength(4);
   });
 });

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

@@ -1,48 +1,118 @@
-import React, { ReactElement } from 'react';
-import { TextInput } from '../../../../ui/Inputs/Text/TextInput';
-import { Select, SelectOptions } from '../../../../ui/Inputs/Select/Select';
+import React, { ReactElement, useContext } from 'react';
+import clsx from 'clsx';
 import { SubmitHandler, useForm } from 'react-hook-form';
-import { UpdateLinkOptions } from '../../../../Extensions/LinkExtension/LinkExtension';
+import { FromToProps } from 'remirror';
+import { Input } from '../../../../ui/Fields/Input/Input';
+import { Select, SelectOptions } from '../../../../ui/Fields/Select/Select';
+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';
 
-export type LinkFormData = Pick<UpdateLinkOptions, 'href' | 'target' | 'title' | 'text'>;
+export type LinkFormData = {
+  linkType: MarkName;
+  text: string;
+  link: UpdateLinkProps['attrs'];
+  assetLink: UpdateAssetLinkProps['attrs'];
+  range: FromToProps;
+};
 
 export type FormProps = {
-  data: Partial<LinkFormData>;
+  data?: DeepPartial<LinkFormData>;
   onSubmit: SubmitHandler<LinkFormData>;
 };
 
-const selectOptions: SelectOptions = {
-  _self: { label: 'Current window' },
-  _blank: { label: 'New window' },
+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 LinkForm = ({ data, onSubmit }: FormProps): ReactElement => {
-  const { register, handleSubmit, setValue } = useForm<LinkFormData>({
+export const LinkForm = ({ data, onSubmit }: FormProps): ReactElement => {
+  const context = useContext(EditorContext);
+  const {
+    register,
+    handleSubmit,
+    setValue,
+    watch,
+    formState: { errors },
+  } = useForm<LinkFormData>({
     defaultValues: data,
   });
+  const linkType = watch('linkType') || MarkName.Link;
 
   return (
     <form className="squiz-fte-form" onSubmit={handleSubmit(onSubmit)}>
       <div className="squiz-fte-form-group mb-2">
-        <TextInput label="URL" {...register('href')} />
-      </div>
-      <div className="squiz-fte-form-group mb-2">
-        <TextInput label="Text" {...register('text')} />
-      </div>
-      <div className="squiz-fte-form-group mb-2">
-        <TextInput label="Title" {...register('title')} />
-      </div>
-      <div className="squiz-fte-form-group mb-0">
         <Select
-          name="target"
-          label="Target"
-          value={data.target || '_self'}
-          options={selectOptions}
-          onChange={(value) => setValue('target', value)}
+          name="linkType"
+          label="Type"
+          value={linkType}
+          options={linkTypeOptions}
+          onChange={(value) => setValue('linkType', value as MarkName)}
         />
       </div>
+      {/* Arbitrary link form fields */}
+      {linkType === MarkName.Link && (
+        <>
+          <div className={clsx('squiz-fte-form-group mb-2')}>
+            <Input label="URL" {...register('link.href')} />
+          </div>
+          <div className={clsx('squiz-fte-form-group mb-2')}>
+            <Input label="Text" {...register('text')} />
+          </div>
+          <div className={clsx('squiz-fte-form-group mb-2')}>
+            <Input label="Title" {...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}
+              onChange={(value) => setValue('link.target', value as LinkTarget)}
+            />
+          </div>
+        </>
+      )}
+      {/* Asset link form fields */}
+      {linkType === MarkName.AssetLink && (
+        <>
+          <div className={clsx('squiz-fte-form-group mb-2')}>
+            <Input
+              label="Asset ID"
+              error={errors?.assetLink?.matrixAssetId?.message}
+              {...register('assetLink.matrixAssetId', {
+                validate: {
+                  isValidAsset: async (assetId: string | undefined) => {
+                    if (assetId && !(await context.matrix.isValidMatrixAssetId(assetId))) {
+                      return 'Invalid asset ID';
+                    }
+                  },
+                },
+              })}
+            />
+          </div>
+          <div className={clsx('squiz-fte-form-group mb-2')}>
+            <Input label="Text" {...register('text')} />
+          </div>
+          <div className={clsx('squiz-fte-form-group mb-0')}>
+            <Select
+              name="assetLink.target"
+              label="Target"
+              value={data?.link?.target || '_self'}
+              options={targetOptions}
+              onChange={(value) => setValue('assetLink.target', value as LinkTarget)}
+            />
+          </div>
+        </>
+      )}
     </form>
   );
 };
-
-export default LinkForm;

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

@@ -37,7 +37,7 @@ describe('LinkButton', () => {
           marks: [
             {
               type: 'link',
-              attrs: { auto: false, href: 'https://www.squiz.net/link-button', target: '_blank', title: 'Link title' },
+              attrs: { href: 'https://www.squiz.net/link-button', target: '_blank', title: 'Link title' },
             },
           ],
         },
@@ -75,7 +75,7 @@ describe('LinkButton', () => {
           marks: [
             {
               type: 'link',
-              attrs: { auto: false, href: 'https://www.example.org/updated-link', target: null, title: null },
+              attrs: { href: 'https://www.example.org/updated-link', target: '_self', title: null },
             },
           ],
         },
@@ -134,25 +134,7 @@ describe('LinkButton', () => {
     });
   });
 
-  it.each([
-    ['Link fully selected', 1, 12, 'Sample link'],
-    ['Link partially selected', 2, 4, 'Sample link'],
-    ['Link partially selected along with other content', 8, 15, 'Sample link wi'],
-  ])(
-    'Expands selection when a link is partially selected - %s',
-    async (description: string, from: number, to: number, expectedSelection: string) => {
-      const { editor, getSelectedText } = await renderWithEditor(<LinkButton />, {
-        content: '<a href="https://www.example.org/my-link">Sample link</a> <strong>with</strong> some other content.',
-      });
-
-      await act(() => editor.selectText({ from, to }));
-      await openModal();
-
-      expect(getSelectedText()).toBe(expectedSelection);
-    },
-  );
-
-  it('Updates full selection when it is expanded from what was initially selected', async () => {
+  it('Updates unselected part of link when link is partially selected', async () => {
     const { editor, getJsonContent } = await renderWithEditor(<LinkButton />, {
       content: '<a href="https://www.example.org/my-link">Sample link</a> <strong>with</strong> some other content.',
     });
@@ -179,7 +161,7 @@ describe('LinkButton', () => {
           marks: [
             {
               type: 'link',
-              attrs: { auto: false, href: 'https://www.example.org/my-link', target: null, title: null },
+              attrs: { href: 'https://www.example.org/my-link', target: '_self', title: null },
             },
           ],
         },
@@ -189,7 +171,7 @@ describe('LinkButton', () => {
           marks: [
             {
               type: 'link',
-              attrs: { auto: false, href: 'https://www.example.org/my-link', target: null, title: null },
+              attrs: { href: 'https://www.example.org/my-link', target: '_self', title: null },
             },
             { type: 'bold' },
           ],
@@ -200,7 +182,7 @@ describe('LinkButton', () => {
           marks: [
             {
               type: 'link',
-              attrs: { auto: false, href: 'https://www.example.org/my-link', target: null, title: null },
+              attrs: { href: 'https://www.example.org/my-link', target: '_self', title: null },
             },
           ],
         },
@@ -237,7 +219,7 @@ describe('LinkButton', () => {
           marks: [
             {
               type: 'link',
-              attrs: { auto: false, href: 'https://www.example.org/my-link', target: null, title: null },
+              attrs: { href: 'https://www.example.org/my-link', target: '_self', title: null },
             },
           ],
         },
@@ -252,7 +234,7 @@ describe('LinkButton', () => {
     });
 
     // jump to the middle of the link.
-    await act(() => editor.selectText(5));
+    await act(() => editor.selectText({ from: 1, to: 12 }));
 
     // press the keyboard shortcut.
     fireEvent.keyDown(elements.editor, { key: 'k', ctrlKey: true });
@@ -274,4 +256,100 @@ describe('LinkButton', () => {
     fireEvent.click(screen.getByRole('button', { name: 'Cancel' }));
     expect(modalHeading).not.toBeInTheDocument();
   });
+
+  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 } },
+    });
+
+    await openModal();
+    select(screen.getByLabelText('Type'), 'Link to asset');
+    fireEvent.change(screen.getByLabelText('Asset ID'), { target: { value: '123' } });
+    fireEvent.change(screen.getByLabelText('Text'), { target: { value: 'Link text' } });
+    fireEvent.click(screen.getByRole('button', { name: 'Apply' }));
+
+    await waitForElementToBeRemoved(() => screen.getByRole('button', { name: 'Apply' }));
+
+    expect(getJsonContent()).toEqual({
+      type: 'paragraph',
+      attrs: expect.any(Object),
+      content: [
+        {
+          type: 'text',
+          text: 'Link text',
+          marks: [
+            {
+              type: 'assetLink',
+              attrs: { matrixAssetId: '123', target: '_self', matrixDomain, matrixIdentifier },
+            },
+          ],
+        },
+      ],
+    });
+  });
+
+  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 } },
+    });
+
+    await act(() => editor.selectText(5));
+
+    await openModal();
+    select(screen.getByLabelText('Type'), 'Link to asset');
+    fireEvent.change(screen.getByLabelText('Asset ID'), { target: { value: '123' } });
+    select(screen.getByLabelText('Target'), 'New window');
+    fireEvent.click(screen.getByRole('button', { name: 'Apply' }));
+
+    await waitForElementToBeRemoved(() => screen.getByRole('button', { name: 'Apply' }));
+
+    expect(getJsonContent()).toEqual({
+      type: 'paragraph',
+      attrs: expect.any(Object),
+      content: [
+        {
+          type: 'text',
+          text: 'Sample link',
+          marks: [
+            {
+              type: 'assetLink',
+              attrs: { matrixAssetId: '123', target: '_blank', matrixDomain, matrixIdentifier },
+            },
+          ],
+        },
+        { type: 'text', text: ' with ' },
+        {
+          type: 'text',
+          text: 'another link',
+          marks: [
+            {
+              type: 'link',
+              attrs: { href: 'https://www.example.org/another-link', target: '_self', title: null },
+            },
+          ],
+        },
+      ],
+    });
+  });
+
+  it('Shows an error if an invalid asset ID is provided', async () => {
+    const isValidMatrixAssetId = jest.fn(() => Promise.resolve(false));
+
+    await renderWithEditor(<LinkButton />, { context: { matrix: { isValidMatrixAssetId } } });
+
+    await openModal();
+    select(screen.getByLabelText('Type'), 'Link to asset');
+    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(isValidMatrixAssetId).toHaveBeenCalledWith('invalid-asset-id');
+  });
 });

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

@@ -2,9 +2,13 @@ import React, { useCallback, useState } from 'react';
 import InsertLinkRoundedIcon from '@mui/icons-material/InsertLinkRounded';
 import LinkModal from './LinkModal';
 import { LinkFormData } from './Form/LinkForm';
-import ToolbarButton from '../../../ui/ToolbarButton/ToolbarButton';
-import { useActive, useCommands, useExtensionEvent } from '@remirror/react';
+import Button from '../../../ui/Button/Button';
+import { useActive, useCommands, useKeymap } from '@remirror/react';
 import { LinkExtension } from '../../../Extensions/LinkExtension/LinkExtension';
+import { CommandsExtension } from '../../../Extensions/CommandsExtension/CommandsExtension';
+import { AssetLinkExtension } from '../../../Extensions/LinkExtension/AssetLinkExtension';
+import { MarkName } from '../../../Extensions/Extensions';
+import { ImageExtension } from '../../../Extensions/ImageExtension/ImageExtension';
 
 type LinkButtonProps = {
   inPopover?: boolean;
@@ -12,41 +16,46 @@ type LinkButtonProps = {
 
 const LinkButton = ({ inPopover = false }: LinkButtonProps) => {
   const [showModal, setShowModal] = useState(false);
-  const { selectLink, updateLink } = useCommands<LinkExtension>();
-  const active = useActive<LinkExtension>();
+  const { updateLink, updateAssetLink } = useCommands<AssetLinkExtension | LinkExtension | CommandsExtension>();
+  const active = useActive<LinkExtension | AssetLinkExtension | ImageExtension>();
+  // If the image tool is active, disable the link tool as they shouldn't work at the same time
+  const disabled = active.image();
   const handleClick = () => {
     if (!showModal) {
-      selectLink();
-
-      // form element are uncontrolled, let the event loop run to
-      // update the selected text in state before showing the modal.
-      requestAnimationFrame(() => {
-        setShowModal(true);
-      });
+      setShowModal(true);
     }
   };
+  const handleShortcut = useCallback(() => {
+    handleClick();
+    // Prevent other key handlers being run
+    return true;
+  }, []);
+
   const handleSubmit = (data: LinkFormData) => {
-    updateLink(data);
+    if (data.linkType === MarkName.AssetLink) {
+      updateAssetLink({ text: data.text, attrs: data.assetLink, range: data.range });
+    } else {
+      updateLink({ text: data.text, attrs: data.link, range: data.range });
+    }
+
     setShowModal(false);
   };
 
+  // when Ctrl+K is pressed show the modal, only registered in the toolbar button instance to avoid the key press
+  // being double handled.
   if (!inPopover) {
-    // when Ctrl+K is pressed show the modal, only registered in the toolbar button instance to avoid the key press
-    // being double handled.
-    useExtensionEvent(
-      LinkExtension,
-      'onShortcut',
-      useCallback(() => handleClick(), []),
-    );
+    // disable the shortcut if the button is disabled
+    useKeymap('Mod-k', disabled ? () => true : handleShortcut);
   }
 
   return (
     <>
-      <ToolbarButton
+      <Button
         handleOnClick={handleClick}
-        isActive={active.link()}
+        isActive={active.link() || active.assetLink()}
         icon={<InsertLinkRoundedIcon />}
         label="Link (cmd+K)"
+        isDisabled={disabled}
       />
       {showModal && <LinkModal onCancel={() => setShowModal(false)} onSubmit={handleSubmit} />}
     </>

package/src/EditorToolbar/Tools/Link/LinkModal.tsx

@@ -1,9 +1,10 @@
-import { getMarkRanges } from 'remirror';
-import LinkForm, { LinkFormData } from './Form/LinkForm';
+import { LinkForm, LinkFormData } from './Form/LinkForm';
 import React from 'react';
-import { useRemirrorContext, useCurrentSelection } from '@remirror/react';
+import { useRemirrorContext } from '@remirror/react';
 import FormModal from '../../../ui/Modal/FormModal';
 import { SubmitHandler } from 'react-hook-form';
+import { useExpandedSelection } from '../../../hooks';
+import { MarkName } from '../../../Extensions/Extensions';
 
 type LinkModalProps = {
   onCancel: () => void;
@@ -15,13 +16,19 @@ const LinkModal = ({ onCancel, onSubmit }: LinkModalProps) => {
     helpers,
     view: { state },
   } = useRemirrorContext();
-  const selection = useCurrentSelection();
-  const currentLink = getMarkRanges(selection, 'link')[0];
+  const { selection, marks } = useExpandedSelection([MarkName.Link, MarkName.AssetLink]);
   const selectedText = helpers.getTextBetween(selection.from, selection.to, state.doc);
+  const data = {
+    linkType: marks[0]?.type?.name === MarkName.AssetLink ? MarkName.AssetLink : MarkName.Link,
+    text: selectedText,
+    link: marks.find((mark) => mark.type.name === 'link')?.attrs || {},
+    assetLink: marks.find((mark) => mark.type.name === MarkName.AssetLink)?.attrs || {},
+    range: { from: selection.from, to: selection.to },
+  };
 
   return (
     <FormModal title="Link" onCancel={onCancel}>
-      <LinkForm data={{ ...currentLink?.mark.attrs, text: selectedText }} onSubmit={onSubmit} />
+      <LinkForm data={data} onSubmit={onSubmit} />
     </FormModal>
   );
 };