@squiz/formatted-text-editor 0.0.0-rbv2-20240530041851

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

@@ -0,0 +1,79 @@
+import '@testing-library/jest-dom';
+import { render, screen, waitFor } from '@testing-library/react';
+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();
+  const data = {
+    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-api-identifier',
+      matrixDomain: 'my-matrix.squiz.net',
+      target: LinkTarget.Blank,
+    },
+  };
+
+  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.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', () => {
+    render(<LinkForm data={data} onSubmit={handleSubmit} />);
+
+    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(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', async () => {
+    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('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/Form/LinkForm.tsx

@@ -0,0 +1,141 @@
+import React, { ReactElement } from 'react';
+import clsx from 'clsx';
+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 { MarkName } from '../../../../Extensions/Extensions';
+import { DeepPartial } from '../../../../types';
+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;
+  text: string;
+  link: UpdateLinkProps['attrs'];
+  assetLink: UpdateAssetLinkProps['attrs'];
+  range: FromToProps;
+};
+
+export type FormProps = {
+  data?: DeepPartial<LinkFormData>;
+  onSubmit: SubmitHandler<LinkFormData>;
+};
+
+const linkTypeOptions: TabOptions = {
+  [MarkName.AssetLink]: { label: 'From source' },
+  [MarkName.Link]: { label: 'From URL' },
+};
+
+export const LinkForm = ({ data, onSubmit }: FormProps): ReactElement => {
+  const {
+    control,
+    register,
+    handleSubmit,
+    setValue,
+    watch,
+    formState: { errors },
+  } = useForm<LinkFormData>({
+    defaultValues: data,
+  });
+  const linkType = watch('linkType') || MarkName.AssetLink;
+
+  return (
+    <form className="squiz-fte-form" onSubmit={handleSubmit(onSubmit)}>
+      <div className="squiz-fte-form-group mb-4">
+        <Tabs
+          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"
+              required
+              error={errors?.link?.href?.message}
+              {...register('link.href', {
+                required: 'URL is required',
+                validate: {
+                  noEmptySpaces: noEmptySpacesValidation,
+                },
+              })}
+            />
+          </div>
+
+          <div className={clsx('squiz-fte-form-group mb-2')}>
+            <Input
+              label="Text"
+              required
+              error={errors?.text?.message}
+              {...register('text', {
+                required: 'Text is required',
+                validate: {
+                  noEmptySpaces: noEmptySpacesValidation,
+                },
+              })}
+            />
+          </div>
+          <div className={clsx('squiz-fte-form-group mb-2')}>
+            <Input label="Title" error={errors?.link?.title?.message} {...register('link.title')} />
+          </div>
+          <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>
+        </>
+      )}
+      {/* Asset link form fields */}
+      {linkType === MarkName.AssetLink && (
+        <>
+          <div className={clsx('squiz-fte-form-group mb-2')}>
+            <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')}>
+            <Input
+              label="Text"
+              required
+              error={errors?.text?.message}
+              {...register('text', {
+                required: 'Text is required',
+                validate: {
+                  noEmptySpaces: noEmptySpacesValidation,
+                },
+              })}
+            />
+          </div>
+          <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>
+        </>
+      )}
+    </form>
+  );
+};

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

