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

package/src/EditorToolbar/Tools/TextAlign/JustifyAlign/JustifyAlignButton.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { useCommands, useChainedCommands } from '@remirror/react';
+import { NodeFormattingExtension } from '@remirror/extension-node-formatting';
+import Button from '../../../../ui/Button/Button';
+import FormatAlignJustifyIcon from '@mui/icons-material/FormatAlignJustify';
+
+const JustifyAlignButton = () => {
+  const { justifyAlign } = useCommands<NodeFormattingExtension>();
+  const chain = useChainedCommands();
+
+  const handleSelect = () => {
+    if (justifyAlign.enabled()) {
+      chain.justifyAlign().focus().run();
+    }
+  };
+
+  const active = justifyAlign.active?.() || false;
+  const enabled = justifyAlign.enabled();
+
+  return (
+    <Button
+      handleOnClick={handleSelect}
+      isDisabled={!enabled}
+      isActive={active}
+      icon={<FormatAlignJustifyIcon />}
+      label="Justify"
+    />
+  );
+};
+
+export default JustifyAlignButton;

package/src/EditorToolbar/Tools/TextAlign/LeftAlign/LeftAlignButton.spec.tsx

@@ -0,0 +1,39 @@
+import '@testing-library/jest-dom';
+import { render, fireEvent } from '@testing-library/react';
+import Editor from '../../../../Editor/Editor';
+import React from 'react';
+
+describe('Left align button', () => {
+  it('Renders the left align button', () => {
+    const { baseElement, getByRole } = render(<Editor />);
+    expect(baseElement).toBeTruthy();
+    expect(getByRole('button', { name: 'Align left' })).toBeTruthy();
+  });
+
+  it('Applies active status after selecting left align button', () => {
+    const { baseElement, getByRole } = render(<Editor />);
+    expect(baseElement).toBeTruthy();
+
+    const leftAlignButton = getByRole('button', { name: 'Align left' });
+    expect(leftAlignButton).toBeTruthy();
+    expect(leftAlignButton.classList.contains('is-active')).toBeFalsy();
+
+    fireEvent.click(leftAlignButton);
+
+    setTimeout(() => {
+      expect(leftAlignButton.classList.contains('is-active')).toBeTruthy();
+    }, 50);
+  });
+
+  it('Should apply left alignment to editor after clicking button', () => {
+    const { baseElement, getByRole } = render(<Editor />);
+    expect(baseElement).toBeTruthy();
+    expect(baseElement.querySelector('p[data-node-text-align="left"]')).toBeFalsy();
+
+    const leftAlignButton = getByRole('button', { name: 'Align left' });
+    expect(leftAlignButton).toBeTruthy();
+    fireEvent.click(leftAlignButton);
+
+    expect(baseElement.querySelector('p[data-node-text-align="left"]')).toBeTruthy();
+  });
+});

package/src/EditorToolbar/Tools/TextAlign/LeftAlign/LeftAlignButton.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { useCommands, useChainedCommands } from '@remirror/react';
+import { NodeFormattingExtension } from '@remirror/extension-node-formatting';
+import Button from '../../../../ui/Button/Button';
+import FormatAlignLeftIcon from '@mui/icons-material/FormatAlignLeft';
+
+const LeftAlignButton = () => {
+  const { leftAlign } = useCommands<NodeFormattingExtension>();
+  const chain = useChainedCommands();
+
+  const handleSelect = () => {
+    if (leftAlign.enabled()) {
+      chain.leftAlign().focus().run();
+    }
+  };
+
+  const active = leftAlign.active?.() || false;
+  const enabled = leftAlign.enabled();
+
+  return (
+    <Button
+      handleOnClick={handleSelect}
+      isDisabled={!enabled}
+      isActive={active}
+      icon={<FormatAlignLeftIcon />}
+      label="Align left"
+    />
+  );
+};
+
+export default LeftAlignButton;

package/src/EditorToolbar/Tools/TextAlign/RightAlign/RightAlignButton.spec.tsx

