@squiz/formatted-text-editor 1.16.0 → 1.21.1-alpha.10

package/lib/ui/Fields/Select/Select.js

@@ -0,0 +1,53 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Select = void 0;
+const react_1 = require("@headlessui/react");
+const react_2 = __importStar(require("react"));
+const clsx_1 = __importDefault(require("clsx"));
+const ExpandMoreRounded_1 = __importDefault(require("@mui/icons-material/ExpandMoreRounded"));
+const ExpandLessRounded_1 = __importDefault(require("@mui/icons-material/ExpandLessRounded"));
+const Select = ({ name, label, value, onChange, options }) => {
+    const [selectedOption, setSelectedOptions] = (0, react_2.useState)(value ? options[value] : null);
+    const handleChange = (value) => {
+        setSelectedOptions(options[value]);
+        onChange?.(value);
+    };
+    return (react_2.default.createElement(react_1.Listbox, { value: value, name: name, "aria-labelledby": name, onChange: handleChange }, ({ open }) => (react_2.default.createElement(react_2.default.Fragment, null,
+        label && react_2.default.createElement(react_1.Listbox.Label, { className: "squiz-fte-form-label" }, label),
+        react_2.default.createElement("div", { className: "relative text-md text-gray-800" },
+            react_2.default.createElement(react_1.Listbox.Button, { className: "w-full cursor-default rounded border-2 border-gray-300 bg-white py-2 pl-3 pr-10 focus:border-blue-300 focus:outline-none" },
+                react_2.default.createElement("span", { className: "flex items-center" },
+                    react_2.default.createElement("span", { className: "block truncate" },
+                        selectedOption?.label,
+                        "\u00A0")),
+                react_2.default.createElement("span", { className: "pointer-events-none absolute inset-y-0 right-0 ml-3 flex items-center pr-2" }, !open ? (react_2.default.createElement(ExpandMoreRounded_1.default, { className: "text-gray-500", "aria-hidden": "true" })) : (react_2.default.createElement(ExpandLessRounded_1.default, { className: "text-gray-500", "aria-hidden": "true" })))),
+            react_2.default.createElement(react_1.Listbox.Options, { className: "absolute z-10 mt-1 w-full overflow-auto rounded border-2 border-gray-300 bg-white" }, Object.entries(options).map(([key, option]) => (react_2.default.createElement(react_1.Listbox.Option, { key: key, value: key, className: ({ active }) => (0, clsx_1.default)(active ? 'bg-gray-100' : 'bg-white', 'relative cursor-default select-none flex hover:bg-gray-100 py-2 px-3') },
+                react_2.default.createElement("span", { className: "block truncate" }, option.label))))))))));
+};
+exports.Select = Select;

package/lib/ui/Modal/FormModal.js

@@ -1,11 +1,39 @@
-import React, { createRef } from 'react';
-import Modal from './Modal';
+"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 = __importStar(require("react"));
+const Modal_1 = __importDefault(require("./Modal"));
 const FormModal = (props) => {
-    const ref = createRef();
+    const ref = (0, react_1.createRef)();
     const handleSubmit = () => {
         const form = ref.current?.querySelector('form');
         form?.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }));
     };
-    return React.createElement(Modal, { ref: ref, ...props, onSubmit: handleSubmit });
+    return react_1.default.createElement(Modal_1.default, { ref: ref, ...props, onSubmit: handleSubmit });
 };
-export default FormModal;
+exports.default = FormModal;

package/lib/ui/Modal/Modal.js

@@ -1,9 +1,37 @@
-import React, { forwardRef, useEffect, useMemo } from 'react';
-import { createPortal } from 'react-dom';
-import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
-import { FocusTrap } from '@mui/base';
+"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 = __importStar(require("react"));
+const react_dom_1 = require("react-dom");
+const CloseRounded_1 = __importDefault(require("@mui/icons-material/CloseRounded"));
+const base_1 = require("@mui/base");
 const Modal = ({ children, title, onCancel, onSubmit, className }, ref) => {
-    const container = useMemo(() => {
+    const container = (0, react_1.useMemo)(() => {
         const element = document.createElement('div');
         element.classList.add('squiz-fte-scope');
         return element;
@@ -17,12 +45,12 @@ const Modal = ({ children, title, onCancel, onSubmit, className }, ref) => {
         }
     };
     // register key listeners for Enter/Escape on key up so the editor doesn't handle the event as well
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
         window.addEventListener('keyup', keydown);
         return () => window.removeEventListener('keyup', keydown);
     }, []);
     // add/remove the modal container from the DOM and focus on the first input
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
         const firstInput = container.querySelector('input:not([type=hidden])');
         document.body.appendChild(container);
         firstInput?.focus();
@@ -30,19 +58,19 @@ const Modal = ({ children, title, onCancel, onSubmit, className }, ref) => {
             document.body.removeChild(container);
         };
     }, [container]);
