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

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

@@ -1,28 +1,80 @@
 "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 = __importDefault(require("react"));
-const TextInput_1 = require("../../../../ui/Inputs/Text/TextInput");
-const Select_1 = require("../../../../ui/Inputs/Select/Select");
+exports.LinkForm = void 0;
+const react_1 = __importStar(require("react"));
+const clsx_1 = __importDefault(require("clsx"));
 const react_hook_form_1 = require("react-hook-form");
-const selectOptions = {
-    _self: { label: 'Current window' },
-    _blank: { label: 'New window' },
+const Input_1 = require("../../../../ui/Fields/Input/Input");
+const Select_1 = require("../../../../ui/Fields/Select/Select");
+const common_1 = require("../../../../Extensions/LinkExtension/common");
+const EditorContext_1 = require("../../../../Editor/EditorContext");
+const Extensions_1 = require("../../../../Extensions/Extensions");
+const linkTypeOptions = {
+    [Extensions_1.MarkName.Link]: { label: 'Link to URL' },
+    [Extensions_1.MarkName.AssetLink]: { label: 'Link to asset' },
+};
+const targetOptions = {
+    [common_1.LinkTarget.Self]: { label: 'Current window' },
+    [common_1.LinkTarget.Blank]: { label: 'New window' },
 };
 const LinkForm = ({ data, onSubmit }) => {
-    const { register, handleSubmit, setValue } = (0, react_hook_form_1.useForm)({
+    const context = (0, react_1.useContext)(EditorContext_1.EditorContext);
+    const { register, handleSubmit, setValue, watch, formState: { errors }, } = (0, react_hook_form_1.useForm)({
         defaultValues: data,
     });
+    const linkType = watch('linkType') || Extensions_1.MarkName.Link;
     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("div", { className: "squiz-fte-form-group mb-2" },
-            react_1.default.createElement(TextInput_1.TextInput, { 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("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) }))));
+            react_1.default.createElement(Select_1.Select, { name: "linkType", label: "Type", value: linkType, options: linkTypeOptions, onChange: (value) => setValue('linkType', value) })),
+        linkType === Extensions_1.MarkName.Link && (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement("div", { className: (0, clsx_1.default)('squiz-fte-form-group mb-2') },
+                react_1.default.createElement(Input_1.Input, { label: "URL", ...register('link.href') })),
+            react_1.default.createElement("div", { className: (0, clsx_1.default)('squiz-fte-form-group mb-2') },
+                react_1.default.createElement(Input_1.Input, { label: "Text", ...register('text') })),
+            react_1.default.createElement("div", { className: (0, clsx_1.default)('squiz-fte-form-group mb-2') },
+                react_1.default.createElement(Input_1.Input, { label: "Title", ...register('link.title') })),
+            react_1.default.createElement("div", { className: (0, clsx_1.default)('squiz-fte-form-group mb-0') },
+                react_1.default.createElement(Select_1.Select, { name: "link.target", label: "Target", value: data?.link?.target || '_self', options: targetOptions, onChange: (value) => setValue('link.target', value) })))),
+        linkType === Extensions_1.MarkName.AssetLink && (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement("div", { className: (0, clsx_1.default)('squiz-fte-form-group mb-2') },
+                react_1.default.createElement(Input_1.Input, { label: "Asset ID", error: errors?.assetLink?.matrixAssetId?.message, ...register('assetLink.matrixAssetId', {
+                        validate: {
+                            isValidAsset: async (assetId) => {
+                                if (assetId && !(await context.matrix.isValidMatrixAssetId(assetId))) {
+                                    return 'Invalid asset ID';
+                                }
+                            },
+                        },
+                    }) })),
+            react_1.default.createElement("div", { className: (0, clsx_1.default)('squiz-fte-form-group mb-2') },
+                react_1.default.createElement(Input_1.Input, { label: "Text", ...register('text') })),
+            react_1.default.createElement("div", { className: (0, clsx_1.default)('squiz-fte-form-group mb-0') },
+                react_1.default.createElement(Select_1.Select, { name: "assetLink.target", label: "Target", value: data?.link?.target || '_self', options: targetOptions, onChange: (value) => setValue('assetLink.target', value) }))))));
 };
-exports.default = LinkForm;
+exports.LinkForm = LinkForm;

package/lib/EditorToolbar/Tools/Link/LinkButton.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type LinkButtonProps = {
     inPopover?: boolean;
 };

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

@@ -29,34 +29,42 @@ 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 Extensions_1 = require("../../../Extensions/Extensions");
 const LinkButton = ({ inPopover = false }) => {
     const [showModal, setShowModal] = (0, react_1.useState)(false);
-    const { selectLink, updateLink } = (0, react_2.useCommands)();
+    const { updateLink, updateAssetLink } = (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 = active.image();
     const handleClick = () => {
         if (!showModal) {
-            selectLink();
-            // form element are uncontrolled, let the event loop run to
-            // update the selected text in state before showing the modal.
-            requestAnimationFrame(() => {
-                setShowModal(true);
-            });
+            setShowModal(true);
         }
     };
+    const handleShortcut = (0, react_1.useCallback)(() => {
+        handleClick();
+        // Prevent other key handlers being run
+        return true;
+    }, []);
     const handleSubmit = (data) => {
-        updateLink(data);
+        if (data.linkType === Extensions_1.MarkName.AssetLink) {
+            updateAssetLink({ text: data.text, attrs: data.assetLink, range: data.range });
+        }
+        else {
+            updateLink({ text: data.text, attrs: data.link, range: data.range });
+        }
         setShowModal(false);
     };
+    // when Ctrl+K is pressed show the modal, only registered in the toolbar button instance to avoid the key press
+    // being double handled.
     if (!inPopover) {
-        // when Ctrl+K is pressed show the modal, only registered in the toolbar button instance to avoid the key press
-        // being double handled.
-        (0, react_2.useExtensionEvent)(LinkExtension_1.LinkExtension, 'onShortcut', (0, react_1.useCallback)(() => handleClick(), []));
+        // disable the shortcut if the button is disabled
+        (0, react_2.useKeymap)('Mod-k', disabled ? () => true : handleShortcut);
     }
     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() || active.assetLink(), 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/EditorToolbar/Tools/Link/LinkModal.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { LinkFormData } from './Form/LinkForm';
 import { SubmitHandler } from 'react-hook-form';
 type LinkModalProps = {

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

@@ -3,17 +3,24 @@ 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 LinkForm_1 = __importDefault(require("./Form/LinkForm"));
+const LinkForm_1 = require("./Form/LinkForm");
 const react_1 = __importDefault(require("react"));
 const react_2 = require("@remirror/react");
 const FormModal_1 = __importDefault(require("../../../ui/Modal/FormModal"));
+const hooks_1 = require("../../../hooks");
+const Extensions_1 = require("../../../Extensions/Extensions");
 const LinkModal = ({ onCancel, onSubmit }) => {
     const { helpers, view: { state }, } = (0, react_2.useRemirrorContext)();
-    const selection = (0, react_2.useCurrentSelection)();
-    const currentLink = (0, remirror_1.getMarkRanges)(selection, 'link')[0];
+    const { selection, marks } = (0, hooks_1.useExpandedSelection)([Extensions_1.MarkName.Link, Extensions_1.MarkName.AssetLink]);
     const selectedText = helpers.getTextBetween(selection.from, selection.to, state.doc);
+    const data = {
+        linkType: marks[0]?.type?.name === Extensions_1.MarkName.AssetLink ? Extensions_1.MarkName.AssetLink : Extensions_1.MarkName.Link,
+        text: selectedText,
+        link: marks.find((mark) => mark.type.name === 'link')?.attrs || {},
+        assetLink: marks.find((mark) => mark.type.name === Extensions_1.MarkName.AssetLink)?.attrs || {},
+        range: { from: selection.from, to: selection.to },
+    };
     return (react_1.default.createElement(FormModal_1.default, { title: "Link", onCancel: onCancel },
-        react_1.default.createElement(LinkForm_1.default, { data: { ...currentLink?.mark.attrs, text: selectedText }, onSubmit: onSubmit })));
+        react_1.default.createElement(LinkForm_1.LinkForm, { data: data, onSubmit: onSubmit })));
 };
 exports.default = LinkModal;

package/lib/EditorToolbar/Tools/Link/RemoveLinkButton.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 declare const RemoveLinkButton: () => JSX.Element;
 export default RemoveLinkButton;

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

@@ -5,17 +5,10 @@ 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 });
     const chain = (0, react_2.useChainedCommands)();
-    const enabled = commands.removeLink.enabled();
-    const handleClick = () => {
-        if (enabled) {
-            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: () => chain.removeLink().removeAssetLink().focus().run(), isActive: false, icon: react_1.default.createElement(LinkOff_1.default, null), label: "Remove link" }));
 };
 exports.default = RemoveLinkButton;

