@squiz/formatted-text-editor 1.33.1-alpha.2 → 1.33.1-alpha.4

package/demo/App.tsx

@@ -1,7 +1,8 @@
 import React, { useState } from 'react';
-import { Editor, EditorContext, remirrorNodeToSquizNode, squizNodeToRemirrorNode } from '../src';
+import { Editor, remirrorNodeToSquizNode, squizNodeToRemirrorNode } from '../src';
 import { RemirrorEventListener, Extension } from '@remirror/core';
 import ReactDiffViewer from 'react-diff-viewer-continued';
+import { AppContext } from './AppContext';
 
 function App() {
   const [doc, setDoc] = useState('');
@@ -35,34 +36,13 @@ function App() {
       </div>
       <h1>Editor</h1>
       <div className="page-section">
-        <EditorContext.Provider
-          value={{
-            matrix: {
-              matrixDomain: 'https://matrix-domain.squiz.net',
-              matrixIdentifier: 'matrix-api-identifier',
-              resolveMatrixAsset: (assetId: string) => {
-                return new Promise((resolve) => {
-                  setTimeout(() => {
-                    if (assetId.match(/invalid/i)) {
-                      resolve(null);
-                    } else {
-                      resolve({
-                        id: assetId,
-                        type: assetId.match(/(image)/i)?.[0] || 'unknown',
-                      });
-                    }
-                  }, 200);
-                });
-              },
-            },
-          }}
-        >
+        <AppContext>
           <Editor
             editable={editable}
             content={`<p>Hello <a href="https://www.google.com"><strong>Mr Bean</strong></a>, nice to <a href="https://www.google.com">meet you</a>.<img src="https://media2.giphy.com/media/3o6ozsIxg5legYvggo/giphy.gif" height="150" width="200"/></p>`}
             onChange={handleEditorChange}
           />
-        </EditorContext.Provider>
+        </AppContext>
       </div>
       <h1>Document</h1>
       <div className="page-section">

package/demo/AppContext.tsx

@@ -0,0 +1,28 @@
+import React, { PropsWithChildren } from 'react';
+import { ResourceBrowserContext, Source, Resource, ResourceReference } from '@squiz/resource-browser';
+import { EditorContext } from '../src';
+import resources from './resources.json';
+import sources from './sources.json';
+
+export type AppContextProps = PropsWithChildren;
+
+export const AppContext = ({ children }: AppContextProps) => (
+  <ResourceBrowserContext.Provider
+    value={{
+      onRequestSources: (): Promise<Source> => Promise.resolve(sources),
+      onRequestChildren: (): Promise<Resource[]> => Promise.resolve(resources),
+      onRequestResource: (reference: ResourceReference): Promise<Resource | null> =>
+        Promise.resolve(resources.find((resource) => resource.id === reference.resource) || null),
+    }}
+  >
+    <EditorContext.Provider
+      value={{
+        matrix: {
+          matrixDomain: 'https://matrix-domain.squiz.net',
+        },
+      }}
+    >
+      {children}
+    </EditorContext.Provider>
+  </ResourceBrowserContext.Provider>
+);

package/demo/index.scss

@@ -1,5 +1,3 @@
-@import '../src/index.scss';
-
 body {
   font-family: 'Open Sans';
 }

package/demo/main.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
+import '@squiz/resource-browser/lib/index.css';
+import '../src/index.scss';
 import './index.scss';
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(

package/demo/resources.json

@@ -0,0 +1,28 @@
+[
+  {
+    "id": "1",
+    "type": {
+      "code": "image",
+      "name": "Image"
+    },
+    "status": {
+      "code": "live",
+      "name": "Live"
+    },
+    "name": "Example image",
+    "childCount": 0
+  },
+  {
+    "id": "2",
+    "type": {
+      "code": "page_standard",
+      "name": "Standard Page"
+    },
+    "status": {
+      "code": "live",
+      "name": "Live"
+    },
+    "name": "Example page",
+    "childCount": 0
+  }
+]

package/demo/sources.json

@@ -0,0 +1,23 @@
+[
+  {
+    "id": "my-matrix-instance",
+    "name": "My Matrix instance",
+    "nodes": [
+      {
+        "id": "1",
+        "name": "My site",
+        "childCount": 100,
+        "url": "https://my-matrix.squiz.net/site",
+        "urls": [],
+        "type": {
+          "code": "site",
+          "name": "Site"
+        },
+        "status": {
+          "code": "live",
+          "name": "Live"
+        }
+      }
+    ]
+  }
+]

package/lib/Editor/EditorContext.d.ts

@@ -1,14 +1,7 @@
 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;
-        resolveMatrixAsset: MatrixAssetResolver;
     };
 };
 export declare const defaultEditorContext: EditorContextOptions;

package/lib/Editor/EditorContext.js

@@ -7,9 +7,7 @@ exports.EditorContext = exports.defaultEditorContext = void 0;
 const react_1 = __importDefault(require("react"));
 exports.defaultEditorContext = {
     matrix: {
-        matrixIdentifier: '',
         matrixDomain: '',
-        resolveMatrixAsset: () => Promise.resolve(null),
     },
 };
 exports.EditorContext = react_1.default.createContext(exports.defaultEditorContext);

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

@@ -27,27 +27,26 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
-const Input_1 = require("../../../../ui/Fields/Input/Input");
 const react_hook_form_1 = require("react-hook-form");
 const react_image_size_1 = require("react-image-size");
+const clsx_1 = __importDefault(require("clsx"));
+const Input_1 = require("../../../../ui/Fields/Input/Input");
 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 validation_1 = require("../../../../utils/validation");
+const Tabs_1 = require("../../../../ui/Tabs/Tabs");
+const MatrixAsset_1 = require("../../../../ui/Fields/MatrixAsset/MatrixAsset");
 const imageTypeOptions = {
-    [Extensions_1.NodeName.Image]: { label: 'External image' },
-    [Extensions_1.NodeName.AssetImage]: { label: 'Asset image' },
+    [Extensions_1.NodeName.AssetImage]: { label: 'From source' },
+    [Extensions_1.NodeName.Image]: { label: 'From URL' },
 };
 const ImageForm = ({ data, onSubmit }) => {
-    const { register, handleSubmit, setValue, watch, formState: { errors }, } = (0, react_hook_form_1.useForm)({
+    const { control, 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 imageType = watch('imageType') || Extensions_1.NodeName.AssetImage;
     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);
@@ -88,8 +87,8 @@ const ImageForm = ({ data, onSubmit }) => {
         setAspectRatioLocked(!aspectRatioLocked);
     };
     return (react_1.default.createElement("form", { className: "squiz-fte-form", onSubmit: handleSubmit(onSubmit) },
-        react_1.default.createElement("div", { className: "squiz-fte-form-group mb-2" },
-            react_1.default.createElement(Select_1.Select, { name: "imageType", label: "Type", value: imageType, options: imageTypeOptions, onChange: (value) => setValue('imageType', value) })),
+        react_1.default.createElement("div", { className: "squiz-fte-form-group mb-4" },
+            react_1.default.createElement(Tabs_1.Tabs, { 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: "Source", required: true, error: errors?.image?.src?.message, ...register('image.src', {
@@ -107,13 +106,6 @@ const ImageForm = ({ data, onSubmit }) => {
                             noEmptySpaces: validation_1.noEmptySpacesValidation,
                         },
                     }) })),
-            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?.image?.alt?.message, ...register('image.alt', {
-                        required: 'Alternative description is required',
-                        validate: {
-                            noEmptySpaces: validation_1.noEmptySpacesValidation,
-                        },
-                    }) })),
             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', {
@@ -140,20 +132,12 @@ const ImageForm = ({ data, onSubmit }) => {
                                     }
                                 },
                             },
-                        }) }))))),
-        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: {
-                            isImage: async (assetId) => {
-                                const asset = await context.matrix.resolveMatrixAsset(assetId);
-                                if (asset?.type !== 'image') {
-                                    return 'Asset ID is invalid or not an image';
-                                }
-                            },
-                            noEmptySpaces: validation_1.noEmptySpacesValidation,
-                        },
-                    }) }))))));
+                react_1.default.createElement(Input_1.Input, { label: "Alternative description", error: errors?.image?.alt?.message, ...register('image.alt') })))),
+        imageType === Extensions_1.NodeName.AssetImage && (react_1.default.createElement("div", { className: "squiz-fte-form-group mb-2" },
+            react_1.default.createElement(react_hook_form_1.Controller, { control: control, name: "assetImage", rules: {
+                    validate: (0, validation_1.hasProperties)('An image must be selected', ['matrixIdentifier', 'matrixAssetId']),
+                }, render: ({ field: { onChange, value }, fieldState: { error } }) => (react_1.default.createElement(MatrixAsset_1.MatrixAsset, { modalTitle: "Insert image", allowedTypes: ['image'], value: value, onChange: onChange, error: error?.message })) })))));
 };
 exports.default = ImageForm;

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const ImageForm_1 = __importDefault(require("./Form/ImageForm"));
 const react_1 = __importDefault(require("react"));
 const react_2 = require("@remirror/react");