@@ -0,0 +1,39 @@
+import '@testing-library/jest-dom';
+import { render, fireEvent } from '@testing-library/react';
+import Editor from '../../../../Editor/Editor';
+import React from 'react';
+
+describe('Right align button', () => {
+  it('Renders the right align button', () => {
+    const { baseElement, getByRole } = render(<Editor />);
+    expect(baseElement).toBeTruthy();
+    expect(getByRole('button', { name: 'Align right' })).toBeTruthy();
+  });
+
+  it('Applies active status after selecting right align button', () => {
+    const { baseElement, getByRole } = render(<Editor />);
+    expect(baseElement).toBeTruthy();
+
+    const rightAlignButton = getByRole('button', { name: 'Align right' });
+    expect(rightAlignButton).toBeTruthy();
+    expect(rightAlignButton.classList.contains('is-active')).toBeFalsy();
+
+    fireEvent.click(rightAlignButton);
+
+    setTimeout(() => {
+      expect(rightAlignButton.classList.contains('is-active')).toBeTruthy();
+    }, 50);
+  });
+
+  it('Should apply right alignment to editor after clicking button', () => {
+    const { baseElement, getByRole } = render(<Editor />);
+    expect(baseElement).toBeTruthy();
+    expect(baseElement.querySelector('p[data-node-text-align="right"]')).toBeFalsy();
+
+    const rightAlignButton = getByRole('button', { name: 'Align right' });
+    expect(rightAlignButton).toBeTruthy();
+    fireEvent.click(rightAlignButton);
+
+    expect(baseElement.querySelector('p[data-node-text-align="right"]')).toBeTruthy();
+  });
+});

package/src/EditorToolbar/Tools/TextAlign/RightAlign/RightAlignButton.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { useCommands, useChainedCommands } from '@remirror/react';
+import { NodeFormattingExtension } from '@remirror/extension-node-formatting';
+import Button from '../../../../ui/Button/Button';
+import FormatAlignRightIcon from '@mui/icons-material/FormatAlignRight';
+
+const RightAlignButton = () => {
+  const { rightAlign } = useCommands<NodeFormattingExtension>();
+  const chain = useChainedCommands();
+
+  const handleSelect = () => {
+    if (rightAlign.enabled()) {
+      chain.rightAlign().focus().run();
+    }
+  };
+
+  const active = rightAlign.active?.() || false;
+  const enabled = rightAlign.enabled();
+
+  return (
+    <Button
+      handleOnClick={handleSelect}
+      isDisabled={!enabled}
+      isActive={active}
+      icon={<FormatAlignRightIcon />}
+      label="Align right"
+    />
+  );
+};
+
+export default RightAlignButton;

package/src/EditorToolbar/Tools/TextAlign/TextAlignButtons.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import LeftAlignButton from './LeftAlign/LeftAlignButton';
+import CenterAlignButton from './CenterAlign/CenterAlignButton';
+import RightAlignButton from './RightAlign/RightAlignButton';
+import JustifyAlignButton from './JustifyAlign/JustifyAlignButton';
+import { VerticalDivider } from '@remirror/react-components';
+
+const TextAlignButtons = () => {
+  return (
+    <>
+      <VerticalDivider />
+      <LeftAlignButton />
+      <CenterAlignButton />
+      <RightAlignButton />
+      <JustifyAlignButton />
+      <VerticalDivider />
+    </>
+  );
+};
+
+export default TextAlignButtons;

package/src/EditorToolbar/Tools/TextType/CodeBlock/CodeBlockButton.spec.tsx

