@squiz/formatted-text-editor 1.12.0-alpha.8 → 1.12.1-alpha.0

package/src/Editor/Editor.spec.tsx

@@ -0,0 +1,254 @@
+import { jest } from '@jest/globals';
+import React from 'react';
+import { act, fireEvent, render, screen } from '@testing-library/react';
+import { MockEditor } from './Editor.mock';
+import Editor from './Editor';
+import '@testing-library/jest-dom';
+
+const setContent: any = jest.fn();
+
+describe('Formatted text editor', () => {
+  it('Renders the text editor', () => {
+    render(<Editor />);
+    expect(screen.getByRole('textbox')).toBeInTheDocument();
+  });
+
+  it('Renders the placeholder if there is no content', () => {
+    render(<Editor />);
+    expect(document.querySelector(`[data-placeholder='Write something']`)).toBeInTheDocument();
+  });
+
+  it('Renders the bold button', () => {
+    render(<Editor />);
+    expect(screen.getByRole('button', { name: 'Bold (cmd+B)' })).toBeInTheDocument();
+  });
+
+  it('Renders the italic button', () => {
+    render(<Editor />);
+    expect(screen.getByRole('button', { name: 'Italic (cmd+I)' })).toBeInTheDocument();
+  });
+
+  it('Renders the underline button', () => {
+    render(<Editor />);
+    expect(screen.getByRole('button', { name: 'Underline (cmd+U)' })).toBeInTheDocument();
+  });
+
+  it('Renders the align left button', () => {
+    render(<Editor />);
+    expect(screen.getByRole('button', { name: 'Align left' })).toBeInTheDocument();
+  });
+
+  it('Applies left alignment styling to text when clicked', () => {
+    const { baseElement } = render(<Editor />);
+    expect(baseElement).toBeTruthy();
+
+    expect(baseElement.querySelector('p[data-node-text-align="left"]')).toBeFalsy();
+
+    const leftAlignButton = baseElement.querySelector('button[title="Align left"]') as HTMLButtonElement;
+    expect(leftAlignButton).toBeTruthy();
+
+    fireEvent.click(leftAlignButton);
+    expect(baseElement.querySelector('p[data-node-text-align="left"]')).toBeTruthy();
+  });
+
+  it('Applies center alignment styling to text when clicked', () => {
+    const { baseElement } = render(<Editor />);
+    expect(baseElement).toBeTruthy();
+
+    expect(baseElement.querySelector('p[data-node-text-align="center"]')).toBeFalsy();
+
+    const centerAlignButton = baseElement.querySelector('button[title="Align center"]') as HTMLButtonElement;
+    expect(centerAlignButton).toBeTruthy();
+
+    fireEvent.click(centerAlignButton);
+    expect(baseElement.querySelector('p[data-node-text-align="center"]')).toBeTruthy();
+  });
+
+  it('Applies right alignment styling to text when clicked', () => {
+    const { baseElement } = render(<Editor />);
+    expect(baseElement).toBeTruthy();
+
+    expect(baseElement.querySelector('p[data-node-text-align="right"]')).toBeFalsy();
+
+    const rightAlignButton = baseElement.querySelector('button[title="Align right"]') as HTMLButtonElement;
+    expect(rightAlignButton).toBeTruthy();
+
+    fireEvent.click(rightAlignButton);
+    expect(baseElement.querySelector('p[data-node-text-align="right"]')).toBeTruthy();
+  });
+
+  it('Applies justify alignment styling to text when clicked', () => {
+    const { baseElement } = render(<Editor />);
+    expect(baseElement).toBeTruthy();
+
+    expect(baseElement.querySelector('p[data-node-text-align="justify"]')).toBeFalsy();
+
+    const justifyAlignButton = baseElement.querySelector('button[title="Justify"]') as HTMLButtonElement;
+    expect(justifyAlignButton).toBeTruthy();
+
+    fireEvent.click(justifyAlignButton);
+    expect(baseElement.querySelector('p[data-node-text-align="justify"]')).toBeTruthy();
+  });
+
+  it('Applies Heading 1 styling to text when clicked', () => {
+    const { baseElement } = render(<Editor />);
+    expect(baseElement).toBeTruthy();
+
+    expect(baseElement.querySelector('div.remirror-editor h1')).toBeFalsy();
+
+    const headingDropdown = baseElement.querySelector('.toolbar-dropdown__button') as HTMLButtonElement;
+    expect(headingDropdown).toBeTruthy();
+    fireEvent.click(headingDropdown);
+
+    const h1Button = baseElement.querySelector('button[title="Heading 1"]') as HTMLButtonElement;
+    expect(h1Button).toBeTruthy();
+    fireEvent.click(h1Button);
+
+    expect(baseElement.querySelector('div.remirror-editor h1')).toBeTruthy();
+  });
+
+  it('Applies Heading 2 styling to text when clicked', () => {
+    const { baseElement } = render(<Editor />);
+    expect(baseElement).toBeTruthy();
+
+    expect(baseElement.querySelector('div.remirror-editor h2')).toBeFalsy();
+
+    const headingDropdown = baseElement.querySelector('.toolbar-dropdown__button') as HTMLButtonElement;
+    expect(headingDropdown).toBeTruthy();
+    fireEvent.click(headingDropdown);
+
+    const h2Button = baseElement.querySelector('button[title="Heading 2"]') as HTMLButtonElement;
+    expect(h2Button).toBeTruthy();
+    fireEvent.click(h2Button);
+
+    expect(baseElement.querySelector('div.remirror-editor h2')).toBeTruthy();
+  });
+
+  it('Applies Heading 3 styling to text when clicked', () => {
+    const { baseElement } = render(<Editor />);
+    expect(baseElement).toBeTruthy();
+
+    expect(baseElement.querySelector('div.remirror-editor h3')).toBeFalsy();
+
+    const headingDropdown = baseElement.querySelector('.toolbar-dropdown__button') as HTMLButtonElement;
+    expect(headingDropdown).toBeTruthy();
+    fireEvent.click(headingDropdown);
+
+    const h3Button = baseElement.querySelector('button[title="Heading 3"]') as HTMLButtonElement;
+    expect(h3Button).toBeTruthy();
+    fireEvent.click(h3Button);
+
+    expect(baseElement.querySelector('div.remirror-editor h3')).toBeTruthy();
+  });
+
+  it('Applies Heading 4 styling to text when clicked', () => {
+    const { baseElement } = render(<Editor />);
+    expect(baseElement).toBeTruthy();
+
+    expect(baseElement.querySelector('div.remirror-editor h4')).toBeFalsy();
+
+    const headingDropdown = baseElement.querySelector('.toolbar-dropdown__button') as HTMLButtonElement;
+    expect(headingDropdown).toBeTruthy();
+    fireEvent.click(headingDropdown);
+
+    const h4Button = baseElement.querySelector('button[title="Heading 4"]') as HTMLButtonElement;
+    expect(h4Button).toBeTruthy();
+    fireEvent.click(h4Button);
+
+    expect(baseElement.querySelector('div.remirror-editor h4')).toBeTruthy();
+  });
+
+  it('Applies Heading 5 styling to text when clicked', () => {
+    const { baseElement } = render(<Editor />);
+    expect(baseElement).toBeTruthy();
+
+    expect(baseElement.querySelector('div.remirror-editor h5')).toBeFalsy();
+
+    const headingDropdown = baseElement.querySelector('.toolbar-dropdown__button') as HTMLButtonElement;
+    expect(headingDropdown).toBeTruthy();
+    fireEvent.click(headingDropdown);
+
+    const h5Button = baseElement.querySelector('button[title="Heading 5"]') as HTMLButtonElement;
+    expect(h5Button).toBeTruthy();
+    fireEvent.click(h5Button);
+
+    expect(baseElement.querySelector('div.remirror-editor h5')).toBeTruthy();
+  });
+
+  it('Applies Heading 6 styling to text when clicked', () => {
+    const { baseElement } = render(<Editor />);
+    expect(baseElement).toBeTruthy();
+
+    expect(baseElement.querySelector('div.remirror-editor h6')).toBeFalsy();
+
+    const headingDropdown = baseElement.querySelector('.toolbar-dropdown__button') as HTMLButtonElement;
+    expect(headingDropdown).toBeTruthy();
+    fireEvent.click(headingDropdown);
+
+    const h6Button = baseElement.querySelector('button[title="Heading 6"]') as HTMLButtonElement;
+    expect(h6Button).toBeTruthy();
+    fireEvent.click(h6Button);
+
+    expect(baseElement.querySelector('div.remirror-editor h6')).toBeTruthy();
+  });
+
+  it('Applies Preformatted styling to text when clicked', () => {
+    const { baseElement } = render(<Editor />);
+    expect(baseElement).toBeTruthy();
+
+    expect(baseElement.querySelector('div.remirror-editor pre')).toBeFalsy();
+
+    const headingDropdown = baseElement.querySelector('.toolbar-dropdown__button') as HTMLButtonElement;
+    expect(headingDropdown).toBeTruthy();
+    fireEvent.click(headingDropdown);
+
+    const preButton = baseElement.querySelector('button[title="Preformatted"]') as HTMLButtonElement;
+    expect(preButton).toBeTruthy();
+    fireEvent.click(preButton);
+
+    expect(baseElement.querySelector('div.remirror-editor pre')).toBeTruthy();
+  });
+
+  it('Applies Paragraph styling to text when clicked', () => {
+    const { baseElement } = render(<Editor />);
+    expect(baseElement).toBeTruthy();
+
+    expect(baseElement.querySelectorAll('div.remirror-editor p')).toHaveLength(1);
+
+    const headingDropdown = baseElement.querySelector('.toolbar-dropdown__button') as HTMLButtonElement;
+    expect(headingDropdown).toBeTruthy();
+    fireEvent.click(headingDropdown);
+
+    const preButton = baseElement.querySelector('button[title="Preformatted"]') as HTMLButtonElement;
+    expect(preButton).toBeTruthy();
+    fireEvent.click(preButton);
+
+    const paragraphButton = baseElement.querySelector('button[title="Paragraph"]') as HTMLButtonElement;
+    expect(paragraphButton).toBeTruthy();
+    fireEvent.click(paragraphButton);
+
+    expect(baseElement.querySelectorAll('div.remirror-editor p')).toHaveLength(1);
+  });
+
+  it('Should allow text input & undo input upon clicking undo button', () => {
+    const { baseElement, getByLabelText } = render(<MockEditor setContent={setContent} />);
+
+    const textContent = `This is a string with a random number: ${Math.random() * 9999}`;
+
+    // This sets the content of the text editor
+    act(() => {
+      setContent(`<p>${textContent}</p>`, { triggerChange: true });
+    });
+
+    const editorNode = getByLabelText(`Text editor`);
+    expect(editorNode).toBeTruthy();
+    expect(editorNode.textContent).toBe(textContent);
+
+    // Testing if clicking undo button removes text from editor
+    const undoButton = baseElement.querySelector('button[title="Undo (cmd+Z)"]') as HTMLButtonElement;
+    expect(undoButton).toBeTruthy();
+    fireEvent.click(undoButton);
+
+    expect(editorNode.textContent).toBe('');
+  });
+});