+const ImageRounded_1 = __importDefault(require("@mui/icons-material/ImageRounded"));
 const FormModal_1 = __importDefault(require("../../../ui/Modal/FormModal"));
 const Extensions_1 = require("../../../Extensions/Extensions");
 const ImageModal = ({ onCancel, onSubmit }) => {
@@ -13,11 +14,11 @@ const ImageModal = ({ onCancel, onSubmit }) => {
     const currentImage = selection?.node;
     const currentImageAttrs = { ...currentImage?.attrs };
     const formData = {
-        imageType: currentImage?.type.name === Extensions_1.NodeName.AssetImage ? Extensions_1.NodeName.AssetImage : Extensions_1.NodeName.Image,
+        imageType: currentImage?.type.name === Extensions_1.NodeName.Image ? Extensions_1.NodeName.Image : Extensions_1.NodeName.AssetImage,
         image: currentImage?.type?.name === Extensions_1.NodeName.Image ? currentImageAttrs : {},
         assetImage: currentImage?.type?.name === Extensions_1.NodeName.AssetImage ? currentImageAttrs : {},
     };
-    return (react_1.default.createElement(FormModal_1.default, { title: "Image", onCancel: onCancel },
+    return (react_1.default.createElement(FormModal_1.default, { title: "Image", icon: react_1.default.createElement(ImageRounded_1.default, null), onCancel: onCancel },
         react_1.default.createElement(ImageForm_1.default, { data: formData, onSubmit: onSubmit })));
 };
 exports.default = ImageModal;

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

@@ -1,58 +1,31 @@
 "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 });
 exports.LinkForm = void 0;
-const react_1 = __importStar(require("react"));
+const react_1 = __importDefault(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 Checkbox_1 = require("../../../../ui/Fields/Checkbox/Checkbox");
 const common_1 = require("../../../../Extensions/LinkExtension/common");
-const EditorContext_1 = require("../../../../Editor/EditorContext");
 const Extensions_1 = require("../../../../Extensions/Extensions");
 const validation_1 = require("../../../../utils/validation");
+const Tabs_1 = require("../../../../ui/Tabs/Tabs");
+const MatrixAsset_1 = require("../../../../ui/Fields/MatrixAsset/MatrixAsset");
 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' },
+    [Extensions_1.MarkName.AssetLink]: { label: 'From source' },
+    [Extensions_1.MarkName.Link]: { label: 'From URL' },
 };
 const LinkForm = ({ data, onSubmit }) => {
-    const context = (0, react_1.useContext)(EditorContext_1.EditorContext);
-    const { register, handleSubmit, setValue, watch, formState: { errors }, } = (0, react_hook_form_1.useForm)({
+    const { control, register, handleSubmit, setValue, watch, formState: { errors }, } = (0, react_hook_form_1.useForm)({
         defaultValues: data,
     });
-    const linkType = watch('linkType') || Extensions_1.MarkName.Link;
+    const linkType = watch('linkType') || Extensions_1.MarkName.AssetLink;
     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(Select_1.Select, { name: "linkType", label: "Type", value: linkType, options: linkTypeOptions, onChange: (value) => setValue('linkType', value) })),
+        react_1.default.createElement("div", { className: "squiz-fte-form-group mb-4" },
+            react_1.default.createElement(Tabs_1.Tabs, { 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", required: true, error: errors?.link?.href?.message, ...register('link.href', {
@@ -69,27 +42,14 @@ const LinkForm = ({ data, onSubmit }) => {
                         },
                     }) })),
             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", required: true, error: errors?.link?.title?.message, ...register('link.title', {
-                        required: 'Title is required',
-                        validate: {
-                            noEmptySpaces: validation_1.noEmptySpacesValidation,
-                        },
-                    }) })),
-            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) })))),
+                react_1.default.createElement(Input_1.Input, { label: "Title", error: errors?.link?.title?.message, ...register('link.title') })),
+            react_1.default.createElement("div", { className: (0, clsx_1.default)('squiz-fte-form-group mb-2') },
+                react_1.default.createElement(Checkbox_1.Checkbox, { label: "Open link in new window", onChange: (value) => setValue('link.target', value), defaultChecked: data?.link?.target === common_1.LinkTarget.Blank, unchecked: common_1.LinkTarget.Self, checked: common_1.LinkTarget.Blank })))),
         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", required: true, error: errors?.assetLink?.matrixAssetId?.message, ...register('assetLink.matrixAssetId', {
