@squiz/formatted-text-editor 1.16.0 → 1.21.1-alpha.10

package/lib/utils/getCursorRect.js

@@ -1,3 +1,7 @@
-export const getCursorRect = (coords) => {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getCursorRect = void 0;
+const getCursorRect = (coords) => {
     return new DOMRect(coords.left, coords.top, 1, coords.top - coords.bottom);
 };
+exports.getCursorRect = getCursorRect;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squiz/formatted-text-editor",
-  "version": "1.16.0",
+  "version": "1.21.1-alpha.10",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "scripts": {
@@ -12,6 +12,7 @@
     "dev": "vite",
     "preview": "vite preview",
     "test": "jest",
+    "test:coverage": "jest --coverage",
     "test:e2e": "vite build && vite preview --port 8080 & cypress open",
     "test:watch": "jest --watch"
   },
@@ -19,8 +20,10 @@
     "@headlessui/react": "1.7.11",
     "@mui/icons-material": "5.11.0",
     "@remirror/react": "2.0.25",
+    "@squiz/dx-json-schema-lib": "1.21.1-alpha.2",
     "clsx": "1.2.1",
-    "react-hook-form": "7.43.2"
+    "react-hook-form": "7.43.2",
+    "react-image-size": "2.0.0"
   },
   "devDependencies": {
     "@testing-library/cypress": "9.0.0",
@@ -42,6 +45,7 @@
     "postcss-nested": "6.0.0",
     "postcss-prefix-selector": "1.16.0",
     "react": "18.2.0",
+    "react-diff-viewer-continued": "3.2.6",
     "react-dom": "18.2.0",
     "rimraf": "4.1.2",
     "tailwindcss": "3.2.6",
@@ -66,5 +70,5 @@
   "volta": {
     "node": "16.19.0"
   },
-  "gitHead": "6fbf11b4507a80f8ef6dd09b489bbebf2bcfbac1"
+  "gitHead": "e4aaed9499051ca99e7f3e3bab76b3ffc1fd0f4b"
 }

package/src/Editor/_editor.scss

@@ -6,12 +6,12 @@
   }
 
   .remirror-editor-wrapper {
-    @apply text-gray-600 pt-0;
+    @apply text-gray-800 pt-0;
   }
 
   .remirror-editor {
     @apply bg-white shadow-none rounded-b p-3;
-    min-height: 6rem;
+    overflow: auto;
 
     &:active,
     &:focus {
@@ -33,50 +33,3 @@
     @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.tsx

@@ -27,7 +27,7 @@ export const FloatingToolbar = () => {
   } 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" />,
+      <VerticalDivider key="link-divider" className="editor-divider" />,
       <LinkButton key="add-link" inPopover={true} />,
     );
   }

package/src/EditorToolbar/Toolbar.tsx

@@ -9,6 +9,7 @@ import RedoButton from './Tools/Redo/RedoButton';
 import TextTypeDropdown from './Tools/TextType/TextTypeDropdown';
 import { useExtensionNames } from '../hooks';
 import LinkButton from './Tools/Link/LinkButton';
+import ImageButton from './Tools/Image/ImageButton';
 
 export const Toolbar = () => {
   const extensionNames = useExtensionNames();
@@ -28,6 +29,7 @@ export const Toolbar = () => {
       {extensionNames.underline && <UnderlineButton />}
       {extensionNames.nodeFormatting && <TextAlignButtons />}
       {extensionNames.link && <LinkButton />}
+      {extensionNames.image && <ImageButton />}
     </RemirrorToolbar>
   );
 };

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

@@ -14,6 +14,6 @@ describe('Bold button', () => {
     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();
+    expect(bold.classList.contains('squiz-fte-btn--is-active')).toBeTruthy();
   });
 });

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

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

package/src/EditorToolbar/Tools/Image/Form/ImageForm.spec.tsx

@@ -0,0 +1,23 @@
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import ImageForm from './ImageForm';
+
+describe('Image Form', () => {
+  const handleSubmit = jest.fn();
+  const data = {
+    src: 'https://httpcats.com/302.jpg',
+    alt: 'Cat with mouse in mouth',
+    width: 1600,
+    height: 1400,
+  };
+
+  it('Renders the form with the relevant fields', () => {
+    render(<ImageForm data={data} onSubmit={handleSubmit} />);
+
+    expect(screen.getByLabelText('Source')).toHaveValue('https://httpcats.com/302.jpg');
+    expect(screen.getByLabelText('Alternative description')).toHaveValue('Cat with mouse in mouth');
+    expect(screen.getByLabelText('Width')).toHaveValue(1600);
+    expect(screen.getByLabelText('Height')).toHaveValue(1400);
+  });
+});

