@squiz/formatted-text-editor 1.21.1-alpha.1 → 1.21.1-alpha.11

package/.eslintrc.json

@@ -30,5 +30,12 @@
         "extensions": [".js", ".jsx", ".ts", ".tsx"]
       }
     }
+  },
+  "rules": {
+    // The rules below are listed in the order they appear on the eslint-plugin-react rules page.
+
+    // React
+    // https://github.com/yannickcr/eslint-plugin-react#list-of-supported-rules
+    "react/button-has-type": "error"
   }
 }

package/demo/App.tsx

@@ -1,13 +1,24 @@
 import React, { useState } from 'react';
 import FormattedTextEditor from '../src/FormattedTextEditor';
 import { RemirrorEventListener, Extension } from '@remirror/core';
+import { remirrorNodeToSquizNode } from '../src/utils/converters/remirrorNodeToSquizNode/remirrorNodeToSquizNode';
+import { squizNodeToRemirrorNode } from '../src/utils/converters/squizNodeToRemirrorNode/squizNodeToRemirrorNode';
+import ReactDiffViewer from 'react-diff-viewer-continued';
 
 function App() {
-  const [doc, setDoc] = useState(null as any);
+  const [doc, setDoc] = useState('');
+  const [squizDoc, setSquizDoc] = useState('');
+  const [reconvertedDoc, setReconvertedDoc] = useState('');
   const [editable, setEditable] = useState(true);
+
   const handleEditorChange: RemirrorEventListener<Extension> = (parameter) => {
     if (doc !== parameter.state.doc) {
-      setDoc(parameter.state.doc);
+      const newSquizDoc = remirrorNodeToSquizNode(parameter.state.doc);
+      const newReconvertedDoc = parameter.state.schema.nodeFromJSON(squizNodeToRemirrorNode(newSquizDoc));
+
+      setDoc(JSON.stringify(parameter.state.doc, null, 2));
+      setSquizDoc(JSON.stringify(newSquizDoc, null, 2));
+      setReconvertedDoc(JSON.stringify(newReconvertedDoc, null, 2));
     }
   };
 
@@ -24,13 +35,16 @@ function App() {
       <div className="page-section">
         <FormattedTextEditor
           editable={editable}
-          content={`<p>Hello <a href="https://www.google.com"><strong>Mr Bean</strong></a>, nice to <a href="https://www.google.com">meet you</a>.</p>`}
+          content={`<p>Hello <a href="https://www.google.com"><strong>Mr Bean</strong></a>, nice to <a href="https://www.google.com">meet you</a>.<img src="https://media2.giphy.com/media/3o6ozsIxg5legYvggo/giphy.gif" height="150" width="200"/></p>`}
           onChange={handleEditorChange}
         />
       </div>
       <h1>Document</h1>
       <div className="page-section">
-        <code>{JSON.stringify(doc, null, 2)}</code>
+        <div className="code-section">
+          <ReactDiffViewer oldValue={doc} newValue={reconvertedDoc} splitView={false} showDiffOnly={false} />
+          <ReactDiffViewer oldValue={squizDoc} newValue={squizDoc} splitView={false} showDiffOnly={false} />
+        </div>
       </div>
     </div>
   );

package/demo/index.scss

@@ -22,19 +22,25 @@ h1 {
   align-items: center;
 }
 
-code {
-  padding: 8px;
-  display: block;
-  white-space: pre;
-  background-color: #eee;
-  font-size: 0.8rem;
-  height: 40vh;
-  max-height: 40vh;
+.code-section {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  height: 35vh;
   overflow: scroll;
 }
 
 .remirror-editor {
-  height: 40vh;
-  max-height: 40vh;
+  height: 35vh;
+  max-height: 35vh;
   overflow: scroll;
 }
+
+.squiz-fte-modal-footer__button {
+  margin-top: 1rem;
+}
+
+.mock-buttons {
+  display: flex;
+  gap: 0.5rem;
+}

package/lib/EditorToolbar/FloatingToolbar.js

@@ -54,7 +54,7 @@ const FloatingToolbar = () => {
     }
     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: "link-divider" }), react_1.default.createElement(LinkButton_1.default, { key: "add-link", inPopover: true }));
