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

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

@@ -0,0 +1,385 @@
+import '@testing-library/jest-dom';
+import { screen, fireEvent, waitForElementToBeRemoved, act, waitFor } from '@testing-library/react';
+import { NodeSelection } from 'prosemirror-state';
+import React from 'react';
+import { renderWithEditor, mockResourceBrowserContext } from '../../../../tests';
+import ImageButton from './ImageButton';
+import { getImageSize } from 'react-image-size';
+
+jest.mock('react-image-size');
+
+describe('ImageButton', () => {
+  const openModal = async () => {
+    fireEvent.click(screen.getByRole('button', { name: 'Image (Ctrl+L)' }));
+    await screen.findByRole('button', { name: 'Apply' });
+    fireEvent.click(screen.getByRole('button', { name: 'From URL' }));
+  };
+
+  beforeEach(() => {
+    (getImageSize as jest.Mock).mockResolvedValue({ width: 2, height: 2 });
+  });
+
+  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 { elements } = await renderWithEditor(<ImageButton />);
+
+    // press the keyboard shortcut.
+    fireEvent.keyDown(elements.editor, { key: 'l', ctrlKey: true });
+
+    // verify the modal opens
+    expect(await screen.findByRole('button', { name: 'Choose image' })).toBeInTheDocument();
+  });
+
+  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('Updates the attributes of an existing image', async () => {
+    const { editor, getJsonContent } = await renderWithEditor(<ImageButton />, {
+      content: 'Some <img src="https://httpcats.com/529.jpg" alt="hi" /> nonsense',
+    });
+
+    await act(() => editor.selectText(new NodeSelection(editor.state.doc.resolve(6))));
+
+    await openModal();
+    fireEvent.change(screen.getByLabelText('Source'), { target: { value: 'https://httpcats.com/303.jpg' } });
+    fireEvent.change(screen.getByLabelText('Alternative description'), { target: { value: 'Updated cats!' } });
+
+    // wait for the new image dimensions to be calculated
+    await waitFor(() => expect(screen.getByLabelText('Height')).toHaveValue(2));
+
+    // verify the content matches what was initially set prior to applying
+    expect(getJsonContent()).toEqual({
+      type: 'paragraph',
+      attrs: expect.any(Object),
+      content: [
+        {
+          text: 'Some ',
+          type: 'text',
+        },
+        {
+          type: 'image',
+          attrs: {
+            alt: 'hi',
+            crop: null,
+            height: null,
+            width: null,
+            rotate: null,
+            src: 'https://httpcats.com/529.jpg',
+            title: '',
+            fileName: null,
+            resizable: false,
+          },
+        },
+        { type: 'text', text: ' nonsense' },
+      ],
+    });
+
+    // apply the changes
+    fireEvent.click(screen.getByRole('button', { name: 'Apply' }));
+
+    await waitForElementToBeRemoved(() => screen.getByRole('button', { name: 'Apply' }));
+
+    // asset the content has been updated
+    expect(getJsonContent()).toEqual({
+      type: 'paragraph',
+      attrs: expect.any(Object),
+      content: [
+        {
+          text: 'Some ',
+          type: 'text',
+        },
+        {
+          type: 'image',
+          attrs: {
+            alt: 'Updated cats!',
+            crop: null,
+            height: 2,
+            width: 2,
+            rotate: null,
+            src: 'https://httpcats.com/303.jpg',
+            title: '',
+            fileName: null,
+            resizable: false,
+          },
+        },
+        { type: 'text', text: ' nonsense' },
+      ],
+    });
+  });
+
+  it('Removes the image when content is cleared (backspaced)', async () => {
+    const { editor, getJsonContent } = await renderWithEditor(<ImageButton />, {
+      content: '<img src="https://media2.giphy.com/media/3o6ozsIxg5legYvggo/giphy.gif"/>',
+    });
+
+    await act(() => editor.selectText(10));
+    await act(() => editor.backspace(1));
+
+    expect(getJsonContent()).toEqual({
+      type: 'paragraph',
+      attrs: expect.any(Object),
+    });
+  });
+
+  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();
+  });
+
+  it('Adds a new image with no source field', async () => {
+    await renderWithEditor(<ImageButton />, { content: 'Some nonsense content here' });
+
+    // open the modal and add an image.
+    await openModal();
+    fireEvent.change(screen.getByLabelText('Source'), { target: { value: '' } });
+    fireEvent.click(screen.getByRole('button', { name: 'Apply' }));
+    expect(await screen.findByText('Source is required')).toBeInTheDocument();
+  });
+
+  it('Adds a new image with data URI in source field', async () => {
+    await renderWithEditor(<ImageButton />);
+
+    const dataUri = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
+
+    // open the modal and add an image.
+    await openModal();
+    fireEvent.change(screen.getByLabelText('Source'), { target: { value: dataUri } });
+    fireEvent.click(screen.getByRole('button', { name: 'Apply' }));
+    expect(await screen.findByText('Must not be a data URI')).toBeInTheDocument();
+  });
+
+  it('Adds a new image with a non-image URL in source field', async () => {
+    (getImageSize as jest.Mock).mockRejectedValue('error: not an image');
+
+    await renderWithEditor(<ImageButton />);
+
+    // open the modal and add an image.
+    await openModal();
+    fireEvent.change(screen.getByLabelText('Source'), { target: { value: 'https://not-an-image.com/not-an-image' } });
+    fireEvent.click(screen.getByRole('button', { name: 'Apply' }));
+    expect(await screen.findByText('Must be a valid image URL')).toBeInTheDocument();
+  });
+
+  it('Adds a new image with no alt text', async () => {
+    await renderWithEditor(<ImageButton />, { content: 'Some tacos 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: '' } });
+    fireEvent.click(screen.getByRole('button', { name: 'Apply' }));
+
+    await waitFor(() => {
+      expect(document.querySelector('img[src="https://httpcats.com/529.jpg"]')).toBeInTheDocument();
+    });
+  });
+
+  it('Adds a new image with no width or height text', async () => {
+    await renderWithEditor(<ImageButton />, { content: 'Some beautiful content here' });
+
+    // open the modal and add an image.
+    await openModal();
+    fireEvent.change(screen.getByLabelText('Width'), { target: { value: '' } });
+    fireEvent.change(screen.getByLabelText('Height'), { target: { value: '' } });
+    fireEvent.click(screen.getByRole('button', { name: 'Apply' }));
+    expect(await screen.findByText('Width is required')).toBeInTheDocument();
+    expect(await screen.findByText('Height is required')).toBeInTheDocument();
+  });
+
+  it('Adds a new asset image', async () => {
+    const matrixIdentifier = 'matrix-api-identifier';
+    const matrixDomain = 'https://my-matrix.squiz.net';
+    const { MockResourceBrowserContext, selectResource } = mockResourceBrowserContext({
+      sources: [{ id: matrixIdentifier }],
+      resources: [
+        {
+          id: 'image-resource-id',
+          name: 'My image resource',
+          type: {
+            code: 'image',
+            name: 'Image',
+          },
+        },
+      ],
+    });
+
+    const { getJsonContent } = await renderWithEditor(
+      <MockResourceBrowserContext>
+        <ImageButton />
+      </MockResourceBrowserContext>,
+      {
+        content: 'Some nonsense content here',
+        context: {
+          editor: {
+            matrix: {
+              matrixDomain,
+            },
+          },
+        },
+      },
+    );
+
+    // open the modal and add an image.
+    await openModal();
+    fireEvent.click(screen.getByRole('button', { name: 'From source' }));
+    await waitFor(() => {
+      screen.getByRole('button', { name: 'Choose image' });
+    });
+    await selectResource(screen.getByRole('button', { name: 'Choose image' }), 'My image resource');
+    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: 'assetImage',
+          attrs: {
+            matrixAssetId: 'image-resource-id',
+            matrixIdentifier,
+            matrixDomain,
+            src: 'https://default-resource/',
+          },
+        },
+        { type: 'text', text: 'Some nonsense content here' },
+      ],
+    });
+  });
+
+  it('Updates the attributes of an existing asset image', async () => {
+    const matrixIdentifier = 'matrix-api-identifier';
+    const matrixDomain = 'https://my-matrix.squiz.net';
+    const { MockResourceBrowserContext, selectResource } = mockResourceBrowserContext({
+      sources: [{ id: matrixIdentifier }],
+      resources: [
+        {
+          id: 'image-resource-id',
+          name: 'My image resource',
+          type: {
+            code: 'image',
+            name: 'Image',
+          },
+        },
+      ],
+    });
+
+    const { editor, getJsonContent } = await renderWithEditor(
+      <MockResourceBrowserContext>
+        <ImageButton />
+      </MockResourceBrowserContext>,
+      {
+        content: 'Some <img src="https://httpcats.com/529.jpg" alt="hi" /> nonsense',
+        context: {
+          editor: {
+            matrix: {
+              matrixDomain,
+            },
+          },
+        },
+      },
+    );
+
+    await act(() => editor.selectText(new NodeSelection(editor.state.doc.resolve(6))));
+
+    await openModal();
+    fireEvent.click(screen.getByRole('button', { name: 'From source' }));
+    await waitFor(() => {
+      screen.getByRole('button', { name: 'Choose image' });
+    });
+    await selectResource(screen.getByRole('button', { name: 'Choose image' }), 'My image resource');
+    fireEvent.click(screen.getByRole('button', { name: 'Apply' }));
+
+    await waitForElementToBeRemoved(() => screen.getByRole('button', { name: 'Apply' }));
+
+    expect(getJsonContent()).toEqual({
+      type: 'paragraph',
+      attrs: expect.any(Object),
+      content: [
+        {
+          text: 'Some ',
+          type: 'text',
+        },
+        {
+          type: 'assetImage',
+          attrs: {
+            matrixAssetId: 'image-resource-id',
+            matrixIdentifier,
+            matrixDomain,
+            src: 'https://default-resource/',
+          },
+        },
+        { type: 'text', text: ' nonsense' },
+      ],
+    });
+  });
+
+  it('Shows an error if a resource is not selected', async () => {
+    await renderWithEditor(<ImageButton />);
+    await openModal();
+    fireEvent.click(screen.getByRole('button', { name: 'From source' }));
+    await act(() => fireEvent.click(screen.getByRole('button', { name: 'Apply' })));
+
+    expect(screen.getByText('An image must be selected')).toBeInTheDocument();
+  });
+
+  it('Shows an error if the field value is just an empty space', async () => {
+    await renderWithEditor(<ImageButton />);
+
+    await openModal();
+    await act(async () => {
+      fireEvent.change(screen.getByLabelText('Source'), { target: { value: ' ' } });
+    });
+    await act(() => fireEvent.click(screen.getByRole('button', { name: 'Apply' })));
+
+    expect(screen.getAllByText('Empty space is not allowed')).toHaveLength(1);
+  });
+});

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