-    return createPortal(React.createElement(React.Fragment, null,
-        React.createElement(FocusTrap, { open: true },
-            React.createElement("div", { ref: ref, className: `squiz-fte-modal-wrapper ${className ? className : ''}`, tabIndex: -1 },
-                React.createElement("div", { className: "w-modal-sm my-6 mx-auto" },
-                    React.createElement("div", { className: "squiz-fte-modal" },
-                        React.createElement("div", { className: "squiz-fte-modal-header p-6 pb-2" },
-                            React.createElement("h2", { className: "font-semibold text-gray-900 text-heading-2" }, title),
-                            React.createElement("button", { className: "ml-auto -mr-3 -mt-3 bg-transparent border-0 text-gray-600 font-semibold outline-none focus:outline-none hover:text-color-gray-800", onClick: onCancel, "aria-label": "Close" },
-                                React.createElement(CloseRoundedIcon, null))),
-                        React.createElement("div", { className: "squiz-fte-modal-content" }, children),
-                        React.createElement("div", { className: "squiz-fte-modal-footer p-6 pt-3" },
-                            React.createElement("button", { className: "squiz-fte-modal-footer__button bg-gray-200 text-gray-700 mr-2 hover:bg-gray-300", type: "button", onClick: onCancel, "aria-label": "Cancel" }, "Cancel"),
-                            onSubmit && (React.createElement("button", { className: "squiz-fte-modal-footer__button bg-blue-300 text-white hover:bg-blue-400", type: "button", onClick: onSubmit, "aria-label": "Apply" }, "Apply"))))))),
-        React.createElement("div", { className: "opacity-25 fixed inset-0 z-40 bg-black" })), container);
+    return (0, react_dom_1.createPortal)(react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(base_1.FocusTrap, { open: true },
+            react_1.default.createElement("div", { ref: ref, className: `squiz-fte-modal-wrapper ${className ? className : ''}`, tabIndex: -1 },
+                react_1.default.createElement("div", { className: "w-modal-sm my-6 mx-auto" },
+                    react_1.default.createElement("div", { className: "squiz-fte-modal" },
+                        react_1.default.createElement("div", { className: "squiz-fte-modal-header p-6 pb-2" },
+                            react_1.default.createElement("h2", { className: "font-semibold text-gray-900 text-heading-2" }, title),
+                            react_1.default.createElement("button", { type: "button", className: "ml-auto -mr-3 -mt-3 bg-transparent border-0 text-gray-600 font-semibold outline-none focus:outline-none hover:text-color-gray-800", onClick: onCancel, "aria-label": "Close" },
+                                react_1.default.createElement(CloseRounded_1.default, null))),
+                        react_1.default.createElement("div", { className: "squiz-fte-modal-content" }, children),
+                        react_1.default.createElement("div", { className: "squiz-fte-modal-footer p-6 pt-3" },
+                            react_1.default.createElement("button", { className: "squiz-fte-modal-footer__button bg-gray-200 text-gray-700 mr-2 hover:bg-gray-300", type: "button", onClick: onCancel, "aria-label": "Cancel" }, "Cancel"),
+                            onSubmit && (react_1.default.createElement("button", { className: "squiz-fte-modal-footer__button bg-blue-300 text-white hover:bg-blue-400", type: "button", onClick: onSubmit, "aria-label": "Apply" }, "Apply"))))))),
+        react_1.default.createElement("div", { className: "opacity-25 fixed inset-0 z-40 bg-black" })), container);
 };
-export default forwardRef(Modal);
+exports.default = (0, react_1.forwardRef)(Modal);

package/lib/ui/ToolbarDropdown/ToolbarDropdown.js