package/src/Editor/Editor.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { EditorComponent, Remirror, useRemirror } from '@remirror/react';
+import { RemirrorContentType, RemirrorEventListener, Extension } from '@remirror/core';
+import { Toolbar, FloatingToolbar } from '../EditorToolbar';
+import { Extensions } from '../Extensions/Extensions';
+
+type EditorProps = {
+  content?: RemirrorContentType;
+  onChange?: RemirrorEventListener<Extension>;
+  editable?: boolean;
+};
+
+const Editor = ({ content, editable, onChange }: EditorProps) => {
+  const { manager, state, setState } = useRemirror({
+    extensions: Extensions,
+    content,
+    selection: 'start',
+    stringHandler: 'html',
+  });
+
+  const handleChange: RemirrorEventListener<Extension> = (parameter) => {
+    setState(parameter.state);
+    onChange?.(parameter);
+  };
+
+  return (
+    <div className="squiz-fte-scope">
+      <div className="remirror-theme formatted-text-editor editor-wrapper">
+        <Remirror
+          manager={manager}
+          state={state}
+          editable={editable}
+          onChange={handleChange}
+          placeholder="Write something"
+          label="Text editor"
+        >
+          <Toolbar />
+          <EditorComponent />
+          <FloatingToolbar />
+        </Remirror>
+      </div>
+    </div>
+  );
+};
+
+export default Editor;

