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

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 ToolbarButton from '../../../../ui/ToolbarButton/ToolbarButton';
+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 (
+    <ToolbarButton
+      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 ToolbarButton from '../../../../ui/ToolbarButton/ToolbarButton';
+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 (
+    <ToolbarButton
+      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 className="editor-divider" />
+      <LeftAlignButton />
+      <CenterAlignButton />
+      <RightAlignButton />
+      <JustifyAlignButton />
+      <VerticalDivider className="editor-divider" />
+    </>
+  );
+};
+
+export default TextAlignButtons;

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="CheckIcon"]')).toBeFalsy();
+
+    fireEvent.click(headingButton);
+    expect(headingButton.querySelector('svg[data-testid="CheckIcon"]')).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="CheckIcon"]')).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="CheckIcon"]')).toBeFalsy();
+
+    fireEvent.click(preformattedButton);
+    expect(preformattedButton.querySelector('svg[data-testid="CheckIcon"]')).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,30 @@
+import React from 'react';
+import { useCommands, useActive } from '@remirror/react';
+import { PreformattedExtension } from '../../../../Extensions/PreformattedExtension/PreformattedExtension';
+import DropdownButton from '../../../../ui/ToolbarDropdownButton/ToolbarDropdownButton';
+
+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"
+    >
+      <pre>Preformatted</pre>
+    </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,44 @@
+import React from 'react';
+import HeadingButton from './Heading/HeadingButton';
+import ParagraphButton from './Paragraph/ParagraphButton';
+import PreformattedButton from './Preformatted/PreformattedButton';
+import ToolbarDropdown from '../../../ui/ToolbarDropdown/ToolbarDropdown';
+import { useActive, VerticalDivider } from '@remirror/react';
+import { PreformattedExtension } from '../../../Extensions/PreformattedExtension/PreformattedExtension';
+
+const TextTypeDropdown = () => {
+  const active = useActive<PreformattedExtension>();
+
+  const activeLabel = () => {
+    // Determine if preformatted is active
+    if (active.preformatted()) {
+      return 'Preformatted';
+    }
+    // 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 />
+      </ToolbarDropdown>
+      <VerticalDivider className="editor-divider" />
+    </>
+  );
+};
+
+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 (cmd+U)' })).toBeInTheDocument();
+  });
+
+  it('Activates the button if clicked', () => {
+    render(<Editor />);
+    expect(screen.getByRole('button', { name: 'Underline (cmd+U)' }).classList.contains('squiz-fte-btn')).toBeTruthy();
+    const underline = screen.getByRole('button', { name: 'Underline (cmd+U)' });
+    fireEvent.click(underline);
+    expect(underline.classList.contains('is-active')).toBeTruthy();
+  });
+});

package/src/EditorToolbar/Tools/Underline/UnderlineButton.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { useCommands, useActive, useChainedCommands } from '@remirror/react';
+import { UnderlineExtension } from '@remirror/extension-underline';
+import ToolbarButton from '../../../ui/ToolbarButton/ToolbarButton';
+import FormatUnderlinedRoundedIcon from '@mui/icons-material/FormatUnderlinedRounded';
+
+const UnderlineButton = () => {
+  const { toggleUnderline } = useCommands();
+  const chain = useChainedCommands();
+
+  const active = useActive<UnderlineExtension>();
+  const enabled = toggleUnderline.enabled();
+  const handleSelect = () => {
+    if (toggleUnderline.enabled()) {
+      chain.toggleUnderline().focus().run();
+    }
+  };
+
+  return (
+    <ToolbarButton
+      handleOnClick={handleSelect}
+      isDisabled={!enabled}
+      isActive={active.underline()}
+      icon={<FormatUnderlinedRoundedIcon />}
+      label="Underline (cmd+U)"
+    />
+  );
+};
+
+export default UnderlineButton;

package/src/EditorToolbar/Tools/Undo/UndoButton.spec.tsx

@@ -0,0 +1,49 @@
+import '@testing-library/jest-dom';
+import { render, screen, fireEvent } from '@testing-library/react';
+import Editor from '../../../Editor/Editor';
+import React from 'react';
+
+describe('Undo button', () => {
+  it('Renders the undo button', () => {
+    render(<Editor />);
+    expect(screen.getByRole('button', { name: 'Undo (cmd+Z)' })).toBeInTheDocument();
+  });
+
+  it('Renders a disabled button if you have not made any changes yet', () => {
+    render(<Editor />);
+    const undo = screen.getByRole('button', { name: 'Undo (cmd+Z)' });
+    expect(undo).toBeDisabled();
+  });
+
+  it('Enables the button when you perform an action', () => {
+    const { baseElement } = render(<Editor />);
+    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();
+    const undo = screen.getByRole('button', { name: 'Undo (cmd+Z)' });
+    expect(undo).not.toBeDisabled();
+  });
+
+  it('Reverts this action when clicked', () => {
+    const { baseElement } = render(<Editor />);
+
+    // perform some action
+    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();
+
+    // Check that this enables the undo button
+    const undo = screen.getByRole('button', { name: 'Undo (cmd+Z)' });
+    expect(undo).not.toBeDisabled();
+
+    // Click the undo button and check that this has reverted the previous action
+    fireEvent.click(undo);
+    expect(baseElement.querySelector('p[data-node-text-align="left"]')).toBeFalsy();
+  });
+});

package/src/EditorToolbar/Tools/Undo/UndoButton.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { useCommands, useHelpers } from '@remirror/react';
+import { HistoryExtension } from 'remirror/extensions';
+import ToolbarButton from '../../../ui/ToolbarButton/ToolbarButton';
+import UndoRoundedIcon from '@mui/icons-material/UndoRounded';
+
+const UndoButton = () => {
+  const { undo } = useCommands<HistoryExtension>();
+  const { undoDepth } = useHelpers<HistoryExtension>(true);
+
+  const handleSelect = () => {
+    if (undo.enabled()) {
+      undo();
+    }
+  };
+
+  const enabled = undoDepth() > 0;
+
+  return (
+    <ToolbarButton
+      handleOnClick={handleSelect}
+      isDisabled={!enabled}
+      isActive={false}
+      icon={<UndoRoundedIcon />}
+      label="Undo (cmd+Z)"
+    />
+  );
+};
+
+export default UndoButton;

package/src/EditorToolbar/_floating-toolbar.scss

@@ -0,0 +1,4 @@
+/// This class is excluded from the scope of squiz-fte-scope as it is outside of the scoped element
+.squiz-fte-scope__floating-popover {
+  @apply bg-white border-gray-200 p-1 shadow rounded-md border flex;
+}

package/src/EditorToolbar/_toolbar.scss

@@ -0,0 +1,16 @@
+.formatted-text-editor .editor-toolbar {
+  @apply bg-white border-gray-200 border-b-2 border-solid p-1;
+
+  display: flex;
+  justify-items: center;
+
+  > *:not(:first-child) {
+    margin: 0 0 0 2px;
+  }
+
+  .editor-divider {
+    @apply -my-1 mx-1 border;
+    margin-right: 2px;
+    height: auto;
+  }
+}

package/src/EditorToolbar/index.ts

@@ -0,0 +1,2 @@
+export * from './FloatingToolbar';
+export * from './Toolbar';