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

package/demo/App.tsx

@@ -1,24 +1,26 @@
 import React, { useState } from 'react';
-import FormattedTextEditor from '../src/FormattedTextEditor';
+import { Editor, EditorContext, remirrorNodeToSquizNode, squizNodeToRemirrorNode } from '../src';
 import { RemirrorEventListener, Extension } from '@remirror/core';
-import { remirrorNodeToSquizNode } from '../src/utils/converters/remirrorNodeToSquizNode/remirrorNodeToSquizNode';
-import { squizNodeToRemirrorNode } from '../src/utils/converters/squizNodeToRemirrorNode/squizNodeToRemirrorNode';
 import ReactDiffViewer from 'react-diff-viewer-continued';
 
 function App() {
   const [doc, setDoc] = useState('');
   const [squizDoc, setSquizDoc] = useState('');
   const [reconvertedDoc, setReconvertedDoc] = useState('');
+  const [error, setError] = useState<unknown>(null);
   const [editable, setEditable] = useState(true);
 
   const handleEditorChange: RemirrorEventListener<Extension> = (parameter) => {
-    if (doc !== parameter.state.doc) {
+    try {
+      setDoc(JSON.stringify(parameter.state.doc, null, 2));
+
       const newSquizDoc = remirrorNodeToSquizNode(parameter.state.doc);
       const newReconvertedDoc = parameter.state.schema.nodeFromJSON(squizNodeToRemirrorNode(newSquizDoc));
 
-      setDoc(JSON.stringify(parameter.state.doc, null, 2));
       setSquizDoc(JSON.stringify(newSquizDoc, null, 2));
       setReconvertedDoc(JSON.stringify(newReconvertedDoc, null, 2));
+    } catch (e) {
+      setError(e);
     }
   };
 
@@ -33,14 +35,33 @@ function App() {
       </div>
       <h1>Editor</h1>
       <div className="page-section">
-        <FormattedTextEditor
-          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
+          value={{
+            matrix: {
+              matrixDomain: 'https://matrix-domain.squiz.net',
+              matrixIdentifier: 'matrix-api-identifier',
+              isValidMatrixAssetId: (assetId: string) => {
+                return new Promise((resolve) => {
+                  setTimeout(() => {
+                    resolve(assetId.indexOf('invalid') < 0);
+                  }, 200);
+                });
+              },
+            },
+          }}
+        >
+          <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>
       </div>
       <h1>Document</h1>
       <div className="page-section">
+        {error instanceof Error && (
+          <div className="error">An error occurred when transforming the document: {error.message}</div>
+        )}
         <div className="code-section">
           <ReactDiffViewer oldValue={doc} newValue={reconvertedDoc} splitView={false} showDiffOnly={false} />
           <ReactDiffViewer oldValue={squizDoc} newValue={squizDoc} splitView={false} showDiffOnly={false} />

package/demo/index.scss

@@ -36,11 +36,6 @@ h1 {
   overflow: scroll;
 }
 
-.squiz-fte-modal-footer__button {
-  margin-top: 1rem;
-}
-
-.mock-buttons {
-  display: flex;
-  gap: 0.5rem;
+.error {
+  color: red;
 }

package/lib/Editor/Editor.js

@@ -1,16 +1,40 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const react_2 = require("@remirror/react");
 const EditorToolbar_1 = require("../EditorToolbar");
+const EditorContext_1 = require("./EditorContext");
 const Extensions_1 = require("../Extensions/Extensions");
 const clsx_1 = __importDefault(require("clsx"));
 const Editor = ({ content, editable = true, onChange }) => {
     const { manager, state, setState } = (0, react_2.useRemirror)({
-        extensions: Extensions_1.Extensions,
+        extensions: (0, Extensions_1.createExtensions)((0, react_1.useContext)(EditorContext_1.EditorContext)),
         content,
         selection: 'start',
         stringHandler: 'html',

package/lib/Editor/EditorContext.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export type EditorContextOptions = {
+    matrix: {
+        matrixIdentifier: string;
+        matrixDomain: string;
+        isValidMatrixAssetId: (assetId: string) => boolean | Promise<boolean>;
+    };
+};
+export declare const defaultEditorContext: EditorContextOptions;
+export declare const EditorContext: React.Context<EditorContextOptions>;

package/lib/Editor/EditorContext.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditorContext = exports.defaultEditorContext = void 0;
+const react_1 = __importDefault(require("react"));
+exports.defaultEditorContext = {
+    matrix: {
+        matrixIdentifier: '',
+        matrixDomain: '',
+        isValidMatrixAssetId: () => true,
+    },
+};
+exports.EditorContext = react_1.default.createContext(exports.defaultEditorContext);

package/lib/EditorToolbar/FloatingToolbar.js

@@ -38,31 +38,30 @@ const react_2 = require("@remirror/react");
 const react_components_1 = require("@remirror/react-components");
 const createToolbarPositioner_1 = require("../utils/createToolbarPositioner");
 const ImageButton_1 = __importDefault(require("./Tools/Image/ImageButton"));
-// The editor main toolbar
+const Extensions_1 = require("../Extensions/Extensions");
 const FloatingToolbar = () => {
+    const watchedMarks = [Extensions_1.MarkName.Link, Extensions_1.MarkName.AssetLink];
     const extensionNames = (0, hooks_1.useExtensionNames)();
-    const positioner = (0, react_1.useMemo)(() => (0, createToolbarPositioner_1.createToolbarPositioner)({ types: ['link'] }), []);
-    const { data } = (0, react_2.usePositioner)(positioner, []);
-    const activeImage = (0, react_2.useActive)();
+    const positioner = (0, react_1.useMemo)(() => (0, createToolbarPositioner_1.createToolbarPositioner)({ types: watchedMarks }), []);
+    const active = (0, react_2.useActive)();
+    const { data: { marks }, } = (0, react_2.usePositioner)(positioner, []);
     let buttons = [
         extensionNames.bold && react_1.default.createElement(BoldButton_1.default, { key: "bold" }),
         extensionNames.italic && react_1.default.createElement(ItalicButton_1.default, { key: "italic" }),
         extensionNames.underline && react_1.default.createElement(UnderlineButton_1.default, { key: "underline" }),
     ];
-    if (!activeImage.image()) {
-        if (data.marks?.link.isExclusivelyActive) {
-            // if all of the selected text is a link show the options to update/remove the link instead of the regular
-            // formatting options.
-            buttons = [react_1.default.createElement(LinkButton_1.default, { key: "update-link", inPopover: true }), react_1.default.createElement(RemoveLinkButton_1.default, { key: "remove-link" })];
-        }
-        else if (!data.marks?.link.isActive) {
-            // if none of the selected text is a link show the option to create a link.
-            buttons.push(react_1.default.createElement(react_components_1.VerticalDivider, { key: "link-divider", className: "editor-divider" }), react_1.default.createElement(LinkButton_1.default, { key: "add-link", inPopover: true }));
-        }
-    }
-    else {
+    if (active.image()) {
         buttons.push(react_1.default.createElement(react_components_1.VerticalDivider, { key: "image-divider", className: "editor-divider" }), 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) {
+        // if all of the selected text is a link show the options to update/remove the link instead of the regular
+        // formatting options.
+        buttons = [react_1.default.createElement(LinkButton_1.default, { key: "update-link", inPopover: true }), react_1.default.createElement(RemoveLinkButton_1.default, { key: "remove-link" })];
+    }
+    else if (!marks?.[Extensions_1.MarkName.Link].isActive && !marks?.[Extensions_1.MarkName.AssetLink].isActive) {
+        // if none of the selected text is a link show the option to create a link.
+        buttons.push(react_1.default.createElement(react_components_1.VerticalDivider, { key: "link-divider", className: "editor-divider" }), react_1.default.createElement(LinkButton_1.default, { key: "add-link", inPopover: true }));
+    }
     return (react_1.default.createElement(react_2.FloatingToolbar, { className: "squiz-fte-scope squiz-fte-scope__floating-popover", positioner: positioner }, buttons));
 };
 exports.FloatingToolbar = FloatingToolbar;

package/lib/EditorToolbar/Tools/Link/Form/LinkForm.d.ts

@@ -1,10 +1,19 @@
 import { ReactElement } from 'react';
 import { SubmitHandler } from 'react-hook-form';
-import { UpdateLinkOptions } from '../../../../Extensions/LinkExtension/LinkExtension';
-export type LinkFormData = Pick<UpdateLinkOptions, 'href' | 'target' | 'title' | 'text'>;
+import { FromToProps } from 'remirror';
+import { UpdateLinkProps } from '../../../../Extensions/LinkExtension/LinkExtension';
+import { UpdateAssetLinkProps } from '../../../../Extensions/LinkExtension/AssetLinkExtension';
+import { MarkName } from '../../../../Extensions/Extensions';
+import { DeepPartial } from '../../../../types';
+export type LinkFormData = {
+    linkType: MarkName;
+    text: string;
+    link: UpdateLinkProps['attrs'];
+    assetLink: UpdateAssetLinkProps['attrs'];
+    range: FromToProps;
+};
 export type FormProps = {
-    data: Partial<LinkFormData>;
+    data?: DeepPartial<LinkFormData>;
     onSubmit: SubmitHandler<LinkFormData>;
 };
-declare const LinkForm: ({ data, onSubmit }: FormProps) => ReactElement;
-export default LinkForm;
+export declare const LinkForm: ({ data, onSubmit }: FormProps) => ReactElement;

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.isValidMatrixAssetId(assetId))) {
+                                    return 'Invalid asset ID';
+                                }
+                            },
+                        },
+                    }) })),
+            react_1.default.createElement("div", { className: (0, clsx_1.default)('squiz-fte-form-group mb-2') },
+                react_1.default.createElement(Input_1.Input, { label: "Text", ...register('text') })),
+            react_1.default.createElement("div", { className: (0, clsx_1.default)('squiz-fte-form-group mb-0') },
+                react_1.default.createElement(Select_1.Select, { name: "assetLink.target", label: "Target", value: data?.link?.target || '_self', options: targetOptions, onChange: (value) => setValue('assetLink.target', value) }))))));
 };