package/src/Editor/_editor.scss

@@ -0,0 +1,82 @@
+.formatted-text-editor {
+  font-family: 'Open Sans' !important;
+
+  &.editor-wrapper {
+    @apply bg-white rounded border-gray-300 border-2 border-solid;
+  }
+
+  .remirror-editor-wrapper {
+    @apply text-gray-600 pt-0;
+  }
+
+  .remirror-editor {
+    @apply bg-white shadow-none rounded-b p-3;
+    min-height: 6rem;
+
+    &:active,
+    &:focus {
+      @apply outline-0;
+    }
+
+    p {
+      /* Make sure content aligned with "text-align: justify" is justified */
+      @apply block;
+    }
+  }
+
+  .remirror-is-empty:first-of-type::before {
+    position: absolute;
+    pointer-events: none;
+    height: 0;
+    font-style: italic;
+    content: attr(data-placeholder);
+    @apply text-gray-500;
+  }
+}
+
+a {
+  @apply text-blue-300;
+  text-decoration: underline;
+}
+
+.remirror-theme h1 {
+  font-size: 1.625rem;
+  font-weight: 600;
+  letter-spacing: -0.2px;
+  line-height: 2rem;
+}
+
+.remirror-theme h2 {
+  font-size: 1.25rem;
+  font-weight: 600;
+  letter-spacing: -0.5px;
+  line-height: 1.5rem;
+}
+
+.remirror-theme h3 {
+  font-size: 1.125rem;
+  font-weight: 600;
+  letter-spacing: -0.2px;
+  line-height: 1.375rem;
+}
+
+.remirror-theme h4 {
+  font-size: 1rem;
+  font-weight: 700;
+  letter-spacing: -0.2px;
+  line-height: 1.25rem;
+}
+
+.remirror-theme h5 {
+  font-size: 1rem;
+  font-weight: 600;
+  letter-spacing: -0.2px;
+  line-height: 1.25rem;
+}
+
+.remirror-theme h6 {
+  font-size: 0.875rem;
+  font-weight: 600;
+  letter-spacing: -0.2px;
+  line-height: 1.25rem;
+}