package/lib/EditorToolbar/Tools/Redo/RedoButton.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 declare const RedoButton: () => JSX.Element;
 export default RedoButton;

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.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 declare const CenterAlignButton: () => JSX.Element;
 export default CenterAlignButton;

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.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 declare const JustifyAlignButton: () => JSX.Element;
 export default JustifyAlignButton;

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.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 declare const LeftAlignButton: () => JSX.Element;
 export default LeftAlignButton;

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.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 declare const RightAlignButton: () => JSX.Element;
 export default RightAlignButton;

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/TextAlign/TextAlignButtons.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 declare const TextAlignButtons: () => JSX.Element;
 export default TextAlignButtons;

package/lib/EditorToolbar/Tools/TextType/Heading/HeadingButton.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type HeadingButtonProps = {
     level: number;
 };

package/lib/EditorToolbar/Tools/TextType/Paragraph/ParagraphButton.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 declare const ParagraphButton: () => JSX.Element;
 export default ParagraphButton;

package/lib/EditorToolbar/Tools/TextType/Preformatted/PreformattedButton.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 declare const PreformattedButton: () => JSX.Element;
 export default PreformattedButton;

package/lib/EditorToolbar/Tools/TextType/TextTypeDropdown.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 declare const TextTypeDropdown: () => JSX.Element;
 export default TextTypeDropdown;