@@ -1,7 +1,35 @@
-import React, { useState } from 'react';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+"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 = __importStar(require("react"));
+const ExpandMore_1 = __importDefault(require("@mui/icons-material/ExpandMore"));
 const ToolbarDropdown = ({ children, label }) => {
-    const [isOpen, setOpen] = useState(false);
+    const [isOpen, setOpen] = (0, react_1.useState)(false);
     const handleDropDown = () => {
         setOpen(!isOpen);
     };
@@ -10,11 +38,11 @@ const ToolbarDropdown = ({ children, label }) => {
             isOpen && handleDropDown();
         }
     };
-    return (React.createElement("div", { className: "toolbar-dropdown", onBlur: handleBlur },
-        React.createElement("button", { id: "dropdownHoverButton", className: "toolbar-dropdown__button", onClick: handleDropDown },
-            React.createElement("span", { className: "toolbar-dropdown__label" }, label),
-            React.createElement(ExpandMoreIcon, { className: "toolbar-dropdown__icon", "aria-hidden": "true" })),
-        React.createElement("div", { id: "dropdown", className: `toolbar-dropdown__menu z-10 ${isOpen ? 'block' : 'hidden'} bg-white divide-y w-169` },
-            React.createElement("ul", { "aria-labelledby": "dropdownHoverButton", onClick: handleDropDown }, children))));
+    return (react_1.default.createElement("div", { className: "toolbar-dropdown", onBlur: handleBlur },
+        react_1.default.createElement("button", { id: "dropdownHoverButton", className: "toolbar-dropdown__button", type: "button", onClick: handleDropDown },
+            react_1.default.createElement("span", { className: "toolbar-dropdown__label" }, label),
+            react_1.default.createElement(ExpandMore_1.default, { className: "toolbar-dropdown__icon", "aria-hidden": "true" })),
+        react_1.default.createElement("div", { id: "dropdown", className: `toolbar-dropdown__menu z-10 ${isOpen ? 'block' : 'hidden'} bg-white divide-y w-169` },
+            react_1.default.createElement("ul", { "aria-labelledby": "dropdownHoverButton", onClick: handleDropDown }, children))));
 };
-export default ToolbarDropdown;
+exports.default = ToolbarDropdown;

package/lib/ui/ToolbarDropdownButton/ToolbarDropdownButton.js

@@ -1,8 +1,13 @@
-import React from 'react';
-import CheckIcon from '@mui/icons-material/Check';
+"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 Check_1 = __importDefault(require("@mui/icons-material/Check"));
 const DropdownButton = ({ children, handleOnClick, isDisabled, isActive, label }) => {
-    return (React.createElement("button", { "aria-label": label, id: "dropdownMenuButton", title: label, type: "button", onClick: handleOnClick, disabled: isDisabled, className: `btn dropdown-button ${isActive ? 'is-active' : ''}` },
-        React.createElement("span", null, children || label),
-        isActive && React.createElement(CheckIcon, { className: "dropdown-button-icon" })));
+    return (react_1.default.createElement("button", { "aria-label": label, id: "dropdownMenuButton", title: label, type: "button", onClick: handleOnClick, disabled: isDisabled, className: `btn dropdown-button ${isActive ? 'is-active' : ''}` },
+        react_1.default.createElement("span", null, children || label),
+        isActive && react_1.default.createElement(Check_1.default, { className: "dropdown-button-icon" })));
 };
-export default DropdownButton;
+exports.default = DropdownButton;

package/lib/utils/converters/remirrorNodeToSquizNode/remirrorNodeToSquizNode.d.ts

@@ -0,0 +1,10 @@
+import { ProsemirrorNode } from 'remirror';
+import { FORMATTED_TEXT_MODELS as FormattedTextModels } from '@squiz/dx-json-schema-lib';
+export declare const resolveNodeTag: (node: ProsemirrorNode) => string | null;
+/**
+ * Converts Remirror node JSON structure to Squiz component JSON structure.
+ * @param {ProsemirrorNode} node Remirror node to convert to component.
+ * @export
+ * @returns {FormattedText} The converted Squiz component JSON.
+ */
+export declare const remirrorNodeToSquizNode: (node: ProsemirrorNode) => FormattedTextModels.v1.FormattedText;

package/lib/utils/converters/remirrorNodeToSquizNode/remirrorNodeToSquizNode.js