+        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 }));
     }
     return (react_1.default.createElement(react_2.FloatingToolbar, { className: "squiz-fte-scope squiz-fte-scope__floating-popover", positioner: positioner }, buttons));
 };

package/lib/EditorToolbar/Toolbar.js

@@ -15,6 +15,7 @@ const RedoButton_1 = __importDefault(require("./Tools/Redo/RedoButton"));
 const TextTypeDropdown_1 = __importDefault(require("./Tools/TextType/TextTypeDropdown"));
 const hooks_1 = require("../hooks");
 const LinkButton_1 = __importDefault(require("./Tools/Link/LinkButton"));
+const ImageButton_1 = __importDefault(require("./Tools/Image/ImageButton"));
 const Toolbar = () => {
     const extensionNames = (0, hooks_1.useExtensionNames)();
     return (react_1.default.createElement(react_components_1.Toolbar, { className: "remirror-toolbar editor-toolbar" },
@@ -27,6 +28,7 @@ const Toolbar = () => {
         extensionNames.italic && react_1.default.createElement(ItalicButton_1.default, null),
         extensionNames.underline && react_1.default.createElement(UnderlineButton_1.default, null),
         extensionNames.nodeFormatting && react_1.default.createElement(TextAlignButtons_1.default, null),
-        extensionNames.link && react_1.default.createElement(LinkButton_1.default, null)));
+        extensionNames.link && react_1.default.createElement(LinkButton_1.default, null),
+        extensionNames.image && react_1.default.createElement(ImageButton_1.default, null)));
 };
 exports.Toolbar = Toolbar;

package/lib/EditorToolbar/Tools/Bold/BoldButton.js

@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const react_2 = require("@remirror/react");
-const ToolbarButton_1 = __importDefault(require("../../../ui/ToolbarButton/ToolbarButton"));
+const Button_1 = __importDefault(require("../../../ui/Button/Button"));
 const FormatBoldRounded_1 = __importDefault(require("@mui/icons-material/FormatBoldRounded"));
 const BoldButton = () => {
     const { toggleBold } = (0, react_2.useCommands)();
@@ -17,6 +17,6 @@ const BoldButton = () => {
             chain.toggleBold().focus().run();
         }
     };
-    return (react_1.default.createElement(ToolbarButton_1.default, { handleOnClick: handleSelect, isDisabled: !enabled, isActive: active.bold(), icon: react_1.default.createElement(FormatBoldRounded_1.default, null), label: "Bold (cmd+B)" }));
+    return (react_1.default.createElement(Button_1.default, { handleOnClick: handleSelect, isDisabled: !enabled, isActive: active.bold(), icon: react_1.default.createElement(FormatBoldRounded_1.default, null), label: "Bold (cmd+B)" }));
 };
 exports.default = BoldButton;

package/lib/EditorToolbar/Tools/Image/Form/ImageForm.d.ts

@@ -0,0 +1,17 @@
+import { ReactElement } from 'react';
+import { SubmitHandler } from 'react-hook-form';
+import { ImageAttributes } from '@remirror/extension-image/dist-types/image-extension';
+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';
+declare const ImageForm: ({ data, onSubmit }: FormProps) => ReactElement;
+export default ImageForm;

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

