@squiz/formatted-text-editor 2.3.0 → 2.4.0

package/lib/Extensions/LinkExtension/LinkExtension.js

@@ -0,0 +1,87 @@
+"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.LinkExtension = void 0;
+const remirror_1 = require("remirror");
+const core_1 = require("@remirror/core");
+const common_1 = require("./common");
+const CommandsExtension_1 = require("../CommandsExtension/CommandsExtension");
+const Extensions_1 = require("../Extensions");
+let LinkExtension = class LinkExtension extends core_1.MarkExtension {
+    get name() {
+        return Extensions_1.MarkName.Link;
+    }
+    createMarkSpec(extra, override) {
+        return {
+            inclusive: false,
+            excludes: [this.name, Extensions_1.MarkName.AssetLink].join(' '),
+            ...override,
+            attrs: {
+                ...extra.defaults(),
+                href: {},
+                title: { default: undefined },
+                target: { default: this.options.defaultTarget },
+            },
+            parseDOM: [
+                {
+                    tag: 'a[href]',
+                    getAttrs: (node) => {
+                        if (!(0, remirror_1.isElementDomNode)(node)) {
+                            return false;
+                        }
+                        return {
+                            ...extra.parse(node),
+                            href: node.getAttribute('href'),
+                            title: node.getAttribute('title'),
+                            target: (0, common_1.validateTarget)(node.getAttribute('target'), this.options.supportedTargets, this.options.defaultTarget),
+                        };
+                    },
+                },
+            ],
+            toDOM: (node) => {
+                const { target, ...rest } = (0, core_1.omitExtraAttributes)(node.attrs, extra);
+                const rel = 'noopener noreferrer nofollow';
+                const attrs = {
+                    ...extra.dom(node),
+                    ...rest,
+                    rel,
+                    target: (0, common_1.validateTarget)(target, this.options.supportedTargets, this.options.defaultTarget),
+                };
+                return ['a', attrs, 0];
+            },
+        };
+    }
+    updateLink({ text, attrs, range }) {
+        return this.store.getExtension(CommandsExtension_1.CommandsExtension).updateMark({
+            attrs,
+            text,
+            range,
+            mark: this.type,
+            removeMark: !attrs.href,
+        });
+    }
+    removeLink() {
+        return (0, core_1.removeMark)({ type: this.type });
+    }
+};
+__decorate([
+    (0, core_1.command)()
+], LinkExtension.prototype, "updateLink", null);
+__decorate([
+    (0, core_1.command)()
+], LinkExtension.prototype, "removeLink", null);
+LinkExtension = __decorate([
+    (0, core_1.extension)({
+        defaultOptions: {
+            defaultTarget: common_1.LinkTarget.Self,
+            supportedTargets: [common_1.LinkTarget.Self, common_1.LinkTarget.Blank],
+        },
+        defaultPriority: remirror_1.ExtensionPriority.Medium,
+    })
+], LinkExtension);
+exports.LinkExtension = LinkExtension;

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

@@ -0,0 +1,7 @@
+export declare enum LinkTarget {
+    Self = "_self",
+    Blank = "_blank",
+    Parent = "_parent",
+    Top = "_top"
+}
+export declare const validateTarget: (target: unknown, supportedTargets: LinkTarget[], defaultTarget: LinkTarget) => LinkTarget;

package/lib/Extensions/LinkExtension/common.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.validateTarget = exports.LinkTarget = void 0;
+var LinkTarget;
+(function (LinkTarget) {
+    LinkTarget["Self"] = "_self";
+    LinkTarget["Blank"] = "_blank";
+    LinkTarget["Parent"] = "_parent";
+    LinkTarget["Top"] = "_top";
+})(LinkTarget = exports.LinkTarget || (exports.LinkTarget = {}));
+const validateTarget = (target, supportedTargets, defaultTarget) => {
+    return supportedTargets.includes(target) ? target : defaultTarget;
+};
+exports.validateTarget = validateTarget;

package/lib/Extensions/PreformattedExtension/PreformattedExtension.d.ts

@@ -0,0 +1,12 @@
+import { ApplySchemaAttributes, CommandFunction, NodeExtension, NodeExtensionSpec, NodeSpecOverride } from '@remirror/core';
+import { NodeViewMethod } from 'remirror';
+export declare class PreformattedExtension extends NodeExtension {
+    get name(): "preformatted";
+    createTags(): ("block" | "formattingNode" | "textBlock")[];
+    createNodeSpec(extra: ApplySchemaAttributes, override: NodeSpecOverride): NodeExtensionSpec;
+    createNodeViews(): NodeViewMethod;
+    /**
+     * Toggle the <pre> for the current block.
+     */
+    togglePreformatted(): CommandFunction;
+}