package/src/EditorToolbar/FloatingToolbar.spec.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { act, screen } from '@testing-library/react';
+import { renderWithEditor } from '../../tests';
+import { FloatingToolbar } from './FloatingToolbar';
+
+describe('FloatingToolbar', () => {
+  it.each([
+    ['Nothing selected', 3, 3, []],
+    ['Regular text selected', 3, 4, ['Bold (cmd+B)', 'Italic (cmd+I)', 'Underline (cmd+U)', 'Link (cmd+K)']],
+    ['Regular text + link selected', 3, 17, ['Bold (cmd+B)', 'Italic (cmd+I)', 'Underline (cmd+U)']],
+    ['Nothing selected, positioned directly on the left of a link', 12, 12, []],
+    ['Nothing selected, positioned directly on the right of a link', 19, 19, []],
+    ['Nothing selected, positioned within a link', 13, 13, ['Link (cmd+K)', 'Remove link']],
+    ['Link partially selected', 15, 17, ['Link (cmd+K)', 'Remove link']],
+  ])(
+    'Renders formatting buttons when text is selected - %s',
+    async (description: string, from: number, to: number, expectedButtons: string[]) => {
+      const { editor } = await renderWithEditor(<FloatingToolbar />, {
+        content: 'My awesome <a href="https://example.org">example</a> content.',
+      });
+
+      await act(() => editor.selectText({ from, to }));
+
+      const buttons = screen.queryAllByRole('button');
+      const buttonLabels = buttons.map((button) => button.getAttribute('title'));
+
+      expect(buttonLabels).toEqual(expectedButtons);
+    },
+  );
+});

package/src/EditorToolbar/FloatingToolbar.tsx

