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

package/lib/ui/Inputs/Select/Select.js

@@ -1,23 +1,53 @@
-import { Listbox } from '@headlessui/react';
-import React, { useState } from 'react';
-import clsx from 'clsx';
-import ExpandMoreRoundedIcon from '@mui/icons-material/ExpandMoreRounded';
-import ExpandLessRoundedIcon from '@mui/icons-material/ExpandLessRounded';
-export const Select = ({ name, label, value, onChange, options }) => {
-    const [selectedOption, setSelectedOptions] = useState(value ? options[value] : null);
+"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.createElement(Listbox, { value: value, name: name, "aria-labelledby": name, onChange: handleChange }, ({ open }) => (React.createElement(React.Fragment, null,
-        label && React.createElement(Listbox.Label, { className: "squiz-fte-form-label" }, label),
-        React.createElement("div", { className: "relative text-md text-gray-800" },
-            React.createElement(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.createElement("span", { className: "flex items-center" },
-                    React.createElement("span", { className: "block truncate" },
+    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.createElement("span", { className: "pointer-events-none absolute inset-y-0 right-0 ml-3 flex items-center pr-2" }, !open ? (React.createElement(ExpandMoreRoundedIcon, { className: "text-gray-500", "aria-hidden": "true" })) : (React.createElement(ExpandLessRoundedIcon, { className: "text-gray-500", "aria-hidden": "true" })))),
-            React.createElement(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.createElement(Listbox.Option, { key: key, value: key, className: ({ active }) => clsx(active ? 'bg-gray-100' : 'bg-white', 'relative cursor-default select-none flex hover:bg-gray-100 py-2 px-3') },
-                React.createElement("span", { className: "block truncate" }, option.label))))))))));
+                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/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", { 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/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", 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/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.2",
   "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": "094356f01a017174820505681d5dfc4a2ee9428b"
 }

package/src/EditorToolbar/FloatingToolbar.tsx

@@ -27,7 +27,7 @@ export const FloatingToolbar = () => {
   } else if (!data.marks?.link.isActive) {
     // if none of the selected text is a link show the option to create a link.
     buttons.push(
-      <VerticalDivider key="link-divider" className="link-divider" />,
+      <VerticalDivider key="link-divider" className="editor-divider" />,
       <LinkButton key="add-link" inPopover={true} />,
     );
   }

package/src/EditorToolbar/_toolbar.scss

@@ -1,16 +1,16 @@
-.formatted-text-editor .editor-toolbar {
+.editor-toolbar {
   @apply bg-white border-gray-200 border-b-2 border-solid p-1;
 
   display: flex;
   justify-items: center;
 
-  > *:not(:first-child) {
+  > *:not(:first-child, .editor-divider) {
     margin: 0 0 0 2px;
   }
+}
 
-  .editor-divider {
-    @apply -my-1 mx-1 border;
-    margin-right: 2px;
-    height: auto;
-  }
+.editor-divider {
+  @apply -my-1 mx-1 border;
+  margin-right: 2px;
+  height: auto;
 }

package/src/Extensions/LinkExtension/LinkExtension.ts

@@ -1,5 +1,5 @@
 import { ApplySchemaAttributes, getMarkRanges, isElementDomNode, MarkExtensionSpec, MarkSpecOverride } from 'remirror';
-import { getTextSelection, getMarkRange, KeyBindingProps, updateMark, removeMark } from '@remirror/core';
+import { getTextSelection, getMarkRange, KeyBindingProps } from '@remirror/core';
 import { CommandFunction } from '@remirror/pm';
 import { LinkAttributes as RemirrorLinkAttributes, LinkExtension as RemirrorLinkExtension } from 'remirror/extensions';
 
@@ -95,19 +95,22 @@ export class LinkExtension extends RemirrorLinkExtension {
 
       if (text !== selectedText) {
         // update the text in the editor if it was updated, update the range to cover the length of the new text.
-        dispatch?.(tr.insertText(text));
+        tr.insertText(text);
         range.to = range.from + text.length;
       }
 
       // apply the link, or remove it if no URL was provided.
       if (attrs.href.length > 0) {
-        updateMark({ type: this.type, attrs, range })(props);
+        tr.addMark(range.from, range.to, this.type.create(attrs));
       } else {
-        removeMark({ type: this.type, range })(props);
+        tr.removeMark(range.from, range.to, this.type);
       }
 
       // move the cursor to the end of the link and re-focus the editor.
-      dispatch?.(tr.setSelection(getTextSelection({ from: range.to, to: range.to }, tr.doc)));
+      tr.setSelection(getTextSelection({ from: range.to, to: range.to }, tr.doc));
+
+      // apply the transaction.
+      dispatch?.(tr);
       view?.focus();
 
       return true;

package/src/ui/Modal/Modal.tsx

@@ -56,6 +56,7 @@ const Modal = (
               <div className="squiz-fte-modal-header p-6 pb-2">
                 <h2 className="font-semibold text-gray-900 text-heading-2">{title}</h2>
                 <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"

package/src/ui/ToolbarDropdown/ToolbarDropdown.spec.tsx

@@ -2,13 +2,14 @@ import '@testing-library/jest-dom';
 import { fireEvent, render, screen } from '@testing-library/react';
 import React from 'react';
 import ToolbarDropdown from './ToolbarDropdown';
+import ToolbarDropdownButton from '../ToolbarDropdownButton/ToolbarDropdownButton';
 
 describe('Toolbar dropdown', () => {
   const ToolbarDropdownComponent = () => {
     return (
       <ToolbarDropdown label="Test dropdown">
-        <button>Test button</button>
-        <button>Test button 2</button>
+        <ToolbarDropdownButton label="Test button" isDisabled={false} isActive={false} handleOnClick={jest.fn()} />
+        <ToolbarDropdownButton label="Test button 2" isDisabled={false} isActive={false} handleOnClick={jest.fn()} />
       </ToolbarDropdown>
     );
   };
@@ -17,6 +18,7 @@ describe('Toolbar dropdown', () => {
     render(<ToolbarDropdownComponent />);
     // Check that the supplied label renders
     const dropdownButton = screen.getByRole('button', { name: 'Test dropdown' });
+    expect(dropdownButton).toHaveAttribute('type', 'button');
     expect(dropdownButton).toBeInTheDocument();
   });
 

package/src/ui/ToolbarDropdown/ToolbarDropdown.tsx

@@ -21,7 +21,7 @@ const ToolbarDropdown = ({ children, label }: ToolbarDropdownProps) => {
 
   return (
     <div className="toolbar-dropdown" onBlur={handleBlur}>
-      <button id="dropdownHoverButton" className="toolbar-dropdown__button" onClick={handleDropDown}>
+      <button id="dropdownHoverButton" className="toolbar-dropdown__button" type="button" onClick={handleDropDown}>
         <span className="toolbar-dropdown__label">{label}</span>
         <ExpandMoreIcon className="toolbar-dropdown__icon" aria-hidden="true" />
       </button>

package/tsconfig.json

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