package/src/EditorToolbar/Tools/Image/Form/ImageForm.tsx

@@ -0,0 +1,92 @@
+import React, { ReactElement, useState } from 'react';
+import { Input } from '../../../../ui/Fields/Input/Input';
+import { SubmitHandler, useForm } from 'react-hook-form';
+import { getImageSize } from 'react-image-size';
+import { ImageAttributes } from '@remirror/extension-image/dist-types/image-extension';
+import Button from '../../../../ui/Button/Button';
+import LinkOffIcon from '@mui/icons-material/LinkOff';
+import InsertLinkRoundedIcon from '@mui/icons-material/InsertLinkRounded';
+
+export type UpdateImageOptions = ImageAttributes & {
+  src: string;
+  alt: string;
+  width: number;
+  height: number;
+};
+export type ImageFormData = Pick<UpdateImageOptions, 'src' | 'alt' | 'width' | 'height'>;
+
+export type FormProps = {
+  data: Partial<ImageFormData>;
+  onSubmit: SubmitHandler<ImageFormData>;
+};
+export type Dimensions = 'width' | 'height';
+
+const ImageForm = ({ data, onSubmit }: FormProps): ReactElement => {
+  const { register, handleSubmit, setValue } = useForm<ImageFormData>({
+    defaultValues: data,
+  });
+  const [aspectRatioFromWidth, setAspectRatioFromWidth] = useState(9 / 16);
+  const [aspectRatioFromHeight, setAspectRatioFromHeight] = useState(16 / 9);
+  const [aspectRatioLocked, setAspectRatioLocked] = useState(true);
+
+  const setDimensionsFromURL = (e: { target: { value: string } }) => {
+    // get the new url, calculate the width and height and set those fields
+    getImageSize(e.target.value)
+      .then(({ width, height }) => {
+        setValue('width', width);
+        setValue('height', height);
+        setAspectRatioFromWidth(height / width);
+        setAspectRatioFromHeight(width / height);
+      })
+      .catch((errorMessage) => {
+        // TODO: we will use this when we add validation in a follow-up ticket
+        console.log(errorMessage);
+      });
+  };
+
+  const calculateDimensions = () => {
+    if (aspectRatioLocked) {
+      const currentTarget = event?.target as HTMLInputElement;
+      const type = currentTarget.name as Dimensions;
+      const currentValue = currentTarget.value as string;
+      const otherValue = type === 'width' ? 'height' : 'width';
+      const aspectRatio = type === 'width' ? aspectRatioFromWidth : aspectRatioFromHeight;
+      const newValue = Math.round(aspectRatio * Number(currentValue) * 100) / 100;
+      setValue(otherValue, newValue);
+    }
+  };
+
+  const toggleAspectRatio = () => {
+    setAspectRatioLocked(!aspectRatioLocked);
+  };
+
+  return (
+    <form className="squiz-fte-form" onSubmit={handleSubmit(onSubmit)}>
+      <div className="squiz-fte-form-group mb-2">
+        <Input label="Source" {...register('src')} onBlur={setDimensionsFromURL} />
+      </div>
+      <div className="squiz-fte-form-group mb-2">
+        <Input label="Alternative description" {...register('alt')} />
+      </div>
+      <div className="flex flex-row items-end">
+        <div className="squiz-fte-form-group mb-2">
+          <Input label="Width" {...register('width')} type="number" name="width" onChange={calculateDimensions} />
+        </div>
+        <div className="flex mx-1 mb-2">
+          <Button
+            handleOnClick={toggleAspectRatio}
+            isActive={false}
+            icon={aspectRatioLocked ? <InsertLinkRoundedIcon /> : <LinkOffIcon />}
+            label="Constrain properties"
+            isDisabled={false}
+          />
+        </div>
+        <div className="squiz-fte-form-group mb-2">
+          <Input label="Height" {...register('height')} type="number" name="height" onChange={calculateDimensions} />
+        </div>
+      </div>
+    </form>
+  );
+};
+
+export default ImageForm;

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