@@ -0,0 +1,84 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __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 });
+const react_1 = __importStar(require("react"));
+const Input_1 = require("../../../../ui/Fields/Input/Input");
+const react_hook_form_1 = require("react-hook-form");
+const react_image_size_1 = require("react-image-size");
+const Button_1 = __importDefault(require("../../../../ui/Button/Button"));
+const LinkOff_1 = __importDefault(require("@mui/icons-material/LinkOff"));
+const InsertLinkRounded_1 = __importDefault(require("@mui/icons-material/InsertLinkRounded"));
+const ImageForm = ({ data, onSubmit }) => {
+    const { register, handleSubmit, setValue } = (0, react_hook_form_1.useForm)({
+        defaultValues: data,
+    });
+    const [aspectRatioFromWidth, setAspectRatioFromWidth] = (0, react_1.useState)(9 / 16);
+    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);
+            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;
+            const type = currentTarget.name;
+            const currentValue = currentTarget.value;
+            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 (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("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" },
+            react_1.default.createElement("div", { className: "squiz-fte-form-group mb-2" },
+                react_1.default.createElement(Input_1.Input, { label: "Width", ...register('width'), type: "number", name: "width", onChange: calculateDimensions })),
+            react_1.default.createElement("div", { className: "flex mx-1 mb-2" },
+                react_1.default.createElement(Button_1.default, { handleOnClick: toggleAspectRatio, isActive: false, icon: aspectRatioLocked ? react_1.default.createElement(InsertLinkRounded_1.default, null) : react_1.default.createElement(LinkOff_1.default, null), label: "Constrain properties", isDisabled: false })),
+            react_1.default.createElement("div", { className: "squiz-fte-form-group mb-2" },
+                react_1.default.createElement(Input_1.Input, { label: "Height", ...register('height'), type: "number", name: "height", onChange: calculateDimensions })))));
+};
+exports.default = ImageForm;

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

@@ -0,0 +1,2 @@
+declare const ImageButton: () => JSX.Element;
+export default ImageButton;

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

@@ -0,0 +1,67 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __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 });
+const react_1 = __importStar(require("react"));
+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 [showModal, setShowModal] = (0, react_1.useState)(false);
+    const { insertImage } = (0, react_2.useCommands)();
+    const active = showModal;
+    const handleClick = () => {
+        if (!showModal) {
+            // form element are uncontrolled, let the event loop run to
+            // update the selected text in state before showing the modal.
+            requestAnimationFrame(() => {
+                setShowModal(true);
+            });
+        }
+    };
+    const insertImageFromData = (data) => {
+        const { src, alt, width, height } = data;
+        if (src) {
+            insertImage({ src, alt, width, height });
+        }
+    };
+    const handleSubmit = (data) => {
+        insertImageFromData(data);
+        setShowModal(false);
+    };
+    const handleShortcut = (0, react_1.useCallback)(() => {
+        handleClick();
+        // Prevent other key handlers being run
+        return true;
+    }, []);
+    (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 }),
+        showModal && react_1.default.createElement(ImageModal_1.default, { onCancel: () => setShowModal(false), onSubmit: handleSubmit })));
+};
+exports.default = ImageButton;

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

@@ -0,0 +1,8 @@
+import { ImageFormData } from './Form/ImageForm';
+import { SubmitHandler } from 'react-hook-form';
+type ImageModalProps = {
+    onCancel: () => void;
+    onSubmit: SubmitHandler<ImageFormData>;
+};
+declare const ImageModal: ({ onCancel, onSubmit }: ImageModalProps) => JSX.Element;
+export default ImageModal;

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

@@ -0,0 +1,19 @@
+"use strict";
+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);
+    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 })));
+};
+exports.default = ImageModal;

package/lib/EditorToolbar/Tools/Italic/ItalicButton.js

@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const react_2 = require("@remirror/react");
-const ToolbarButton_1 = __importDefault(require("../../../ui/ToolbarButton/ToolbarButton"));
+const Button_1 = __importDefault(require("../../../ui/Button/Button"));
 const FormatItalicRounded_1 = __importDefault(require("@mui/icons-material/FormatItalicRounded"));
 const ItalicButton = () => {
     const { toggleItalic } = (0, react_2.useCommands)();
@@ -17,6 +17,6 @@ const ItalicButton = () => {
             chain.toggleItalic().focus().run();
         }
     };