@@ -0,0 +1,47 @@
+import '@testing-library/jest-dom';
+import { render, fireEvent } from '@testing-library/react';
+import Editor from '../../../../Editor/Editor';
+import React from 'react';
+
+describe('Code block button', () => {
+  it('Renders the code block button', () => {
+    const { baseElement, getByRole } = render(<Editor />);
+    expect(baseElement).toBeTruthy();
+    expect(getByRole('button', { name: 'Code block' })).toBeTruthy();
+  });
+
+  it('Applies active status after selecting code block button', () => {
+    const { baseElement, getByRole } = render(<Editor />);
+    expect(baseElement).toBeTruthy();
+
+    const codeblockButton = getByRole('button', { name: 'Code block' });
+    expect(codeblockButton).toBeTruthy();
+    expect(codeblockButton.className).not.toContain('is-active');
+
+    fireEvent.click(codeblockButton);
+    expect(codeblockButton.className).toContain('is-active');
+  });
+
+  it('Should render a check icon if button is active', () => {
+    const { baseElement, getByRole } = render(<Editor />);
+    expect(baseElement).toBeTruthy();
+
+    const codeblockButton = getByRole('button', { name: 'Code block' });
+    expect(codeblockButton.querySelector('svg[data-testid="CheckRoundedIcon"]')).toBeFalsy();
+
+    fireEvent.click(codeblockButton);
+    expect(codeblockButton.querySelector('svg[data-testid="CheckRoundedIcon"]')).toBeTruthy();
+  });
+
+  it('Should apply preformatted tag and code tag to editor after clicking button', () => {
+    const { baseElement, getByRole } = render(<Editor />);
+    expect(baseElement).toBeTruthy();
+    expect(baseElement.querySelector('div.remirror-editor pre code')).toBeFalsy();
+
+    const codeblockButton = getByRole('button', { name: 'Code block' });
+    expect(codeblockButton).toBeTruthy();
+    fireEvent.click(codeblockButton);
+
+    expect(baseElement.querySelector(`div.remirror-editor pre code`)).toBeTruthy();
+  });
+});

package/src/EditorToolbar/Tools/TextType/CodeBlock/CodeBlockButton.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { useCommands, useActive } from '@remirror/react';
+import { ExtendedCodeBlockExtension } from '../../../../Extensions/CodeBlockExtension/CodeBlockExtension';
+import DropdownButton from '../../../../ui/ToolbarDropdownButton/ToolbarDropdownButton';
+import CodeRoundedIcon from '@mui/icons-material/CodeRounded';
+
+const CodeBlockButton = () => {
+  const { toggleCodeBlock } = useCommands<ExtendedCodeBlockExtension>();
+
+  const active = useActive<ExtendedCodeBlockExtension>();
+  const enabled = toggleCodeBlock.enabled();
+
+  const handleSelect = () => {
+    if (toggleCodeBlock.enabled()) {
+      toggleCodeBlock();
+    }
+  };
+
+  return (
+    <DropdownButton
+      handleOnClick={handleSelect}
+      isDisabled={!enabled}
+      isActive={active.codeBlock()}
+      label="Code block"
+      icon={<CodeRoundedIcon />}
+    >
+      <p>Code block</p>
+    </DropdownButton>
+  );
+};
+
+export default CodeBlockButton;

package/src/EditorToolbar/Tools/TextType/Heading/HeadingButton.spec.tsx

@@ -0,0 +1,56 @@
+import '@testing-library/jest-dom';
+import { render, fireEvent } from '@testing-library/react';
+import Editor from '../../../../Editor/Editor';
+import React from 'react';
+
+const headings = [
+  ['Heading 1', 'h1'],
+  ['Heading 2', 'h2'],
+  ['Heading 3', 'h3'],
+  ['Heading 4', 'h4'],
+  ['Heading 5', 'h5'],
+  ['Heading 6', 'h6'],
+];
+
+describe('Heading button', () => {
+  it.each(headings)('Renders the "%s" heading button', (label) => {
+    const { baseElement, getByRole } = render(<Editor />);
+    expect(baseElement).toBeTruthy();
+    expect(getByRole('button', { name: label })).toBeTruthy();
+  });
+
+  it.each(headings)('Applies active status after selecting "%s" heading button', (label) => {
+    const { baseElement, getByRole } = render(<Editor />);
+    expect(baseElement).toBeTruthy();
+
+    const headingButton = getByRole('button', { name: label });
+    expect(headingButton).toBeTruthy();
+    expect(headingButton.className).not.toContain('is-active');
+
+    fireEvent.click(headingButton);
+    expect(headingButton.className).toContain('is-active');
+  });
+
+  it.each(headings)('Should render a check icon if button is active', (label) => {
+    const { baseElement, getByRole } = render(<Editor />);
+    expect(baseElement).toBeTruthy();
+
+    const headingButton = getByRole('button', { name: label });
+    expect(headingButton.querySelector('svg[data-testid="CheckRoundedIcon"]')).toBeFalsy();
+
+    fireEvent.click(headingButton);
+    expect(headingButton.querySelector('svg[data-testid="CheckRoundedIcon"]')).toBeTruthy();
+  });
+
+  it.each(headings)('Should apply "%s" heading tag to editor after clicking button', (label, tag) => {
+    const { baseElement } = render(<Editor />);
+    expect(baseElement).toBeTruthy();
+    expect(baseElement.querySelector('div.remirror-editor h1')).toBeFalsy();
+
+    const headingButton = baseElement.querySelector(`button[title="${label}"]`) as HTMLButtonElement;
+    expect(headingButton).toBeTruthy();
+    fireEvent.click(headingButton);
+
+    expect(baseElement.querySelector(`div.remirror-editor ${tag}`)).toBeTruthy();
+  });
+});