-                        required: 'Asset ID is required',
-                        validate: {
-                            isValidAsset: async (assetId) => {
-                                if (assetId && !(await context.matrix.resolveMatrixAsset(assetId))) {
-                                    return 'Invalid asset ID';
-                                }
-                            },
-                            noEmptySpaces: validation_1.noEmptySpacesValidation,
-                        },
-                    }) })),
+                react_1.default.createElement(react_hook_form_1.Controller, { control: control, name: "assetLink", rules: {
+                        validate: (0, validation_1.hasProperties)('An asset must be selected', ['matrixIdentifier', 'matrixAssetId']),
+                    }, render: ({ field: { onChange, value }, fieldState: { error } }) => (react_1.default.createElement(MatrixAsset_1.MatrixAsset, { modalTitle: "Insert link", value: value, onChange: onChange, error: error?.message })) })),
             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", required: true, error: errors?.text?.message, ...register('text', {
                         required: 'Text is required',
@@ -97,7 +57,7 @@ const LinkForm = ({ data, onSubmit }) => {
                             noEmptySpaces: validation_1.noEmptySpacesValidation,
                         },
                     }) })),
-            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?.assetLink?.target || '_self', options: targetOptions, onChange: (value) => setValue('assetLink.target', value) }))))));
+            react_1.default.createElement("div", { className: (0, clsx_1.default)('squiz-fte-form-group mb-2') },
+                react_1.default.createElement(Checkbox_1.Checkbox, { label: "Open link in new window", onChange: (value) => setValue('assetLink.target', value), defaultChecked: data?.assetLink?.target === '_blank', unchecked: '_self', checked: '_blank' }))))));
 };
 exports.LinkForm = LinkForm;

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const LinkForm_1 = require("./Form/LinkForm");
 const react_1 = __importDefault(require("react"));
 const react_2 = require("@remirror/react");
