@squiz/formatted-text-editor 0.0.0-rbv2-20240530041851

package/lib/EditorToolbar/Tools/TextAlign/RightAlign/RightAlignButton.js

@@ -0,0 +1,22 @@
+"use strict";
+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_2 = require("@remirror/react");
+const Button_1 = __importDefault(require("../../../../ui/Button/Button"));
+const FormatAlignRight_1 = __importDefault(require("@mui/icons-material/FormatAlignRight"));
+const RightAlignButton = () => {
+    const { rightAlign } = (0, react_2.useCommands)();
+    const chain = (0, react_2.useChainedCommands)();
+    const handleSelect = () => {
+        if (rightAlign.enabled()) {
+            chain.rightAlign().focus().run();
+        }
+    };
+    const active = rightAlign.active?.() || false;
+    const enabled = rightAlign.enabled();
+    return (react_1.default.createElement(Button_1.default, { handleOnClick: handleSelect, isDisabled: !enabled, isActive: active, icon: react_1.default.createElement(FormatAlignRight_1.default, null), label: "Align right" }));
+};
+exports.default = RightAlignButton;

package/lib/EditorToolbar/Tools/TextAlign/TextAlignButtons.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const TextAlignButtons: () => React.JSX.Element;
+export default TextAlignButtons;

package/lib/EditorToolbar/Tools/TextAlign/TextAlignButtons.js

@@ -0,0 +1,21 @@
+"use strict";
+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 LeftAlignButton_1 = __importDefault(require("./LeftAlign/LeftAlignButton"));
+const CenterAlignButton_1 = __importDefault(require("./CenterAlign/CenterAlignButton"));
+const RightAlignButton_1 = __importDefault(require("./RightAlign/RightAlignButton"));
+const JustifyAlignButton_1 = __importDefault(require("./JustifyAlign/JustifyAlignButton"));
+const react_components_1 = require("@remirror/react-components");
+const TextAlignButtons = () => {
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(react_components_1.VerticalDivider, null),
+        react_1.default.createElement(LeftAlignButton_1.default, null),
+        react_1.default.createElement(CenterAlignButton_1.default, null),
+        react_1.default.createElement(RightAlignButton_1.default, null),
+        react_1.default.createElement(JustifyAlignButton_1.default, null),
+        react_1.default.createElement(react_components_1.VerticalDivider, null)));
+};
+exports.default = TextAlignButtons;

package/lib/EditorToolbar/Tools/TextType/CodeBlock/CodeBlockButton.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const CodeBlockButton: () => React.JSX.Element;
+export default CodeBlockButton;

package/lib/EditorToolbar/Tools/TextType/CodeBlock/CodeBlockButton.js

@@ -0,0 +1,22 @@
+"use strict";
+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_2 = require("@remirror/react");
+const ToolbarDropdownButton_1 = __importDefault(require("../../../../ui/ToolbarDropdownButton/ToolbarDropdownButton"));
+const CodeRounded_1 = __importDefault(require("@mui/icons-material/CodeRounded"));
+const CodeBlockButton = () => {
+    const { toggleCodeBlock } = (0, react_2.useCommands)();
+    const active = (0, react_2.useActive)();
+    const enabled = toggleCodeBlock.enabled();
+    const handleSelect = () => {
+        if (toggleCodeBlock.enabled()) {
+            toggleCodeBlock();
+        }
+    };
+    return (react_1.default.createElement(ToolbarDropdownButton_1.default, { handleOnClick: handleSelect, isDisabled: !enabled, isActive: active.codeBlock(), label: "Code block", icon: react_1.default.createElement(CodeRounded_1.default, null) },
+        react_1.default.createElement("p", null, "Code block")));
+};
+exports.default = CodeBlockButton;

package/lib/EditorToolbar/Tools/TextType/Heading/HeadingButton.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+type HeadingButtonProps = {
+    level: number;
+};
+declare const HeadingButton: ({ level }: HeadingButtonProps) => React.JSX.Element;
+export default HeadingButton;

package/lib/EditorToolbar/Tools/TextType/Heading/HeadingButton.js