@@ -0,0 +1,160 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.remirrorNodeToSquizNode = exports.resolveNodeTag = void 0;
+const validNodeTypes_1 = require("../validNodeTypes");
+const resolveNodeTag = (node) => {
+    if (node.type.spec?.toDOM) {
+        const domNode = node.type.spec.toDOM(node);
+        if (domNode instanceof window.Node) {
+            return domNode.nodeName.toLowerCase();
+        }
+        if (domNode?.dom instanceof window.Node) {
+            return domNode.dom.nodeName.toLowerCase();
+        }
+        if (domNode instanceof Array) {
+            // [ tag, attributes, ...children ]
+            return domNode[0].toLowerCase();
+        }
+    }
+    return null;
+};
+exports.resolveNodeTag = resolveNodeTag;
+const resolveFormattingOptions = (node) => {
+    const formattingOptions = {};
+    if (node.attrs.nodeTextAlignment) {
+        formattingOptions.alignment = node.attrs.nodeTextAlignment;
+    }
+    return formattingOptions;
+};
+const resolveFontOptions = (node) => {
+    const fontOptions = {};
+    node.marks.forEach((mark) => {
+        switch (mark.type.name) {
+            case 'bold':
+                fontOptions.bold = true;
+                break;
+            case 'italic':
+                fontOptions.italics = true;
+                break;
+            case 'underline':
+                fontOptions.underline = true;
+                break;
+            default:
+                // Currently unsupported mark type
+                break;
+        }
+    });
+    return fontOptions;
+};
+const resolveAttributeOptions = (node, nodeType) => {
+    let attributeOptions = {};
+    if (nodeType === 'image') {
+        attributeOptions = { ...node.attrs };
+    }
+    else {
+        node.marks.forEach((mark) => {
+            switch (mark.type.name) {
+                case 'link':
+                    attributeOptions = { ...mark.attrs };
+                    break;
+                default:
+                    // Currently unsupported mark type
+                    break;
+            }
+        });
+    }
+    // Remove any non string elements from attributes, squiz component only accepts strings.
+    Object.keys(attributeOptions).forEach((key) => {
+        if (typeof attributeOptions[key] !== 'string' && typeof attributeOptions[key] !== 'number') {
+            delete attributeOptions[key];
+            // If it's a number we make it a string so its accepted by component service
+        }
+        else {
+            attributeOptions[key] = String(attributeOptions[key]);
+        }
+    });
+    return attributeOptions;
+};
+/**
+ * Converts Remirror node JSON structure to Squiz component JSON structure.
+ * @param {ProsemirrorNode} node Remirror node to convert to component.
+ * @export
+ * @returns {FormattedText} The converted Squiz component JSON.
+ */
+const remirrorNodeToSquizNode = (node) => {
+    if (!(0, validNodeTypes_1.validRemirrorNode)(node))
+        return [];
+    const nodeType = node.type.name;
+    let nodeTag = (0, exports.resolveNodeTag)(node);
+    // Filter out any children nodes that aren't currently supported.
+    const children = (node.content.content || []).map((child) => (0, exports.remirrorNodeToSquizNode)(child));
+    let transformed = {
+        children,
+        formattingOptions: resolveFormattingOptions(node),
+        attributes: resolveAttributeOptions(node, nodeType),
+        font: resolveFontOptions(node),
+    };
+    if (nodeType === 'doc') {
+        return transformed.children;
+    }
+    // If we don't have a node tag yet, check if there is one needed
+    if (!nodeTag) {
+        node.marks.forEach((mark) => {
+            switch (mark.type.name) {
+                case 'link':
+                    nodeTag = 'a';
+                    break;
+                default:
+                    // Currently unsupported mark type
+                    break;
+            }
+        });
+    }
+    if (nodeTag) {
+        transformed = {
+            ...transformed,
+            type: 'tag',
+            tag: nodeTag,
+        };
+    }
+    if ((Object.keys(transformed.font).length > 0 || Object.keys(transformed.attributes).length > 0) &&
+        !transformed.type) {
+        // Wrap in span so we can apply formatting to it
+        transformed = { ...transformed, tag: 'span', type: 'tag' };
+    }
+    if (nodeType === 'text') {
+        if (transformed.type) {
+            // If we have a tag already nest the text beneath it so we can preserve formatting options, etc.
+            transformed = {
+                ...transformed,
+                children: [
+                    {
+                        type: 'text',
+                        value: node.text,
+                    },
+                ],
+            };
+        }
+        else {
+            // If we don't have a tag just rewrite the transformed value to be the text.
+            transformed = {
+                type: 'text',
+                value: node.text,
+            };
+        }
+    }
+    // Remove empty formatting options from transformed object.
+    if (transformed.formattingOptions && Object.keys(transformed.formattingOptions).length === 0) {
+        delete transformed.formattingOptions;
+    }
+    // Remove empty font options from transformed object.
+    if (transformed.font && Object.keys(transformed.font).length === 0) {
+        delete transformed.font;
+    }
+    // Remove empty attributes options from transformed object.
+    if (transformed.attributes && Object.keys(transformed.attributes).length === 0) {
+        delete transformed.attributes;
+    }
+    return transformed;
+};
+exports.remirrorNodeToSquizNode = remirrorNodeToSquizNode;