+const InsertLinkRounded_1 = __importDefault(require("@mui/icons-material/InsertLinkRounded"));
 const FormModal_1 = __importDefault(require("../../../ui/Modal/FormModal"));
 const hooks_1 = require("../../../hooks");
 const Extensions_1 = require("../../../Extensions/Extensions");
@@ -14,13 +15,13 @@ const LinkModal = ({ onCancel, onSubmit }) => {
     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,
+        linkType: marks[0]?.type?.name === Extensions_1.MarkName.Link ? Extensions_1.MarkName.Link : Extensions_1.MarkName.AssetLink,
         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 },
+    return (react_1.default.createElement(FormModal_1.default, { title: "Link", icon: react_1.default.createElement(InsertLinkRounded_1.default, null), onCancel: onCancel },
         react_1.default.createElement(LinkForm_1.LinkForm, { data: data, onSubmit: onSubmit })));
 };
 exports.default = LinkModal;

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

@@ -33,7 +33,7 @@ const LinkOff_1 = __importDefault(require("@mui/icons-material/LinkOff"));
 const RemoveLinkButton = ({ inPopover = false }) => {
     const chain = (0, react_2.useChainedCommands)();
     const active = (0, react_2.useActive)();
-    const disabled = !active.link();
+    const disabled = !active.link() && !active.assetLink();
     const handleClick = () => {
         chain.removeLink().removeAssetLink().focus().run();
     };

package/lib/Extensions/Extensions.js

@@ -34,12 +34,10 @@ const createExtensions = (context) => {
             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,
             }),
         ];

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

