@squiz/formatted-text-editor 1.21.1-alpha.3 → 1.21.1-alpha.4

package/lib/index.css

@@ -376,6 +376,10 @@
 .squiz-fte-scope .z-40 {
   z-index: 40 !important;
 }
+.squiz-fte-scope .mx-1 {
+  margin-left: 0.25rem !important;
+  margin-right: 0.25rem !important;
+}
 .squiz-fte-scope .mx-auto {
   margin-left: auto !important;
   margin-right: auto !important;
@@ -437,6 +441,12 @@
   -moz-user-select: none !important;
   user-select: none !important;
 }
+.squiz-fte-scope .flex-row {
+  flex-direction: row !important;
+}
+.squiz-fte-scope .items-end {
+  align-items: flex-end !important;
+}
 .squiz-fte-scope .items-center {
   align-items: center !important;
 }
@@ -566,6 +576,47 @@
   --tw-blur: blur(8px) !important;
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important;
 }
+.squiz-fte-scope a {
+  --tw-text-opacity: 1;
+  color: rgb(7 116 210 / var(--tw-text-opacity));
+  text-decoration: underline;
+}
+.squiz-fte-scope h1 {
+  font-size: 1.625rem;
+  font-weight: 600;
+  letter-spacing: -0.2px;
+  line-height: 2rem;
+}
+.squiz-fte-scope h2 {
+  font-size: 1.25rem;
+  font-weight: 600;
+  letter-spacing: -0.5px;
+  line-height: 1.5rem;
+}
+.squiz-fte-scope h3 {
+  font-size: 1.125rem;
+  font-weight: 600;
+  letter-spacing: -0.2px;
+  line-height: 1.375rem;
+}
+.squiz-fte-scope h4 {
+  font-size: 1rem;
+  font-weight: 700;
+  letter-spacing: -0.2px;
+  line-height: 1.25rem;
+}
+.squiz-fte-scope h5 {
+  font-size: 1rem;
+  font-weight: 600;
+  letter-spacing: -0.2px;
+  line-height: 1.25rem;
+}
+.squiz-fte-scope h6 {
+  font-size: 0.875rem;
+  font-weight: 600;
+  letter-spacing: -0.2px;
+  line-height: 1.25rem;
+}
 .squiz-fte-scope .squiz-fte-form-group {
   display: flex;
   flex-direction: column;
@@ -611,29 +662,6 @@
 .squiz-fte-scope .squiz-fte-form-control:active {
   box-shadow: none;
 }
-.squiz-fte-scope .squiz-fte-btn {
-  border-radius: 4px;
-  font-weight: 400;
-  transition-property: all;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-  transition-timing-function: linear;
-  display: flex;
-  align-items: center;
-  text-align: center;
-  white-space: nowrap;
-  vertical-align: middle;
-  touch-action: manipulation;
-  cursor: pointer;
-  background-image: none;
-  border: 1px solid transparent;
-  padding: 6px 12px;
-}
-.squiz-fte-scope .squiz-fte-btn.disabled,
-.squiz-fte-scope .squiz-fte-btn[disabled] {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
 .squiz-fte-scope .formatted-text-editor {
   font-family: "Open Sans" !important;
 }
@@ -649,7 +677,7 @@
 .squiz-fte-scope .formatted-text-editor .remirror-editor-wrapper {
   padding-top: 0px;
   --tw-text-opacity: 1;
-  color: rgb(112 112 112 / var(--tw-text-opacity));
+  color: rgb(61 61 61 / var(--tw-text-opacity));
 }
 .squiz-fte-scope .formatted-text-editor .remirror-editor {
   border-bottom-right-radius: 4px;
@@ -663,7 +691,7 @@
     var(--tw-ring-offset-shadow, 0 0 #0000),
     var(--tw-ring-shadow, 0 0 #0000),
     var(--tw-shadow);
-  min-height: 6rem;
+  overflow: auto;
 }
 .squiz-fte-scope .formatted-text-editor .remirror-editor:active,
 .squiz-fte-scope .formatted-text-editor .remirror-editor:focus {
@@ -681,47 +709,6 @@
   --tw-text-opacity: 1;
   color: rgb(148 148 148 / var(--tw-text-opacity));
 }
-.squiz-fte-scope a {
-  --tw-text-opacity: 1;
-  color: rgb(7 116 210 / var(--tw-text-opacity));
-  text-decoration: underline;
-}
-.squiz-fte-scope .remirror-theme h1 {
-  font-size: 1.625rem;
-  font-weight: 600;
-  letter-spacing: -0.2px;
-  line-height: 2rem;
-}
-.squiz-fte-scope .remirror-theme h2 {
-  font-size: 1.25rem;
-  font-weight: 600;
-  letter-spacing: -0.5px;
-  line-height: 1.5rem;
-}
-.squiz-fte-scope .remirror-theme h3 {
-  font-size: 1.125rem;
-  font-weight: 600;
-  letter-spacing: -0.2px;
-  line-height: 1.375rem;
-}
-.squiz-fte-scope .remirror-theme h4 {
-  font-size: 1rem;
-  font-weight: 700;
-  letter-spacing: -0.2px;
-  line-height: 1.25rem;
-}
-.squiz-fte-scope .remirror-theme h5 {
-  font-size: 1rem;
-  font-weight: 600;
-  letter-spacing: -0.2px;
-  line-height: 1.25rem;
-}
-.squiz-fte-scope .remirror-theme h6 {
-  font-size: 0.875rem;
-  font-weight: 600;
-  letter-spacing: -0.2px;
-  line-height: 1.25rem;
-}
 .squiz-fte-scope .editor-toolbar {
   border-bottom-width: 2px;
   border-style: solid;
@@ -736,7 +723,7 @@
 .squiz-fte-scope .editor-toolbar > *:not(:first-child, .editor-divider) {
   margin: 0 0 0 2px;
 }
-.squiz-fte-scope .editor-divider {
+.squiz-fte-scope .editor-toolbar .editor-divider {
   margin-top: -0.25rem;
   margin-bottom: -0.25rem;
   margin-left: 0.25rem;
@@ -745,6 +732,12 @@
   margin-right: 2px;
   height: auto;
 }
+.squiz-fte-scope .editor-toolbar .squiz-fte-btn {
+  padding: 0.25rem;
+}
+.squiz-fte-scope .editor-toolbar .squiz-fte-btn ~ .squiz-fte-btn {
+  margin-left: 2px;
+}
 .squiz-fte-scope__floating-popover {
   display: flex;
   border-radius: 6px;
@@ -761,22 +754,51 @@
     var(--tw-ring-shadow, 0 0 #0000),
     var(--tw-shadow);
 }
-.squiz-fte-scope .toolbar-button {
+.squiz-fte-scope .squiz-fte-scope__floating-popover .squiz-fte-btn {
+  padding: 0.25rem;
+}
+.squiz-fte-scope .squiz-fte-scope__floating-popover .squiz-fte-btn ~ .squiz-fte-btn {
+  margin-left: 2px;
+}
+.squiz-fte-scope .squiz-fte-btn {
+  border-radius: 4px;
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-  padding: 0.25rem;
+  font-weight: 400;
   --tw-text-opacity: 1;
   color: rgb(112 112 112 / var(--tw-text-opacity));
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+  transition-timing-function: linear;
+  display: flex;
+  align-items: center;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  background-image: none;
+  border: 1px solid transparent;
+  padding: 6px 12px;
 }
-.squiz-fte-scope .toolbar-button ~ .toolbar-button {
+.squiz-fte-scope .squiz-fte-btn--is-icon {
+  padding: 6px;
+}
+.squiz-fte-scope .squiz-fte-btn ~ .squiz-fte-btn {
   margin-left: 2px;
 }
-.squiz-fte-scope .toolbar-button:hover,
-.squiz-fte-scope .toolbar-button:focus {
+.squiz-fte-scope .squiz-fte-btn.disabled,
+.squiz-fte-scope .squiz-fte-btn[disabled] {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+.squiz-fte-scope .squiz-fte-btn:hover,
+.squiz-fte-scope .squiz-fte-btn:focus {
   background-color: rgba(0, 0, 0, 0.04);
 }
-.squiz-fte-scope .toolbar-button.is-active,
-.squiz-fte-scope .toolbar-button:active {
+.squiz-fte-scope .squiz-fte-btn--is-active,
+.squiz-fte-scope .squiz-fte-btn:active {
   --tw-bg-opacity: 1;
   background-color: rgb(230 241 250 / var(--tw-bg-opacity));
   --tw-text-opacity: 1;
@@ -899,8 +921,27 @@
 }
 .squiz-fte-scope .squiz-fte-modal-footer__button {
   font-size: 0.875rem;
+  font-weight: 700;
+}
+.squiz-fte-scope .editor-toolbar .squiz-fte-modal-footer__button {
+  padding: 0.25rem;
+}
+.squiz-fte-scope .editor-toolbar .squiz-fte-modal-footer__button ~ .squiz-fte-btn {
+  margin-left: 2px;
+}
+.squiz-fte-scope .squiz-fte-scope__floating-popover .squiz-fte-modal-footer__button {
+  padding: 0.25rem;
+}
+.squiz-fte-scope .squiz-fte-scope__floating-popover .squiz-fte-modal-footer__button ~ .squiz-fte-btn {
+  margin-left: 2px;
+}
+.squiz-fte-scope .squiz-fte-modal-footer__button {
   border-radius: 4px;
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
   font-weight: 400;
+  --tw-text-opacity: 1;
+  color: rgb(112 112 112 / var(--tw-text-opacity));
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
@@ -916,11 +957,24 @@
   border: 1px solid transparent;
   padding: 6px 12px;
 }
+.squiz-fte-scope .squiz-fte-modal-footer__button ~ .squiz-fte-btn {
+  margin-left: 2px;
+}
 .squiz-fte-scope .squiz-fte-modal-footer__button.disabled,
 .squiz-fte-scope .squiz-fte-modal-footer__button[disabled] {
   cursor: not-allowed;
   opacity: 0.5;
 }
+.squiz-fte-scope .squiz-fte-modal-footer__button:hover,
+.squiz-fte-scope .squiz-fte-modal-footer__button:focus {
+  background-color: rgba(0, 0, 0, 0.04);
+}
+.squiz-fte-scope .squiz-fte-modal-footer__button:active {
+  --tw-bg-opacity: 1;
+  background-color: rgb(230 241 250 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(7 116 210 / var(--tw-text-opacity));
+}
 .squiz-fte-scope .hover\:bg-blue-400:hover {
   --tw-bg-opacity: 1 !important;
   background-color: rgb(4 73 133 / var(--tw-bg-opacity)) !important;

package/lib/ui/Button/Button.d.ts

@@ -0,0 +1,11 @@
+import { ReactElement } from 'react';
+type ButtonProps = {
+    handleOnClick: () => void;
+    isDisabled?: boolean;
+    isActive: boolean;
+    label: string;
+    text?: string;
+    icon?: ReactElement;
+};
+declare const Button: ({ handleOnClick, isDisabled, isActive, label, text, icon }: ButtonProps) => JSX.Element;
+export default Button;

package/lib/ui/Button/Button.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const clsx_1 = __importDefault(require("clsx"));
+const Button = ({ handleOnClick, isDisabled, isActive, label, text, icon }) => {
+    return (react_1.default.createElement("button", { "aria-label": label, title: label, type: "button", onClick: handleOnClick, disabled: isDisabled, className: (0, clsx_1.default)('squiz-fte-btn', isActive && 'squiz-fte-btn--is-active', icon && ' squiz-fte-btn--is-icon') },
+        react_1.default.createElement(react_1.default.Fragment, null,
+            text && react_1.default.createElement("span", null, text),
+            icon && icon)));
+};
+exports.default = Button;

package/lib/ui/Fields/Input/Input.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const Input: React.ForwardRefExoticComponent<React.InputHTMLAttributes<HTMLInputElement> & {
+    label?: string | undefined;
+} & React.RefAttributes<HTMLInputElement>>;

package/lib/ui/{Inputs/Text/TextInput.js → Fields/Input/Input.js}

@@ -23,11 +23,11 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TextInput = void 0;
+exports.Input = void 0;
 const react_1 = __importStar(require("react"));
-const TextInputInternal = ({ name, label, ...rest }, ref) => {
+const InputInternal = ({ name, label, type = 'text', ...rest }, ref) => {
     return (react_1.default.createElement(react_1.default.Fragment, null,
         label && (react_1.default.createElement("label", { htmlFor: name, className: "squiz-fte-form-label" }, label)),
-        react_1.default.createElement("input", { ref: ref, id: name, name: name, type: "text", className: "squiz-fte-form-control", ...rest })));
+        react_1.default.createElement("input", { ref: ref, id: name, name: name, type: type, className: "squiz-fte-form-control", ...rest })));
 };
-exports.TextInput = (0, react_1.forwardRef)(TextInputInternal);
+exports.Input = (0, react_1.forwardRef)(InputInternal);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squiz/formatted-text-editor",
-  "version": "1.21.1-alpha.3",
+  "version": "1.21.1-alpha.4",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "scripts": {
@@ -21,7 +21,8 @@
     "@mui/icons-material": "5.11.0",
     "@remirror/react": "2.0.25",
     "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",
@@ -67,5 +68,5 @@
   "volta": {
     "node": "16.19.0"
   },
-  "gitHead": "d68e8373c8fbfabbad93bebedaa53b4fd8aa8fb0"
+  "gitHead": "94a6842c87ee50bde3fa7dc52da7ab0c5f5ad456"
 }

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/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();
+  });
+});