-exports.default = LinkForm;
+exports.LinkForm = LinkForm;

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

@@ -32,29 +32,25 @@ 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 createToolbarPositioner_1 = require("../../../utils/createToolbarPositioner");
+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 = (0, react_2.useActive)().image();
-    const positioner = (0, react_1.useMemo)(() => (0, createToolbarPositioner_1.createToolbarPositioner)({ types: ['link'] }), []);
-    const { data } = (0, react_2.usePositioner)(positioner, []);
+    const disabled = active.image();
     const handleClick = () => {
         if (!showModal) {
-            if (data.isSelectionInView) {
-                selectLink();
-            }
-            // form element are uncontrolled, let the event loop run to
-            // update the selected text in state before showing the modal.
-            requestAnimationFrame(() => {
-                setShowModal(true);
-            });
+            setShowModal(true);
         }
     };
     const handleSubmit = (data) => {
-        updateLink(data);
+        if (data.linkType === Extensions_1.MarkName.AssetLink) {
+            updateAssetLink({ text: data.text, attrs: data.assetLink, range: data.range });
+        }
+        else {
+            updateLink({ text: data.text, attrs: data.link, range: data.range });
+        }
         setShowModal(false);
     };
     if (!inPopover) {
@@ -63,7 +59,7 @@ const LinkButton = ({ inPopover = false }) => {
         (0, react_2.useExtensionEvent)(LinkExtension_1.LinkExtension, 'onShortcut', (0, react_1.useCallback)(() => handleClick(), []));
     }
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(Button_1.default, { handleOnClick: handleClick, isActive: active.link(), icon: react_1.default.createElement(InsertLinkRounded_1.default, null), label: "Link (cmd+K)", isDisabled: disabled }),
+        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,2 +1,7 @@
 import { Extension } from '@remirror/core';
-export declare const Extensions: () => Extension[];
+import { EditorContextOptions } from '../Editor/EditorContext';
+export declare enum MarkName {
+    Link = "link",
+    AssetLink = "assetLink"
+}
+export declare const createExtensions: (context: EditorContextOptions) => () => Extension[];

package/lib/Extensions/Extensions.js

@@ -1,26 +1,37 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Extensions = void 0;
+exports.createExtensions = exports.MarkName = void 0;
 const extensions_1 = require("remirror/extensions");
 const PreformattedExtension_1 = require("./PreformattedExtension/PreformattedExtension");
+const AssetLinkExtension_1 = require("./LinkExtension/AssetLinkExtension");
 const LinkExtension_1 = require("./LinkExtension/LinkExtension");
 const ImageExtension_1 = require("./ImageExtension/ImageExtension");
-const Extensions = () => [
-    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({ preferPastedTextContent: false }),
-    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");
+var MarkName;
+(function (MarkName) {
+    MarkName["Link"] = "link";
+    MarkName["AssetLink"] = "assetLink";
+})(MarkName = exports.MarkName || (exports.MarkName = {}));
+const createExtensions = (context) => {
+    return () => {
+        return [
+            new CommandsExtension_1.CommandsExtension(),
+            new extensions_1.BoldExtension(),
+            new extensions_1.HeadingExtension(),
+            new extensions_1.ItalicExtension(),
+            new extensions_1.NodeFormattingExtension({ indents: [] }),
+            new extensions_1.ParagraphExtension(),
+            new PreformattedExtension_1.PreformattedExtension(),
+            new extensions_1.UnderlineExtension(),
+            new extensions_1.HistoryExtension(),
+            new ImageExtension_1.ImageExtension(),
+            new ImageExtension_1.ImageExtension({ preferPastedTextContent: false }),
+            new LinkExtension_1.LinkExtension(),
+            new AssetLinkExtension_1.AssetLinkExtension({
+                matrixIdentifier: context.matrix.matrixIdentifier,
+                matrixDomain: context.matrix.matrixDomain,
+            }),
+        ];
+    };
+};
+exports.createExtensions = createExtensions;

package/lib/Extensions/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;
+}