package/src/EditorToolbar/Tools/TextType/Heading/HeadingButton.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { useCommands, useChainedCommands, useActive } from '@remirror/react';
+import { HeadingExtension } from '@remirror/extension-heading';
+import DropdownButton from '../../../../ui/ToolbarDropdownButton/ToolbarDropdownButton';
+
+type HeadingButtonProps = {
+  level: number;
+};
+
+const HeadingButton = ({ level }: HeadingButtonProps) => {
+  const { toggleHeading } = useCommands<HeadingExtension>();
+  const chain = useChainedCommands();
+
+  const active = useActive<HeadingExtension>();
+  const enabled = toggleHeading.enabled({ level });
+
+  const handleSelect = () => {
+    if (toggleHeading.enabled({ level })) {
+      chain.toggleHeading({ level }).focus().run();
+    }
+  };
+
+  const headingContent = () => {
+    switch (level) {
+      case 1:
+        return <h1>Heading 1</h1>;
+      case 2:
+        return <h2>Heading 2</h2>;
+      case 3:
+        return <h3>Heading 3</h3>;
+      case 4:
+        return <h4>Heading 4</h4>;
+      case 5:
+        return <h5>Heading 5</h5>;
+      case 6:
+        return <h6>Heading 6</h6>;
+    }
+  };
+
+  return (
+    <DropdownButton
+      handleOnClick={handleSelect}
+      isDisabled={!enabled}
+      isActive={active.heading({ level })}
+      label={`Heading ${level}`}
+    >
+      {headingContent()}
+    </DropdownButton>
+  );
+};
+
+export default HeadingButton;

package/src/EditorToolbar/Tools/TextType/Paragraph/ParagraphButton.spec.tsx

@@ -0,0 +1,30 @@
+import '@testing-library/jest-dom';
+import { render } from '@testing-library/react';
+import Editor from '../../../../Editor/Editor';
+import React from 'react';
+
+describe('Paragraph button', () => {
+  it('Renders paragraph button', () => {
+    const { baseElement } = render(<Editor />);
+    expect(baseElement).toBeTruthy();
+    expect(baseElement.querySelector('button[title="Paragraph"]')).toBeTruthy();
+  });
+
+  it('Paragraph button active status should be set on as default', () => {
+    const { baseElement } = render(<Editor />);
+    expect(baseElement).toBeTruthy();
+
+    const paragraphButton = baseElement.querySelector('button[title="Paragraph"]') as HTMLButtonElement;
+    expect(paragraphButton).toBeTruthy();
+    expect(paragraphButton.className).toContain('is-active');
+  });
+
+  it('Should render a check icon if button is active', () => {
+    const { baseElement } = render(<Editor />);
+    expect(baseElement).toBeTruthy();
+
+    const paragraphButton = baseElement.querySelector('button[title="Paragraph"]') as HTMLButtonElement;
+    expect(paragraphButton).toBeTruthy();
+    expect(paragraphButton.querySelector('svg[data-testid="CheckRoundedIcon"]')).toBeTruthy();
+  });
+});

package/src/EditorToolbar/Tools/TextType/Paragraph/ParagraphButton.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { useCommands, useChainedCommands, useActive } from '@remirror/react';
+import { ParagraphExtension } from '@remirror/extension-paragraph';
+import DropdownButton from '../../../../ui/ToolbarDropdownButton/ToolbarDropdownButton';
+
+const ParagraphButton = () => {
+  const { convertParagraph } = useCommands<ParagraphExtension>();
+  const chain = useChainedCommands();
+
+  const active = useActive<ParagraphExtension>();
+
+  const handleSelect = () => {
+    if (convertParagraph.enabled()) {
+      chain.convertParagraph().focus().run();
+    }
+  };
+
+  return (
+    <DropdownButton handleOnClick={handleSelect} isDisabled={false} isActive={active.paragraph()} label="Paragraph">
+      <p>Paragraph</p>
+    </DropdownButton>
+  );
+};
+
+export default ParagraphButton;