-    return (react_1.default.createElement(ToolbarButton_1.default, { handleOnClick: handleSelect, isDisabled: !enabled, isActive: active.italic(), icon: react_1.default.createElement(FormatItalicRounded_1.default, null), label: "Italic (cmd+I)" }));
+    return (react_1.default.createElement(Button_1.default, { handleOnClick: handleSelect, isDisabled: !enabled, isActive: active.italic(), icon: react_1.default.createElement(FormatItalicRounded_1.default, null), label: "Italic (cmd+I)" }));
 };
 exports.default = ItalicButton;

package/lib/EditorToolbar/Tools/Link/Form/LinkForm.js

@@ -4,8 +4,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
-const TextInput_1 = require("../../../../ui/Inputs/Text/TextInput");
-const Select_1 = require("../../../../ui/Inputs/Select/Select");
+const Input_1 = require("../../../../ui/Fields/Input/Input");
+const Select_1 = require("../../../../ui/Fields/Select/Select");
 const react_hook_form_1 = require("react-hook-form");
 const selectOptions = {
     _self: { label: 'Current window' },
@@ -17,11 +17,11 @@ const LinkForm = ({ 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(TextInput_1.TextInput, { label: "URL", ...register('href') })),
+            react_1.default.createElement(Input_1.Input, { label: "URL", ...register('href') })),
         react_1.default.createElement("div", { className: "squiz-fte-form-group mb-2" },
-            react_1.default.createElement(TextInput_1.TextInput, { label: "Text", ...register('text') })),
+            react_1.default.createElement(Input_1.Input, { label: "Text", ...register('text') })),
         react_1.default.createElement("div", { className: "squiz-fte-form-group mb-2" },
-            react_1.default.createElement(TextInput_1.TextInput, { label: "Title", ...register('title') })),
+            react_1.default.createElement(Input_1.Input, { label: "Title", ...register('title') })),
         react_1.default.createElement("div", { className: "squiz-fte-form-group mb-0" },
             react_1.default.createElement(Select_1.Select, { name: "target", label: "Target", value: data.target || '_self', options: selectOptions, onChange: (value) => setValue('target', value) }))));
 };

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

@@ -29,7 +29,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
 const InsertLinkRounded_1 = __importDefault(require("@mui/icons-material/InsertLinkRounded"));
 const LinkModal_1 = __importDefault(require("./LinkModal"));
-const ToolbarButton_1 = __importDefault(require("../../../ui/ToolbarButton/ToolbarButton"));
+const Button_1 = __importDefault(require("../../../ui/Button/Button"));
 const react_2 = require("@remirror/react");
 const LinkExtension_1 = require("../../../Extensions/LinkExtension/LinkExtension");
 const LinkButton = ({ inPopover = false }) => {
@@ -56,7 +56,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(ToolbarButton_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)" }),
         showModal && react_1.default.createElement(LinkModal_1.default, { onCancel: () => setShowModal(false), onSubmit: handleSubmit })));
 };
 exports.default = LinkButton;

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

@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const react_2 = require("@remirror/react");
-const ToolbarButton_1 = __importDefault(require("../../../ui/ToolbarButton/ToolbarButton"));
+const Button_1 = __importDefault(require("../../../ui/Button/Button"));
 const LinkOff_1 = __importDefault(require("@mui/icons-material/LinkOff"));
 const RemoveLinkButton = () => {
     const { commands } = (0, react_2.useRemirrorContext)({ autoUpdate: true });
@@ -16,6 +16,6 @@ const RemoveLinkButton = () => {
             chain.removeLink().focus().run();
         }
     };
-    return (react_1.default.createElement(ToolbarButton_1.default, { handleOnClick: handleClick, isActive: false, isDisabled: !enabled, icon: react_1.default.createElement(LinkOff_1.default, null), label: "Remove link" }));
+    return (react_1.default.createElement(Button_1.default, { handleOnClick: handleClick, isActive: false, isDisabled: !enabled, icon: react_1.default.createElement(LinkOff_1.default, null), label: "Remove link" }));
 };
 exports.default = RemoveLinkButton;

