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

package/lib/ui/Inputs/Text/TextInput.js

@@ -1,7 +1,33 @@
-import React, { forwardRef } from 'react';
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextInput = void 0;
+const react_1 = __importStar(require("react"));
 const TextInputInternal = ({ name, label, ...rest }, ref) => {
-    return (React.createElement(React.Fragment, null,
-        label && (React.createElement("label", { htmlFor: name, className: "squiz-fte-form-label" }, label)),
-        React.createElement("input", { ref: ref, id: name, name: name, type: "text", className: "squiz-fte-form-control", ...rest })));
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        label && (react_1.default.createElement("label", { htmlFor: name, className: "squiz-fte-form-label" }, label)),
+        react_1.default.createElement("input", { ref: ref, id: name, name: name, type: "text", className: "squiz-fte-form-control", ...rest })));
 };
-export const TextInput = forwardRef(TextInputInternal);
+exports.TextInput = (0, react_1.forwardRef)(TextInputInternal);

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", { 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/ToolbarButton/ToolbarButton.js

@@ -1,5 +1,10 @@
-import React from 'react';
+"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 ToolbarButton = ({ handleOnClick, isDisabled, isActive, icon, label }) => {
-    return (React.createElement("button", { "aria-label": label, title: label, type: "button", onClick: handleOnClick, disabled: isDisabled, className: `squiz-fte-btn toolbar-button ${isActive ? 'is-active' : ''}` }, icon));
+    return (react_1.default.createElement("button", { "aria-label": label, title: label, type: "button", onClick: handleOnClick, disabled: isDisabled, className: `squiz-fte-btn toolbar-button ${isActive ? 'is-active' : ''}` }, icon));
 };
-export default ToolbarButton;
+exports.default = ToolbarButton;

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", 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/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;

package/lib/utils/getCursorRect.js

@@ -1,3 +1,7 @@
-export const getCursorRect = (coords) => {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getCursorRect = void 0;
+const getCursorRect = (coords) => {
     return new DOMRect(coords.left, coords.top, 1, coords.top - coords.bottom);
 };
+exports.getCursorRect = getCursorRect;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squiz/formatted-text-editor",
-  "version": "1.16.0",
+  "version": "1.21.1-alpha.1",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "scripts": {
@@ -12,6 +12,7 @@
     "dev": "vite",
     "preview": "vite preview",
     "test": "jest",
+    "test:coverage": "jest --coverage",
     "test:e2e": "vite build && vite preview --port 8080 & cypress open",
     "test:watch": "jest --watch"
   },
@@ -66,5 +67,5 @@
   "volta": {
     "node": "16.19.0"
   },
-  "gitHead": "6fbf11b4507a80f8ef6dd09b489bbebf2bcfbac1"
+  "gitHead": "d6ff878afb2bd1c4d3b03b0882e5238b0f6a674e"
 }

package/tsconfig.json

@@ -10,7 +10,7 @@
     "allowSyntheticDefaultImports": true,
     "strict": true,
     "forceConsistentCasingInFileNames": true,
-    "module": "ESNext",
+    "module": "CommonJS",
     "moduleResolution": "Node",
     "resolveJsonModule": true,
     "isolatedModules": true,