package/lib/EditorToolbar/Tools/Underline/UnderlineButton.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 declare const UnderlineButton: () => JSX.Element;
 export default UnderlineButton;

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.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 declare const UndoButton: () => JSX.Element;
 export default UndoButton;

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/CommandsExtension/CommandsExtension.d.ts

@@ -0,0 +1,20 @@
+import { PlainExtension } from '@remirror/core';
+import { CommandFunction, FromToProps, MarkType } from 'remirror';
+import { Attrs } from 'prosemirror-model';
+export declare class CommandsExtension extends PlainExtension {
+    get name(): string;
+    /**
+     * Updates the attributes of a specific mark for the current selection.
+     * Optionally, if text is provided it will replace the current selection.
+     * The cursor will be place at the end of the selection after changes.
+     *
+     * @param {object} options
+     */
+    updateMark(options: {
+        mark: MarkType;
+        attrs?: Attrs;
+        text?: string;
+        removeMark?: boolean;
+        range: FromToProps;
+    }): CommandFunction;
+}

package/lib/Extensions/CommandsExtension/CommandsExtension.js

@@ -0,0 +1,52 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CommandsExtension = void 0;
+const core_1 = require("@remirror/core");
+const remirror_1 = require("remirror");
+class CommandsExtension extends core_1.PlainExtension {
+    get name() {
+        return 'squizCommands';
+    }
+    /**
+     * Updates the attributes of a specific mark for the current selection.
+     * Optionally, if text is provided it will replace the current selection.
+     * The cursor will be place at the end of the selection after changes.
+     *
+     * @param {object} options
+     */
+    updateMark(options) {
+        return (props) => {
+            const { tr, dispatch, view } = props;
+            const { mark, attrs, text, removeMark, range } = options;
+            const selectedText = tr.doc.textBetween(range.from, range.to);
+            if (text !== undefined && text !== selectedText) {
+                // update the text in the editor if it was updated, update the range to cover the length of the new text.
+                tr.insertText(text, range.from, range.to);
+                range.to = range.from + text.length;
+            }
+            // apply the link, or remove it if no URL was provided.
+            if (removeMark) {
+                tr.removeMark(range.from, range.to, mark);
+            }
+            else {
+                tr.addMark(range.from, range.to, mark.create(attrs));
+            }
+            // move the cursor to the end of the link and re-focus the editor.
+            tr.setSelection((0, remirror_1.getTextSelection)({ from: range.to, to: range.to }, tr.doc));
+            // apply the transaction.
+            dispatch?.(tr);
+            view?.focus();
+            return true;
+        };
+    }
+}
+__decorate([
+    (0, remirror_1.command)()
+], CommandsExtension.prototype, "updateMark", null);
+exports.CommandsExtension = CommandsExtension;