@@ -0,0 +1,72 @@
+import React, { useCallback, useState } from 'react';
+import { useActive, useCommands, useCurrentSelection, useKeymap } from '@remirror/react';
+import ImageRoundedIcon from '@mui/icons-material/ImageRounded';
+import ImageModal from './ImageModal';
+import { ImageFormData } from './Form/ImageForm';
+import Button from '../../../ui/Button/Button';
+import { ImageExtension } from '../../../Extensions/ImageExtension/ImageExtension';
+import { NodeName } from '../../../Extensions/Extensions';
+import { AssetImageExtension } from '../../../Extensions/ImageExtension/AssetImageExtension';
+import { CodeBlockExtension } from 'remirror/dist-types/extensions';
+import { getShortcutSymbol } from '../../../utils/getShortcutSymbol';
+
+type ImageButtonProps = {
+  inPopover?: boolean;
+};
+
+const ImageButton = ({ inPopover = false }: ImageButtonProps) => {
+  const [showModal, setShowModal] = useState(false);
+  const { insertImage, insertAssetImage } = useCommands<ImageExtension | AssetImageExtension>();
+  const active = useActive<ImageExtension | AssetImageExtension | CodeBlockExtension>();
+  const selection = useCurrentSelection();
+  // if the active selection is not an image, disable the button as it means it will be text
+  const disabled = (!selection.empty && !active.image() && !active.assetImage()) || active.codeBlock();
+
+  const handleClick = () => {
+    if (!showModal) {
+      setShowModal(true);
+    }
+  };
+
+  const insertImageFromData = (data: ImageFormData) => {
+    const { imageType, image, assetImage } = data;
+    if (imageType === NodeName.Image) {
+      insertImage(image);
+    } else {
+      insertAssetImage(assetImage);
+    }
+  };
+
+  const handleSubmit = async (data: ImageFormData) => {
+    insertImageFromData(data);
+    setShowModal(false);
+  };
+
+  const handleShortcut = useCallback(() => {
+    handleClick();
+    // Prevent other key handlers being run
+    return true;
+  }, []);
+
+  // when Ctrl+l is pressed show the modal, only registered in the toolbar button instance to avoid the key press
+  // being double handled.
+  if (!inPopover) {
+    // disable the shortcut if the button is disabled
+    useKeymap('Mod-l', disabled ? () => false : handleShortcut);
+  }
+
+  return (
+    <>
+      <Button
+        handleOnClick={handleClick}
+        isActive={active.image() || active.assetImage()}
+        icon={<ImageRoundedIcon />}
+        label={`Image (${getShortcutSymbol()}+L)`}
+        isDisabled={disabled}
+      />
+      {showModal && <ImageModal onCancel={() => setShowModal(false)} onSubmit={handleSubmit} />}
+    </>
+  );
+};
+
+export default ImageButton;

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