@@ -0,0 +1,37 @@
+"use strict";
+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_2 = require("@remirror/react");
+const ToolbarDropdownButton_1 = __importDefault(require("../../../../ui/ToolbarDropdownButton/ToolbarDropdownButton"));
+const HeadingButton = ({ level }) => {
+    const { toggleHeading } = (0, react_2.useCommands)();
+    const chain = (0, react_2.useChainedCommands)();
+    const active = (0, react_2.useActive)();
+    const enabled = toggleHeading.enabled({ level });
+    const handleSelect = () => {
+        if (toggleHeading.enabled({ level })) {
+            chain.toggleHeading({ level }).focus().run();
+        }
+    };
+    const headingContent = () => {
+        switch (level) {
+            case 1:
+                return react_1.default.createElement("h1", null, "Heading 1");
+            case 2:
+                return react_1.default.createElement("h2", null, "Heading 2");
+            case 3:
+                return react_1.default.createElement("h3", null, "Heading 3");
+            case 4:
+                return react_1.default.createElement("h4", null, "Heading 4");
+            case 5:
+                return react_1.default.createElement("h5", null, "Heading 5");
+            case 6:
+                return react_1.default.createElement("h6", null, "Heading 6");
+        }
+    };
+    return (react_1.default.createElement(ToolbarDropdownButton_1.default, { handleOnClick: handleSelect, isDisabled: !enabled, isActive: active.heading({ level }), label: `Heading ${level}` }, headingContent()));
+};
+exports.default = HeadingButton;

package/lib/EditorToolbar/Tools/TextType/Paragraph/ParagraphButton.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const ParagraphButton: () => React.JSX.Element;
+export default ParagraphButton;

package/lib/EditorToolbar/Tools/TextType/Paragraph/ParagraphButton.js

@@ -0,0 +1,21 @@
+"use strict";
+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_2 = require("@remirror/react");
+const ToolbarDropdownButton_1 = __importDefault(require("../../../../ui/ToolbarDropdownButton/ToolbarDropdownButton"));
+const ParagraphButton = () => {
+    const { convertParagraph } = (0, react_2.useCommands)();
+    const chain = (0, react_2.useChainedCommands)();
+    const active = (0, react_2.useActive)();
+    const handleSelect = () => {
+        if (convertParagraph.enabled()) {
+            chain.convertParagraph().focus().run();
+        }
+    };
+    return (react_1.default.createElement(ToolbarDropdownButton_1.default, { handleOnClick: handleSelect, isDisabled: false, isActive: active.paragraph(), label: "Paragraph" },
+        react_1.default.createElement("p", null, "Paragraph")));
+};
+exports.default = ParagraphButton;

package/lib/EditorToolbar/Tools/TextType/Preformatted/PreformattedButton.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const PreformattedButton: () => React.JSX.Element;
+export default PreformattedButton;

package/lib/EditorToolbar/Tools/TextType/Preformatted/PreformattedButton.js

@@ -0,0 +1,22 @@
+"use strict";
+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_2 = require("@remirror/react");
+const ToolbarDropdownButton_1 = __importDefault(require("../../../../ui/ToolbarDropdownButton/ToolbarDropdownButton"));
+const ShortTextRounded_1 = __importDefault(require("@mui/icons-material/ShortTextRounded"));
+const PreformattedButton = () => {
+    const { togglePreformatted } = (0, react_2.useCommands)();
+    const active = (0, react_2.useActive)();
+    const enabled = togglePreformatted.enabled();
+    const handleSelect = () => {
+        if (togglePreformatted.enabled()) {
+            togglePreformatted();
+        }
+    };
+    return (react_1.default.createElement(ToolbarDropdownButton_1.default, { handleOnClick: handleSelect, isDisabled: !enabled, isActive: active.preformatted(), label: "Preformatted", icon: react_1.default.createElement(ShortTextRounded_1.default, null) },
+        react_1.default.createElement("p", null, "Preformatted")));
+};
+exports.default = PreformattedButton;

package/lib/EditorToolbar/Tools/TextType/TextTypeDropdown.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const TextTypeDropdown: () => React.JSX.Element;
+export default TextTypeDropdown;

package/lib/EditorToolbar/Tools/TextType/TextTypeDropdown.js