package/lib/Extensions/PreformattedExtension/PreformattedExtension.js

@@ -0,0 +1,76 @@
+"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.PreformattedExtension = void 0;
+const core_1 = require("@remirror/core");
+let PreformattedExtension = class PreformattedExtension extends core_1.NodeExtension {
+    get name() {
+        return 'preformatted';
+    }
+    createTags() {
+        return [core_1.ExtensionTag.Block, core_1.ExtensionTag.TextBlock, core_1.ExtensionTag.FormattingNode];
+    }
+    createNodeSpec(extra, override) {
+        return {
+            content: 'inline*',
+            defining: true,
+            draggable: false,
+            ...override,
+            attrs: {
+                ...extra.defaults(),
+            },
+            parseDOM: [
+                {
+                    tag: 'pre',
+                },
+            ],
+            toDOM: (node) => {
+                return ['pre', extra.dom(node), 0];
+            },
+        };
+    }
+    createNodeViews() {
+        return (node) => {
+            const { nodeTextAlignment } = node.attrs;
+            // This is the pre container for the code block
+            const dom = document.createElement('div');
+            dom.classList.add(`preformatted`);
+            // This is the actual code content in the code block
+            const contentDOM = document.createElement('pre');
+            contentDOM.setAttribute('data-node-text-align', nodeTextAlignment);
+            contentDOM.setAttribute('style', `text-align:${nodeTextAlignment}`);
+            // 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 = 'short_text';
+            dom.append(codeIcon);
+            dom.append(dividerElement);
+            dom.append(contentDOM);
+            return { dom, contentDOM };
+        };
+    }
+    /**
+     * Toggle the <pre> for the current block.
+     */
+    togglePreformatted() {
+        return (0, core_1.toggleBlockItem)({
+            type: this.type,
+            toggleType: 'paragraph',
+        });
+    }
+};
+__decorate([
+    (0, core_1.command)()
+], PreformattedExtension.prototype, "togglePreformatted", null);
+PreformattedExtension = __decorate([
+    (0, core_1.extension)({})
+], PreformattedExtension);
+exports.PreformattedExtension = PreformattedExtension;

package/lib/Extensions/UnsuportedExtension/UnsupportedNodeExtension.d.ts

@@ -0,0 +1,10 @@
+import { ApplySchemaAttributes, NodeExtension, NodeExtensionSpec, NodeSpecOverride } from '@remirror/core';
+import { NodeName } from '../Extensions';
+import { ComponentType } from 'react';
+import { NodeViewComponentProps } from '@remirror/react';
+export declare class UnsupportedNodeExtension extends NodeExtension {
+    get name(): NodeName.Unsupported;
+    ReactComponent: ComponentType<NodeViewComponentProps>;
+    createTags(): "inline"[];
+    createNodeSpec(extra: ApplySchemaAttributes, override: NodeSpecOverride): NodeExtensionSpec;
+}

package/lib/Extensions/UnsuportedExtension/UnsupportedNodeExtension.js

@@ -0,0 +1,76 @@
+"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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UnsupportedNodeExtension = void 0;
+const core_1 = require("@remirror/core");
+const Extensions_1 = require("../Extensions");
+const CollapseBox_1 = __importDefault(require("../../ui/CollapseBox/CollapseBox"));
+let UnsupportedNodeExtension = class UnsupportedNodeExtension extends core_1.NodeExtension {
+    get name() {
+        return Extensions_1.NodeName.Unsupported;
+    }
+    ReactComponent = CollapseBox_1.default;
+    createTags() {
+        return [core_1.ExtensionTag.InlineNode];
+    }
+    createNodeSpec(extra, override) {
+        return {
+            selectable: false,
+            draggable: false,
+            atom: true,
+            inline: true,
+            ...override,
+            attrs: {
+                ...extra.defaults(),
+                originalNode: {},
+                errorMessage: {},
+            },
+            parseDOM: [
+                {
+                    tag: `[data-unsupported-node]`,
+                    getAttrs: (node) => {
+                        if (!(0, core_1.isElementDomNode)(node)) {
+                            return false;
+                        }
+                        const unsupportedNodes = node.getAttribute('data-unsupported-node');
+                        try {
+                            const decodedNodes = JSON.parse(unsupportedNodes);
+                            return {
+                                ...extra.parse(node),
+                                originalNode: decodedNodes?.originalNode,
+                                errorMessage: decodedNodes?.errorMessage,
+                            };
+                        }
+                        catch (error) {
+                            console.error('Failed to parse Remirror nodes from data-unsupported-node', error);
+                            return false;
+                        }
+                    },
+                },
+            ],
+            toDOM: (node) => {
+                const { originalNode, errorMessage, ...rest } = (0, core_1.omitExtraAttributes)(node.attrs, extra);
+                const attrs = {
+                    ...extra.dom(node),
+                    ...rest,
+                    originalNode,
+                    errorMessage,
+                    'data-unsupported-node': JSON.stringify({ originalNode, errorMessage }),
+                };
+                return ['div', attrs];
+            },
+        };
+    }
+};
+UnsupportedNodeExtension = __decorate([
+    (0, core_1.extension)({})
+], UnsupportedNodeExtension);
+exports.UnsupportedNodeExtension = UnsupportedNodeExtension;

