@squiz/formatted-text-editor 1.21.1-alpha.34 → 1.21.1-alpha.39

package/demo/App.tsx

@@ -40,10 +40,17 @@ function App() {
             matrix: {
               matrixDomain: 'https://matrix-domain.squiz.net',
               matrixIdentifier: 'matrix-api-identifier',
-              isValidMatrixAssetId: (assetId: string) => {
+              resolveMatrixAsset: (assetId: string) => {
                 return new Promise((resolve) => {
                   setTimeout(() => {
-                    resolve(assetId.indexOf('invalid') < 0);
+                    if (assetId.match(/invalid/i)) {
+                      resolve(null);
+                    } else {
+                      resolve({
+                        id: assetId,
+                        type: assetId.match(/(image)/i)?.[0] || 'unknown',
+                      });
+                    }
                   }, 200);
                 });
               },

package/lib/Editor/EditorContext.d.ts

@@ -1,9 +1,14 @@
 import React from 'react';
+export type MatrixAsset = {
+    id: string;
+    type: string | 'image';
+};
+export type MatrixAssetResolver = (assetId: string) => Promise<MatrixAsset | null>;
 export type EditorContextOptions = {
     matrix: {
         matrixIdentifier: string;
         matrixDomain: string;
-        isValidMatrixAssetId: (assetId: string) => boolean | Promise<boolean>;
+        resolveMatrixAsset: MatrixAssetResolver;
     };
 };
 export declare const defaultEditorContext: EditorContextOptions;

package/lib/Editor/EditorContext.js

@@ -9,7 +9,7 @@ exports.defaultEditorContext = {
     matrix: {
         matrixIdentifier: '',
         matrixDomain: '',
-        isValidMatrixAssetId: () => true,
+        resolveMatrixAsset: () => Promise.resolve(null),
     },
 };
 exports.EditorContext = react_1.default.createContext(exports.defaultEditorContext);

package/lib/EditorToolbar/FloatingToolbar.js

@@ -50,7 +50,7 @@ const FloatingToolbar = () => {
         extensionNames.italic && react_1.default.createElement(ItalicButton_1.default, { key: "italic" }),
         extensionNames.underline && react_1.default.createElement(UnderlineButton_1.default, { key: "underline" }),
     ];
-    if (active.image()) {
+    if (active.image() || active.assetImage()) {
         buttons = [react_1.default.createElement(ImageButton_1.default, { key: "add-image", inPopover: true })];
     }
     else if (marks?.[Extensions_1.MarkName.Link].isExclusivelyActive || marks?.[Extensions_1.MarkName.AssetLink].isExclusivelyActive) {

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

@@ -1,17 +1,18 @@
 import { ReactElement } from 'react';
 import { SubmitHandler } from 'react-hook-form';
 import { ImageAttributes } from '@remirror/extension-image/dist-types/image-extension';
-export type UpdateImageOptions = ImageAttributes & {
-    src: string;
-    alt: string;
-    width: number;
-    height: number;
+import { NodeName } from '../../../../Extensions/Extensions';
+import { AssetImageAttributes } from '../../../../Extensions/ImageExtension/AssetImageExtension';
+import { DeepPartial } from '../../../../types';
+export type ImageFormData = {
+    imageType: NodeName;
+    image: Pick<ImageAttributes, 'src' | 'alt' | 'width' | 'height'>;
+    assetImage: AssetImageAttributes;
 };
-export type ImageFormData = Pick<UpdateImageOptions, 'src' | 'alt' | 'width' | 'height'>;
 export type FormProps = {
-    data: Partial<ImageFormData>;
+    data: DeepPartial<ImageFormData>;
     onSubmit: SubmitHandler<ImageFormData>;
 };
-export type Dimensions = 'width' | 'height';
+export type Dimensions = 'image.width' | 'image.height';
 declare const ImageForm: ({ data, onSubmit }: FormProps) => ReactElement;
 export default ImageForm;

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

@@ -34,23 +34,35 @@ const Button_1 = __importDefault(require("../../../../ui/Button/Button"));
 const LinkOff_1 = __importDefault(require("@mui/icons-material/LinkOff"));
 const InsertLinkRounded_1 = __importDefault(require("@mui/icons-material/InsertLinkRounded"));
 const clsx_1 = __importDefault(require("clsx"));
+const Extensions_1 = require("../../../../Extensions/Extensions");
+const Select_1 = require("../../../../ui/Fields/Select/Select");
+const EditorContext_1 = require("../../../../Editor/EditorContext");
+const imageTypeOptions = {
+    [Extensions_1.NodeName.Image]: { label: 'External image' },
+    [Extensions_1.NodeName.AssetImage]: { label: 'Asset image' },
+};
 const regexDataURI = /^data:([a-z]+\/[a-z0-9-+.]+(;[a-z-]+=[a-z0-9-]+)?)?(;base64)?,([a-z0-9!$&',()*+;=\-._~:@/?%\s]*)$/i;
 const ImageForm = ({ data, onSubmit }) => {
-    const { register, handleSubmit, setValue, formState: { errors }, } = (0, react_hook_form_1.useForm)({
+    const { register, handleSubmit, setValue, watch, formState: { errors }, } = (0, react_hook_form_1.useForm)({
         defaultValues: data,
     });
+    const imageType = watch('imageType') || Extensions_1.NodeName.Image;
+    const context = (0, react_1.useContext)(EditorContext_1.EditorContext);
     const [aspectRatioFromWidth, setAspectRatioFromWidth] = (0, react_1.useState)(9 / 16);
     const [aspectRatioFromHeight, setAspectRatioFromHeight] = (0, react_1.useState)(16 / 9);
     const [aspectRatioLocked, setAspectRatioLocked] = (0, react_1.useState)(true);
-    const setDimensionsFromURL = (e) => {
-        (0, react_image_size_1.getImageSize)(e.target.value)
-            .then(({ width, height }) => {
-            setValue('width', width);
-            setValue('height', height);
+    const setDimensionsFromURL = async (e) => {
+        try {
+            const { width, height } = await (0, react_image_size_1.getImageSize)(e.target.value);
+            setValue('image.width', width);
+            setValue('image.height', height);
             setAspectRatioFromWidth(height / width);
             setAspectRatioFromHeight(width / height);
-        })
-            .catch();
+        }
+        catch (error) {
+            // swallow the error for fetching the image size, will occur if the URL does not point to an image.
+            // will be handled by validation when attempting to add the image.
+        }
     };
     const validateIsNotImage = async (src) => {
         try {
@@ -61,13 +73,13 @@ const ImageForm = ({ data, onSubmit }) => {
             return true;
         }
     };
-    const calculateDimensions = () => {
+    const calculateDimensions = (event) => {
         if (aspectRatioLocked) {
             const currentTarget = event?.target;
             const type = currentTarget.name;
             const currentValue = currentTarget.value;
-            const otherValue = type === 'width' ? 'height' : 'width';
-            const aspectRatio = type === 'width' ? aspectRatioFromWidth : aspectRatioFromHeight;
+            const otherValue = type === 'image.width' ? 'image.height' : 'image.width';
+            const aspectRatio = type === 'image.width' ? aspectRatioFromWidth : aspectRatioFromHeight;
             const newValue = Math.round(aspectRatio * Number(currentValue) * 100) / 100;
             setValue(otherValue, newValue);
         }
@@ -77,48 +89,64 @@ const ImageForm = ({ data, onSubmit }) => {
     };
     return (react_1.default.createElement("form", { className: "squiz-fte-form", onSubmit: handleSubmit(onSubmit) },
         react_1.default.createElement("div", { className: "squiz-fte-form-group mb-2" },
-            react_1.default.createElement(Input_1.Input, { label: "Source", required: true, error: errors?.src?.message, ...register('src', {
-                    onChange: setDimensionsFromURL,
-                    required: 'Source is required',
-                    validate: {
-                        isValidImage: async (value) => {
-                            if (value && regexDataURI.test(value)) {
-                                return 'Must not be a data URI';
-                            }
-                            if (value && (await validateIsNotImage(value))) {
-                                return 'Must be a valid image URL';
-                            }
-                        },
-                    },
-                }) })),
-        react_1.default.createElement("div", { className: "squiz-fte-form-group mb-2" },
-            react_1.default.createElement(Input_1.Input, { label: "Alternative description", required: true, error: errors?.alt?.message, ...register('alt', { required: 'Alternative description is required' }) })),
-        react_1.default.createElement("div", { className: "flex flex-row" },
+            react_1.default.createElement(Select_1.Select, { name: "imageType", label: "Type", value: imageType, options: imageTypeOptions, onChange: (value) => setValue('imageType', value) })),
+        imageType === Extensions_1.NodeName.Image && (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement("div", { className: "squiz-fte-form-group mb-2" },
-                react_1.default.createElement(Input_1.Input, { label: "Width", type: "number", required: true, error: errors?.width?.message, ...register('width', {
-                        onChange: calculateDimensions,
-                        required: 'Width is required',
+                react_1.default.createElement(Input_1.Input, { label: "Source", required: true, error: errors?.image?.src?.message, ...register('image.src', {
+                        onChange: setDimensionsFromURL,
+                        required: 'Source is required',
                         validate: {
-                            isValidWidth: (value) => {
-                                if (value && !(value > 0)) {
-                                    return 'Must be higher than 0';
+                            isValidImage: async (value) => {
+                                if (value && regexDataURI.test(value)) {
+                                    return 'Must not be a data URI';
+                                }
+                                if (value && (await validateIsNotImage(value))) {
+                                    return 'Must be a valid image URL';
                                 }
                             },
                         },
                     }) })),
-            react_1.default.createElement("div", { className: "flex mx-1 mb-2" },
-                react_1.default.createElement(Button_1.default, { handleOnClick: toggleAspectRatio, isActive: false, icon: aspectRatioLocked ? react_1.default.createElement(InsertLinkRounded_1.default, null) : react_1.default.createElement(LinkOff_1.default, null), label: "Constrain properties", isDisabled: false, className: (0, clsx_1.default)('my-auto', !errors?.height && !errors?.width && 'mb-0') })),
             react_1.default.createElement("div", { className: "squiz-fte-form-group mb-2" },
-                react_1.default.createElement(Input_1.Input, { label: "Height", type: "number", required: true, error: errors?.height?.message, ...register('height', {
-                        onChange: calculateDimensions,
-                        required: 'Height is required',
+                react_1.default.createElement(Input_1.Input, { label: "Alternative description", required: true, error: errors?.image?.alt?.message, ...register('image.alt', { required: 'Alternative description is required' }) })),
+            react_1.default.createElement("div", { className: "flex flex-row" },
+                react_1.default.createElement("div", { className: "squiz-fte-form-group mb-2" },
+                    react_1.default.createElement(Input_1.Input, { label: "Width", type: "number", required: true, error: errors?.image?.width?.message, ...register('image.width', {
+                            onChange: calculateDimensions,
+                            required: 'Width is required',
+                            validate: {
+                                isValidWidth: (value) => {
+                                    if (value && !(value > 0)) {
+                                        return 'Must be higher than 0';
+                                    }
+                                },
+                            },
+                        }) })),
+                react_1.default.createElement("div", { className: "flex mx-1 mb-2" },
+                    react_1.default.createElement(Button_1.default, { handleOnClick: toggleAspectRatio, isActive: false, icon: aspectRatioLocked ? react_1.default.createElement(InsertLinkRounded_1.default, null) : react_1.default.createElement(LinkOff_1.default, null), label: "Constrain properties", isDisabled: false, className: (0, clsx_1.default)('my-auto', !errors?.image?.height && !errors?.image?.width && 'mb-0') })),
+                react_1.default.createElement("div", { className: "squiz-fte-form-group mb-2" },
+                    react_1.default.createElement(Input_1.Input, { label: "Height", type: "number", required: true, error: errors?.image?.height?.message, ...register('image.height', {
+                            onChange: calculateDimensions,
+                            required: 'Height is required',
+                            validate: {
+                                isValidHeight: (value) => {
+                                    if (value && !(value > 0)) {
+                                        return 'Must be higher than 0';
+                                    }
+                                },
+                            },
+                        }) }))))),
+        imageType === Extensions_1.NodeName.AssetImage && (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement("div", { className: "squiz-fte-form-group mb-2" },
+                react_1.default.createElement(Input_1.Input, { label: "Asset ID", required: true, error: errors?.assetImage?.matrixAssetId?.message, ...register('assetImage.matrixAssetId', {
+                        required: 'Asset ID is required',
                         validate: {
-                            isValidHeight: (value) => {
-                                if (value && !(value > 0)) {
-                                    return 'Must be higher than 0';
+                            isImage: async (assetId) => {
+                                const asset = await context.matrix.resolveMatrixAsset(assetId);
+                                if (asset?.type !== 'image') {
+                                    return 'Asset ID is invalid or not an image';
                                 }
                             },
                         },
-                    }) })))));
+                    }) }))))));
 };
 exports.default = ImageForm;

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

@@ -27,32 +27,30 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
+const react_2 = require("@remirror/react");
 const ImageRounded_1 = __importDefault(require("@mui/icons-material/ImageRounded"));
 const ImageModal_1 = __importDefault(require("./ImageModal"));
 const Button_1 = __importDefault(require("../../../ui/Button/Button"));
-const react_2 = require("@remirror/react");
-const createToolbarPositioner_1 = require("../../../utils/createToolbarPositioner");
+const Extensions_1 = require("../../../Extensions/Extensions");
 const ImageButton = ({ inPopover = false }) => {
     const [showModal, setShowModal] = (0, react_1.useState)(false);
-    const { insertImage } = (0, react_2.useCommands)();
+    const { insertImage, insertAssetImage } = (0, react_2.useCommands)();
     const active = (0, react_2.useActive)();
-    const positioner = (0, react_1.useMemo)(() => (0, createToolbarPositioner_1.createToolbarPositioner)({ types: ['link'] }), []);
-    const { data } = (0, react_2.usePositioner)(positioner, []);
+    const selection = (0, react_2.useCurrentSelection)();
     // if the active selection is not an image, disable the button as it means it will be text
-    const disabled = data.isSelectionInView && !active.image() ? true : false;
+    const disabled = !selection.empty && !active.image() && !active.assetImage();
     const handleClick = () => {
         if (!showModal) {
-            // form element are uncontrolled, let the event loop run to
-            // update the selected text in state before showing the modal.
-            requestAnimationFrame(() => {
-                setShowModal(true);
-            });
+            setShowModal(true);
         }
     };
     const insertImageFromData = (data) => {
-        const { src, alt, width, height } = data;
-        if (src) {
-            insertImage({ src, alt, width, height });
+        const { imageType, image, assetImage } = data;
+        if (imageType === Extensions_1.NodeName.Image) {
+            insertImage(image);
+        }
+        else {
+            insertAssetImage(assetImage);
         }
     };
     const handleSubmit = (data) => {
@@ -71,7 +69,7 @@ const ImageButton = ({ inPopover = false }) => {
         (0, react_2.useKeymap)('Mod-l', disabled ? () => false : handleShortcut);
     }
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(Button_1.default, { handleOnClick: handleClick, isActive: active.image(), icon: react_1.default.createElement(ImageRounded_1.default, null), label: "Image (cmd+L)", isDisabled: disabled }),
+        react_1.default.createElement(Button_1.default, { handleOnClick: handleClick, isActive: active.image() || active.assetImage(), icon: react_1.default.createElement(ImageRounded_1.default, null), label: "Image (cmd+L)", isDisabled: disabled }),
         showModal && react_1.default.createElement(ImageModal_1.default, { onCancel: () => setShowModal(false), onSubmit: handleSubmit })));
 };
 exports.default = ImageButton;

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

@@ -7,10 +7,16 @@ const ImageForm_1 = __importDefault(require("./Form/ImageForm"));
 const react_1 = __importDefault(require("react"));
 const react_2 = require("@remirror/react");
 const FormModal_1 = __importDefault(require("../../../ui/Modal/FormModal"));
+const Extensions_1 = require("../../../Extensions/Extensions");
 const ImageModal = ({ onCancel, onSubmit }) => {
     const selection = (0, react_2.useCurrentSelection)();
     const currentImage = selection?.node;
+    const formData = {
+        imageType: currentImage?.type.name === Extensions_1.NodeName.AssetImage ? Extensions_1.NodeName.AssetImage : Extensions_1.NodeName.Image,
+        image: currentImage?.type?.name === Extensions_1.NodeName.Image ? currentImage?.attrs : {},
+        assetImage: currentImage?.type?.name === Extensions_1.NodeName.AssetImage ? currentImage?.attrs : {},
+    };
     return (react_1.default.createElement(FormModal_1.default, { title: "Image", onCancel: onCancel },
-        react_1.default.createElement(ImageForm_1.default, { data: { ...currentImage?.attrs, src: currentImage?.attrs.src }, onSubmit: onSubmit })));
+        react_1.default.createElement(ImageForm_1.default, { data: formData, onSubmit: onSubmit })));
 };
 exports.default = ImageModal;

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

@@ -66,7 +66,7 @@ const LinkForm = ({ data, onSubmit }) => {
                 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))) {
+                                if (assetId && !(await context.matrix.resolveMatrixAsset(assetId))) {
                                     return 'Invalid asset ID';
                                 }
                             },

package/lib/Extensions/Extensions.d.ts

@@ -1,5 +1,10 @@
 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"

package/lib/Extensions/Extensions.js

@@ -1,12 +1,19 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createExtensions = exports.MarkName = 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 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";
@@ -26,6 +33,10 @@ const createExtensions = (context) => {
             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,

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,10 +1,7 @@
 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';
+import { ApplySchemaAttributes, NodeSpecOverride, NodeExtensionSpec } from '@remirror/core';
 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

@@ -2,90 +2,16 @@
 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;
-                },
-            },
-        ];
+        // override super behaviour of handling file uploads.
+        return [];
     }
     createNodeSpec(extra, override) {
-        const { preferPastedTextContent } = this.options;
+        const spec = super.createNodeSpec(extra, override);
         return {
-            inline: true,
-            draggable: true,
+            ...spec,
             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;
         };
     }
 }

package/lib/Extensions/LinkExtension/AssetLinkExtension.js

@@ -12,6 +12,7 @@ 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;
@@ -19,7 +20,7 @@ let AssetLinkExtension = class AssetLinkExtension extends core_1.MarkExtension {
     createMarkSpec(extra, override) {
         return {
             inclusive: false,
-            excludes: 'link',
+            excludes: Extensions_1.MarkName.Link,
             ...override,
             attrs: {
                 ...extra.defaults(),
@@ -58,8 +59,7 @@ let AssetLinkExtension = class AssetLinkExtension extends core_1.MarkExtension {
                     ...extra.dom(node),
                     ...rest,
                     rel,
-                    // TODO: this won't be acceptable if/when we get to rendering outside of Matrix.
-                    href: `/?a=${matrixAssetId}`,
+                    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,

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

@@ -1,5 +1,5 @@
 import { ApplySchemaAttributes, FromToProps, MarkExtensionSpec, MarkSpecOverride } from 'remirror';
-import { CommandFunction, Handler, KeyBindingProps, MarkExtension } from '@remirror/core';
+import { CommandFunction, MarkExtension } from '@remirror/core';
 import { LinkTarget } from './common';
 export type LinkAttributes = {
     href: string;
@@ -9,7 +9,6 @@ export type LinkAttributes = {
 export type LinkOptions = {
     defaultTarget?: LinkTarget;
     supportedTargets?: LinkTarget[];
-    onShortcut?: Handler<() => void>;
 };
 export type UpdateLinkProps = {
     text: string;
@@ -19,7 +18,6 @@ export type UpdateLinkProps = {
 export declare class LinkExtension extends MarkExtension<LinkOptions> {
     get name(): string;
     createMarkSpec(extra: ApplySchemaAttributes, override: MarkSpecOverride): MarkExtensionSpec;
-    shortcut(_: KeyBindingProps): boolean;
     updateLink({ text, attrs, range }: UpdateLinkProps): CommandFunction;
     removeLink(): CommandFunction;
 }