@squiz/formatted-text-editor 1.21.1-alpha.7 → 1.22.0

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"));
+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 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' },
-    _blank: { label: 'New window' },
+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(Input_1.Input, { label: "URL", ...register('href') })),
-        react_1.default.createElement("div", { className: "squiz-fte-form-group mb-2" },
-            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(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) }))));
+            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.resolveMatrixAsset(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.js

@@ -31,32 +31,40 @@ const InsertLinkRounded_1 = __importDefault(require("@mui/icons-material/InsertL
 const LinkModal_1 = __importDefault(require("./LinkModal"));
 const Button_1 = __importDefault(require("../../../ui/Button/Button"));
 const react_2 = require("@remirror/react");
-const LinkExtension_1 = require("../../../Extensions/LinkExtension/LinkExtension");
+const 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(Button_1.default, { handleOnClick: handleClick, isActive: active.link(), icon: react_1.default.createElement(InsertLinkRounded_1.default, null), label: "Link (cmd+K)" }),
+        react_1.default.createElement(Button_1.default, { handleOnClick: handleClick, isActive: active.link() || 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

@@ -8,14 +8,7 @@ const react_2 = require("@remirror/react");
 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(Button_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/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,5 +1,12 @@
-import { BoldExtension, HeadingExtension, ItalicExtension, NodeFormattingExtension, ParagraphExtension, UnderlineExtension, HistoryExtension } from 'remirror/extensions';
-import { PreformattedExtension } from './PreformattedExtension/PreformattedExtension';
-import { LinkExtension } from './LinkExtension/LinkExtension';
-import { ImageExtension } from './ImageExtension/ImageExtension';
-export declare const Extensions: () => (BoldExtension | HistoryExtension | HeadingExtension | ItalicExtension | NodeFormattingExtension | ParagraphExtension | UnderlineExtension | LinkExtension | PreformattedExtension | ImageExtension)[];
+import { Extension } from '@remirror/core';
+import { EditorContextOptions } from '../Editor/EditorContext';
+export declare enum NodeName {
+    Image = "image",
+    AssetImage = "assetImage",
+    Text = "text"
+}
+export declare enum MarkName {
+    Link = "link",
+    AssetLink = "assetLink"
+}
+export declare const createExtensions: (context: EditorContextOptions) => () => Extension[];

package/lib/Extensions/Extensions.js

@@ -1,26 +1,48 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Extensions = void 0;
+exports.createExtensions = exports.MarkName = exports.NodeName = 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 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.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
-            // different target is encountered.
-            '_blank',
-        ],
-    }),
-];
-exports.Extensions = Extensions;
+const CommandsExtension_1 = require("./CommandsExtension/CommandsExtension");
+const AssetImageExtension_1 = require("./ImageExtension/AssetImageExtension");
+var NodeName;
+(function (NodeName) {
+    NodeName["Image"] = "image";
+    NodeName["AssetImage"] = "assetImage";
+    NodeName["Text"] = "text";
+})(NodeName = exports.NodeName || (exports.NodeName = {}));
+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 AssetImageExtension_1.AssetImageExtension({
+                matrixIdentifier: context.matrix.matrixIdentifier,
+                matrixDomain: context.matrix.matrixDomain,
+            }),
+            new LinkExtension_1.LinkExtension(),
+            new AssetLinkExtension_1.AssetLinkExtension({
+                matrixIdentifier: context.matrix.matrixIdentifier,
+                matrixDomain: context.matrix.matrixDomain,
+            }),
+        ];
+    };
+};
+exports.createExtensions = createExtensions;

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

@@ -0,0 +1,17 @@
+import { ApplySchemaAttributes, NodeExtension, NodeExtensionSpec, NodeSpecOverride, CommandFunction } from '@remirror/core';
+import { NodeName } from '../Extensions';
+export type AssetImageOptions = {
+    matrixIdentifier?: string;
+    matrixDomain?: string;
+};
+export type AssetImageAttributes = {
+    matrixAssetId: string;
+    matrixIdentifier: string;
+    matrixDomain: string;
+};
+export declare class AssetImageExtension extends NodeExtension<AssetImageOptions> {
+    get name(): NodeName.AssetImage;
+    createTags(): ("inline" | "media")[];
+    createNodeSpec(extra: ApplySchemaAttributes, override: NodeSpecOverride): NodeExtensionSpec;
+    insertAssetImage(attrs: AssetImageAttributes): CommandFunction;
+}