package/lib/utils/converters/squizNodeToRemirrorNode/squizNodeToRemirrorNode.d.ts

@@ -0,0 +1,9 @@
+import { RemirrorJSON } from '@remirror/core';
+import { FORMATTED_TEXT_MODELS as FormattedTextModels } from '@squiz/dx-json-schema-lib';
+/**
+ * Converts Squiz component JSON structure to Remirror node JSON structure.
+ * @param {FormattedText} nodes Squiz nodes to convert to Remirror.
+ * @export
+ * @returns {RemirrorJSON} The converted Remirror JSON.
+ */
+export declare const squizNodeToRemirrorNode: (nodes: FormattedTextModels.v1.FormattedText) => RemirrorJSON;

package/lib/utils/converters/squizNodeToRemirrorNode/squizNodeToRemirrorNode.js

@@ -0,0 +1,105 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.squizNodeToRemirrorNode = void 0;
+const getNodeType = (node) => {
+    const nodeTypeMap = {
+        h1: 'heading',
+        h2: 'heading',
+        h3: 'heading',
+        h4: 'heading',
+        h5: 'heading',
+        h6: 'heading',
+        img: 'image',
+        pre: 'preformatted',
+        p: 'paragraph',
+        text: 'paragraph',
+    };
+    const nodeType = nodeTypeMap[node.tag || node.type];
+    // Unsupported node type
+    if (!nodeType)
+        throw new Error(`Unsupported node type provided: ${node.tag}`);
+    return nodeType;
+};
+const getNodeAttributes = (node) => {
+    const { alignment } = node.formattingOptions || {};
+    return {
+        nodeIndent: null,
+        nodeTextAlignment: alignment ?? null,
+        nodeLineHeight: null,
+        style: '',
+        level: node.tag?.startsWith('h') ? parseInt(node.tag.substring(1)) : undefined,
+    };
+};
+const resolveChild = (child) => {
+    if (child.type === 'text') {
+        return { type: 'text', text: child.value };
+    }
+    let text = '';
+    const marks = [];
+    if (child.type === 'tag') {
+        // Handle link type
+        if (child.tag === 'a') {
+            marks.push({
+                type: 'link',
+                attrs: {
+                    href: child.attributes?.href,
+                    target: child.attributes?.target ?? null,
+                    auto: false,
+                    title: child.attributes?.title ?? null,
+                },
+            });
+        }
+        // Handle image type
+        if (child.tag === 'img') {
+            return {
+                type: 'image',
+                attrs: {
+                    alt: child.attributes?.alt,
+                    height: child.attributes?.height,
+                    width: child.attributes?.width,
+                    src: child.attributes?.src,
+                    title: child.attributes?.title,
+                },
+            };
+        }
+        // Handle font formatting
+        child.font?.bold && marks.push({ type: 'bold' });
+        child.font?.italics && marks.push({ type: 'italic' });
+        child.font?.underline && marks.push({ type: 'underline' });
+        // For now all children types should be "text"
+        text = child.children[0].type === 'text' ? child.children[0].value : '';
+    }
+    return { type: 'text', marks, text };
+};
+const formatNode = (node) => {
+    let content;
+    if (node.type === 'tag') {
+        content = node.children.length ? node.children.map((child) => resolveChild(child)) : undefined;
+    }
+    if (node.type === 'text') {
+        content = [
+            {
+                type: 'text',
+                text: node.value,
+            },
+        ];
+    }
+    return {
+        type: getNodeType(node),
+        attrs: getNodeAttributes(node),
+        content,
+    };
+};
+/**
+ * Converts Squiz component JSON structure to Remirror node JSON structure.
+ * @param {FormattedText} nodes Squiz nodes to convert to Remirror.
+ * @export
+ * @returns {RemirrorJSON} The converted Remirror JSON.
+ */
+const squizNodeToRemirrorNode = (nodes) => {
+    return {
+        type: 'doc',
+        content: nodes.filter((node) => getNodeType(node)).map(formatNode),
+    };
+};
+exports.squizNodeToRemirrorNode = squizNodeToRemirrorNode;

