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

package/lib/index.js

@@ -3,6 +3,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FormattedTextEditor = void 0;
-const FormattedTextEditor_1 = __importDefault(require("./FormattedTextEditor"));
-exports.FormattedTextEditor = FormattedTextEditor_1.default;
+exports.squizNodeToRemirrorNode = exports.remirrorNodeToSquizNode = exports.EditorContext = exports.Editor = void 0;
+const Editor_1 = __importDefault(require("./Editor/Editor"));
+exports.Editor = Editor_1.default;
+const EditorContext_1 = require("./Editor/EditorContext");
+Object.defineProperty(exports, "EditorContext", { enumerable: true, get: function () { return EditorContext_1.EditorContext; } });
+const remirrorNodeToSquizNode_1 = require("./utils/converters/remirrorNodeToSquizNode/remirrorNodeToSquizNode");
+Object.defineProperty(exports, "remirrorNodeToSquizNode", { enumerable: true, get: function () { return remirrorNodeToSquizNode_1.remirrorNodeToSquizNode; } });
+const squizNodeToRemirrorNode_1 = require("./utils/converters/squizNodeToRemirrorNode/squizNodeToRemirrorNode");
+Object.defineProperty(exports, "squizNodeToRemirrorNode", { enumerable: true, get: function () { return squizNodeToRemirrorNode_1.squizNodeToRemirrorNode; } });

package/lib/types.d.ts

@@ -0,0 +1,3 @@
+export type DeepPartial<T> = T extends Record<string, unknown> ? {
+    [P in keyof T]?: DeepPartial<T[P]>;
+} : T;

package/lib/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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/{ToolbarButton/ToolbarButton.js → Button/Button.js}

@@ -4,7 +4,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
-const ToolbarButton = ({ handleOnClick, isDisabled, isActive, icon, label }) => {
-    return (react_1.default.createElement("button", { "aria-label": label, title: label, type: "button", onClick: handleOnClick, disabled: isDisabled, className: `squiz-fte-btn toolbar-button ${isActive ? 'is-active' : ''}` }, icon));
+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') },
+        text && react_1.default.createElement("span", null, text),
+        icon && icon));
 };
-exports.default = ToolbarButton;
+exports.default = Button;

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

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

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