@@ -0,0 +1,123 @@
+import '@testing-library/jest-dom';
+import { screen, fireEvent, waitFor } from '@testing-library/react';
+import React from 'react';
+import { renderWithEditor } from '../../../../tests';
+import ImageModal from './ImageModal';
+import { getImageSize } from 'react-image-size';
+
+jest.mock('react-image-size');
+beforeEach(() => {
+  (getImageSize as jest.Mock).mockResolvedValue({ width: 0, height: 0 });
+});
+const mockSubmitFunction = jest.fn();
+const mockCancelFunction = jest.fn();
+const setup = async () => {
+  const utils = await renderWithEditor(<ImageModal onCancel={mockCancelFunction} onSubmit={mockSubmitFunction} />);
+  fireEvent.click(screen.getByRole('button', { name: 'From URL' }));
+  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 } = await setup();
+    fireEvent.change(sourceInput, { target: { value: 'https://httpcats.com/302.jpg' } });
+    await waitFor(() => {
+      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 } = await setup();
+    fireEvent.change(sourceInput, { target: { value: '' } });
+    await waitFor(() => {
+      expect(widthInput.value).toBe('');
+      expect(heightInput.value).toBe('');
+    });
+  });
+
+  it('Updates the height field with aspect ratio based value from width', async () => {
+    const { widthInput, heightInput } = await setup();
+    fireEvent.change(widthInput, { target: { value: '300' } });
+    await waitFor(() => {
+      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 } = await setup();
+    fireEvent.change(heightInput, { target: { value: '100' } });
+    await waitFor(() => {
+      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', async () => {
+    const { widthInput, heightInput } = await 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', async () => {
+    const { widthInput, heightInput } = await 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', async () => {
+    await setup();
+    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();
+  });
+
+  it('Returns relevant error message if the width is not higher than 0', async () => {
+    const { widthInput } = await setup();
+
+    fireEvent.change(widthInput, { target: { value: '0' } });
+    fireEvent.click(screen.getByRole('button', { name: /Apply/i }));
+    await waitFor(() => {
+      expect(widthInput.value).toBe('0');
+    });
+    expect(await screen.findByText('Must be higher than 0')).toBeInTheDocument();
+  });
+
+  it('Returns relevant error message if the height is not higher than 0', async () => {
+    const { heightInput } = await setup();
+
+    fireEvent.change(heightInput, { target: { value: '0' } });
+    fireEvent.click(screen.getByRole('button', { name: /Apply/i }));
+    await waitFor(() => {
+      expect(heightInput.value).toBe('0');
+    });
+    expect(await screen.findByText('Must be higher than 0')).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,32 @@
+import ImageForm, { ImageFormData } from './Form/ImageForm';
+import React from 'react';
+import { useCurrentSelection } from '@remirror/react';
+import ImageRoundedIcon from '@mui/icons-material/ImageRounded';
+import FormModal from '../../../ui/Modal/FormModal';
+import { SubmitHandler } from 'react-hook-form';
+import { NodeSelection } from 'prosemirror-state';
+import { NodeName } from '../../../Extensions/Extensions';
+
+type ImageModalProps = {
+  onCancel: () => void;
+  onSubmit: SubmitHandler<ImageFormData>;
+};
+
+const ImageModal = ({ onCancel, onSubmit }: ImageModalProps) => {
+  const selection = useCurrentSelection() as NodeSelection;
+  const currentImage = selection?.node;
+  const currentImageAttrs = { ...currentImage?.attrs };
+  const formData = {
+    imageType: currentImage?.type.name === NodeName.Image ? NodeName.Image : NodeName.AssetImage,
+    image: currentImage?.type?.name === NodeName.Image ? currentImageAttrs : {},
+    assetImage: currentImage?.type?.name === NodeName.AssetImage ? currentImageAttrs : {},
+  };
+
+  return (
+    <FormModal title="Image" icon={<ImageRoundedIcon />} onCancel={onCancel}>
+      <ImageForm data={formData} onSubmit={onSubmit} />
+    </FormModal>
+  );
+};
+
+export default ImageModal;

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

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

@@ -0,0 +1,31 @@
+import React from 'react';
+import { useCommands, useActive, useChainedCommands } from '@remirror/react';
+import { ItalicExtension } from '@remirror/extension-italic';
+import Button from '../../../ui/Button/Button';
+import FormatItalicRoundedIcon from '@mui/icons-material/FormatItalicRounded';
+import { getShortcutSymbol } from '../../../utils/getShortcutSymbol';
+
+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 (
+    <Button
+      handleOnClick={handleSelect}
+      isDisabled={!enabled}
+      isActive={active.italic()}
+      icon={<FormatItalicRoundedIcon />}
+      label={`Italic (${getShortcutSymbol()}+I)`}
+    />
+  );
+};
+
+export default ItalicButton;