@@ -0,0 +1,46 @@
+"use strict";
+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 HeadingButton_1 = __importDefault(require("./Heading/HeadingButton"));
+const ParagraphButton_1 = __importDefault(require("./Paragraph/ParagraphButton"));
+const PreformattedButton_1 = __importDefault(require("./Preformatted/PreformattedButton"));
+const CodeBlockButton_1 = __importDefault(require("./CodeBlock/CodeBlockButton"));
+const ToolbarDropdown_1 = __importDefault(require("../../../ui/ToolbarDropdown/ToolbarDropdown"));
+const react_2 = require("@remirror/react");
+const TextTypeDropdown = () => {
+    const active = (0, react_2.useActive)();
+    const activeLabel = () => {
+        // Determine if preformatted is active
+        if (active.preformatted()) {
+            return 'Preformatted';
+        }
+        // Determine if codeblock is active
+        if (active.codeBlock()) {
+            return 'Code block';
+        }
+        // Determine if a heading is active
+        for (let i = 1; i <= 6; i++) {
+            if (active.heading({ level: i })) {
+                return `Heading ${i}`;
+            }
+        }
+        // Default to paragraph
+        return 'Paragraph';
+    };
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(ToolbarDropdown_1.default, { label: activeLabel() },
+            react_1.default.createElement(ParagraphButton_1.default, null),
+            react_1.default.createElement(HeadingButton_1.default, { level: 1 }),
+            react_1.default.createElement(HeadingButton_1.default, { level: 2 }),
+            react_1.default.createElement(HeadingButton_1.default, { level: 3 }),
+            react_1.default.createElement(HeadingButton_1.default, { level: 4 }),
+            react_1.default.createElement(HeadingButton_1.default, { level: 5 }),
+            react_1.default.createElement(HeadingButton_1.default, { level: 6 }),
+            react_1.default.createElement(PreformattedButton_1.default, null),
+            react_1.default.createElement(CodeBlockButton_1.default, null)),
+        react_1.default.createElement(react_2.VerticalDivider, null)));
+};
+exports.default = TextTypeDropdown;

package/lib/EditorToolbar/Tools/Underline/UnderlineButton.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const UnderlineButton: () => React.JSX.Element;
+export default UnderlineButton;

package/lib/EditorToolbar/Tools/Underline/UnderlineButton.js

@@ -0,0 +1,23 @@
+"use strict";
+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_2 = require("@remirror/react");
+const Button_1 = __importDefault(require("../../../ui/Button/Button"));
+const FormatUnderlinedRounded_1 = __importDefault(require("@mui/icons-material/FormatUnderlinedRounded"));
+const getShortcutSymbol_1 = require("../../../utils/getShortcutSymbol");
+const UnderlineButton = () => {
+    const { toggleUnderline } = (0, react_2.useCommands)();
+    const chain = (0, react_2.useChainedCommands)();
+    const active = (0, react_2.useActive)();
+    const enabled = toggleUnderline.enabled();
+    const handleSelect = () => {
+        if (toggleUnderline.enabled()) {
+            chain.toggleUnderline().focus().run();
+        }
+    };
+    return (react_1.default.createElement(Button_1.default, { handleOnClick: handleSelect, isDisabled: !enabled, isActive: active.underline(), icon: react_1.default.createElement(FormatUnderlinedRounded_1.default, null), label: `Underline (${(0, getShortcutSymbol_1.getShortcutSymbol)()}+U)` }));
+};
+exports.default = UnderlineButton;

package/lib/EditorToolbar/Tools/Undo/UndoButton.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const UndoButton: () => React.JSX.Element;
+export default UndoButton;

package/lib/EditorToolbar/Tools/Undo/UndoButton.js

@@ -0,0 +1,22 @@
+"use strict";
+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_2 = require("@remirror/react");
+const Button_1 = __importDefault(require("../../../ui/Button/Button"));
+const UndoRounded_1 = __importDefault(require("@mui/icons-material/UndoRounded"));
+const getShortcutSymbol_1 = require("../../../utils/getShortcutSymbol");
+const UndoButton = () => {
+    const { undo } = (0, react_2.useCommands)();
+    const { undoDepth } = (0, react_2.useHelpers)(true);
+    const handleSelect = () => {
+        if (undo.enabled()) {
+            undo();
+        }
+    };
+    const enabled = undoDepth() > 0;
+    return (react_1.default.createElement(Button_1.default, { handleOnClick: handleSelect, isDisabled: !enabled, isActive: false, icon: react_1.default.createElement(UndoRounded_1.default, null), label: `Undo (${(0, getShortcutSymbol_1.getShortcutSymbol)()}+Z)` }));
+};
+exports.default = UndoButton;

package/lib/EditorToolbar/index.d.ts

@@ -0,0 +1,2 @@
+export * from './FloatingToolbar';
+export * from './Toolbar';

package/lib/EditorToolbar/index.js

@@ -0,0 +1,18 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./FloatingToolbar"), exports);
+__exportStar(require("./Toolbar"), exports);

package/lib/Extensions/ClearFormattingExtension/ClearFormattingExtension.d.ts

@@ -0,0 +1,5 @@
+import { PlainExtension, CommandFunction } from '@remirror/core';
+export declare class ClearFormattingExtension extends PlainExtension {
+    get name(): "clearFormatting";
+    clearFormatting(): CommandFunction;
+}