@@ -0,0 +1,402 @@
+import '@testing-library/jest-dom';
+import { act, screen, fireEvent, waitForElementToBeRemoved, waitFor } from '@testing-library/react';
+import React from 'react';
+import { renderWithEditor, mockResourceBrowserContext } from '../../../../tests';
+import LinkButton from './LinkButton';
+
+describe('LinkButton', () => {
+  const openModal = async () => {
+    fireEvent.click(screen.getByRole('button', { name: 'Link (Ctrl+K)' }));
+    await screen.findByRole('button', { name: 'Apply' });
+    fireEvent.click(screen.getByRole('button', { name: 'From URL' }));
+  };
+
+  it('Adds a new link', async () => {
+    const { editor, getJsonContent } = await renderWithEditor(<LinkButton />, { content: '[start][end]' });
+
+    // move the cursor to between the start and end tags.
+    await act(() => editor.selectText(8));
+
+    // open the modal and add a link.
+    await openModal();
+    fireEvent.change(screen.getByLabelText('URL'), { target: { value: 'https://www.squiz.net/link-button' } });
+    fireEvent.change(screen.getByLabelText('Text'), { target: { value: 'Link text' } });
+    fireEvent.change(screen.getByLabelText('Title'), { target: { value: 'Link title' } });
+    fireEvent.click(document.querySelector('div.squiz-fte-checkbox button') as HTMLButtonElement);
+    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: '[start]' },
+        {
+          type: 'text',
+          text: 'Link text',
+          marks: [
+            {
+              type: 'link',
+              attrs: { href: 'https://www.squiz.net/link-button', target: '_blank', title: 'Link title' },
+            },
+          ],
+        },
+        { type: 'text', text: '[end]' },
+      ],
+    });
+  });
+
+  it('Updates the attributes of an existing link', async () => {
+    const { editor, getJsonContent } = await renderWithEditor(<LinkButton />, {
+      content:
+        '<a href="https://www.example.org/my-link" title="Sample title">Sample link</a> with some other content.',
+    });
+
+    // jump to the middle of the link.
+    await act(() => editor.selectText(3));
+
+    // open the modal and update the link.
+    await openModal();
+    fireEvent.change(screen.getByLabelText('URL'), { target: { value: 'https://www.example.org/updated-link' } });
+    fireEvent.change(screen.getByLabelText('Text'), { target: { value: 'Updated sample link' } });
+    fireEvent.change(screen.getByLabelText('Title'), { target: { value: 'Updated sample title' } });
+
+    // verify the content matches what was initially set prior to applying.
+    expect(getJsonContent()).toEqual({
+      type: 'paragraph',
+      attrs: expect.any(Object),
+      content: [
+        {
+          type: 'text',
+          text: 'Sample link',
+          marks: [
+            {
+              type: 'link',
+              attrs: { href: 'https://www.example.org/my-link', target: '_self', title: 'Sample title' },
+            },
+          ],
+        },
+        { type: 'text', text: ' with some other content.' },
+      ],
+    });
+
+    // apply the changes.
+    fireEvent.click(screen.getByRole('button', { name: 'Apply' }));
+
+    await waitForElementToBeRemoved(() => screen.getByRole('button', { name: 'Apply' }));
+
+    // cursor should be positioned after the link and the text should be updated.
+    expect(editor.from).toBe(20);
+    expect(editor.to).toBe(20);
+    expect(getJsonContent()).toEqual({
+      type: 'paragraph',
+      attrs: expect.any(Object),
+      content: [
+        {
+          type: 'text',
+          text: 'Updated sample link',
+          marks: [
+            {
+              type: 'link',
+              attrs: { href: 'https://www.example.org/updated-link', target: '_self', title: 'Updated sample title' },
+            },
+          ],
+        },
+        { type: 'text', text: ' with some other content.' },
+      ],
+    });
+  });
+
+  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" title="Sample title">Sample link</a> <strong>with</strong> some other content.',
+    });
+
+    // jump to the middle of the link and select some of the text after it.
+    await act(() => editor.selectText({ from: 3, to: 22 }));
+
+    // open the modal and apply the link to the selection.
+    await openModal();
+    fireEvent.click(screen.getByRole('button', { name: 'Apply' }));
+
+    await waitForElementToBeRemoved(() => screen.getByRole('button', { name: 'Apply' }));
+
+    // link should be applied to the additional selected text ("with some"), formatting should be preserved.
+    expect(editor.from).toBe(22);
+    expect(editor.to).toBe(22);
+    expect(getJsonContent()).toEqual({
+      type: 'paragraph',
+      attrs: expect.any(Object),
+      content: [
+        {
+          type: 'text',
+          text: 'Sample link ',
+          marks: [
+            {
+              type: 'link',
+              attrs: { href: 'https://www.example.org/my-link', target: '_self', title: 'Sample title' },
+            },
+          ],
+        },
+        {
+          type: 'text',
+          text: 'with',
+          marks: [
+            {
+              type: 'link',
+              attrs: { href: 'https://www.example.org/my-link', target: '_self', title: 'Sample title' },
+            },
+            { type: 'bold' },
+          ],
+        },
+        {
+          type: 'text',
+          text: ' some',
+          marks: [
+            {
+              type: 'link',
+              attrs: { href: 'https://www.example.org/my-link', target: '_self', title: 'Sample title' },
+            },
+          ],
+        },
+        { type: 'text', text: ' other content.' },
+      ],
+    });
+  });
+
+  it('Updates text and formatting when selection has a mixture of formatting', async () => {
+    const { editor, getJsonContent } = await renderWithEditor(<LinkButton />, {
+      content:
+        '<a href="https://www.example.org/my-link" title="Sample title">Sample link</a> <strong>with</strong> some other content.',
+    });
+
+    // jump to the middle of the link and select some of the text after it.
+    await act(() => editor.selectText({ from: 3, to: 22 }));
+
+    // open the modal and apply the link to the selection.
+    await openModal();
+    fireEvent.change(screen.getByLabelText('Text'), { target: { value: 'Updated sample link and' } });
+    fireEvent.click(screen.getByRole('button', { name: 'Apply' }));
+
+    await waitForElementToBeRemoved(() => screen.getByRole('button', { name: 'Apply' }));
+
+    // link should be applied and text should be updated.
+    expect(editor.from).toBe(24);
+    expect(editor.to).toBe(24);
+    expect(getJsonContent()).toEqual({
+      type: 'paragraph',
+      attrs: expect.any(Object),
+      content: [
+        {
+          type: 'text',
+          text: 'Updated sample link and',
+          marks: [
+            {
+              type: 'link',
+              attrs: { href: 'https://www.example.org/my-link', target: '_self', title: 'Sample title' },
+            },
+          ],
+        },
+        { type: 'text', text: ' other content.' },
+      ],
+    });
+  });
+
+  it('Opens the modal when clicking the keyboard shortcut', async () => {
+    const { editor, elements } = await renderWithEditor(<LinkButton />, {
+      content: '<a href="https://www.example.org/my-link">Sample link</a> with some other content.',
+    });
+
+    // jump to the middle of the link.
+    await act(() => editor.selectText({ from: 1, to: 12 }));
+
+    // press the keyboard shortcut.
+    fireEvent.keyDown(elements.editor, { key: 'k', ctrlKey: true });
+
+    // verify the modal opens and has populated with where the link details where our cursor is positioned.
+    expect(await screen.findByLabelText('URL')).toHaveValue('https://www.example.org/my-link');
+    expect(await screen.findByLabelText('Text')).toHaveValue('Sample link');
+  });
+
+  it('Closes the modal when clicking on the cancel button', async () => {
+    await renderWithEditor(<LinkButton />);
+
+    // open the modal and assert it is visible.
+    await openModal();
+    const modalHeading = screen.getByRole('heading', { name: 'Link' });
+    expect(modalHeading).toBeInTheDocument();
+
+    // close the modal and assert it has disappeared.
+    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 { 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' }));
+    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' }));
+
+    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: 'my-resource-id',
+                target: '_self',
+                matrixDomain,
+                matrixIdentifier,
+                href: 'https://default-resource/',
+              },
+            },
+          ],
+        },
+      ],
+    });
+  });
+
+  it('Updates an existing link to be an asset link', async () => {
+    const matrixIdentifier = 'matrix-api-identifier';
+    const matrixDomain = 'https://my-matrix.squiz.net';
+    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' }));
+    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' }));
+
+    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: 'my-resource-id',
+                target: '_blank',
+                matrixDomain,
+                matrixIdentifier,
+                href: 'https://default-resource/',
+              },
+            },
+          ],
+        },
+        { 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 no asset is selected', async () => {
+    await renderWithEditor(<LinkButton />);
+
+    await openModal();
+    fireEvent.click(screen.getByRole('button', { name: 'From source' }));
+    await act(() => fireEvent.click(screen.getByRole('button', { name: 'Apply' })));
+
+    expect(screen.getByText('An asset must be selected')).toBeInTheDocument();
+  });
+
+  it('Shows an error if a required field is not provided', async () => {
+    await renderWithEditor(<LinkButton />);
+
+    await openModal();
+    fireEvent.change(screen.getByLabelText('URL'), { target: { value: '' } });
+    fireEvent.change(screen.getByLabelText('Text'), { target: { value: '' } });
+    fireEvent.change(screen.getByLabelText('Title'), { target: { value: '' } });
+    await act(() => fireEvent.click(screen.getByRole('button', { name: 'Apply' })));
+
+    expect(screen.getByText('URL is required')).toBeInTheDocument();
+    expect(screen.getByText('Text is required')).toBeInTheDocument();
+  });
+
+  it('Shows an error if the field value is just an empty space', async () => {
+    await renderWithEditor(<LinkButton />);
+
+    await openModal();
+    fireEvent.change(screen.getByLabelText('URL'), { target: { value: ' ' } });
+    fireEvent.change(screen.getByLabelText('Text'), { target: { value: ' ' } });
+    fireEvent.change(screen.getByLabelText('Title'), { target: { value: ' ' } });
+    await act(() => fireEvent.click(screen.getByRole('button', { name: 'Apply' })));
+
+    expect(screen.getAllByText('Empty space is not allowed')).toHaveLength(2);
+  });
+});

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

