@squiz/formatted-text-editor 1.21.1-alpha.2 → 1.21.1-alpha.20

package/src/Editor/_editor.scss

@@ -1,17 +1,15 @@
 .formatted-text-editor {
   font-family: 'Open Sans' !important;
-
-  &.editor-wrapper {
-    @apply bg-white rounded border-gray-300 border-2 border-solid;
-  }
+  @apply bg-white rounded border-gray-300 border-2 border-solid;
 
   .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;
+    min-height: 15vh;
 
     &:active,
     &:focus {
@@ -24,6 +22,15 @@
     }
   }
 
+  &--is-disabled {
+    .remirror-editor {
+      @apply bg-gray-300 cursor-not-allowed;
+    }
+    .remirror-is-empty:first-of-type::before {
+      display: none;
+    }
+  }
+
   .remirror-is-empty:first-of-type::before {
     position: absolute;
     pointer-events: none;
@@ -32,51 +39,7 @@
     content: attr(data-placeholder);
     @apply text-gray-500;
   }
-}
-
-a {
-  @apply text-blue-300;
-  text-decoration: underline;
-}
-
-.remirror-theme h1 {
-  font-size: 1.625rem;
-  font-weight: 600;
-  letter-spacing: -0.2px;
-  line-height: 2rem;
-}
-
-.remirror-theme h2 {
-  font-size: 1.25rem;
-  font-weight: 600;
-  letter-spacing: -0.5px;
-  line-height: 1.5rem;
-}
-
-.remirror-theme h3 {
-  font-size: 1.125rem;
-  font-weight: 600;
-  letter-spacing: -0.2px;
-  line-height: 1.375rem;
-}
-
-.remirror-theme h4 {
-  font-size: 1rem;
-  font-weight: 700;
-  letter-spacing: -0.2px;
-  line-height: 1.25rem;
-}
-
-.remirror-theme h5 {
-  font-size: 1rem;
-  font-weight: 600;
-  letter-spacing: -0.2px;
-  line-height: 1.25rem;
-}
-
-.remirror-theme h6 {
-  font-size: 0.875rem;
-  font-weight: 600;
-  letter-spacing: -0.2px;
-  line-height: 1.25rem;
+  .ProseMirror-selectednode {
+    @apply border-blue-300 border-2 border-solid;
+  }
 }

package/src/EditorToolbar/FloatingToolbar.spec.tsx

@@ -1,7 +1,5 @@
-import React from 'react';
 import { act, screen } from '@testing-library/react';
 import { renderWithEditor } from '../../tests';