package/lib/Extensions/ClearFormattingExtension/ClearFormattingExtension.js

@@ -0,0 +1,63 @@
+"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.ClearFormattingExtension = void 0;
+const core_1 = require("@remirror/core");
+const getNodeNamesByGroup_1 = require("../../utils/getNodeNamesByGroup");
+const getMarkNamesByGroup_1 = require("../../utils/getMarkNamesByGroup");
+let ClearFormattingExtension = class ClearFormattingExtension extends core_1.PlainExtension {
+    get name() {
+        return 'clearFormatting';
+    }
+    clearFormatting() {
+        return ({ dispatch, tr, state }) => {
+            const { empty, ranges } = state.selection;
+            const schema = state.schema;
+            const formattingNodes = (0, getNodeNamesByGroup_1.getNodeNamesByGroup)(schema, core_1.ExtensionTag.FormattingNode);
+            const formattingMarks = (0, getMarkNamesByGroup_1.getMarkNamesByGroup)(schema, core_1.ExtensionTag.FormattingMark);
+            let isChanged = false;
+            ranges.forEach(({ $from, $to }) => {
+                // Check if there is a selection or not, if no selection use the doc content size as the range
+                state.doc.nodesBetween(empty ? 0 : $from.pos, empty ? state.doc.content.size : $to.pos, (node, pos) => {
+                    // Clear marks (bold, italic, etc)
+                    node.marks.forEach((mark) => {
+                        if (formattingMarks.includes(mark.type.name)) {
+                            tr.removeMark(pos, pos + node.nodeSize, mark);
+                            isChanged = true;
+                        }
+                    });
+                    // Leave non-foramtting nodes as-is
+                    if (!formattingNodes.includes(node.type.name)) {
+                        return;
+                    }
+                    // Clear node attributes & set to paragraph by default
+                    if (node.type.name === schema.nodes.paragraph.name) {
+                        const { nodeTextAlignment } = node.attrs;
+                        if (nodeTextAlignment && nodeTextAlignment !== 'left') {
+                            tr.setNodeAttribute(pos, 'nodeTextAlignment', null);
+                            isChanged = true;
+                        }
+                    }
+                    else {
+                        tr.setNodeMarkup(pos, schema.nodes.paragraph, null, node.marks);
+                        isChanged = true;
+                    }
+                });
+            });
+            dispatch?.(tr);
+            return isChanged;
+        };
+    }
+};
+__decorate([
+    (0, core_1.command)()
+], ClearFormattingExtension.prototype, "clearFormatting", null);
+ClearFormattingExtension = __decorate([
+    (0, core_1.extension)({})
+], ClearFormattingExtension);
+exports.ClearFormattingExtension = ClearFormattingExtension;

package/lib/Extensions/CodeBlockExtension/CodeBlockExtension.d.ts

@@ -0,0 +1,5 @@
+import { CodeBlockExtension } from '@remirror/extension-code-block';
+import { NodeViewMethod } from 'remirror';
+export declare class ExtendedCodeBlockExtension extends CodeBlockExtension {
+    createNodeViews(): NodeViewMethod;
+}

package/lib/Extensions/CodeBlockExtension/CodeBlockExtension.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ExtendedCodeBlockExtension = void 0;
+const extension_code_block_1 = require("@remirror/extension-code-block");
+class ExtendedCodeBlockExtension extends extension_code_block_1.CodeBlockExtension {
+    createNodeViews() {
+        return (node) => {
+            const { language } = node.attrs;
+            // This is the pre container for the code block
+            const dom = document.createElement('pre');
+            dom.setAttribute('spellcheck', 'false');
+            dom.classList.add(`code-block`);
+            // This is the actual code content in the code block
+            const contentDOM = document.createElement('code');
+            contentDOM.setAttribute('data-code-block-language', language);
+            // Divider between code block and pre container
+            const dividerElement = document.createElement('div');
+            dividerElement.classList.add('block-divider');
+            // The material icon to use
+            const codeIcon = document.createElement('svg');
+            codeIcon.classList.add('material-symbols-rounded');
+            codeIcon.textContent = 'code';
+            dom.append(codeIcon);
+            dom.append(dividerElement);
+            dom.append(contentDOM);
+            return { dom, contentDOM };
+        };
+    }
+}
+exports.ExtendedCodeBlockExtension = ExtendedCodeBlockExtension;

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