@@ -0,0 +1,67 @@
+import React, { useCallback, useState } from 'react';
+import InsertLinkRoundedIcon from '@mui/icons-material/InsertLinkRounded';
+import LinkModal from './LinkModal';
+import { LinkFormData } from './Form/LinkForm';
+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';
+import { CodeBlockExtension } from 'remirror/dist-types/extensions';
+import { getShortcutSymbol } from '../../../utils/getShortcutSymbol';
+
+export type LinkButtonProps = {
+  inPopover?: boolean;
+};
+
+const LinkButton = ({ inPopover = false }: LinkButtonProps) => {
+  const [showModal, setShowModal] = useState(false);
+  const { updateLink, updateAssetLink } = useCommands<AssetLinkExtension | LinkExtension | CommandsExtension>();
+  const active = useActive<LinkExtension | AssetLinkExtension | ImageExtension | CodeBlockExtension>();
+  // If the image tool is active, disable the link tool as they shouldn't work at the same time
+  const disabled = active.image() || active.codeBlock();
+  const handleClick = () => {
+    if (!showModal) {
+      setShowModal(true);
+    }
+  };
+  const handleShortcut = useCallback(() => {
+    handleClick();
+    // Prevent other key handlers being run
+    return true;
+  }, []);
+
+  const handleSubmit = (data: LinkFormData) => {
+    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) {
+    // disable the shortcut if the button is disabled
+    useKeymap('Mod-k', disabled ? () => true : handleShortcut);
+  }
+
+  return (
+    <>
+      <Button
+        handleOnClick={handleClick}
+        isActive={active.link() || active.assetLink()}
+        icon={<InsertLinkRoundedIcon />}
+        label={`Link (${getShortcutSymbol()}+K)`}
+        isDisabled={disabled}
+      />
+      {showModal && <LinkModal onCancel={() => setShowModal(false)} onSubmit={handleSubmit} />}
+    </>
+  );
+};
+
+export default LinkButton;