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

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

@@ -29,25 +29,28 @@ 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 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);
     };
     if (!inPopover) {
@@ -56,7 +59,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() || 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.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.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.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/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;
+}

package/lib/Extensions/ImageExtension/ImageExtension.js

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

package/lib/Extensions/LinkExtension/AssetLinkExtension.d.ts

@@ -0,0 +1,26 @@
+import { ApplySchemaAttributes, FromToProps, MarkExtensionSpec, MarkSpecOverride } from 'remirror';
+import { CommandFunction, MarkExtension } from '@remirror/core';
+import { LinkTarget } from './common';
+export type AssetLinkAttributes = {
+    matrixAssetId: string;
+    matrixIdentifier: string;
+    matrixDomain: string;
+    target: LinkTarget;
+};
+export type AssetLinkOptions = {
+    matrixIdentifier?: string;
+    matrixDomain?: string;
+    defaultTarget?: LinkTarget;
+    supportedTargets?: LinkTarget[];
+};
+export type UpdateAssetLinkProps = {
+    text: string;
+    attrs: Partial<AssetLinkAttributes>;
+    range: FromToProps;
+};
+export declare class AssetLinkExtension extends MarkExtension<AssetLinkOptions> {
+    get name(): string;
+    createMarkSpec(extra: ApplySchemaAttributes, override: MarkSpecOverride): MarkExtensionSpec;
+    updateAssetLink({ text, attrs, range }: UpdateAssetLinkProps): CommandFunction;
+    removeAssetLink(): CommandFunction;
+}

package/lib/Extensions/LinkExtension/AssetLinkExtension.js

@@ -0,0 +1,102 @@
+"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.AssetLinkExtension = void 0;
+const remirror_1 = require("remirror");
+const core_1 = require("@remirror/core");
+const common_1 = require("./common");
+const CommandsExtension_1 = require("../CommandsExtension/CommandsExtension");
+const Extensions_1 = require("../Extensions");
+let AssetLinkExtension = class AssetLinkExtension extends core_1.MarkExtension {
+    get name() {
+        return Extensions_1.MarkName.AssetLink;
+    }
+    createMarkSpec(extra, override) {
+        return {
+            inclusive: false,
+            excludes: 'link',
+            ...override,
+            attrs: {
+                ...extra.defaults(),
+                matrixAssetId: {},
+                matrixIdentifier: { default: this.options.matrixIdentifier },
+                matrixDomain: { default: this.options.matrixDomain },
+                target: { default: this.options.defaultTarget },
+            },
+            parseDOM: [
+                {
+                    tag: 'a[data-matrix-asset-id]',
+                    getAttrs: (node) => {
+                        if (!(0, remirror_1.isElementDomNode)(node)) {
+                            return false;
+                        }
+                        const matrixAssetId = node.getAttribute('data-matrix-asset-id');
+                        const matrixIdentifier = node.getAttribute('data-matrix-identifier');
+                        const matrixDomain = node.getAttribute('data-matrix-domain');
+                        if (!matrixAssetId || !matrixIdentifier || !matrixDomain) {
+                            return false;
+                        }
+                        return {
+                            ...extra.parse(node),
+                            matrixAssetId,
+                            matrixIdentifier,
+                            matrixDomain,
+                            target: (0, common_1.validateTarget)(node.getAttribute('target'), this.options.supportedTargets, this.options.defaultTarget),
+                        };
+                    },
+                },
+            ],
+            toDOM: (node) => {
+                const { matrixAssetId, matrixIdentifier, matrixDomain, target, ...rest } = (0, core_1.omitExtraAttributes)(node.attrs, extra);
+                const rel = 'noopener noreferrer nofollow';
+                const attrs = {
+                    ...extra.dom(node),
+                    ...rest,
+                    rel,
+                    // TODO: this won't be acceptable if/when we get to rendering outside of Matrix.
+                    href: `/?a=${matrixAssetId}`,
+                    target: (0, common_1.validateTarget)(target, this.options.supportedTargets, this.options.defaultTarget),
+                    'data-matrix-asset-id': matrixAssetId,
+                    'data-matrix-identifier': matrixIdentifier,
+                    'data-matrix-domain': matrixDomain,
+                };
+                return ['a', attrs, 0];
+            },
+        };
+    }
+    updateAssetLink({ text, attrs, range }) {
+        return this.store.getExtension(CommandsExtension_1.CommandsExtension).updateMark({
+            attrs,
+            text,
+            range,
+            mark: this.type,
+            removeMark: !attrs.matrixAssetId,
+        });
+    }
+    removeAssetLink() {
+        return (0, core_1.removeMark)({ type: this.type });
+    }
+};
+__decorate([
+    (0, core_1.command)()
+], AssetLinkExtension.prototype, "updateAssetLink", null);
+__decorate([
+    (0, core_1.command)()
+], AssetLinkExtension.prototype, "removeAssetLink", null);
+AssetLinkExtension = __decorate([
+    (0, core_1.extension)({
+        defaultOptions: {
+            matrixIdentifier: '',
+            matrixDomain: '',
+            defaultTarget: common_1.LinkTarget.Self,
+            supportedTargets: [common_1.LinkTarget.Self, common_1.LinkTarget.Blank],
+        },
+        defaultPriority: remirror_1.ExtensionPriority.High,
+    })
+], AssetLinkExtension);
+exports.AssetLinkExtension = AssetLinkExtension;

package/lib/Extensions/LinkExtension/LinkExtension.d.ts

@@ -1,16 +1,25 @@
-import { ApplySchemaAttributes, MarkExtensionSpec, MarkSpecOverride } from 'remirror';
-import { KeyBindingProps } from '@remirror/core';
-import { CommandFunction } from '@remirror/pm';
-import { LinkAttributes as RemirrorLinkAttributes, LinkExtension as RemirrorLinkExtension } from 'remirror/extensions';
-export type UpdateLinkOptions = LinkAttributes & {
-    text: string;
-};
-export type LinkAttributes = RemirrorLinkAttributes & {
+import { ApplySchemaAttributes, FromToProps, MarkExtensionSpec, MarkSpecOverride } from 'remirror';
+import { CommandFunction, Handler, KeyBindingProps, MarkExtension } from '@remirror/core';
+import { LinkTarget } from './common';
+export type LinkAttributes = {
+    href: string;
     title?: string;
+    target: LinkTarget;
+};
+export type LinkOptions = {
+    defaultTarget?: LinkTarget;
+    supportedTargets?: LinkTarget[];
+    onShortcut?: Handler<() => void>;
+};
+export type UpdateLinkProps = {
+    text: string;
+    attrs: Partial<LinkAttributes>;
+    range: FromToProps;
 };
-export declare class LinkExtension extends RemirrorLinkExtension {
+export declare class LinkExtension extends MarkExtension<LinkOptions> {
+    get name(): string;
     createMarkSpec(extra: ApplySchemaAttributes, override: MarkSpecOverride): MarkExtensionSpec;
-    shortcut({ tr }: KeyBindingProps): boolean;
-    selectLink(): CommandFunction;
-    updateLink(options: UpdateLinkOptions): CommandFunction;
+    shortcut(_: KeyBindingProps): boolean;
+    updateLink({ text, attrs, range }: UpdateLinkProps): CommandFunction;
+    removeLink(): CommandFunction;
 }