@@ -0,0 +1,17 @@
+import { Extension } from '@remirror/core';
+import { EditorContextOptions } from '../Editor/EditorContext';
+export declare enum NodeName {
+    Image = "image",
+    CodeBlock = "codeBlock",
+    AssetImage = "assetImage",
+    Text = "text",
+    TableControllerCell = "tableControllerCell",
+    tableCell = "tableCell",
+    hardBreak = "hardBreak",
+    Unsupported = "unsupportedNode"
+}
+export declare enum MarkName {
+    Link = "link",
+    AssetLink = "assetLink"
+}
+export declare const createExtensions: (context: EditorContextOptions) => () => Extension[];

package/lib/Extensions/Extensions.js

@@ -0,0 +1,73 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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");
+const CodeBlockExtension_1 = require("./CodeBlockExtension/CodeBlockExtension");
+const ClearFormattingExtension_1 = require("./ClearFormattingExtension/ClearFormattingExtension");
+const UnsupportedNodeExtension_1 = require("./UnsuportedExtension/UnsupportedNodeExtension");
+const FetchUrlExtension_1 = require("./FetchUrlExtension/FetchUrlExtension");
+const extension_react_tables_1 = require("@remirror/extension-react-tables");
+const extension_react_component_1 = require("@remirror/extension-react-component");
+var NodeName;
+(function (NodeName) {
+    NodeName["Image"] = "image";
+    NodeName["CodeBlock"] = "codeBlock";
+    NodeName["AssetImage"] = "assetImage";
+    NodeName["Text"] = "text";
+    NodeName["TableControllerCell"] = "tableControllerCell";
+    NodeName["tableCell"] = "tableCell";
+    NodeName["hardBreak"] = "hardBreak";
+    NodeName["Unsupported"] = "unsupportedNode";
+})(NodeName = exports.NodeName || (exports.NodeName = {}));
+var MarkName;
+(function (MarkName) {
+    MarkName["Link"] = "link";
+    MarkName["AssetLink"] = "assetLink";
+})(MarkName = exports.MarkName || (exports.MarkName = {}));
+const createExtensions = (context) => {
+    return () => {
+        return [
+            new CommandsExtension_1.CommandsExtension(),
+            new extensions_1.BoldExtension(),
+            new extensions_1.DocExtension(),
+            new extensions_1.HeadingExtension(),
+            new extensions_1.ItalicExtension(),
+            new extensions_1.NodeFormattingExtension({ indents: [] }),
+            new extensions_1.ParagraphExtension(),
+            new extensions_1.HardBreakExtension(),
+            new PreformattedExtension_1.PreformattedExtension(),
+            new CodeBlockExtension_1.ExtendedCodeBlockExtension({ defaultWrap: true }),
+            new extensions_1.UnderlineExtension(),
+            new extensions_1.HistoryExtension(),
+            new ImageExtension_1.ImageExtension(),
+            new ImageExtension_1.ImageExtension({ preferPastedTextContent: false }),
+            new AssetImageExtension_1.AssetImageExtension({
+                matrixDomain: context.matrix.matrixDomain,
+            }),
+            new LinkExtension_1.LinkExtension(),
+            new AssetLinkExtension_1.AssetLinkExtension({
+                matrixDomain: context.matrix.matrixDomain,
+            }),
+            new UnsupportedNodeExtension_1.UnsupportedNodeExtension(),
+            new ClearFormattingExtension_1.ClearFormattingExtension(),
+            new extensions_1.BulletListExtension(),
+            new extensions_1.ListItemExtension(),
+            new extensions_1.OrderedListExtension(),
+            new extensions_1.HorizontalRuleExtension(),
+            new extensions_1.PlaceholderExtension(),
+            new FetchUrlExtension_1.FetchUrlExtension({
+                fetchUrl: context.resolveNodeToUrl,
+            }),
+            new extensions_1.TextExtension(),
+            new extension_react_tables_1.TableExtension(),
+            new extension_react_component_1.ReactComponentExtension(),
+        ];
+    };
+};
+exports.createExtensions = createExtensions;

package/lib/Extensions/FetchUrlExtension/FetchUrlExtension.d.ts

@@ -0,0 +1,12 @@
+import { PlainExtension } from '@remirror/core';
+import { Dispose, EditorView } from '@remirror/core-types';
+import { ResolveNodeToUrl } from '../../types';
+export type FetchUrlOptions = {
+    fetchUrl?: ResolveNodeToUrl;
+};
+export declare class FetchUrlExtension extends PlainExtension<FetchUrlOptions> {
+    get name(): string;
+    onView(view: EditorView): Dispose | void;
+    private findAssetLinkMark;
+    private fetchAndReplace;
+}