@@ -0,0 +1,40 @@
+import React, { useMemo } from 'react';
+import ItalicButton from './Tools/Italic/ItalicButton';
+import UnderlineButton from './Tools/Underline/UnderlineButton';
+import BoldButton from './Tools/Bold/BoldButton';
+import { useExtensionNames } from '../hooks';
+import RemoveLinkButton from './Tools/Link/RemoveLinkButton';
+import LinkButton from './Tools/Link/LinkButton';
+import { FloatingToolbar as RemirrorFloatingToolbar, usePositioner } from '@remirror/react';
+import { VerticalDivider } from '@remirror/react-components';
+import { createToolbarPositioner, ToolbarPositionerRange } from '../utils/createToolbarPositioner';
+
+// The editor main toolbar
+export const FloatingToolbar = () => {
+  const extensionNames = useExtensionNames();
+  const positioner = useMemo(() => createToolbarPositioner({ types: ['link'] }), []);
+  const { data } = usePositioner<Partial<ToolbarPositionerRange>>(positioner, []);
+  let buttons = [
+    extensionNames.bold && <BoldButton key="bold" />,
+    extensionNames.italic && <ItalicButton key="italic" />,
+    extensionNames.underline && <UnderlineButton key="underline" />,
+  ];
+
+  if (data.marks?.link.isExclusivelyActive) {
+    // if all of the selected text is a link show the options to update/remove the link instead of the regular
+    // formatting options.
+    buttons = [<LinkButton key="update-link" inPopover={true} />, <RemoveLinkButton key="remove-link" />];
+  } else if (!data.marks?.link.isActive) {
+    // if none of the selected text is a link show the option to create a link.
+    buttons.push(
+      <VerticalDivider key="link-divider" className="link-divider" />,
+      <LinkButton key="add-link" inPopover={true} />,
+    );
+  }
+
+  return (
+    <RemirrorFloatingToolbar className="squiz-fte-scope squiz-fte-scope__floating-popover" positioner={positioner}>
+      {buttons}
+    </RemirrorFloatingToolbar>
+  );
+};

package/src/EditorToolbar/Toolbar.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Toolbar as RemirrorToolbar, VerticalDivider } from '@remirror/react-components';
+import ItalicButton from './Tools/Italic/ItalicButton';
+import UnderlineButton from './Tools/Underline/UnderlineButton';
+import BoldButton from './Tools/Bold/BoldButton';
+import TextAlignButtons from './Tools/TextAlign/TextAlignButtons';
+import UndoButton from './Tools/Undo/UndoButton';
+import RedoButton from './Tools/Redo/RedoButton';
+import TextTypeDropdown from './Tools/TextType/TextTypeDropdown';
+import { useExtensionNames } from '../hooks';
+import LinkButton from './Tools/Link/LinkButton';
+
+export const Toolbar = () => {
+  const extensionNames = useExtensionNames();
+
+  return (
+    <RemirrorToolbar className="remirror-toolbar editor-toolbar">
+      {extensionNames.history && (
+        <>
+          <UndoButton />
+          <RedoButton />
+          <VerticalDivider className="editor-divider" />
+        </>
+      )}
+      {extensionNames.heading && extensionNames.paragraph && extensionNames.preformatted && <TextTypeDropdown />}
+      {extensionNames.bold && <BoldButton />}
+      {extensionNames.italic && <ItalicButton />}
+      {extensionNames.underline && <UnderlineButton />}
+      {extensionNames.nodeFormatting && <TextAlignButtons />}
+      {extensionNames.link && <LinkButton />}
+    </RemirrorToolbar>
+  );
+};

package/src/EditorToolbar/Tools/Bold/BoldButton.spec.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render, screen, fireEvent } from '@testing-library/react';
+import Editor from '../../../Editor/Editor';
+
+describe('Bold button', () => {
+  it('Renders the bold button', () => {
+    render(<Editor />);
+    expect(screen.getByRole('button', { name: 'Bold (cmd+B)' })).toBeInTheDocument();
+  });
+
+  it('Activates the button if clicked', () => {
+    render(<Editor />);
+    expect(screen.getByRole('button', { name: 'Bold (cmd+B)' }).classList.contains('squiz-fte-btn')).toBeTruthy();
+    const bold = screen.getByRole('button', { name: 'Bold (cmd+B)' });
+    fireEvent.click(bold);
+    expect(bold.classList.contains('is-active')).toBeTruthy();
+  });
+});