package/lib/Extensions/Extensions.d.ts

@@ -1,4 +1,7 @@
-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';
+import { EditorContextOptions } from '../Editor/EditorContext';
+export declare enum MarkName {
+    Link = "link",
+    AssetLink = "assetLink"
+}
+export declare const createExtensions: (context: EditorContextOptions) => () => Extension[];

package/lib/Extensions/Extensions.js

@@ -1,24 +1,37 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Extensions = void 0;
+exports.createExtensions = exports.MarkName = void 0;
 const extensions_1 = require("remirror/extensions");
 const PreformattedExtension_1 = require("./PreformattedExtension/PreformattedExtension");
+const AssetLinkExtension_1 = require("./LinkExtension/AssetLinkExtension");
 const LinkExtension_1 = require("./LinkExtension/LinkExtension");
-const Extensions = () => [
-    new extensions_1.BoldExtension(),
-    new extensions_1.HeadingExtension(),
-    new extensions_1.ItalicExtension(),
-    new extensions_1.NodeFormattingExtension(),
-    new extensions_1.ParagraphExtension(),
-    new PreformattedExtension_1.PreformattedExtension(),
-    new extensions_1.UnderlineExtension(),
-    new extensions_1.HistoryExtension(),
-    new LinkExtension_1.LinkExtension({
-        supportedTargets: [
-            // '_self' is the browser default and will be used when encountering a link with a
-            // different target is encountered.
-            '_blank',
-        ],
-    }),
-];
-exports.Extensions = Extensions;
+const ImageExtension_1 = require("./ImageExtension/ImageExtension");
+const CommandsExtension_1 = require("./CommandsExtension/CommandsExtension");
+var MarkName;
+(function (MarkName) {
+    MarkName["Link"] = "link";
+    MarkName["AssetLink"] = "assetLink";
+})(MarkName = exports.MarkName || (exports.MarkName = {}));
+const createExtensions = (context) => {
+    return () => {
+        return [
+            new CommandsExtension_1.CommandsExtension(),
+            new extensions_1.BoldExtension(),
+            new extensions_1.HeadingExtension(),
+            new extensions_1.ItalicExtension(),
+            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 ImageExtension_1.ImageExtension({ preferPastedTextContent: false }),
+            new LinkExtension_1.LinkExtension(),
+            new AssetLinkExtension_1.AssetLinkExtension({
+                matrixIdentifier: context.matrix.matrixIdentifier,
+                matrixDomain: context.matrix.matrixDomain,
+            }),
+        ];
+    };
+};
+exports.createExtensions = createExtensions;

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

@@ -0,0 +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;
+}