@@ -1,7 +1,6 @@
 import { ApplySchemaAttributes, NodeExtension, NodeExtensionSpec, NodeSpecOverride, CommandFunction } from '@remirror/core';
 import { NodeName } from '../Extensions';
 export type AssetImageOptions = {
-    matrixIdentifier?: string;
     matrixDomain?: string;
 };
 export type AssetImageAttributes = {

package/lib/Extensions/ImageExtension/AssetImageExtension.js

@@ -27,7 +27,7 @@ let AssetImageExtension = class AssetImageExtension extends core_1.NodeExtension
             attrs: {
                 ...extra.defaults(),
                 matrixAssetId: {},
-                matrixIdentifier: { default: this.options.matrixIdentifier },
+                matrixIdentifier: {},
                 matrixDomain: { default: this.options.matrixDomain },
             },
             parseDOM: [
@@ -83,7 +83,6 @@ __decorate([
 AssetImageExtension = __decorate([
     (0, core_1.extension)({
         defaultOptions: {
-            matrixIdentifier: '',
             matrixDomain: '',
         },
         defaultPriority: core_1.ExtensionPriority.High,

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

@@ -8,7 +8,6 @@ export type AssetLinkAttributes = {
     target: LinkTarget;
 };
 export type AssetLinkOptions = {
-    matrixIdentifier?: string;
     matrixDomain?: string;
     defaultTarget?: LinkTarget;
     supportedTargets?: LinkTarget[];

package/lib/Extensions/LinkExtension/AssetLinkExtension.js

@@ -20,12 +20,12 @@ let AssetLinkExtension = class AssetLinkExtension extends core_1.MarkExtension {
     createMarkSpec(extra, override) {
         return {
             inclusive: false,
-            excludes: Extensions_1.MarkName.Link,
+            excludes: [this.name, Extensions_1.MarkName.Link].join(' '),
             ...override,
             attrs: {
                 ...extra.defaults(),
                 matrixAssetId: {},
-                matrixIdentifier: { default: this.options.matrixIdentifier },
+                matrixIdentifier: {},
                 matrixDomain: { default: this.options.matrixDomain },
                 target: { default: this.options.defaultTarget },
             },
@@ -91,7 +91,6 @@ __decorate([
 AssetLinkExtension = __decorate([
     (0, core_1.extension)({
         defaultOptions: {
-            matrixIdentifier: '',
             matrixDomain: '',
             defaultTarget: common_1.LinkTarget.Self,
             supportedTargets: [common_1.LinkTarget.Self, common_1.LinkTarget.Blank],

package/lib/Extensions/LinkExtension/LinkExtension.js

@@ -19,7 +19,7 @@ let LinkExtension = class LinkExtension extends core_1.MarkExtension {
     createMarkSpec(extra, override) {
         return {
             inclusive: false,
-            excludes: Extensions_1.MarkName.AssetLink,
+            excludes: [this.name, Extensions_1.MarkName.AssetLink].join(' '),
             ...override,
             attrs: {
                 ...extra.defaults(),