package/src/EditorToolbar/Tools/TextType/Preformatted/PreformattedButton.spec.tsx

@@ -0,0 +1,47 @@
+import '@testing-library/jest-dom';
+import { render, fireEvent } from '@testing-library/react';
+import Editor from '../../../../Editor/Editor';
+import React from 'react';
+
+describe('Preformatted button', () => {
+  it('Renders the preformatted button', () => {
+    const { baseElement, getByRole } = render(<Editor />);
+    expect(baseElement).toBeTruthy();
+    expect(getByRole('button', { name: 'Preformatted' })).toBeTruthy();
+  });
+
+  it('Applies active status after selecting preformatted button', () => {
+    const { baseElement, getByRole } = render(<Editor />);
+    expect(baseElement).toBeTruthy();
+
+    const preformattedButton = getByRole('button', { name: 'Preformatted' });
+    expect(preformattedButton).toBeTruthy();
+    expect(preformattedButton.className).not.toContain('is-active');
+
+    fireEvent.click(preformattedButton);
+    expect(preformattedButton.className).toContain('is-active');
+  });
+
+  it('Should render a check icon if button is active', () => {
+    const { baseElement, getByRole } = render(<Editor />);
+    expect(baseElement).toBeTruthy();
+
+    const preformattedButton = getByRole('button', { name: 'Preformatted' });
+    expect(preformattedButton.querySelector('svg[data-testid="CheckRoundedIcon"]')).toBeFalsy();
+
+    fireEvent.click(preformattedButton);
+    expect(preformattedButton.querySelector('svg[data-testid="CheckRoundedIcon"]')).toBeTruthy();
+  });
+
+  it('Should apply preformatted tag to editor after clicking button', () => {
+    const { baseElement, getByRole } = render(<Editor />);
+    expect(baseElement).toBeTruthy();
+    expect(baseElement.querySelector('div.remirror-editor pre')).toBeFalsy();
+
+    const preformattedButton = getByRole('button', { name: 'Preformatted' });
+    expect(preformattedButton).toBeTruthy();
+    fireEvent.click(preformattedButton);
+
+    expect(baseElement.querySelector(`div.remirror-editor pre`)).toBeTruthy();
+  });
+});

package/src/EditorToolbar/Tools/TextType/Preformatted/PreformattedButton.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { useCommands, useActive } from '@remirror/react';
+import { PreformattedExtension } from '../../../../Extensions/PreformattedExtension/PreformattedExtension';
+import DropdownButton from '../../../../ui/ToolbarDropdownButton/ToolbarDropdownButton';
+import ShortTextRoundedIcon from '@mui/icons-material/ShortTextRounded';
+
+const PreformattedButton = () => {
+  const { togglePreformatted } = useCommands<PreformattedExtension>();
+
+  const active = useActive<PreformattedExtension>();
+  const enabled = togglePreformatted.enabled();
+
+  const handleSelect = () => {
+    if (togglePreformatted.enabled()) {
+      togglePreformatted();
+    }
+  };
+
+  return (
+    <DropdownButton
+      handleOnClick={handleSelect}
+      isDisabled={!enabled}
+      isActive={active.preformatted()}
+      label="Preformatted"
+      icon={<ShortTextRoundedIcon />}
+    >
+      <p>Preformatted</p>
+    </DropdownButton>
+  );
+};
+
+export default PreformattedButton;

package/src/EditorToolbar/Tools/TextType/TextTypeDropdown.spec.tsx