package/lib/EditorToolbar/Tools/Redo/RedoButton.js

@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const react_2 = require("@remirror/react");
-const ToolbarButton_1 = __importDefault(require("../../../ui/ToolbarButton/ToolbarButton"));
+const Button_1 = __importDefault(require("../../../ui/Button/Button"));
 const RedoRounded_1 = __importDefault(require("@mui/icons-material/RedoRounded"));
 const RedoButton = () => {
     const { redo } = (0, react_2.useCommands)();
@@ -16,6 +16,6 @@ const RedoButton = () => {
         }
     };
     const enabled = redoDepth() > 0;
-    return (react_1.default.createElement(ToolbarButton_1.default, { handleOnClick: handleSelect, isDisabled: !enabled, isActive: false, icon: react_1.default.createElement(RedoRounded_1.default, null), label: "Redo (shift+cmd+Z)" }));
+    return (react_1.default.createElement(Button_1.default, { handleOnClick: handleSelect, isDisabled: !enabled, isActive: false, icon: react_1.default.createElement(RedoRounded_1.default, null), label: "Redo (shift+cmd+Z)" }));
 };
 exports.default = RedoButton;

package/lib/EditorToolbar/Tools/TextAlign/CenterAlign/CenterAlignButton.js

@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const react_2 = require("@remirror/react");
-const ToolbarButton_1 = __importDefault(require("../../../../ui/ToolbarButton/ToolbarButton"));
+const Button_1 = __importDefault(require("../../../../ui/Button/Button"));
 const FormatAlignCenter_1 = __importDefault(require("@mui/icons-material/FormatAlignCenter"));
 const CenterAlignButton = () => {
     const { centerAlign } = (0, react_2.useCommands)();
@@ -17,6 +17,6 @@ const CenterAlignButton = () => {
     };
     const active = centerAlign.active?.() || false;
     const enabled = centerAlign.enabled();
-    return (react_1.default.createElement(ToolbarButton_1.default, { handleOnClick: handleSelect, isDisabled: !enabled, isActive: active, icon: react_1.default.createElement(FormatAlignCenter_1.default, null), label: "Align center" }));
+    return (react_1.default.createElement(Button_1.default, { handleOnClick: handleSelect, isDisabled: !enabled, isActive: active, icon: react_1.default.createElement(FormatAlignCenter_1.default, null), label: "Align center" }));
 };
 exports.default = CenterAlignButton;

package/lib/EditorToolbar/Tools/TextAlign/JustifyAlign/JustifyAlignButton.js

@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const react_2 = require("@remirror/react");
-const ToolbarButton_1 = __importDefault(require("../../../../ui/ToolbarButton/ToolbarButton"));
+const Button_1 = __importDefault(require("../../../../ui/Button/Button"));
 const FormatAlignJustify_1 = __importDefault(require("@mui/icons-material/FormatAlignJustify"));
 const JustifyAlignButton = () => {
     const { justifyAlign } = (0, react_2.useCommands)();
@@ -17,6 +17,6 @@ const JustifyAlignButton = () => {
     };
     const active = justifyAlign.active?.() || false;
     const enabled = justifyAlign.enabled();
-    return (react_1.default.createElement(ToolbarButton_1.default, { handleOnClick: handleSelect, isDisabled: !enabled, isActive: active, icon: react_1.default.createElement(FormatAlignJustify_1.default, null), label: "Justify" }));
+    return (react_1.default.createElement(Button_1.default, { handleOnClick: handleSelect, isDisabled: !enabled, isActive: active, icon: react_1.default.createElement(FormatAlignJustify_1.default, null), label: "Justify" }));
 };
 exports.default = JustifyAlignButton;

package/lib/EditorToolbar/Tools/TextAlign/LeftAlign/LeftAlignButton.js