@@ -0,0 +1,79 @@
+import '@testing-library/jest-dom';
+import { screen, fireEvent, waitForElementToBeRemoved, act } from '@testing-library/react';
+import React from 'react';
+import { renderWithEditor } from '../../../../tests';
+import ImageButton from './ImageButton';
+
+describe('ImageButton', () => {
+  const openModal = async () => {
+    fireEvent.click(screen.getByRole('button', { name: 'Image (cmd+L)' }));
+    await screen.findByRole('button', { name: 'Apply' });
+  };
+
+  it('Opens the modal when clicking on the image button', async () => {
+    await renderWithEditor(<ImageButton />);
+
+    // open the modal and assert it is visible.
+    await openModal();
+    const modalHeading = screen.getByRole('heading', { name: 'Image' });
+    expect(modalHeading).toBeInTheDocument();
+  });
+
+  it('Opens the modal when clicking the keyboard shortcut', async () => {
+    const { editor, elements } = await renderWithEditor(<ImageButton />);
+
+    // press the keyboard shortcut.
+    fireEvent.keyDown(elements.editor, { key: 'l', ctrlKey: true });
+
+    // verify the modal opens
+    await act(() => editor.selectText(2));
+    expect(await screen.findByLabelText('Source')).toHaveValue('');
+  });
+
+  it('Adds a new image', async () => {
+    const { getJsonContent } = await renderWithEditor(<ImageButton />, { content: 'Some nonsense content here' });
+
+    // open the modal and add an image.
+    await openModal();
+    fireEvent.change(screen.getByLabelText('Source'), { target: { value: 'https://httpcats.com/529.jpg' } });
+    fireEvent.change(screen.getByLabelText('Alternative description'), { target: { value: 'Many cats' } });
+    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: 'image',
+          attrs: {
+            alt: 'Many cats',
+            crop: null,
+            height: '',
+            width: '',
+            rotate: null,
+            src: 'https://httpcats.com/529.jpg',
+            title: '',
+            fileName: null,
+            resizable: false,
+          },
+        },
+        { type: 'text', text: 'Some nonsense content here' },
+      ],
+    });
+  });
+
+  it('Closes the modal when clicking on the cancel button', async () => {
+    await renderWithEditor(<ImageButton />);
+
+    // open the modal and assert it is visible.
+    await openModal();
+    const modalHeading = screen.getByRole('heading', { name: 'Image' });
+    expect(modalHeading).toBeInTheDocument();
+
+    // close the modal and assert it has disappeared.
+    fireEvent.click(screen.getByRole('button', { name: 'Cancel' }));
+    expect(modalHeading).not.toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,57 @@
+import React, { useState, useCallback } from 'react';
+import ImageRoundedIcon from '@mui/icons-material/ImageRounded';
+import ImageModal from './ImageModal';
+import { ImageFormData } from './Form/ImageForm';
+import Button from '../../../ui/Button/Button';
+import { useCommands, useKeymap } from '@remirror/react';
+
+const ImageButton = () => {
+  const [showModal, setShowModal] = useState(false);
+  const { insertImage } = useCommands();
+  const active = showModal;
+
+  const handleClick = () => {
+    if (!showModal) {
+      // form element are uncontrolled, let the event loop run to
+      // update the selected text in state before showing the modal.
+      requestAnimationFrame(() => {
+        setShowModal(true);
+      });
+    }
+  };
+
+  const insertImageFromData = (data: ImageFormData) => {
+    const { src, alt, width, height } = data;
+    if (src) {
+      insertImage({ src, alt, width, height });
+    }
+  };
+
+  const handleSubmit = (data: ImageFormData) => {
+    insertImageFromData(data);
+    setShowModal(false);
+  };
+
+  const handleShortcut = useCallback(() => {
+    handleClick();
+    // Prevent other key handlers being run
+    return true;
+  }, []);
+
+  useKeymap('Mod-l', handleShortcut);
+
+  return (
+    <>
+      <Button
+        handleOnClick={handleClick}
+        isActive={active}
+        icon={<ImageRoundedIcon />}
+        label="Image (cmd+L)"
+        isDisabled={false}
+      />
+      {showModal && <ImageModal onCancel={() => setShowModal(false)} onSubmit={handleSubmit} />}
+    </>
+  );
+};
+
+export default ImageButton;

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

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

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

@@ -0,0 +1,29 @@
+import { getMarkRanges } from 'remirror';
+import ImageForm, { ImageFormData } from './Form/ImageForm';
+import React from 'react';
+import { useRemirrorContext, useCurrentSelection } from '@remirror/react';
+import FormModal from '../../../ui/Modal/FormModal';
+import { SubmitHandler } from 'react-hook-form';
+
+type ImageModalProps = {
+  onCancel: () => void;
+  onSubmit: SubmitHandler<ImageFormData>;
+};
+
+const ImageModal = ({ onCancel, onSubmit }: ImageModalProps) => {
+  const {
+    helpers,
+    view: { state },
+  } = useRemirrorContext();
+  const selection = useCurrentSelection();
+  const currentImage = getMarkRanges(selection, 'image')[0];
+  const selectedImage = helpers.getTextBetween(selection.from, selection.to, state.doc);
+
+  return (
+    <FormModal title="Image" onCancel={onCancel}>
+      <ImageForm data={{ ...currentImage?.mark.attrs, src: selectedImage }} onSubmit={onSubmit} />
+    </FormModal>
+  );
+};
+
+export default ImageModal;

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

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

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

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

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

@@ -1,6 +1,6 @@
 import React, { ReactElement } from 'react';
-import { TextInput } from '../../../../ui/Inputs/Text/TextInput';
-import { Select, SelectOptions } from '../../../../ui/Inputs/Select/Select';
+import { Input } from '../../../../ui/Fields/Input/Input';
+import { Select, SelectOptions } from '../../../../ui/Fields/Select/Select';
 import { SubmitHandler, useForm } from 'react-hook-form';
 import { UpdateLinkOptions } from '../../../../Extensions/LinkExtension/LinkExtension';
 
@@ -24,13 +24,13 @@ const LinkForm = ({ data, onSubmit }: FormProps): ReactElement => {
   return (
     <form className="squiz-fte-form" onSubmit={handleSubmit(onSubmit)}>
       <div className="squiz-fte-form-group mb-2">
-        <TextInput label="URL" {...register('href')} />
+        <Input label="URL" {...register('href')} />
       </div>
       <div className="squiz-fte-form-group mb-2">
-        <TextInput label="Text" {...register('text')} />
+        <Input label="Text" {...register('text')} />
       </div>
       <div className="squiz-fte-form-group mb-2">
-        <TextInput label="Title" {...register('title')} />
+        <Input label="Title" {...register('title')} />
       </div>
       <div className="squiz-fte-form-group mb-0">
         <Select

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

@@ -2,7 +2,7 @@ import React, { useCallback, useState } from 'react';
 import InsertLinkRoundedIcon from '@mui/icons-material/InsertLinkRounded';
 import LinkModal from './LinkModal';
 import { LinkFormData } from './Form/LinkForm';
-import ToolbarButton from '../../../ui/ToolbarButton/ToolbarButton';
+import Button from '../../../ui/Button/Button';
 import { useActive, useCommands, useExtensionEvent } from '@remirror/react';
 import { LinkExtension } from '../../../Extensions/LinkExtension/LinkExtension';
 
@@ -42,7 +42,7 @@ const LinkButton = ({ inPopover = false }: LinkButtonProps) => {
 
   return (
     <>
-      <ToolbarButton
+      <Button
         handleOnClick={handleClick}
         isActive={active.link()}
         icon={<InsertLinkRoundedIcon />}

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useRemirrorContext, useChainedCommands } from '@remirror/react';
-import ToolbarButton from '../../../ui/ToolbarButton/ToolbarButton';
+import Button from '../../../ui/Button/Button';
 import LinkOffIcon from '@mui/icons-material/LinkOff';
 
 const RemoveLinkButton = () => {
@@ -14,7 +14,7 @@ const RemoveLinkButton = () => {
   };
 
   return (
-    <ToolbarButton
+    <Button
       handleOnClick={handleClick}
       isActive={false}
       isDisabled={!enabled}

package/src/EditorToolbar/Tools/Redo/RedoButton.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useCommands, useHelpers } from '@remirror/react';
 import { HistoryExtension } from 'remirror/extensions';
-import ToolbarButton from '../../../ui/ToolbarButton/ToolbarButton';
+import Button from '../../../ui/Button/Button';
 import RedoRoundedIcon from '@mui/icons-material/RedoRounded';
 
 const RedoButton = () => {
@@ -17,7 +17,7 @@ const RedoButton = () => {
   const enabled = redoDepth() > 0;
 
   return (
-    <ToolbarButton
+    <Button
       handleOnClick={handleSelect}
       isDisabled={!enabled}
       isActive={false}

package/src/EditorToolbar/Tools/TextAlign/CenterAlign/CenterAlignButton.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useCommands, useChainedCommands } from '@remirror/react';
 import { NodeFormattingExtension } from '@remirror/extension-node-formatting';
-import ToolbarButton from '../../../../ui/ToolbarButton/ToolbarButton';
+import Button from '../../../../ui/Button/Button';
 import FormatAlignCenterIcon from '@mui/icons-material/FormatAlignCenter';
 
 const CenterAlignButton = () => {
@@ -18,7 +18,7 @@ const CenterAlignButton = () => {
   const enabled = centerAlign.enabled();
 
   return (
-    <ToolbarButton
+    <Button
       handleOnClick={handleSelect}
       isDisabled={!enabled}
       isActive={active}