@squiz/formatted-text-editor 2.3.0 → 2.5.0

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,15 @@
+import { ApplySchemaAttributes, CommandFunction, NodeExtension, NodeExtensionSpec, NodeSpecOverride } from '@remirror/core';
+import { NodeViewMethod } from 'remirror';
+export type CodeBlockOptions = {
+    enableDecorations?: boolean;
+};
+export declare class CodeBlockExtension extends NodeExtension<CodeBlockOptions> {
+    get name(): "codeBlock";
+    createTags(): ("block" | "code")[];
+    createNodeSpec(extra: ApplySchemaAttributes, override: NodeSpecOverride): NodeExtensionSpec;
+    createNodeViews(): NodeViewMethod | Record<string, never>;
+    /**
+     * Toggle the <code> for the current block.
+     */
+    toggleCodeBlock(): CommandFunction;
+}

package/lib/Extensions/CodeBlockExtension/CodeBlockExtension.js

@@ -0,0 +1,96 @@
+"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.CodeBlockExtension = void 0;
+const core_1 = require("@remirror/core");
+const remirror_1 = require("remirror");
+let CodeBlockExtension = class CodeBlockExtension extends core_1.NodeExtension {
+    get name() {
+        return 'codeBlock';
+    }
+    createTags() {
+        return [core_1.ExtensionTag.Block, core_1.ExtensionTag.Code];
+    }
+    createNodeSpec(extra, override) {
+        return {
+            content: 'text*',
+            marks: '',
+            defining: true,
+            isolating: true,
+            draggable: false,
+            ...override,
+            code: true,
+            attrs: {
+                ...extra.defaults(),
+            },
+            parseDOM: [
+                {
+                    tag: 'code',
+                    preserveWhitespace: 'full',
+                },
+                {
+                    tag: 'pre',
+                    preserveWhitespace: 'full',
+                    getAttrs: (node) => {
+                        if (!(0, remirror_1.isElementDomNode)(node) || !(0, remirror_1.isElementDomNode)(node.querySelector('code'))) {
+                            return false;
+                        }
+                        return extra.parse(node);
+                    },
+                },
+            ],
+            toDOM: (node) => {
+                return ['code', extra.dom(node), 0];
+            },
+        };
+    }
+    createNodeViews() {
+        if (!this.options.enableDecorations) {
+            return {};
+        }
+        return () => {
+            // 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');
+            // 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 };
+        };
+    }
+    /**
+     * Toggle the <code> for the current block.
+     */
+    toggleCodeBlock() {
+        return (0, core_1.toggleBlockItem)({
+            type: this.type,
+            toggleType: 'paragraph',
+        });
+    }
+};
+__decorate([
+    (0, core_1.command)()
+], CodeBlockExtension.prototype, "toggleCodeBlock", null);
+CodeBlockExtension = __decorate([
+    (0, core_1.extension)({
+        defaultOptions: {
+            enableDecorations: false,
+        },
+    })
+], CodeBlockExtension);
+exports.CodeBlockExtension = CodeBlockExtension;

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,18 @@
+import { Extension } from '@remirror/core';
+import { EditorContextOptions } from '../Editor/EditorContext';
+export declare enum NodeName {
+    Image = "image",
+    CodeBlock = "codeBlock",
+    AssetImage = "assetImage",
+    DAMImage = "DAMImage",
+    Text = "text",
+    TableControllerCell = "tableControllerCell",
+    tableCell = "tableCell",
+    hardBreak = "hardBreak",
+    Unsupported = "unsupportedNode"
+}
+export declare enum MarkName {
+    Link = "link",
+    AssetLink = "assetLink"
+}
+export declare const createExtensions: (context: EditorContextOptions, enableDecorations?: boolean) => () => Extension[];