@squiz/formatted-text-editor 1.21.1-alpha.16 → 1.21.1-alpha.19

package/lib/Editor/Editor.js

@@ -19,8 +19,15 @@ const Editor = ({ content, editable = true, onChange }) => {
         setState(parameter.state);
         onChange?.(parameter);
     };
+    const preventImagePaste = (event) => {
+        const { clipboardData } = event;
+        const pastedData = clipboardData?.items[0];
+        if (pastedData?.type && pastedData?.type.startsWith('image/')) {
+            event.preventDefault();
+        }
+    };
     return (react_1.default.createElement("div", { className: "squiz-fte-scope" },
-        react_1.default.createElement("div", { className: (0, clsx_1.default)('remirror-theme formatted-text-editor', !editable && 'formatted-text-editor--is-disabled') },
+        react_1.default.createElement("div", { className: (0, clsx_1.default)('remirror-theme formatted-text-editor', !editable && 'formatted-text-editor--is-disabled'), onPaste: preventImagePaste },
             react_1.default.createElement(react_2.Remirror, { manager: manager, state: state, editable: editable, onChange: handleChange, placeholder: "Write something", label: "Text editor" },
                 editable && react_1.default.createElement(EditorToolbar_1.Toolbar, null),
                 react_1.default.createElement(react_2.EditorComponent, null),

package/lib/EditorToolbar/FloatingToolbar.js

@@ -37,24 +37,31 @@ const LinkButton_1 = __importDefault(require("./Tools/Link/LinkButton"));
 const react_2 = require("@remirror/react");
 const react_components_1 = require("@remirror/react-components");
 const createToolbarPositioner_1 = require("../utils/createToolbarPositioner");
+const ImageButton_1 = __importDefault(require("./Tools/Image/ImageButton"));
 // The editor main toolbar
 const FloatingToolbar = () => {
     const extensionNames = (0, hooks_1.useExtensionNames)();
     const positioner = (0, react_1.useMemo)(() => (0, createToolbarPositioner_1.createToolbarPositioner)({ types: ['link'] }), []);
     const { data } = (0, react_2.usePositioner)(positioner, []);
+    const activeImage = (0, react_2.useActive)();
     let buttons = [
         extensionNames.bold && react_1.default.createElement(BoldButton_1.default, { key: "bold" }),
         extensionNames.italic && react_1.default.createElement(ItalicButton_1.default, { key: "italic" }),
         extensionNames.underline && react_1.default.createElement(UnderlineButton_1.default, { key: "underline" }),
     ];
-    if (data.marks?.link.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 = [react_1.default.createElement(LinkButton_1.default, { key: "update-link", inPopover: true }), react_1.default.createElement(RemoveLinkButton_1.default, { key: "remove-link" })];
+    if (!activeImage.image()) {
+        if (data.marks?.link.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 = [react_1.default.createElement(LinkButton_1.default, { key: "update-link", inPopover: true }), react_1.default.createElement(RemoveLinkButton_1.default, { key: "remove-link" })];
+        }
+        else if (!data.marks?.link.isActive) {
+            // if none of the selected text is a link show the option to create a link.
+            buttons.push(react_1.default.createElement(react_components_1.VerticalDivider, { key: "link-divider", className: "editor-divider" }), react_1.default.createElement(LinkButton_1.default, { key: "add-link", inPopover: true }));
+        }
     }
-    else if (!data.marks?.link.isActive) {
-        // if none of the selected text is a link show the option to create a link.
-        buttons.push(react_1.default.createElement(react_components_1.VerticalDivider, { key: "link-divider", className: "editor-divider" }), react_1.default.createElement(LinkButton_1.default, { key: "add-link", inPopover: true }));
+    else {
+        buttons.push(react_1.default.createElement(react_components_1.VerticalDivider, { key: "image-divider", className: "editor-divider" }), react_1.default.createElement(ImageButton_1.default, { key: "add-image", inPopover: true }));
     }
     return (react_1.default.createElement(react_2.FloatingToolbar, { className: "squiz-fte-scope squiz-fte-scope__floating-popover", positioner: positioner }, buttons));
 };

package/lib/EditorToolbar/Tools/Image/Form/ImageForm.js

@@ -41,7 +41,6 @@ const ImageForm = ({ data, onSubmit }) => {
     const [aspectRatioFromHeight, setAspectRatioFromHeight] = (0, react_1.useState)(16 / 9);
     const [aspectRatioLocked, setAspectRatioLocked] = (0, react_1.useState)(true);
     const setDimensionsFromURL = (e) => {
-        // get the new url, calculate the width and height and set those fields
         (0, react_image_size_1.getImageSize)(e.target.value)
             .then(({ width, height }) => {
             setValue('width', width);
@@ -49,9 +48,8 @@ const ImageForm = ({ data, onSubmit }) => {
             setAspectRatioFromWidth(height / width);
             setAspectRatioFromHeight(width / height);
         })
-            .catch((errorMessage) => {
+            .catch(() => {
             // TODO: we will use this when we add validation in a follow-up ticket
-            console.log(errorMessage);
         });
     };
     const calculateDimensions = () => {
@@ -70,7 +68,7 @@ const ImageForm = ({ data, onSubmit }) => {
     };
     return (react_1.default.createElement("form", { className: "squiz-fte-form", onSubmit: handleSubmit(onSubmit) },
         react_1.default.createElement("div", { className: "squiz-fte-form-group mb-2" },
-            react_1.default.createElement(Input_1.Input, { label: "Source", ...register('src'), onBlur: setDimensionsFromURL })),
+            react_1.default.createElement(Input_1.Input, { label: "Source", ...register('src', { onChange: setDimensionsFromURL }) })),
         react_1.default.createElement("div", { className: "squiz-fte-form-group mb-2" },
             react_1.default.createElement(Input_1.Input, { label: "Alternative description", ...register('alt') })),
         react_1.default.createElement("div", { className: "flex flex-row items-end" },

package/lib/EditorToolbar/Tools/Image/ImageButton.d.ts

@@ -1,2 +1,5 @@
-declare const ImageButton: () => JSX.Element;
+type ImageButtonProps = {
+    inPopover?: boolean;
+};
+declare const ImageButton: ({ inPopover }: ImageButtonProps) => JSX.Element;
 export default ImageButton;

package/lib/EditorToolbar/Tools/Image/ImageButton.js

@@ -31,10 +31,15 @@ const ImageRounded_1 = __importDefault(require("@mui/icons-material/ImageRounded
 const ImageModal_1 = __importDefault(require("./ImageModal"));
 const Button_1 = __importDefault(require("../../../ui/Button/Button"));
 const react_2 = require("@remirror/react");
-const ImageButton = () => {
+const createToolbarPositioner_1 = require("../../../utils/createToolbarPositioner");
+const ImageButton = ({ inPopover = false }) => {
     const [showModal, setShowModal] = (0, react_1.useState)(false);
     const { insertImage } = (0, react_2.useCommands)();
-    const active = showModal;
+    const active = (0, react_2.useActive)();
+    const positioner = (0, react_1.useMemo)(() => (0, createToolbarPositioner_1.createToolbarPositioner)({ types: ['link'] }), []);
+    const { data } = (0, react_2.usePositioner)(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
@@ -59,9 +64,13 @@ const ImageButton = () => {
         // Prevent other key handlers being run
         return true;
     }, []);
-    (0, react_2.useKeymap)('Mod-l', handleShortcut);
+    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.
+        (0, react_2.useKeymap)('Mod-l', handleShortcut);
+    }
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(Button_1.default, { handleOnClick: handleClick, isActive: active, icon: react_1.default.createElement(ImageRounded_1.default, null), label: "Image (cmd+L)", isDisabled: false }),
+        react_1.default.createElement(Button_1.default, { handleOnClick: handleClick, isActive: active.image(), icon: react_1.default.createElement(ImageRounded_1.default, null), label: "Image (cmd+L)", isDisabled: disabled }),
         showModal && react_1.default.createElement(ImageModal_1.default, { onCancel: () => setShowModal(false), onSubmit: handleSubmit })));
 };
 exports.default = ImageButton;

package/lib/EditorToolbar/Tools/Image/ImageModal.js

@@ -3,17 +3,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const remirror_1 = require("remirror");
 const ImageForm_1 = __importDefault(require("./Form/ImageForm"));
 const react_1 = __importDefault(require("react"));
 const react_2 = require("@remirror/react");
 const FormModal_1 = __importDefault(require("../../../ui/Modal/FormModal"));
 const ImageModal = ({ onCancel, onSubmit }) => {
-    const { helpers, view: { state }, } = (0, react_2.useRemirrorContext)();
     const selection = (0, react_2.useCurrentSelection)();
-    const currentImage = (0, remirror_1.getMarkRanges)(selection, 'image')[0];
-    const selectedImage = helpers.getTextBetween(selection.from, selection.to, state.doc);
+    const currentImage = selection?.node;
     return (react_1.default.createElement(FormModal_1.default, { title: "Image", onCancel: onCancel },
-        react_1.default.createElement(ImageForm_1.default, { data: { ...currentImage?.mark.attrs, src: selectedImage }, onSubmit: onSubmit })));
+        react_1.default.createElement(ImageForm_1.default, { data: { ...currentImage?.attrs, src: currentImage?.attrs.src }, onSubmit: onSubmit })));
 };
 exports.default = ImageModal;

package/lib/EditorToolbar/Tools/Link/LinkButton.js

@@ -32,13 +32,20 @@ const LinkModal_1 = __importDefault(require("./LinkModal"));
 const Button_1 = __importDefault(require("../../../ui/Button/Button"));
 const react_2 = require("@remirror/react");
 const LinkExtension_1 = require("../../../Extensions/LinkExtension/LinkExtension");
+const createToolbarPositioner_1 = require("../../../utils/createToolbarPositioner");
 const LinkButton = ({ inPopover = false }) => {
     const [showModal, setShowModal] = (0, react_1.useState)(false);
     const { selectLink, updateLink } = (0, react_2.useCommands)();
     const active = (0, react_2.useActive)();
+    // If the image tool is active, disable the link tool as they shouldn't work at the same time
+    const disabled = (0, react_2.useActive)().image();
+    const positioner = (0, react_1.useMemo)(() => (0, createToolbarPositioner_1.createToolbarPositioner)({ types: ['link'] }), []);
+    const { data } = (0, react_2.usePositioner)(positioner, []);
     const handleClick = () => {
         if (!showModal) {
-            selectLink();
+            if (data.isSelectionInView) {
+                selectLink();
+            }
             // form element are uncontrolled, let the event loop run to
             // update the selected text in state before showing the modal.
             requestAnimationFrame(() => {
@@ -56,7 +63,7 @@ const LinkButton = ({ inPopover = false }) => {
         (0, react_2.useExtensionEvent)(LinkExtension_1.LinkExtension, 'onShortcut', (0, react_1.useCallback)(() => handleClick(), []));
     }
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(Button_1.default, { handleOnClick: handleClick, isActive: active.link(), icon: react_1.default.createElement(InsertLinkRounded_1.default, null), label: "Link (cmd+K)" }),
+        react_1.default.createElement(Button_1.default, { handleOnClick: handleClick, isActive: active.link(), icon: react_1.default.createElement(InsertLinkRounded_1.default, null), label: "Link (cmd+K)", isDisabled: disabled }),
         showModal && react_1.default.createElement(LinkModal_1.default, { onCancel: () => setShowModal(false), onSubmit: handleSubmit })));
 };
 exports.default = LinkButton;

package/lib/Extensions/Extensions.js

@@ -14,7 +14,7 @@ const Extensions = () => [
     new PreformattedExtension_1.PreformattedExtension(),
     new extensions_1.UnderlineExtension(),
     new extensions_1.HistoryExtension(),
-    new ImageExtension_1.ImageExtension(),
+    new ImageExtension_1.ImageExtension({ preferPastedTextContent: false }),
     new LinkExtension_1.LinkExtension({
         supportedTargets: [
             // '_self' is the browser default and will be used when encountering a link with a

package/lib/Extensions/ImageExtension/ImageExtension.d.ts

@@ -1,3 +1,10 @@
 import { ImageExtension as RemirrorImageExtension } from 'remirror/extensions';
+import { PasteRule } from 'prosemirror-paste-rules';
+import { ApplySchemaAttributes, NodeSpecOverride, NodeExtensionSpec, PrimitiveSelection } from '@remirror/core';
+import { ImageAttributes } from '@remirror/extension-image/dist-types/image-extension';
+import { CommandFunction } from '@remirror/pm';
 export declare class ImageExtension extends RemirrorImageExtension {
+    createPasteRules(): PasteRule[];
+    createNodeSpec(extra: ApplySchemaAttributes, override: NodeSpecOverride): NodeExtensionSpec;
+    insertImage(attributes: ImageAttributes, selection?: PrimitiveSelection): CommandFunction;
 }

package/lib/Extensions/ImageExtension/ImageExtension.js

@@ -2,6 +2,91 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ImageExtension = void 0;
 const extensions_1 = require("remirror/extensions");
+const core_1 = require("@remirror/core");
+/**
+ * Get the width and the height of the image.
+ */
+function getDimensions(element) {
+    let { width, height } = element.style;
+    width = width || element.getAttribute('width') || '';
+    height = height || element.getAttribute('height') || '';
+    return { width, height };
+}
+/**
+ * Retrieve attributes from the dom for the image extension.
+ */
+function getImageAttributes({ element, parse }) {
+    const { width, height } = getDimensions(element);
+    return {
+        ...parse(element),
+        alt: element.getAttribute('alt') ?? '',
+        height: Number.parseInt(height || '0', 10) || null,
+        src: element.getAttribute('src') ?? null,
+        title: element.getAttribute('title') ?? '',
+        width: Number.parseInt(width || '0', 10) || null,
+        fileName: element.getAttribute('data-file-name') ?? null,
+    };
+}
 class ImageExtension extends extensions_1.ImageExtension {
+    createPasteRules() {
+        return [
+            {
+                type: 'file',
+                regexp: /image/i,
+                fileHandler: () => {
+                    return false;
+                },
+            },
+        ];
+    }
+    createNodeSpec(extra, override) {
+        const { preferPastedTextContent } = this.options;
+        return {
+            inline: true,
+            draggable: true,
+            selectable: true,
+            ...override,
+            attrs: {
+                ...extra.defaults(),
+                alt: { default: '' },
+                crop: { default: null },
+                height: { default: null },
+                width: { default: null },
+                rotate: { default: null },
+                src: { default: null },
+                title: { default: '' },
+                fileName: { default: null },
+                resizable: { default: false },
+            },
+            parseDOM: [
+                {
+                    tag: 'img[src]',
+                    getAttrs: (element) => {
+                        if ((0, core_1.isElementDomNode)(element)) {
+                            const attrs = getImageAttributes({ element, parse: extra.parse });
+                            if (preferPastedTextContent && attrs.src?.startsWith('file:///')) {
+                                return false;
+                            }
+                            return attrs;
+                        }
+                        return {};
+                    },
+                },
+                ...(override.parseDOM ?? []),
+            ],
+            toDOM: (node) => {
+                const attrs = (0, core_1.omitExtraAttributes)(node.attrs, extra);
+                return ['img', { ...extra.dom(node), ...attrs }];
+            },
+        };
+    }
+    insertImage(attributes, selection) {
+        return ({ tr, dispatch }) => {
+            const { from, to } = (0, core_1.getTextSelection)(selection ?? tr.selection, tr.doc);
+            const node = this.type.create(attributes);
+            dispatch?.(tr.replaceRangeWith(from, to, node));
+            return true;
+        };
+    }
 }
 exports.ImageExtension = ImageExtension;

package/lib/index.css

@@ -719,7 +719,14 @@
   --tw-text-opacity: 1;
   color: rgb(148 148 148 / var(--tw-text-opacity));
 }
-.squiz-fte-scope .editor-toolbar {
+.squiz-fte-scope .formatted-text-editor .ProseMirror-selectednode {
+  border-width: 2px;
+  border-style: solid;
+  --tw-border-opacity: 1;
+  border-color: rgb(7 116 210 / var(--tw-border-opacity));
+}
+.squiz-fte-scope .editor-toolbar,
+.squiz-fte-scope__floating-popover {
   border-bottom-width: 2px;
   border-style: solid;
   --tw-border-opacity: 1;
@@ -730,10 +737,12 @@
   display: flex;
   justify-items: center;
 }
-.squiz-fte-scope .editor-toolbar > *:not(:first-child, .editor-divider) {
+.squiz-fte-scope .editor-toolbar > *:not(:first-child, .editor-divider),
+.squiz-fte-scope .squiz-fte-scope__floating-popover > *:not(:first-child, .editor-divider) {
   margin: 0 0 0 2px;
 }
-.squiz-fte-scope .editor-toolbar .editor-divider {
+.squiz-fte-scope .editor-toolbar .editor-divider,
+.squiz-fte-scope .squiz-fte-scope__floating-popover .editor-divider {
   margin-top: -0.25rem;
   margin-bottom: -0.25rem;
   margin-left: 0.25rem;
@@ -742,10 +751,12 @@
   margin-right: 2px;
   height: auto;
 }
-.squiz-fte-scope .editor-toolbar .squiz-fte-btn {
+.squiz-fte-scope .editor-toolbar .squiz-fte-btn,
+.squiz-fte-scope .squiz-fte-scope__floating-popover .squiz-fte-btn {
   padding: 0.25rem;
 }
-.squiz-fte-scope .editor-toolbar .squiz-fte-btn ~ .squiz-fte-btn {
+.squiz-fte-scope .editor-toolbar .squiz-fte-btn ~ .squiz-fte-btn,
+.squiz-fte-scope .squiz-fte-scope__floating-popover .squiz-fte-btn ~ .squiz-fte-btn {
   margin-left: 2px;
 }
 .squiz-fte-scope__floating-popover {
@@ -764,11 +775,9 @@
     var(--tw-ring-shadow, 0 0 #0000),
     var(--tw-shadow);
 }
-.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-scope__floating-popover .editor-divider {
+  margin-top: 0px;
+  margin-bottom: 0px;
 }
 .squiz-fte-scope .squiz-fte-btn {
   border-radius: 4px;
@@ -817,6 +826,7 @@
 .squiz-fte-scope .toolbar-dropdown__button {
   display: flex;
   align-items: center;
+  border-radius: 4px;
   font-family:
     Open Sans,
     Arial,
@@ -933,15 +943,11 @@
   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 .editor-toolbar .squiz-fte-modal-footer__button,
 .squiz-fte-scope .squiz-fte-scope__floating-popover .squiz-fte-modal-footer__button {
   padding: 0.25rem;
 }
+.squiz-fte-scope .editor-toolbar .squiz-fte-modal-footer__button ~ .squiz-fte-btn,
 .squiz-fte-scope .squiz-fte-scope__floating-popover .squiz-fte-modal-footer__button ~ .squiz-fte-btn {
   margin-left: 2px;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squiz/formatted-text-editor",
-  "version": "1.21.1-alpha.16",
+  "version": "1.21.1-alpha.19",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "scripts": {
@@ -71,5 +71,5 @@
   "volta": {
     "node": "18.15.0"
   },
-  "gitHead": "1d008f8debcfd1acaad50d73fa83b51c46253bf4"
+  "gitHead": "401a8492ae51c8cd377d0676ec9ce4fccffca7ff"
 }

package/src/Editor/Editor.spec.tsx

@@ -5,6 +5,7 @@ import { MockEditor } from './Editor.mock';
 import Editor from './Editor';
 import '@testing-library/jest-dom';
 import { renderWithEditor } from '../../tests/renderWithEditor';
+import ImageButton from '../EditorToolbar/Tools/Image/ImageButton';
 
 const setContent: any = jest.fn();
 
@@ -253,6 +254,67 @@ describe('Formatted text editor', () => {
     expect(editorNode.textContent).toBe('');
   });
 
+  it('should allow text to be pasted into the editor', async () => {
+    const { editor, getJsonContent } = await renderWithEditor(<ImageButton />, {
+      content: 'Some nonsense content here',
+    });
+
+    // paste something
+    await act(() => editor.paste('I pasted this! '));
+
+    expect(getJsonContent()).toEqual({
+      type: 'paragraph',
+      attrs: expect.any(Object),
+      content: [
+        {
+          text: 'I pasted this! Some nonsense content here',
+          type: 'text',
+        },
+      ],
+    });
+  });
+
+  it('should not allow images to be pasted into the editor', async () => {
+    const { elements, getJsonContent } = await renderWithEditor(<ImageButton />, {
+      content: 'Some nonsense content here',
+    });
+    const imageClipboardData = {
+      dropEffect: 'none',
+      effectAllowed: 'uninitialized',
+      items: {
+        '0': {
+          kind: 'file',
+          type: 'image/png',
+        },
+      },
+      files: {
+        '0': {
+          lastModified: 1678233857792,
+          lastModifiedDate: {},
+          name: 'Screen Shot 2023-03-08 at 10.04.12 am.png',
+          size: 58517,
+          type: 'image/png',
+          webkitRelativePath: '',
+        },
+      },
+      types: [],
+    };
+
+    // paste something
+    await act(() => fireEvent.paste(elements.editor, imageClipboardData));
+
+    expect(getJsonContent()).toEqual({
+      type: 'paragraph',
+      attrs: expect.any(Object),
+      content: [
+        {
+          text: 'Some nonsense content here',
+          type: 'text',
+        },
+      ],
+    });
+  });
+
   it('Should not display the toolbar if is not editable', () => {
     render(<Editor editable={false} />);
     expect(screen.queryByRole('button', { name: 'Bold (cmd+B)' })).not.toBeInTheDocument();

package/src/Editor/Editor.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ClipboardEvent } from 'react';
 import { EditorComponent, Remirror, useRemirror } from '@remirror/react';
 import { RemirrorContentType, RemirrorEventListener, Extension } from '@remirror/core';
 import { Toolbar, FloatingToolbar } from '../EditorToolbar';
@@ -24,9 +24,20 @@ const Editor = ({ content, editable = true, onChange }: EditorProps) => {
     onChange?.(parameter);
   };
 
+  const preventImagePaste = (event: ClipboardEvent<HTMLDivElement>) => {
+    const { clipboardData } = event;
+    const pastedData = clipboardData?.items[0];
+    if (pastedData?.type && pastedData?.type.startsWith('image/')) {
+      event.preventDefault();
+    }
+  };
+
   return (
     <div className="squiz-fte-scope">
-      <div className={clsx('remirror-theme formatted-text-editor', !editable && 'formatted-text-editor--is-disabled')}>
+      <div
+        className={clsx('remirror-theme formatted-text-editor', !editable && 'formatted-text-editor--is-disabled')}
+        onPaste={preventImagePaste}
+      >
         <Remirror
           manager={manager}
           state={state}

package/src/Editor/_editor.scss

@@ -39,4 +39,7 @@
     content: attr(data-placeholder);
     @apply text-gray-500;
   }
+  .ProseMirror-selectednode {
+    @apply border-blue-300 border-2 border-solid;
+  }
 }

package/src/EditorToolbar/FloatingToolbar.tsx

@@ -5,30 +5,41 @@ 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, usePositioner, useActive } from '@remirror/react';
 import { VerticalDivider } from '@remirror/react-components';
 import { createToolbarPositioner, ToolbarPositionerRange } from '../utils/createToolbarPositioner';
+import ImageButton from './Tools/Image/ImageButton';
+import { ImageExtension } from '../Extensions/ImageExtension/ImageExtension';
 
 // The editor main toolbar
 export const FloatingToolbar = () => {
   const extensionNames = useExtensionNames();
   const positioner = useMemo(() => createToolbarPositioner({ types: ['link'] }), []);
   const { data } = usePositioner<Partial<ToolbarPositionerRange>>(positioner, []);
+  const activeImage = useActive<ImageExtension>();
+
   let buttons = [
     extensionNames.bold && <BoldButton key="bold" />,
     extensionNames.italic && <ItalicButton key="italic" />,
     extensionNames.underline && <UnderlineButton key="underline" />,
   ];
 
-  if (data.marks?.link.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) {
-    // if none of the selected text is a link show the option to create a link.
+  if (!activeImage.image()) {
+    if (data.marks?.link.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) {
+      // 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" />,
+        <LinkButton key="add-link" inPopover={true} />,
+      );
+    }
+  } else {
     buttons.push(
-      <VerticalDivider key="link-divider" className="editor-divider" />,
-      <LinkButton key="add-link" inPopover={true} />,
+      <VerticalDivider key="image-divider" className="editor-divider" />,
+      <ImageButton key="add-image" inPopover={true} />,
     );
   }
 

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

@@ -1,5 +1,5 @@
 import '@testing-library/jest-dom';
-import { render, screen } from '@testing-library/react';
+import { render, screen, act, fireEvent } from '@testing-library/react';
 import React from 'react';
 import ImageForm from './ImageForm';
 
@@ -20,4 +20,58 @@ describe('Image Form', () => {
     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

@@ -30,7 +30,6 @@ const ImageForm = ({ data, onSubmit }: FormProps): ReactElement => {
   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);
@@ -38,9 +37,8 @@ const ImageForm = ({ data, onSubmit }: FormProps): ReactElement => {
         setAspectRatioFromWidth(height / width);
         setAspectRatioFromHeight(width / height);
       })
-      .catch((errorMessage) => {
+      .catch(() => {
         // TODO: we will use this when we add validation in a follow-up ticket
-        console.log(errorMessage);
       });
   };
 
@@ -63,7 +61,7 @@ const ImageForm = ({ data, onSubmit }: FormProps): ReactElement => {
   return (
     <form className="squiz-fte-form" onSubmit={handleSubmit(onSubmit)}>
       <div className="squiz-fte-form-group mb-2">
-        <Input label="Source" {...register('src')} onBlur={setDimensionsFromURL} />
+        <Input label="Source" {...register('src', { onChange: setDimensionsFromURL })} />
       </div>
       <div className="squiz-fte-form-group mb-2">
         <Input label="Alternative description" {...register('alt')} />

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

@@ -1,5 +1,6 @@
 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';
@@ -64,6 +65,61 @@ describe('ImageButton', () => {
     });
   });
 
+  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 />);
 

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

@@ -1,14 +1,24 @@
-import React, { useState, useCallback } from 'react';
+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 } from '@remirror/react';
+import { useCommands, useKeymap, useActive, usePositioner } from '@remirror/react';
+import { ImageExtension } from '../../../Extensions/ImageExtension/ImageExtension';
+import { createToolbarPositioner, ToolbarPositionerRange } from '../../../utils/createToolbarPositioner';
 
-const ImageButton = () => {
+type ImageButtonProps = {
+  inPopover?: boolean;
+};
+
+const ImageButton = ({ inPopover = false }: ImageButtonProps) => {
   const [showModal, setShowModal] = useState(false);
   const { insertImage } = useCommands();
-  const active = showModal;
+  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) {
@@ -38,16 +48,20 @@ const ImageButton = () => {
     return true;
   }, []);
 
-  useKeymap('Mod-l', handleShortcut);
+  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}
+        isActive={active.image()}
         icon={<ImageRoundedIcon />}
         label="Image (cmd+L)"
-        isDisabled={false}
+        isDisabled={disabled}
       />
       {showModal && <ImageModal onCancel={() => setShowModal(false)} onSubmit={handleSubmit} />}
     </>

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

@@ -1,9 +1,9 @@
-import { getMarkRanges } from 'remirror';
 import ImageForm, { ImageFormData } from './Form/ImageForm';
 import React from 'react';
-import { useRemirrorContext, useCurrentSelection } from '@remirror/react';
+import { useCurrentSelection } from '@remirror/react';
 import FormModal from '../../../ui/Modal/FormModal';
 import { SubmitHandler } from 'react-hook-form';
+import { NodeSelection } from 'prosemirror-state';
 
 type ImageModalProps = {
   onCancel: () => void;
@@ -11,17 +11,12 @@ type ImageModalProps = {
 };
 
 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);
+  const selection = useCurrentSelection() as NodeSelection;
+  const currentImage = selection?.node;
 
   return (
     <FormModal title="Image" onCancel={onCancel}>
-      <ImageForm data={{ ...currentImage?.mark.attrs, src: selectedImage }} onSubmit={onSubmit} />
+      <ImageForm data={{ ...currentImage?.attrs, src: currentImage?.attrs.src }} onSubmit={onSubmit} />
     </FormModal>
   );
 };

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

@@ -252,7 +252,7 @@ describe('LinkButton', () => {
     });
 
     // jump to the middle of the link.
-    await act(() => editor.selectText(5));
+    await act(() => editor.selectText({ from: 1, to: 12 }));
 
     // press the keyboard shortcut.
     fireEvent.keyDown(elements.editor, { key: 'k', ctrlKey: true });

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

@@ -1,10 +1,12 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useState, useMemo } from 'react';
 import InsertLinkRoundedIcon from '@mui/icons-material/InsertLinkRounded';
 import LinkModal from './LinkModal';
 import { LinkFormData } from './Form/LinkForm';
 import Button from '../../../ui/Button/Button';
-import { useActive, useCommands, useExtensionEvent } from '@remirror/react';
+import { useActive, useCommands, useExtensionEvent, usePositioner } from '@remirror/react';
 import { LinkExtension } from '../../../Extensions/LinkExtension/LinkExtension';
+import { createToolbarPositioner, ToolbarPositionerRange } from '../../../utils/createToolbarPositioner';
+import { ImageExtension } from '../../../Extensions/ImageExtension/ImageExtension';
 
 type LinkButtonProps = {
   inPopover?: boolean;
@@ -14,10 +16,16 @@ const LinkButton = ({ inPopover = false }: LinkButtonProps) => {
   const [showModal, setShowModal] = useState(false);
   const { selectLink, updateLink } = useCommands<LinkExtension>();
   const active = useActive<LinkExtension>();
+  // If the image tool is active, disable the link tool as they shouldn't work at the same time
+  const disabled = useActive<ImageExtension>().image();
+  const positioner = useMemo(() => createToolbarPositioner({ types: ['link'] }), []);
+  const { data } = usePositioner<Partial<ToolbarPositionerRange>>(positioner, []);
+
   const handleClick = () => {
     if (!showModal) {
-      selectLink();
-
+      if (data.isSelectionInView) {
+        selectLink();
+      }
       // form element are uncontrolled, let the event loop run to
       // update the selected text in state before showing the modal.
       requestAnimationFrame(() => {
@@ -47,6 +55,7 @@ const LinkButton = ({ inPopover = false }: LinkButtonProps) => {
         isActive={active.link()}
         icon={<InsertLinkRoundedIcon />}
         label="Link (cmd+K)"
+        isDisabled={disabled}
       />
       {showModal && <LinkModal onCancel={() => setShowModal(false)} onSubmit={handleSubmit} />}
     </>

package/src/EditorToolbar/_floating-toolbar.scss

@@ -1,10 +1,9 @@
 /// This class is excluded from the scope of squiz-fte-scope as it is outside of the scoped element
 .squiz-fte-scope__floating-popover {
+  @extend .editor-toolbar;
   @apply bg-white border-gray-200 p-1 shadow rounded-md border flex;
-  .squiz-fte-btn {
-    @apply p-1;
-    ~ .squiz-fte-btn {
-      margin-left: 2px;
-    }
+
+  .editor-divider {
+    @apply my-0;
   }
 }

package/src/Extensions/Extensions.ts

@@ -21,7 +21,7 @@ export const Extensions = (): Extension[] => [
   new PreformattedExtension(),
   new UnderlineExtension(),
   new HistoryExtension(),
-  new ImageExtension(),
+  new ImageExtension({ preferPastedTextContent: false }),
   new LinkExtension({
     supportedTargets: [
       // '_self' is the browser default and will be used when encountering a link with a

package/src/Extensions/ImageExtension/ImageExtension.ts

@@ -1,3 +1,112 @@
 import { ImageExtension as RemirrorImageExtension } from 'remirror/extensions';
+import { PasteRule } from 'prosemirror-paste-rules';
+import {
+  isElementDomNode,
+  omitExtraAttributes,
+  ApplySchemaAttributes,
+  NodeSpecOverride,
+  NodeExtensionSpec,
+  getTextSelection,
+  PrimitiveSelection,
+} from '@remirror/core';
+import { ImageAttributes } from '@remirror/extension-image/dist-types/image-extension';
+import { CommandFunction } from '@remirror/pm';
 
-export class ImageExtension extends RemirrorImageExtension {}
+/**
+ * Get the width and the height of the image.
+ */
+function getDimensions(element: HTMLElement) {
+  let { width, height } = element.style;
+  width = width || element.getAttribute('width') || '';
+  height = height || element.getAttribute('height') || '';
+
+  return { width, height };
+}
+
+/**
+ * Retrieve attributes from the dom for the image extension.
+ */
+function getImageAttributes({ element, parse }: { element: HTMLElement; parse: ApplySchemaAttributes['parse'] }) {
+  const { width, height } = getDimensions(element);
+
+  return {
+    ...parse(element),
+    alt: element.getAttribute('alt') ?? '',
+    height: Number.parseInt(height || '0', 10) || null,
+    src: element.getAttribute('src') ?? null,
+    title: element.getAttribute('title') ?? '',
+    width: Number.parseInt(width || '0', 10) || null,
+    fileName: element.getAttribute('data-file-name') ?? null,
+  };
+}
+
+export class ImageExtension extends RemirrorImageExtension {
+  createPasteRules(): PasteRule[] {
+    return [
+      {
+        type: 'file',
+        regexp: /image/i,
+        fileHandler: (): boolean => {
+          return false;
+        },
+      },
+    ];
+  }
+
+  createNodeSpec(extra: ApplySchemaAttributes, override: NodeSpecOverride): NodeExtensionSpec {
+    const { preferPastedTextContent } = this.options;
+    return {
+      inline: true,
+      draggable: true,
+      selectable: true,
+      ...override,
+      attrs: {
+        ...extra.defaults(),
+        alt: { default: '' },
+        crop: { default: null },
+        height: { default: null },
+        width: { default: null },
+        rotate: { default: null },
+        src: { default: null },
+        title: { default: '' },
+        fileName: { default: null },
+
+        resizable: { default: false },
+      },
+      parseDOM: [
+        {
+          tag: 'img[src]',
+          getAttrs: (element) => {
+            if (isElementDomNode(element)) {
+              const attrs = getImageAttributes({ element, parse: extra.parse });
+
+              if (preferPastedTextContent && attrs.src?.startsWith('file:///')) {
+                return false;
+              }
+
+              return attrs;
+            }
+
+            return {};
+          },
+        },
+        ...(override.parseDOM ?? []),
+      ],
+      toDOM: (node) => {
+        const attrs = omitExtraAttributes(node.attrs, extra);
+        return ['img', { ...extra.dom(node), ...attrs }];
+      },
+    };
+  }
+
+  insertImage(attributes: ImageAttributes, selection?: PrimitiveSelection): CommandFunction {
+    return ({ tr, dispatch }) => {
+      const { from, to } = getTextSelection(selection ?? tr.selection, tr.doc);
+      const node = this.type.create(attributes);
+
+      dispatch?.(tr.replaceRangeWith(from, to, node));
+
+      return true;
+    };
+  }
+}

package/src/ui/ToolbarDropdown/_toolbar-dropdown.scss

@@ -1,6 +1,6 @@
 .toolbar-dropdown {
   &__button {
-    @apply flex items-center font-base text-md font-semibold text-gray-600;
+    @apply flex items-center font-base text-md font-semibold text-gray-600 rounded;
     align-self: center;
 
     height: 2rem;