package/src/EditorToolbar/Tools/Bold/BoldButton.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { useCommands, useActive, useChainedCommands } from '@remirror/react';
+import { BoldExtension } from '@remirror/extension-bold';
+import ToolbarButton from '../../../ui/ToolbarButton/ToolbarButton';
+import FormatBoldRoundedIcon from '@mui/icons-material/FormatBoldRounded';
+
+const BoldButton = () => {
+  const { toggleBold } = useCommands();
+  const chain = useChainedCommands();
+
+  const active = useActive<BoldExtension>();
+  const enabled = toggleBold.enabled();
+  const handleSelect = () => {
+    if (toggleBold.enabled()) {
+      chain.toggleBold().focus().run();
+    }
+  };
+
+  return (
+    <ToolbarButton
+      handleOnClick={handleSelect}
+      isDisabled={!enabled}
+      isActive={active.bold()}
+      icon={<FormatBoldRoundedIcon />}
+      label="Bold (cmd+B)"
+    />
+  );
+};
+
+export default BoldButton;

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render, screen, fireEvent } from '@testing-library/react';
+import Editor from '../../../Editor/Editor';
+
+describe('Italic button', () => {
+  it('Renders the italic button', () => {
+    render(<Editor />);
+    expect(screen.getByRole('button', { name: 'Italic (cmd+I)' })).toBeInTheDocument();
+  });
+
+  it('Activates the button if clicked', () => {
+    render(<Editor />);
+    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();
+  });
+});

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import { useCommands, useActive, useChainedCommands } from '@remirror/react';
+import { ItalicExtension } from '@remirror/extension-italic';
+import ToolbarButton from '../../../ui/ToolbarButton/ToolbarButton';
+import FormatItalicRoundedIcon from '@mui/icons-material/FormatItalicRounded';
+
+const ItalicButton = () => {
+  const { toggleItalic } = useCommands();
+  const chain = useChainedCommands();
+
+  const active = useActive<ItalicExtension>();
+  const enabled = toggleItalic.enabled();
+  const handleSelect = () => {
+    if (toggleItalic.enabled()) {
+      chain.toggleItalic().focus().run();
+    }
+  };
+
+  return (
+    <ToolbarButton
+      handleOnClick={handleSelect}
+      isDisabled={!enabled}
+      isActive={active.italic()}
+      icon={<FormatItalicRoundedIcon />}
+      label="Italic (cmd+I)"
+    />
+  );
+};
+
+export default ItalicButton;

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

@@ -0,0 +1,30 @@
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import LinkForm from './LinkForm';
+
+describe('Link Form', () => {
+  const handleSubmit = jest.fn();
+  const data = {
+    href: 'https://www.squiz.net/link-form',
+    target: '_blank',
+    title: 'Link title',
+    text: 'Link text',
+  };
+
+  it('Renders the form with the relevant fields', () => {
+    render(<LinkForm data={data} onSubmit={handleSubmit} />);
+
+    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');
+  });
+
+  it('Renders the form with the specified class', () => {
+    render(<LinkForm data={data} onSubmit={handleSubmit} />);
+
+    const formClass = document.querySelector('.squiz-fte-form');
+    expect(formClass).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,48 @@
+import React, { ReactElement } from 'react';
+import { TextInput } from '../../../../ui/Inputs/Text/TextInput';
+import { Select, SelectOptions } from '../../../../ui/Inputs/Select/Select';
+import { SubmitHandler, useForm } from 'react-hook-form';
+import { UpdateLinkOptions } from '../../../../Extensions/LinkExtension/LinkExtension';
+
+export type LinkFormData = Pick<UpdateLinkOptions, 'href' | 'target' | 'title' | 'text'>;
+
+export type FormProps = {
+  data: Partial<LinkFormData>;
+  onSubmit: SubmitHandler<LinkFormData>;
+};
+
+const selectOptions: SelectOptions = {
+  _self: { label: 'Current window' },
+  _blank: { label: 'New window' },
+};
+
+const LinkForm = ({ data, onSubmit }: FormProps): ReactElement => {
+  const { register, handleSubmit, setValue } = useForm<LinkFormData>({
+    defaultValues: data,
+  });
+
+  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)}
+        />
+      </div>
+    </form>
+  );
+};
+
+export default LinkForm;