@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const react_2 = require("@remirror/react");
-const ToolbarButton_1 = __importDefault(require("../../../../ui/ToolbarButton/ToolbarButton"));
+const Button_1 = __importDefault(require("../../../../ui/Button/Button"));
 const FormatAlignLeft_1 = __importDefault(require("@mui/icons-material/FormatAlignLeft"));
 const LeftAlignButton = () => {
     const { leftAlign } = (0, react_2.useCommands)();
@@ -17,6 +17,6 @@ const LeftAlignButton = () => {
     };
     const active = leftAlign.active?.() || false;
     const enabled = leftAlign.enabled();
-    return (react_1.default.createElement(ToolbarButton_1.default, { handleOnClick: handleSelect, isDisabled: !enabled, isActive: active, icon: react_1.default.createElement(FormatAlignLeft_1.default, null), label: "Align left" }));
+    return (react_1.default.createElement(Button_1.default, { handleOnClick: handleSelect, isDisabled: !enabled, isActive: active, icon: react_1.default.createElement(FormatAlignLeft_1.default, null), label: "Align left" }));
 };
 exports.default = LeftAlignButton;

package/lib/EditorToolbar/Tools/TextAlign/RightAlign/RightAlignButton.js

@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const react_2 = require("@remirror/react");
-const ToolbarButton_1 = __importDefault(require("../../../../ui/ToolbarButton/ToolbarButton"));
+const Button_1 = __importDefault(require("../../../../ui/Button/Button"));
 const FormatAlignRight_1 = __importDefault(require("@mui/icons-material/FormatAlignRight"));
 const RightAlignButton = () => {
     const { rightAlign } = (0, react_2.useCommands)();
@@ -17,6 +17,6 @@ const RightAlignButton = () => {
     };
     const active = rightAlign.active?.() || false;
     const enabled = rightAlign.enabled();
-    return (react_1.default.createElement(ToolbarButton_1.default, { handleOnClick: handleSelect, isDisabled: !enabled, isActive: active, icon: react_1.default.createElement(FormatAlignRight_1.default, null), label: "Align right" }));
+    return (react_1.default.createElement(Button_1.default, { handleOnClick: handleSelect, isDisabled: !enabled, isActive: active, icon: react_1.default.createElement(FormatAlignRight_1.default, null), label: "Align right" }));
 };
 exports.default = RightAlignButton;

package/lib/EditorToolbar/Tools/Underline/UnderlineButton.js

@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const react_2 = require("@remirror/react");
-const ToolbarButton_1 = __importDefault(require("../../../ui/ToolbarButton/ToolbarButton"));
+const Button_1 = __importDefault(require("../../../ui/Button/Button"));
 const FormatUnderlinedRounded_1 = __importDefault(require("@mui/icons-material/FormatUnderlinedRounded"));
 const UnderlineButton = () => {
     const { toggleUnderline } = (0, react_2.useCommands)();
@@ -17,6 +17,6 @@ const UnderlineButton = () => {
             chain.toggleUnderline().focus().run();
         }
     };
-    return (react_1.default.createElement(ToolbarButton_1.default, { handleOnClick: handleSelect, isDisabled: !enabled, isActive: active.underline(), icon: react_1.default.createElement(FormatUnderlinedRounded_1.default, null), label: "Underline (cmd+U)" }));
+    return (react_1.default.createElement(Button_1.default, { handleOnClick: handleSelect, isDisabled: !enabled, isActive: active.underline(), icon: react_1.default.createElement(FormatUnderlinedRounded_1.default, null), label: "Underline (cmd+U)" }));
 };
 exports.default = UnderlineButton;

package/lib/EditorToolbar/Tools/Undo/UndoButton.js

@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const react_2 = require("@remirror/react");
-const ToolbarButton_1 = __importDefault(require("../../../ui/ToolbarButton/ToolbarButton"));
+const Button_1 = __importDefault(require("../../../ui/Button/Button"));
 const UndoRounded_1 = __importDefault(require("@mui/icons-material/UndoRounded"));
 const UndoButton = () => {
     const { undo } = (0, react_2.useCommands)();
@@ -16,6 +16,6 @@ const UndoButton = () => {
         }
     };
     const enabled = undoDepth() > 0;