package/lib/Icons/AiIcon.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const ICON_AI: React.JSX.Element;

package/lib/Icons/AiIcon.js

@@ -0,0 +1,60 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ICON_AI = void 0;
+const react_1 = __importDefault(require("react"));
+exports.ICON_AI = (react_1.default.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    react_1.default.createElement("g", { id: "sq-AI-icon", clipPath: "url(#clip0_3060_44545)" },
+        react_1.default.createElement("g", { id: "circle", filter: "url(#filter0_dd_3060_44545)" },
+            react_1.default.createElement("rect", { x: "2", y: "2", width: "20", height: "20", rx: "10", fill: "url(#paint0_linear_3060_44545)" }),
+            react_1.default.createElement("rect", { x: "1.5", y: "1.5", width: "21", height: "21", rx: "10.5", stroke: "white" })),
+        react_1.default.createElement("g", { id: "Vector", filter: "url(#filter1_d_3060_44545)" },
+            react_1.default.createElement("path", { d: "M11.2084 9.79157L10.1219 7.39977C9.88269 6.86674 9.11731 6.86674 8.87813 7.39977L7.79157 9.79157L5.39977 10.8781C4.86674 11.1241 4.86674 11.8827 5.39977 12.1219L7.79157 13.2084L8.87813 15.6002C9.12415 16.1333 9.88269 16.1333 10.1219 15.6002L11.2084 13.2084L13.6002 12.1219C14.1333 11.8759 14.1333 11.1173 13.6002 10.8781L11.2084 9.79157Z", fill: "white" })),
+        react_1.default.createElement("g", { id: "Vector_2", opacity: "0.8", filter: "url(#filter2_d_3060_44545)" },
+            react_1.default.createElement("path", { d: "M17.4491 10.4491L16.8493 11.7779C16.7126 12.074 16.2874 12.074 16.1507 11.7779L15.5509 10.4415L14.2221 9.84169C13.926 9.70501 13.926 9.2874 14.2221 9.15072L15.5585 8.55087L16.1583 7.2221C16.295 6.92597 16.7126 6.92597 16.8493 7.2221L17.4491 8.55847L18.7779 9.15831C19.074 9.29499 19.074 9.7126 18.7779 9.84928L17.4491 10.4491Z", fill: "white" })),
+        react_1.default.createElement("g", { id: "Ellipse 55", opacity: "0.8", filter: "url(#filter3_d_3060_44545)" },
+            react_1.default.createElement("circle", { cx: "14.5", cy: "16.5", r: "1.5", fill: "white" }))),
+    react_1.default.createElement("defs", null,
+        react_1.default.createElement("filter", { id: "filter0_dd_3060_44545", x: "0", y: "0", width: "24", height: "24", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB" },
+            react_1.default.createElement("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }),
+            react_1.default.createElement("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }),
+            react_1.default.createElement("feOffset", { dx: "1", dy: "1" }),
+            react_1.default.createElement("feComposite", { in2: "hardAlpha", operator: "out" }),
+            react_1.default.createElement("feColorMatrix", { type: "matrix", values: "0 0 0 0 0.2 0 0 0 0 0.709941 0 0 0 0 1 0 0 0 0.64 0" }),
+            react_1.default.createElement("feBlend", { mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_3060_44545" }),
+            react_1.default.createElement("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }),
+            react_1.default.createElement("feOffset", { dx: "-1", dy: "-1" }),
+            react_1.default.createElement("feComposite", { in2: "hardAlpha", operator: "out" }),
+            react_1.default.createElement("feColorMatrix", { type: "matrix", values: "0 0 0 0 0.96 0 0 0 0 0.76 0 0 0 0 0.48 0 0 0 0.64 0" }),
+            react_1.default.createElement("feBlend", { mode: "normal", in2: "effect1_dropShadow_3060_44545", result: "effect2_dropShadow_3060_44545" }),
+            react_1.default.createElement("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect2_dropShadow_3060_44545", result: "shape" })),
+        react_1.default.createElement("filter", { id: "filter1_d_3060_44545", x: "5", y: "7", width: "9", height: "10", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB" },
+            react_1.default.createElement("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }),
+            react_1.default.createElement("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }),
+            react_1.default.createElement("feOffset", { dy: "1" }),
+            react_1.default.createElement("feColorMatrix", { type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0" }),
+            react_1.default.createElement("feBlend", { mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_3060_44545" }),
+            react_1.default.createElement("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect1_dropShadow_3060_44545", result: "shape" })),
+        react_1.default.createElement("filter", { id: "filter2_d_3060_44545", x: "14", y: "7", width: "5", height: "6.30682", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB" },
+            react_1.default.createElement("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }),
+            react_1.default.createElement("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }),
+            react_1.default.createElement("feOffset", { dy: "1.30682" }),
+            react_1.default.createElement("feColorMatrix", { type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0" }),
+            react_1.default.createElement("feBlend", { mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_3060_44545" }),
+            react_1.default.createElement("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect1_dropShadow_3060_44545", result: "shape" })),
+        react_1.default.createElement("filter", { id: "filter3_d_3060_44545", x: "13", y: "15", width: "3", height: "4.32373", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB" },
+            react_1.default.createElement("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }),
+            react_1.default.createElement("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }),
+            react_1.default.createElement("feOffset", { dy: "1.32373" }),
+            react_1.default.createElement("feColorMatrix", { type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0" }),
+            react_1.default.createElement("feBlend", { mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_3060_44545" }),
+            react_1.default.createElement("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect1_dropShadow_3060_44545", result: "shape" })),
+        react_1.default.createElement("linearGradient", { id: "paint0_linear_3060_44545", x1: "6.54545", y1: "3.81818", x2: "17", y2: "20.1818", gradientUnits: "userSpaceOnUse" },
+            react_1.default.createElement("stop", { stopColor: "#F5D6AB" }),
+            react_1.default.createElement("stop", { offset: "0.251162", stopColor: "#F895A7" }),
+            react_1.default.createElement("stop", { offset: "0.585", stopColor: "#77A1F1" }),
+            react_1.default.createElement("stop", { offset: "0.861262", stopColor: "#68C8FF" })),
+        react_1.default.createElement("clipPath", { id: "clip0_3060_44545" },
+            react_1.default.createElement("rect", { width: "24", height: "24", fill: "white" })))));

package/lib/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useExtensionNames';
+export * from './useExpandedSelection';

package/lib/hooks/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("./useExtensionNames"), exports);
+__exportStar(require("./useExpandedSelection"), exports);

package/lib/hooks/useExpandedSelection.d.ts

@@ -0,0 +1,23 @@
+import { Selection } from '@remirror/core';
+import { Mark, MarkType } from 'remirror';
+export type ExpandedSelection = {
+    selection: Selection;
+    marks: Mark[];
+};
+/**
+ * Returns a single range that is either:
+ * 1. The current selection if the current selection does not contain any of the indicated marks.
+ * 2. An expanded version of the current selection if the range contains any of the indicated marks.
+ *
+ * For example, given the content:
+ *
+ * <strong>Bold</strong> regular <u>underline</u> <u>more underline</u>
+ *
+ * If the marks passed in are 'bold' and 'underline' and the text "old regular under" is selected
+ * the returned range will be "Bold regular underline".
+ *
+ * @param {(MarkType|string)[]} markTypes
+ *
+ * @return {ExpandedSelection}
+ */
+export declare const useExpandedSelection: (markTypes: (MarkType | string)[]) => ExpandedSelection;

package/lib/hooks/useExpandedSelection.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useExpandedSelection = void 0;
+const remirror_1 = require("remirror");
+const react_1 = require("@remirror/react");
+/**
+ * Returns a single range that is either:
+ * 1. The current selection if the current selection does not contain any of the indicated marks.
+ * 2. An expanded version of the current selection if the range contains any of the indicated marks.
+ *
+ * For example, given the content:
+ *
+ * <strong>Bold</strong> regular <u>underline</u> <u>more underline</u>
+ *
+ * If the marks passed in are 'bold' and 'underline' and the text "old regular under" is selected
+ * the returned range will be "Bold regular underline".
+ *
+ * @param {(MarkType|string)[]} markTypes
+ *
+ * @return {ExpandedSelection}
+ */
+const useExpandedSelection = (markTypes) => {
+    const { doc, selection } = (0, react_1.useEditorState)();
+    const ranges = [];
+    markTypes.forEach((markType) => {
+        ranges.push(...(0, remirror_1.getMarkRanges)(selection, markType));
+    });
+    if (ranges.length === 0) {
+        return { selection, marks: [] };
+    }
+    // work out the start position of the first link and end position of the last link in the selection.
+    const from = Math.min(selection.from, ...ranges.map((range) => range.from));
+    const to = Math.max(selection.to, ...ranges.map((range) => range.to));
+    const marks = ranges.map((range) => range.mark);
+    return { selection: (0, remirror_1.getTextSelection)({ from, to }, doc), marks };
+};
+exports.useExpandedSelection = useExpandedSelection;

package/lib/hooks/useExtensionNames.d.ts

@@ -0,0 +1 @@
+export declare const useExtensionNames: () => Record<string, true>;

package/lib/hooks/useExtensionNames.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useExtensionNames = void 0;
+const react_1 = require("@remirror/react");
+const react_2 = require("react");
+const useExtensionNames = () => {
+    const { manager } = (0, react_1.useRemirrorContext)();
+    return (0, react_2.useMemo)(() => {
+        const extensionNames = {};
+        manager.extensions.forEach((extension) => {
+            extensionNames[extension.name] = true;
+        });
+        return extensionNames;
+    }, [manager]);
+};
+exports.useExtensionNames = useExtensionNames;

package/lib/hooks/useFocus.d.ts

@@ -0,0 +1,8 @@
+import { FocusEvent, FocusEventHandler, RefObject } from 'react';
+declare const useFocus: (initialState: boolean) => {
+    handleFocus: (event: FocusEvent) => void;
+    handleBlur: FocusEventHandler<HTMLDivElement>;
+    isVisible: boolean;
+    wrapperRef: RefObject<HTMLDivElement>;
+};
+export default useFocus;

package/lib/hooks/useFocus.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const useFocus = (initialState) => {
+    const wrapperRef = (0, react_1.createRef)();
+    const [isVisible, setIsVisible] = (0, react_1.useState)(initialState);
+    const handleFocus = (0, react_1.useCallback)((event) => {
+        // Ignore elements flagged to be ignored, this allows us to add extra, clickable, elements
+        // without triggering a focus, such as action menus.
+        if (!event.target?.classList?.contains('fte-ignore') && !event.target?.closest('.fte-ignore')) {
+            setIsVisible(true);
+        }
+    }, [wrapperRef]);
+    const handleBlur = (0, react_1.useCallback)((event) => {
+        // React event bubbling is interesting, it bubbles up the React tree rather than the DOM tree.
+        // The tree deviates when rendering portals (eg. for modals).
+        //
+        // Only hide the toolbar if:
+        // 1. We are blurring a node in the editor **DOM** tree.
+        // 2. We are focusing on something that is not in the editor DOM tree
+        //    (elements in the portal won't be in the tree but don't influence the focus state per #1).
+        //
+        // This avoids the scenario where an element in a portal is blurred and another one in the portal focused.
+        // Without this logic the blur and focus handlers are called (in that order). The impact of these handlers being
+        // called is that the "isFocused" state changes inconsistently. This state changing then causes subtle issues.
+        // eg. unable to drill down in resource browser, toolbar appearing/disappearing.
+        //
+        // Ideally we would instead solely seeing if the "relatedTarget" is in the React tree. This isn't easily
+        // identifiable however without reaching into React internals.
+        //
+        // An assumption here is that anything in a portal will only blur to another element that is also in the portal
+        // (and therefore still in our React tree resulting in the element still effectively being focused).
+        const isBlurringEditor = wrapperRef.current?.contains(event.target);
+        const isFocusedInEditor = wrapperRef.current?.contains(event.relatedTarget);
+        // Detect if the blur event happens when the related/clicked target is the floating popover
+        const isClickingFloatingToolbar = !!event.relatedTarget?.closest('.squiz-fte-scope__floating-popover');
+        if (isBlurringEditor && !isFocusedInEditor && !isClickingFloatingToolbar) {
+            setIsVisible(false);
+        }
+    }, [wrapperRef]);
+    return { handleFocus, handleBlur, isVisible, wrapperRef };
+};
+exports.default = useFocus;