package/lib/utils/converters/validNodeTypes.d.ts

@@ -0,0 +1,2 @@
+import { ProsemirrorNode } from 'remirror';
+export declare const validRemirrorNode: (node: ProsemirrorNode) => boolean;

package/lib/utils/converters/validNodeTypes.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.validRemirrorNode = void 0;
+const Extensions_1 = require("../../Extensions/Extensions");
+const validRemirrorNode = (node) => {
+    if (!node)
+        return false;
+    const nodeType = node.type.name;
+    const nodeMarks = node.marks;
+    // This is pulling in the currently supported extensions, this works for now...
+    // Could also just hard code these in as we go, but this should make it easier as we add more extensions
+    const supportedNodes = [...(0, Extensions_1.Extensions)().map((extension) => extension.name), 'doc', 'text'];
+    if (!supportedNodes.includes(nodeType))
+        return false;
+    for (let i = 0; i < nodeMarks.length; i++) {
+        if (!supportedNodes.includes(nodeMarks[i].type.name))
+            return false;
+    }
+    return true;
+};
+exports.validRemirrorNode = validRemirrorNode;

package/lib/utils/createToolbarPositioner.js

@@ -1,27 +1,30 @@
-import { hasStateChanged, isPositionVisible, Positioner } from 'remirror/extensions';
-import { getMarkRange, getTextSelection } from 'remirror';
-import { getCursorRect } from './getCursorRect';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createToolbarPositioner = void 0;
+const extensions_1 = require("remirror/extensions");
+const remirror_1 = require("remirror");
+const getCursorRect_1 = require("./getCursorRect");
 /* istanbul ignore next */
-export const createToolbarPositioner = ({ types }) => {
+const createToolbarPositioner = ({ types }) => {
     // Inspired by "createMarkPositioner".
     // See: https://github.com/remirror/remirror/blob/107cba/packages/remirror__extension-positioner/src/core-positioners.ts#L267
-    return Positioner.create({
-        hasChanged: hasStateChanged,
+    return extensions_1.Positioner.create({
+        hasChanged: extensions_1.hasStateChanged,
         getActive: (props) => {
             const { state, view } = props;
             try {
-                const selection = getTextSelection(state.selection, state.doc);
+                const selection = (0, remirror_1.getTextSelection)(state.selection, state.doc);
                 const cursor = { from: view.coordsAtPos(selection.from), to: view.coordsAtPos(selection.to) };
                 const data = {
-                    isSelectionInView: isPositionVisible(getCursorRect(cursor.from), view.dom) ||
-                        isPositionVisible(getCursorRect(cursor.to), view.dom),
+                    isSelectionInView: (0, extensions_1.isPositionVisible)((0, getCursorRect_1.getCursorRect)(cursor.from), view.dom) ||
+                        (0, extensions_1.isPositionVisible)((0, getCursorRect_1.getCursorRect)(cursor.to), view.dom),
                     cursor: cursor,
                     visible: false,
                     marks: {},
                 };
                 data.visible = !selection.empty && data.isSelectionInView;
                 types.forEach((type) => {
-                    const markRange = getMarkRange(selection.$from, type, selection.$to);
+                    const markRange = (0, remirror_1.getMarkRange)(selection.$from, type, selection.$to);
                     if (!markRange) {
                         data.marks[type] = { isActive: false, isExclusivelyActive: false };
                         return;
@@ -41,10 +44,10 @@ export const createToolbarPositioner = ({ types }) => {
                     data.visible = data.visible || isExclusivelyActive;
                     data.marks[type] = { isExclusivelyActive, isActive };
                 });
-                return data.visible ? [data] : Positioner.EMPTY;
+                return data.visible ? [data] : extensions_1.Positioner.EMPTY;
             }
             catch {
-                return Positioner.EMPTY;
+                return extensions_1.Positioner.EMPTY;
             }
         },
         getPosition: (props) => {
@@ -79,3 +82,4 @@ export const createToolbarPositioner = ({ types }) => {
         },
     });
 };
+exports.createToolbarPositioner = createToolbarPositioner;