package/lib/Extensions/ImageExtension/AssetImageExtension.js

@@ -0,0 +1,92 @@
+"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.AssetImageExtension = void 0;
+const core_1 = require("@remirror/core");
+const remirror_1 = require("remirror");
+const resolveMatrixAssetUrl_1 = require("../../utils/resolveMatrixAssetUrl");
+const Extensions_1 = require("../Extensions");
+let AssetImageExtension = class AssetImageExtension extends core_1.NodeExtension {
+    get name() {
+        return Extensions_1.NodeName.AssetImage;
+    }
+    createTags() {
+        return [core_1.ExtensionTag.InlineNode, core_1.ExtensionTag.Media];
+    }
+    createNodeSpec(extra, override) {
+        return {
+            inline: true,
+            draggable: true,
+            selectable: true,
+            ...override,
+            attrs: {
+                ...extra.defaults(),
+                matrixAssetId: {},
+                matrixIdentifier: { default: this.options.matrixIdentifier },
+                matrixDomain: { default: this.options.matrixDomain },
+            },
+            parseDOM: [
+                {
+                    tag: 'img[data-matrix-asset-id]',
+                    getAttrs: (node) => {
+                        if (!(0, core_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,
+                        };
+                    },
+                },
+            ],
+            toDOM: (node) => {
+                const { matrixAssetId, matrixIdentifier, matrixDomain, ...rest } = (0, core_1.omitExtraAttributes)(node.attrs, extra);
+                return [
+                    'img',
+                    {
+                        ...extra.dom(node),
+                        ...rest,
+                        src: (0, resolveMatrixAssetUrl_1.resolveMatrixAssetUrl)(String(matrixAssetId), String(matrixDomain)),
+                        'data-matrix-asset-id': matrixAssetId,
+                        'data-matrix-identifier': matrixIdentifier,
+                        'data-matrix-domain': matrixDomain,
+                    },
+                ];
+            },
+        };
+    }
+    insertAssetImage(attrs) {
+        return ({ tr, dispatch }) => {
+            const { from, to } = (0, remirror_1.getTextSelection)(tr.selection, tr.doc);
+            const node = this.type.create(attrs);
+            dispatch?.(tr.replaceRangeWith(from, to, node));
+            return true;
+        };
+    }
+};
+__decorate([
+    (0, core_1.command)()
+], AssetImageExtension.prototype, "insertAssetImage", null);
+AssetImageExtension = __decorate([
+    (0, core_1.extension)({
+        defaultOptions: {
+            matrixIdentifier: '',
+            matrixDomain: '',
+        },
+        defaultPriority: core_1.ExtensionPriority.High,
+    })
+], AssetImageExtension);
+exports.AssetImageExtension = AssetImageExtension;

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

@@ -1,3 +1,7 @@
 import { ImageExtension as RemirrorImageExtension } from 'remirror/extensions';
+import { PasteRule } from 'prosemirror-paste-rules';
+import { ApplySchemaAttributes, NodeSpecOverride, NodeExtensionSpec } from '@remirror/core';
 export declare class ImageExtension extends RemirrorImageExtension {
+    createPasteRules(): PasteRule[];
+    createNodeSpec(extra: ApplySchemaAttributes, override: NodeSpecOverride): NodeExtensionSpec;
 }

package/lib/Extensions/ImageExtension/ImageExtension.js

@@ -3,5 +3,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ImageExtension = void 0;
 const extensions_1 = require("remirror/extensions");
 class ImageExtension extends extensions_1.ImageExtension {
+    createPasteRules() {
+        // override super behaviour of handling file uploads.
+        return [];
+    }
+    createNodeSpec(extra, override) {
+        const spec = super.createNodeSpec(extra, override);
+        return {
+            ...spec,
+            selectable: 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");
+const resolveMatrixAssetUrl_1 = require("../../utils/resolveMatrixAssetUrl");
+let AssetLinkExtension = class AssetLinkExtension extends core_1.MarkExtension {
+    get name() {
+        return Extensions_1.MarkName.AssetLink;
+    }
+    createMarkSpec(extra, override) {
+        return {
+            inclusive: false,
+            excludes: Extensions_1.MarkName.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,
+                    href: (0, resolveMatrixAssetUrl_1.resolveMatrixAssetUrl)(String(matrixAssetId), String(matrixDomain)),
+                    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;