@@ -0,0 +1,51 @@
+import '@testing-library/jest-dom';
+import { render, fireEvent } from '@testing-library/react';
+import Editor from '../../../Editor/Editor';
+import React from 'react';
+
+const dropdownButtons = [
+  'Paragraph',
+  'Heading 1',
+  'Heading 2',
+  'Heading 3',
+  'Heading 4',
+  'Heading 5',
+  'Heading 6',
+  'Preformatted',
+];
+
+const navigateKeys = ['Enter', 'Space'];
+
+describe('Text type dropdown', () => {
+  it('should render the text type dropdown component', () => {
+    const { baseElement } = render(<Editor />);
+    expect(baseElement).toBeTruthy();
+    expect(baseElement.querySelector('button#dropdownHoverButton')).toBeTruthy();
+  });
+
+  it.each(dropdownButtons)('should render %s button in text type dropdown', (type) => {
+    const { baseElement } = render(<Editor />);
+    expect(baseElement).toBeTruthy();
+
+    const dropdownButton = baseElement.querySelector('button#dropdownHoverButton') as HTMLButtonElement;
+    expect(dropdownButton).toBeTruthy();
+    fireEvent.click(dropdownButton);
+
+    expect(baseElement.querySelector(`button[title="${type}"]`)).toBeTruthy();
+  });
+
+  it.each(navigateKeys)(`should display dropdown if '%s' is pressed while component is in focus`, async (key) => {
+    const { baseElement } = render(<Editor />);
+    expect(baseElement).toBeTruthy();
+
+    const dropdownMenu = baseElement.querySelector('div.toolbar-dropdown__menu') as HTMLDivElement;
+    expect(dropdownMenu.className).not.toContain('block'); // Hidden
+
+    const dropdownButton = baseElement.querySelector('button#dropdownHoverButton') as HTMLButtonElement;
+    fireEvent.keyDown(dropdownButton, { code: key });
+
+    setTimeout(() => {
+      expect(dropdownMenu.className).toContain('block'); // Visible
+    }, 50);
+  });
+});

package/src/EditorToolbar/Tools/TextType/TextTypeDropdown.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import HeadingButton from './Heading/HeadingButton';
+import ParagraphButton from './Paragraph/ParagraphButton';
+import PreformattedButton from './Preformatted/PreformattedButton';
+import CodeBlockButton from './CodeBlock/CodeBlockButton';
+import ToolbarDropdown from '../../../ui/ToolbarDropdown/ToolbarDropdown';
+import { useActive, VerticalDivider } from '@remirror/react';
+import { PreformattedExtension } from '../../../Extensions/PreformattedExtension/PreformattedExtension';
+import { CodeBlockExtension } from 'remirror/dist-types/extensions';
+
+const TextTypeDropdown = () => {
+  const active = useActive<PreformattedExtension | CodeBlockExtension>();
+
+  const activeLabel = () => {
+    // Determine if preformatted is active
+    if (active.preformatted()) {
+      return 'Preformatted';
+    }
+
+    // Determine if codeblock is active
+    if (active.codeBlock()) {
+      return 'Code block';
+    }
+
+    // Determine if a heading is active
+    for (let i = 1; i <= 6; i++) {
+      if (active.heading({ level: i })) {
+        return `Heading ${i}`;
+      }
+    }
+
+    // Default to paragraph
+    return 'Paragraph';
+  };
+
+  return (
+    <>
+      <ToolbarDropdown label={activeLabel()}>
+        <ParagraphButton />
+        <HeadingButton level={1} />
+        <HeadingButton level={2} />
+        <HeadingButton level={3} />
+        <HeadingButton level={4} />
+        <HeadingButton level={5} />
+        <HeadingButton level={6} />
+        <PreformattedButton />
+        <CodeBlockButton />
+      </ToolbarDropdown>
+      <VerticalDivider />
+    </>
+  );
+};
+
+export default TextTypeDropdown;

package/src/EditorToolbar/Tools/Underline/Underline.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('Underline button', () => {
+  it('Renders the underline button', () => {
+    render(<Editor />);
+    expect(screen.getByRole('button', { name: 'Underline (Ctrl+U)' })).toBeInTheDocument();
+  });
+
+  it('Activates the button if clicked', () => {
+    render(<Editor />);
+    expect(screen.getByRole('button', { name: 'Underline (Ctrl+U)' }).classList.contains('squiz-fte-btn')).toBeTruthy();
+    const underline = screen.getByRole('button', { name: 'Underline (Ctrl+U)' });
+    fireEvent.click(underline);
+    expect(underline.classList.contains('squiz-fte-btn--is-active')).toBeTruthy();
+  });
+});