@@ -22,12 +22,17 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 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) => {
-    return (react_1.default.createElement(react_1.default.Fragment, null,
+const clsx_1 = __importDefault(require("clsx"));
+const InputInternal = ({ name, label, type = 'text', error, ...rest }, ref) => {
+    return (react_1.default.createElement("div", { className: (0, clsx_1.default)(error && 'squiz-fte-invalid-form-field') },
         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, "aria-invalid": !!error, className: "squiz-fte-form-control", ...rest }),
+        error && react_1.default.createElement("div", { className: "squiz-fte-form-error" }, error)));
 };
-exports.TextInput = (0, react_1.forwardRef)(TextInputInternal);
+exports.Input = (0, react_1.forwardRef)(InputInternal);

package/lib/ui/Modal/Modal.js

@@ -30,6 +30,7 @@ const react_1 = __importStar(require("react"));
 const react_dom_1 = require("react-dom");
 const CloseRounded_1 = __importDefault(require("@mui/icons-material/CloseRounded"));
 const base_1 = require("@mui/base");
+const clsx_1 = __importDefault(require("clsx"));
 const Modal = ({ children, title, onCancel, onSubmit, className }, ref) => {
     const container = (0, react_1.useMemo)(() => {
         const element = document.createElement('div');
@@ -60,7 +61,7 @@ const Modal = ({ children, title, onCancel, onSubmit, className }, ref) => {
     }, [container]);
     return (0, react_dom_1.createPortal)(react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(base_1.FocusTrap, { open: true },
-            react_1.default.createElement("div", { ref: ref, className: `squiz-fte-modal-wrapper ${className ? className : ''}`, tabIndex: -1 },
+            react_1.default.createElement("div", { ref: ref, className: (0, clsx_1.default)('squiz-fte-modal-wrapper', className), tabIndex: -1 },
                 react_1.default.createElement("div", { className: "w-modal-sm my-6 mx-auto" },
                     react_1.default.createElement("div", { className: "squiz-fte-modal" },
                         react_1.default.createElement("div", { className: "squiz-fte-modal-header p-6 pb-2" },

package/lib/utils/converters/remirrorNodeToSquizNode/remirrorNodeToSquizNode.d.ts

@@ -0,0 +1,9 @@
+import { ProsemirrorNode } from 'remirror';
+import { FORMATTED_TEXT_MODELS as FormattedTextModels } from '@squiz/dx-json-schema-lib';
+export declare const resolveNodeTag: (node: ProsemirrorNode) => string;
+/**
+ * Converts Remirror node JSON structure to Squiz component JSON structure.
+ * @param {ProsemirrorNode} node Remirror node to convert to component.
+ * @returns {FormattedText} The converted Squiz component JSON.
+ */
+export declare const remirrorNodeToSquizNode: (node: ProsemirrorNode) => FormattedTextModels.v1.FormattedText;

package/lib/utils/converters/remirrorNodeToSquizNode/remirrorNodeToSquizNode.js

@@ -0,0 +1,165 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.remirrorNodeToSquizNode = exports.resolveNodeTag = void 0;
+const undefinedIfEmpty_1 = require("../../undefinedIfEmpty");
+const resolveNodeTag = (node) => {
+    if (node.type.name === 'text') {
+        return 'span';
+    }
+    if (node.type.spec?.toDOM) {
+        const domNode = node.type.spec.toDOM(node);
+        if (domNode instanceof window.Node) {
+            return domNode.nodeName.toLowerCase();
+        }
+        if (typeof domNode === 'object' && 'dom' in domNode && domNode.dom instanceof window.Node) {
+            return domNode.dom.nodeName.toLowerCase();
+        }
+        if (domNode instanceof Array) {
+            // [ tag, attributes, ...children ]
+            return domNode[0].toLowerCase();
+        }
+    }
+    throw new Error('Unexpected Remirror node encountered, cannot resolve tag.');
+};
+exports.resolveNodeTag = resolveNodeTag;
+const resolveFormattingOptions = (node) => {
+    const formattingOptions = {};
+    if (node.attrs.nodeTextAlignment) {
+        formattingOptions.alignment = node.attrs.nodeTextAlignment;
+    }
+    return formattingOptions;
+};
+const resolveFontOptions = (node) => {
+    const fontOptions = {};
+    node.marks.forEach((mark) => {
+        switch (mark.type.name) {
+            case 'bold':
+                fontOptions.bold = true;
+                break;
+            case 'italic':
+                fontOptions.italics = true;
+                break;
+            case 'underline':
+                fontOptions.underline = true;
+                break;
+        }
+    });
+    return fontOptions;
+};
+const transformAttributes = (attributes) => {
+    const transformed = {};
+    Object.keys(attributes).forEach((key) => {
+        // Component service requires attributes to be a string, cast as needed.
+        if (typeof attributes[key] === 'string' || typeof attributes[key] === 'number') {
+            transformed[key] = String(attributes[key]);
+        }
+    });
+    return transformed;
+};
+const transformFragment = (fragment) => {
+    const transformed = [];
+    fragment.forEach((child) => transformed.push(transformNode(child)));
+    return transformed;
+};
+const transformNode = (node) => {
+    const attributes = node.type.name === 'image' ? transformAttributes(node.attrs) : undefined;
+    const formattingOptions = (0, undefinedIfEmpty_1.undefinedIfEmpty)(resolveFormattingOptions(node));
+    const font = (0, undefinedIfEmpty_1.undefinedIfEmpty)(resolveFontOptions(node));
+    let transformedNode = { type: 'text', value: node.text || '' };
+    // Squiz "text" nodes can't have formatting/font options but Remirror "text" nodes can.
+    // If the node has formatting options wrap in a tag.
+    // If the node isn't a text type assume it is a tag type and wrap in a tag.
+    // If we pick the wrong tag here it will be corrected later as part of looping through the
+    // non-font marks.
+    if (node.type.name !== 'text' || attributes || formattingOptions || font) {
+        transformedNode = {
+            type: 'tag',
+            tag: (0, exports.resolveNodeTag)(node),
+            children: node.type.name === 'text' ? [transformedNode] : transformFragment(node.content),
+            attributes,
+            formattingOptions,
+            font,
+        };
+    }
+    node.marks.forEach((mark) => {
+        switch (mark.type.name) {
+            case 'bold':
+            case 'italic':
+            case 'underline':
+                break;
+            default:
+                transformedNode = transformMark(mark, transformedNode);
+        }
+    });
+    return transformedNode;
+};
+/**
+ * Merges 2 nodes together if they are compatible without losing any important details.
+ * Otherwise will wrap the node.
+ *
+ * @param {FormattedNode} node
+ * @param {FormattedNodeWithChildren} wrappingNode
+ *
+ * @return {FormattedNode}
+ */
+const wrapNodeIfNeeded = (node, wrappingNode) => {
+    if (node.type === 'tag' && wrappingNode.type === 'tag' && (node.tag === 'span' || node.tag === wrappingNode.tag)) {
+        // if the node we are wrapping with is a DOM node, and the node being wrapped is
+        // a plain looking DOM node merge the 2 nodes.
+        return {
+            ...node,
+            ...wrappingNode,
+            formattingOptions: (0, undefinedIfEmpty_1.undefinedIfEmpty)({
+                ...node.formattingOptions,
+                ...wrappingNode.formattingOptions,
+            }),
+            attributes: (0, undefinedIfEmpty_1.undefinedIfEmpty)({
+                ...node.attributes,
+                ...wrappingNode.attributes,
+            }),
+            font: (0, undefinedIfEmpty_1.undefinedIfEmpty)({
+                ...node.font,
+                ...wrappingNode.font,
+            }),
+            children: [...node.children, ...wrappingNode.children],
+        };
+    }
+    // if the node we are wrapping or the wrapping nodes are not compatible merge them.
+    return {
+        ...wrappingNode,
+        children: [node, ...wrappingNode.children],
+    };
+};
+const transformMark = (mark, node) => {
+    switch (mark.type.name) {
+        case 'link':
+            return wrapNodeIfNeeded(node, {
+                type: 'tag',
+                tag: 'a',
+                attributes: transformAttributes(mark.attrs),
+                children: [],
+            });
+        case 'assetLink':
+            return wrapNodeIfNeeded(node, {
+                type: 'link-to-matrix-asset',
+                target: mark.attrs.target,
+                matrixIdentifier: mark.attrs.matrixIdentifier,
+                matrixDomain: mark.attrs.matrixDomain,
+                matrixAssetId: mark.attrs.matrixAssetId,
+                children: [],
+            });
+    }
+    throw new Error(`Unsupported mark "${mark.type.name}" was applied to node.`);
+};
+/**
+ * Converts Remirror node JSON structure to Squiz component JSON structure.
+ * @param {ProsemirrorNode} node Remirror node to convert to component.
+ * @returns {FormattedText} The converted Squiz component JSON.
+ */
+const remirrorNodeToSquizNode = (node) => {
+    if (node?.type?.name !== 'doc') {
+        throw new Error('Unable to convert from Remirror to Node data structure, unexpected node provided.');
+    }
+    return transformFragment(node.content);
+};
+exports.remirrorNodeToSquizNode = remirrorNodeToSquizNode;

package/lib/utils/converters/squizNodeToRemirrorNode/squizNodeToRemirrorNode.d.ts

@@ -0,0 +1,9 @@
+import { RemirrorJSON } from '@remirror/core';
+import { FORMATTED_TEXT_MODELS as FormattedTextModels } from '@squiz/dx-json-schema-lib';
+/**
+ * Converts Squiz component JSON structure to Remirror node JSON structure.
+ * @param {FormattedText} nodes Squiz nodes to convert to Remirror.
+ * @export
+ * @returns {RemirrorJSON} The converted Remirror JSON.
+ */
+export declare const squizNodeToRemirrorNode: (nodes: FormattedTextModels.v1.FormattedText) => RemirrorJSON;

package/lib/utils/converters/squizNodeToRemirrorNode/squizNodeToRemirrorNode.js

@@ -0,0 +1,129 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.squizNodeToRemirrorNode = void 0;
+const undefinedIfEmpty_1 = require("../../undefinedIfEmpty");
+const getNodeType = (node) => {
+    const typeMap = {
+        'link-to-matrix-asset': 'text',
+        text: 'text',
+    };
+    const tagMap = {
+        h1: 'heading',
+        h2: 'heading',
+        h3: 'heading',
+        h4: 'heading',
+        h5: 'heading',
+        h6: 'heading',
+        img: 'image',
+        pre: 'preformatted',
+        p: 'paragraph',
+        a: 'text',
+        span: 'text',
+    };
+    if (typeMap[node.type]) {
+        return typeMap[node.type];
+    }
+    if (node.type === 'tag' && tagMap[node.tag]) {
+        return tagMap[node.tag];
+    }
+    // Unsupported node type
+    throw new Error(node.type === 'tag'
+        ? `Unsupported node type provided: ${node.type} (tag: ${node.tag})`
+        : `Unsupported node type provided: ${node.type}`);
+};
+const getNodeAttributes = (node) => {
+    if (node.type === 'tag' && node.tag === 'img') {
+        return {
+            alt: node.attributes?.alt,
+            height: node.attributes?.height,
+            width: node.attributes?.width,
+            src: node.attributes?.src,
+            title: node.attributes?.title,
+        };
+    }
+    else if (node.type === 'tag') {
+        return {
+            nodeIndent: null,
+            nodeTextAlignment: node.formattingOptions?.alignment || null,
+            nodeLineHeight: null,
+            style: '',
+            level: node.tag?.startsWith('h') ? parseInt(node.tag.substring(1)) : undefined,
+        };
+    }
+    return {};
+};
+const getNodeMarks = (node) => {
+    const marks = [];
+    if (node.type === 'tag' && node.tag === 'a') {
+        marks.push({
+            type: 'link',
+            attrs: {
+                href: node.attributes?.href,
+                target: node.attributes?.target ?? null,
+                auto: false,
+                title: node.attributes?.title ?? null,
+            },
+        });
+    }
+    else if (node.type === 'link-to-matrix-asset') {
+        marks.push({
+            type: 'assetLink',
+            attrs: {
+                matrixAssetId: node.matrixAssetId,
+                matrixDomain: node.matrixDomain,
+                matrixIdentifier: node.matrixIdentifier,
+                target: node.target,
+            },
+        });
+    }
+    // Handle font formatting
+    if ('font' in node) {
+        node.font?.bold && marks.push({ type: 'bold' });
+        node.font?.italics && marks.push({ type: 'italic' });
+        node.font?.underline && marks.push({ type: 'underline' });
+    }
+    return marks;
+};
+const unwrapNodeIfNeeded = (node) => {
+    if (node.type === 'text' && node.content?.length) {
+        return node.content.map((child) => {
+            return {
+                ...child,
+                marks: [...(child.marks || []), ...(node.marks || [])],
+            };
+        });
+    }
+    return [node];
+};
+const formatNode = (node) => {
+    const children = [];
+    if ('children' in node) {
+        node.children.forEach((child) => {
+            children.push(...formatNode(child));
+        });
+    }
+    return unwrapNodeIfNeeded({
+        type: getNodeType(node),
+        attrs: (0, undefinedIfEmpty_1.undefinedIfEmpty)(getNodeAttributes(node)),
+        marks: (0, undefinedIfEmpty_1.undefinedIfEmpty)(getNodeMarks(node)),
+        text: node.type === 'text' ? node.value : undefined,
+        content: (0, undefinedIfEmpty_1.undefinedIfEmpty)(children),
+    });
+};
+/**
+ * Converts Squiz component JSON structure to Remirror node JSON structure.
+ * @param {FormattedText} nodes Squiz nodes to convert to Remirror.
+ * @export
+ * @returns {RemirrorJSON} The converted Remirror JSON.
+ */
+const squizNodeToRemirrorNode = (nodes) => {
+    let children = [];
+    nodes.forEach((node) => {
+        children.push(...formatNode(node));
+    });
+    if (children.find((child) => child.type === 'text')) {
+        children = [{ type: 'paragraph', content: children }];
+    }
+    return { type: 'doc', content: children };
+};
+exports.squizNodeToRemirrorNode = squizNodeToRemirrorNode;

package/lib/utils/undefinedIfEmpty.d.ts

@@ -0,0 +1 @@
+export declare const undefinedIfEmpty: <T extends object>(object: T) => T | undefined;

package/lib/utils/undefinedIfEmpty.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.undefinedIfEmpty = void 0;
+const undefinedIfEmpty = (object) => {
+    return Object.keys(object).length > 0 ? object : undefined;
+};
+exports.undefinedIfEmpty = undefinedIfEmpty;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squiz/formatted-text-editor",
-  "version": "1.21.1-alpha.2",
+  "version": "1.21.1-alpha.21",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "scripts": {
@@ -20,19 +20,23 @@
     "@headlessui/react": "1.7.11",
     "@mui/icons-material": "5.11.0",
     "@remirror/react": "2.0.25",
+    "@squiz/dx-json-schema-lib": "1.21.1-alpha.2",
     "clsx": "1.2.1",
-    "react-hook-form": "7.43.2"
+    "react-hook-form": "7.43.2",
+    "react-image-size": "2.0.0"
   },
   "devDependencies": {
     "@testing-library/cypress": "9.0.0",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "14.0.0",
     "@testing-library/user-event": "14.4.3",
+    "@types/node": "18.15.2",
     "@types/react": "18.0.26",
     "@types/react-dom": "18.0.9",
     "@vitejs/plugin-react": "3.0.0",
     "autoprefixer": "10.4.13",
     "cypress": "12.5.1",
+    "deepmerge": "^4.3.0",
     "eslint-plugin-cypress": "2.12.1",
     "eslint-plugin-jsx-a11y": "6.7.1",
     "eslint-plugin-react": "7.32.2",
@@ -43,6 +47,7 @@
     "postcss-nested": "6.0.0",
     "postcss-prefix-selector": "1.16.0",
     "react": "18.2.0",
+    "react-diff-viewer-continued": "3.2.6",
     "react-dom": "18.2.0",
     "rimraf": "4.1.2",
     "tailwindcss": "3.2.6",
@@ -65,7 +70,7 @@
     }
   },
   "volta": {
-    "node": "16.19.0"
+    "node": "18.15.0"
   },
-  "gitHead": "094356f01a017174820505681d5dfc4a2ee9428b"
+  "gitHead": "b6a0d4e2501e58cb3c3ecd26741c447e2c3bc1db"
 }

package/src/Editor/Editor.spec.tsx

@@ -1,11 +1,9 @@
-import { jest } from '@jest/globals';
 import React from 'react';
 import { act, fireEvent, render, screen } from '@testing-library/react';
-import { MockEditor } from './Editor.mock';
 import Editor from './Editor';
 import '@testing-library/jest-dom';
-
-const setContent: any = jest.fn();
+import { renderWithEditor } from '../../tests/renderWithEditor';
+import ImageButton from '../EditorToolbar/Tools/Image/ImageButton';
 
 describe('Formatted text editor', () => {
   it('Renders the text editor', () => {
@@ -230,25 +228,87 @@ describe('Formatted text editor', () => {
     expect(baseElement.querySelectorAll('div.remirror-editor p')).toHaveLength(1);
   });
 
-  it('Should allow text input & undo input upon clicking undo button', () => {
-    const { baseElement, getByLabelText } = render(<MockEditor setContent={setContent} />);
+  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',
+        },
+      ],
+    });
+  });
 
-    const textContent = `This is a string with a random number: ${Math.random() * 9999}`;
+  it('Should not display the toolbar if is not editable', () => {
+    render(<Editor editable={false} />);
+    expect(screen.queryByRole('button', { name: 'Bold (cmd+B)' })).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'Italic (cmd+I)' })).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'Underline (cmd+U)' })).not.toBeInTheDocument();
+  });
 
-    // This sets the content of the text editor
-    act(() => {
-      setContent(`<p>${textContent}</p>`, { triggerChange: true });
+  it('Should not display the floating toolbar if is not editable', async () => {
+    const from = 3 as number;
+    const to = 17 as number;
+    const { editor } = await renderWithEditor(null, {
+      content: 'My awesome <a href="https://example.org">example</a> content.',
+      editable: false,
     });
 
-    const editorNode = getByLabelText(`Text editor`);
-    expect(editorNode).toBeTruthy();
-    expect(editorNode.textContent).toBe(textContent);
+    await act(() => editor.selectText({ from, to }));
 
-    // Testing if clicking undo button removes text from editor
-    const undoButton = baseElement.querySelector('button[title="Undo (cmd+Z)"]') as HTMLButtonElement;
-    expect(undoButton).toBeTruthy();
-    fireEvent.click(undoButton);
+    const buttons = screen.queryAllByRole('button');
+    const buttonLabels = buttons.map((button) => button.getAttribute('title'));
 
-    expect(editorNode.textContent).toBe('');
+    expect(buttonLabels).toEqual([]);
   });
 });

package/src/Editor/Editor.tsx

@@ -1,8 +1,11 @@
-import React from 'react';
-import { EditorComponent, Remirror, useRemirror } from '@remirror/react';
+import React, { useContext, useCallback } from 'react';
+import { EditorComponent, Remirror, useRemirror, useEditorEvent } from '@remirror/react';
 import { RemirrorContentType, RemirrorEventListener, Extension } from '@remirror/core';
 import { Toolbar, FloatingToolbar } from '../EditorToolbar';
-import { Extensions } from '../Extensions/Extensions';
+import { EditorContext } from './EditorContext';
+import { createExtensions } from '../Extensions/Extensions';
+import clsx from 'clsx';
+import { ClipboardEventHandler } from '@remirror/extension-events/dist-types/events-extension';
 
 type EditorProps = {
   content?: RemirrorContentType;
@@ -10,9 +13,25 @@ type EditorProps = {
   editable?: boolean;
 };
 
-const Editor = ({ content, editable, onChange }: EditorProps) => {
+const WrappedEditor = () => {
+  const preventImagePaste = useCallback((event) => {
+    const { clipboardData } = event;
+    const pastedData = clipboardData?.files[0];
+    if (pastedData?.type && pastedData?.type.startsWith('image/')) {
+      event.preventDefault();
+    }
+
+    // Allow other paste event handlers to be run.
+    return false;
+  }, []) as ClipboardEventHandler;
+
+  useEditorEvent('paste', preventImagePaste);
+  return <EditorComponent />;
+};
+
+const Editor = ({ content, editable = true, onChange }: EditorProps) => {
   const { manager, state, setState } = useRemirror({
-    extensions: Extensions,
+    extensions: createExtensions(useContext(EditorContext)),
     content,
     selection: 'start',
     stringHandler: 'html',
@@ -25,7 +44,7 @@ const Editor = ({ content, editable, onChange }: EditorProps) => {
 
   return (
     <div className="squiz-fte-scope">
-      <div className="remirror-theme formatted-text-editor editor-wrapper">
+      <div className={clsx('remirror-theme formatted-text-editor', !editable && 'formatted-text-editor--is-disabled')}>
         <Remirror
           manager={manager}
           state={state}
@@ -34,9 +53,9 @@ const Editor = ({ content, editable, onChange }: EditorProps) => {
           placeholder="Write something"
           label="Text editor"
         >
-          <Toolbar />
-          <EditorComponent />
-          <FloatingToolbar />
+          {editable && <Toolbar />}
+          <WrappedEditor />
+          {editable && <FloatingToolbar />}
         </Remirror>
       </div>
     </div>