-import { FloatingToolbar } from './FloatingToolbar';
 
 describe('FloatingToolbar', () => {
   it.each([
@@ -15,8 +13,9 @@ describe('FloatingToolbar', () => {
   ])(
     'Renders formatting buttons when text is selected - %s',
     async (description: string, from: number, to: number, expectedButtons: string[]) => {
-      const { editor } = await renderWithEditor(<FloatingToolbar />, {
+      const { editor } = await renderWithEditor(null, {
         content: 'My awesome <a href="https://example.org">example</a> content.',
+        editable: true,
       });
 
       await act(() => editor.selectText({ from, to }));

package/src/EditorToolbar/FloatingToolbar.tsx

@@ -5,26 +5,38 @@ import BoldButton from './Tools/Bold/BoldButton';
 import { useExtensionNames } from '../hooks';
 import RemoveLinkButton from './Tools/Link/RemoveLinkButton';
 import LinkButton from './Tools/Link/LinkButton';
-import { FloatingToolbar as RemirrorFloatingToolbar, usePositioner } from '@remirror/react';
+import { FloatingToolbar as RemirrorFloatingToolbar, useActive, usePositioner } from '@remirror/react';
 import { VerticalDivider } from '@remirror/react-components';
 import { createToolbarPositioner, ToolbarPositionerRange } from '../utils/createToolbarPositioner';
+import ImageButton from './Tools/Image/ImageButton';
+import { MarkName } from '../Extensions/Extensions';
+import { ImageExtension } from '../Extensions/ImageExtension/ImageExtension';
 
-// The editor main toolbar
 export const FloatingToolbar = () => {
+  const watchedMarks = [MarkName.Link, MarkName.AssetLink];
   const extensionNames = useExtensionNames();
-  const positioner = useMemo(() => createToolbarPositioner({ types: ['link'] }), []);
-  const { data } = usePositioner<Partial<ToolbarPositionerRange>>(positioner, []);
+  const positioner = useMemo(() => createToolbarPositioner({ types: watchedMarks }), []);
+  const active = useActive<ImageExtension>();
+  const {
+    data: { marks },
+  } = usePositioner<Partial<ToolbarPositionerRange>>(positioner, []);
+
   let buttons = [
     extensionNames.bold && <BoldButton key="bold" />,
     extensionNames.italic && <ItalicButton key="italic" />,
     extensionNames.underline && <UnderlineButton key="underline" />,
   ];
 
-  if (data.marks?.link.isExclusivelyActive) {
+  if (active.image()) {
+    buttons.push(
+      <VerticalDivider key="image-divider" className="editor-divider" />,
+      <ImageButton key="add-image" inPopover={true} />,
+    );
+  } else if (marks?.[MarkName.Link].isExclusivelyActive || marks?.[MarkName.AssetLink].isExclusivelyActive) {
     // if all of the selected text is a link show the options to update/remove the link instead of the regular
     // formatting options.
     buttons = [<LinkButton key="update-link" inPopover={true} />, <RemoveLinkButton key="remove-link" />];
-  } else if (!data.marks?.link.isActive) {
+  } else if (!marks?.[MarkName.Link].isActive && !marks?.[MarkName.AssetLink].isActive) {
     // if none of the selected text is a link show the option to create a link.
     buttons.push(
       <VerticalDivider key="link-divider" className="editor-divider" />,

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,77 @@
+import '@testing-library/jest-dom';
+import { render, screen, act, fireEvent } 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);
+  });
+
+  it('calculates the height when width changes and aspect ratio is locked', () => {
+    render(<ImageForm data={data} onSubmit={handleSubmit} />);
+    const widthInput = screen.getByLabelText('Width');
+    const heightInput = screen.getByLabelText('Height');
+
+    // change the width value
+    act(() => {
+      fireEvent.change(widthInput, { target: { value: 800 } });
+    });
+
+    // check that the height value has been calculated correctly
+    expect(heightInput).toHaveValue(450);
+  });
+
+  it('calculates the width when height changes and aspect ratio is locked', () => {
+    render(<ImageForm data={data} onSubmit={handleSubmit} />);
+    const widthInput = screen.getByLabelText('Width');
+    const heightInput = screen.getByLabelText('Height');
+
+    // change the height value
+    act(() => {
+      fireEvent.change(heightInput, { target: { value: 800 } });
+    });
+
+    // check that the width value has been calculated correctly
+    expect(widthInput).toHaveValue(1422.22);
+  });
+
+  it('does not calculate dimensions when aspect ratio is unlocked', () => {
+    render(<ImageForm data={data} onSubmit={handleSubmit} />);
+    const widthInput = screen.getByLabelText('Width');
+    const heightInput = screen.getByLabelText('Height');
+    const toggleButton = screen.getByRole('button', { name: 'Constrain properties' });
+
+    // unlock the aspect ratio
+    fireEvent.click(toggleButton);
+
+    // change the width value
+    act(() => {
+      fireEvent.change(widthInput, { target: { value: 800 } });
+    });
+
+    // check that the height value has not been calculated
+    expect(heightInput).toHaveValue(1400);
+
+    // change the height value
+    act(() => {
+      fireEvent.change(heightInput, { target: { value: 800 } });
+    });
+
+    // check that the width value has not been calculated
+    expect(widthInput).toHaveValue(800);
+  });
+});

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

@@ -0,0 +1,90 @@
+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 } }) => {
+    getImageSize(e.target.value)
+      .then(({ width, height }) => {
+        setValue('width', width);
+        setValue('height', height);
+        setAspectRatioFromWidth(height / width);
+        setAspectRatioFromHeight(width / height);
+      })
+      .catch(() => {
+        // TODO: we will use this when we add validation in a follow-up ticket
+      });
+  };
+
+  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', { onChange: 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,135 @@
+import '@testing-library/jest-dom';
+import { screen, fireEvent, waitForElementToBeRemoved, act } from '@testing-library/react';
+import { NodeSelection } from 'prosemirror-state';
+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('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!' } });
+    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: 'image',
+          attrs: {
+            alt: 'Updated cats!',
+            crop: null,
+            height: null,
+            width: null,
+            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();
+  });
+});

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

@@ -0,0 +1,71 @@
+import React, { useState, useCallback, useMemo } 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, useActive, usePositioner } from '@remirror/react';
+import { ImageExtension } from '../../../Extensions/ImageExtension/ImageExtension';
+import { createToolbarPositioner, ToolbarPositionerRange } from '../../../utils/createToolbarPositioner';
+
+type ImageButtonProps = {
+  inPopover?: boolean;
+};
+
+const ImageButton = ({ inPopover = false }: ImageButtonProps) => {
+  const [showModal, setShowModal] = useState(false);
+  const { insertImage } = useCommands();
+  const active = useActive<ImageExtension>();
+  const positioner = useMemo(() => createToolbarPositioner({ types: ['link'] }), []);
+  const { data } = usePositioner<Partial<ToolbarPositionerRange>>(positioner, []);
+  // if the active selection is not an image, disable the button as it means it will be text
+  const disabled = data.isSelectionInView && !active.image() ? true : false;
+
+  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;
+  }, []);
+
+  if (!inPopover) {
+    // when Ctrl+l is pressed show the modal, only registered in the toolbar button instance to avoid the key press
+    // being double handled.
+    useKeymap('Mod-l', handleShortcut);
+  }
+
+  return (
+    <>
+      <Button
+        handleOnClick={handleClick}
+        isActive={active.image()}
+        icon={<ImageRoundedIcon />}
+        label="Image (cmd+L)"
+        isDisabled={disabled}
+      />
+      {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();
+  });
+});