-    return (react_1.default.createElement(ToolbarButton_1.default, { handleOnClick: handleSelect, isDisabled: !enabled, isActive: false, icon: react_1.default.createElement(UndoRounded_1.default, null), label: "Undo (cmd+Z)" }));
+    return (react_1.default.createElement(Button_1.default, { handleOnClick: handleSelect, isDisabled: !enabled, isActive: false, icon: react_1.default.createElement(UndoRounded_1.default, null), label: "Undo (cmd+Z)" }));
 };
 exports.default = UndoButton;

package/lib/Extensions/Extensions.d.ts

@@ -1,4 +1,2 @@
-import { BoldExtension, HeadingExtension, ItalicExtension, NodeFormattingExtension, ParagraphExtension, UnderlineExtension, HistoryExtension } from 'remirror/extensions';
-import { PreformattedExtension } from './PreformattedExtension/PreformattedExtension';
-import { LinkExtension } from './LinkExtension/LinkExtension';
-export declare const Extensions: () => (BoldExtension | HistoryExtension | HeadingExtension | ItalicExtension | NodeFormattingExtension | ParagraphExtension | UnderlineExtension | LinkExtension | PreformattedExtension)[];
+import { Extension } from '@remirror/core';
+export declare const Extensions: () => Extension[];

package/lib/Extensions/Extensions.js

@@ -4,15 +4,17 @@ exports.Extensions = void 0;
 const extensions_1 = require("remirror/extensions");
 const PreformattedExtension_1 = require("./PreformattedExtension/PreformattedExtension");
 const LinkExtension_1 = require("./LinkExtension/LinkExtension");
+const ImageExtension_1 = require("./ImageExtension/ImageExtension");
 const Extensions = () => [
     new extensions_1.BoldExtension(),
     new extensions_1.HeadingExtension(),
     new extensions_1.ItalicExtension(),
-    new extensions_1.NodeFormattingExtension(),
+    new extensions_1.NodeFormattingExtension({ indents: [] }),
     new extensions_1.ParagraphExtension(),
     new PreformattedExtension_1.PreformattedExtension(),
     new extensions_1.UnderlineExtension(),
     new extensions_1.HistoryExtension(),
+    new ImageExtension_1.ImageExtension(),
     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

@@ -0,0 +1,3 @@
+import { ImageExtension as RemirrorImageExtension } from 'remirror/extensions';
+export declare class ImageExtension extends RemirrorImageExtension {
+}

package/lib/Extensions/ImageExtension/ImageExtension.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImageExtension = void 0;
+const extensions_1 = require("remirror/extensions");
+class ImageExtension extends extensions_1.ImageExtension {
+}
+exports.ImageExtension = ImageExtension;

package/lib/Extensions/LinkExtension/LinkExtension.js

@@ -75,18 +75,20 @@ class LinkExtension extends extensions_1.LinkExtension {
             const selectedText = tr.doc.textBetween(range.from, range.to);
             if (text !== selectedText) {
                 // update the text in the editor if it was updated, update the range to cover the length of the new text.
-                dispatch?.(tr.insertText(text));
+                tr.insertText(text);
                 range.to = range.from + text.length;
             }
             // apply the link, or remove it if no URL was provided.
             if (attrs.href.length > 0) {
-                (0, core_1.updateMark)({ type: this.type, attrs, range })(props);
+                tr.addMark(range.from, range.to, this.type.create(attrs));
             }
             else {
-                (0, core_1.removeMark)({ type: this.type, range })(props);
+                tr.removeMark(range.from, range.to, this.type);
             }
             // move the cursor to the end of the link and re-focus the editor.
-            dispatch?.(tr.setSelection((0, core_1.getTextSelection)({ from: range.to, to: range.to }, tr.doc)));
+            tr.setSelection((0, core_1.getTextSelection)({ from: range.to, to: range.to }, tr.doc));
+            // apply the transaction.
+            dispatch?.(tr);
             view?.focus();
             return true;
         };