@squiz/formatted-text-editor 1.21.1-alpha.3 → 1.21.1-alpha.30

package/lib/index.css

@@ -376,6 +376,10 @@
 .squiz-fte-scope .z-40 {
   z-index: 40 !important;
 }
+.squiz-fte-scope .mx-1 {
+  margin-left: 0.25rem !important;
+  margin-right: 0.25rem !important;
+}
 .squiz-fte-scope .mx-auto {
   margin-left: auto !important;
   margin-right: auto !important;
@@ -437,6 +441,12 @@
   -moz-user-select: none !important;
   user-select: none !important;
 }
+.squiz-fte-scope .flex-row {
+  flex-direction: row !important;
+}
+.squiz-fte-scope .items-end {
+  align-items: flex-end !important;
+}
 .squiz-fte-scope .items-center {
   align-items: center !important;
 }
@@ -566,6 +576,47 @@
   --tw-blur: blur(8px) !important;
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important;
 }
+.squiz-fte-scope a {
+  --tw-text-opacity: 1;
+  color: rgb(7 116 210 / var(--tw-text-opacity));
+  text-decoration: underline;
+}
+.squiz-fte-scope h1 {
+  font-size: 1.625rem;
+  font-weight: 600;
+  letter-spacing: -0.2px;
+  line-height: 2rem;
+}
+.squiz-fte-scope h2 {
+  font-size: 1.25rem;
+  font-weight: 600;
+  letter-spacing: -0.5px;
+  line-height: 1.5rem;
+}
+.squiz-fte-scope h3 {
+  font-size: 1.125rem;
+  font-weight: 600;
+  letter-spacing: -0.2px;
+  line-height: 1.375rem;
+}
+.squiz-fte-scope h4 {
+  font-size: 1rem;
+  font-weight: 700;
+  letter-spacing: -0.2px;
+  line-height: 1.25rem;
+}
+.squiz-fte-scope h5 {
+  font-size: 1rem;
+  font-weight: 600;
+  letter-spacing: -0.2px;
+  line-height: 1.25rem;
+}
+.squiz-fte-scope h6 {
+  font-size: 0.875rem;
+  font-weight: 600;
+  letter-spacing: -0.2px;
+  line-height: 1.25rem;
+}
 .squiz-fte-scope .squiz-fte-form-group {
   display: flex;
   flex-direction: column;
@@ -611,33 +662,23 @@
 .squiz-fte-scope .squiz-fte-form-control:active {
   box-shadow: none;
 }
-.squiz-fte-scope .squiz-fte-btn {
-  border-radius: 4px;
-  font-weight: 400;
-  transition-property: all;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-  transition-timing-function: linear;
-  display: flex;
-  align-items: center;
-  text-align: center;
-  white-space: nowrap;
-  vertical-align: middle;
-  touch-action: manipulation;
-  cursor: pointer;
-  background-image: none;
-  border: 1px solid transparent;
-  padding: 6px 12px;
+.squiz-fte-scope .squiz-fte-invalid-form-field .squiz-fte-form-control {
+  --tw-border-opacity: 1;
+  border-color: rgb(215 35 33 / var(--tw-border-opacity));
+  background-repeat: no-repeat;
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHdpZHRoPSIyNCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0ibm9uZSIvPjxnIGNsYXNzPSJjdXJyZW50TGF5ZXIiPjxwYXRoIGQ9Ik00LjQ3IDIxaDE1LjA2YzEuNTQgMCAyLjUtMS42NyAxLjczLTNMMTMuNzMgNC45OWMtLjc3LTEuMzMtMi42OS0xLjMzLTMuNDYgMEwyLjc0IDE4Yy0uNzcgMS4zMy4xOSAzIDEuNzMgM3pNMTIgMTRjLS41NSAwLTEtLjQ1LTEtMXYtMmMwLS41NS40NS0xIDEtMXMxIC40NSAxIDF2MmMwIC41NS0uNDUgMS0xIDF6bTEgNGgtMnYtMmgydjJ6IiBjbGFzcz0ic2VsZWN0ZWQiIGZpbGw9IiNkNzIzMjEiLz48L2c+PC9zdmc+);
+  background-position: top 0.25rem right 0.25rem;
+  background-size: 1.5rem;
 }
-.squiz-fte-scope .squiz-fte-btn.disabled,
-.squiz-fte-scope .squiz-fte-btn[disabled] {
-  cursor: not-allowed;
-  opacity: 0.5;
+.squiz-fte-scope .squiz-fte-form-error {
+  --tw-text-opacity: 1;
+  color: rgb(215 35 33 / var(--tw-text-opacity));
+  font-size: 13px;
+  line-height: 1.23;
+  padding-top: 0.25rem;
 }
 .squiz-fte-scope .formatted-text-editor {
   font-family: "Open Sans" !important;
-}
-.squiz-fte-scope .formatted-text-editor.editor-wrapper {
   border-radius: 4px;
   border-width: 2px;
   border-style: solid;
@@ -649,7 +690,7 @@
 .squiz-fte-scope .formatted-text-editor .remirror-editor-wrapper {
   padding-top: 0px;
   --tw-text-opacity: 1;
-  color: rgb(112 112 112 / var(--tw-text-opacity));
+  color: rgb(61 61 61 / var(--tw-text-opacity));
 }
 .squiz-fte-scope .formatted-text-editor .remirror-editor {
   border-bottom-right-radius: 4px;
@@ -663,7 +704,8 @@
     var(--tw-ring-offset-shadow, 0 0 #0000),
     var(--tw-ring-shadow, 0 0 #0000),
     var(--tw-shadow);
-  min-height: 6rem;
+  overflow: auto;
+  min-height: 15vh;
 }
 .squiz-fte-scope .formatted-text-editor .remirror-editor:active,
 .squiz-fte-scope .formatted-text-editor .remirror-editor:focus {
@@ -672,6 +714,14 @@
 .squiz-fte-scope .formatted-text-editor .remirror-editor p {
   display: block;
 }
+.squiz-fte-scope .formatted-text-editor--is-disabled .remirror-editor {
+  cursor: not-allowed;
+  --tw-bg-opacity: 1;
+  background-color: rgb(224 224 224 / var(--tw-bg-opacity));
+}
+.squiz-fte-scope .formatted-text-editor--is-disabled .remirror-is-empty:first-of-type::before {
+  display: none;
+}
 .squiz-fte-scope .formatted-text-editor .remirror-is-empty:first-of-type::before {
   position: absolute;
   pointer-events: none;
@@ -681,48 +731,17 @@
   --tw-text-opacity: 1;
   color: rgb(148 148 148 / var(--tw-text-opacity));
 }
-.squiz-fte-scope a {
-  --tw-text-opacity: 1;
-  color: rgb(7 116 210 / var(--tw-text-opacity));
-  text-decoration: underline;
-}
-.squiz-fte-scope .remirror-theme h1 {
-  font-size: 1.625rem;
-  font-weight: 600;
-  letter-spacing: -0.2px;
-  line-height: 2rem;
-}
-.squiz-fte-scope .remirror-theme h2 {
-  font-size: 1.25rem;
-  font-weight: 600;
-  letter-spacing: -0.5px;
-  line-height: 1.5rem;
-}
-.squiz-fte-scope .remirror-theme h3 {
-  font-size: 1.125rem;
-  font-weight: 600;
-  letter-spacing: -0.2px;
-  line-height: 1.375rem;
-}
-.squiz-fte-scope .remirror-theme h4 {
-  font-size: 1rem;
-  font-weight: 700;
-  letter-spacing: -0.2px;
-  line-height: 1.25rem;
-}
-.squiz-fte-scope .remirror-theme h5 {
-  font-size: 1rem;
-  font-weight: 600;
-  letter-spacing: -0.2px;
-  line-height: 1.25rem;
+.squiz-fte-scope .formatted-text-editor .ProseMirror-selectednode {
+  border-width: 2px;
+  border-style: solid;
+  --tw-border-opacity: 1;
+  border-color: rgb(7 116 210 / var(--tw-border-opacity));
 }
-.squiz-fte-scope .remirror-theme h6 {
-  font-size: 0.875rem;
-  font-weight: 600;
-  letter-spacing: -0.2px;
-  line-height: 1.25rem;
+.squiz-fte-scope .formatted-text-editor img {
+  display: inline;
 }
-.squiz-fte-scope .editor-toolbar {
+.squiz-fte-scope .editor-toolbar,
+.squiz-fte-scope__floating-popover {
   border-bottom-width: 2px;
   border-style: solid;
   --tw-border-opacity: 1;
@@ -733,10 +752,12 @@
   display: flex;
   justify-items: center;
 }
-.squiz-fte-scope .editor-toolbar > *:not(:first-child, .editor-divider) {
+.squiz-fte-scope .editor-toolbar > *:not(:first-child, .editor-divider),
+.squiz-fte-scope .squiz-fte-scope__floating-popover > *:not(:first-child, .editor-divider) {
   margin: 0 0 0 2px;
 }
-.squiz-fte-scope .editor-divider {
+.squiz-fte-scope .editor-toolbar .editor-divider,
+.squiz-fte-scope .squiz-fte-scope__floating-popover .editor-divider {
   margin-top: -0.25rem;
   margin-bottom: -0.25rem;
   margin-left: 0.25rem;
@@ -745,6 +766,14 @@
   margin-right: 2px;
   height: auto;
 }
+.squiz-fte-scope .editor-toolbar .squiz-fte-btn,
+.squiz-fte-scope .squiz-fte-scope__floating-popover .squiz-fte-btn {
+  padding: 0.25rem;
+}
+.squiz-fte-scope .editor-toolbar .squiz-fte-btn ~ .squiz-fte-btn,
+.squiz-fte-scope .squiz-fte-scope__floating-popover .squiz-fte-btn ~ .squiz-fte-btn {
+  margin-left: 2px;
+}
 .squiz-fte-scope__floating-popover {
   display: flex;
   border-radius: 6px;
@@ -761,22 +790,49 @@
     var(--tw-ring-shadow, 0 0 #0000),
     var(--tw-shadow);
 }
-.squiz-fte-scope .toolbar-button {
+.squiz-fte-scope .squiz-fte-scope__floating-popover .editor-divider {
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+.squiz-fte-scope .squiz-fte-btn {
+  border-radius: 4px;
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-  padding: 0.25rem;
+  font-weight: 400;
   --tw-text-opacity: 1;
   color: rgb(112 112 112 / var(--tw-text-opacity));
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+  transition-timing-function: linear;
+  display: flex;
+  align-items: center;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  background-image: none;
+  border: 1px solid transparent;
+  padding: 6px 12px;
+}
+.squiz-fte-scope .squiz-fte-btn--is-icon {
+  padding: 6px;
 }
-.squiz-fte-scope .toolbar-button ~ .toolbar-button {
+.squiz-fte-scope .squiz-fte-btn ~ .squiz-fte-btn {
   margin-left: 2px;
 }
-.squiz-fte-scope .toolbar-button:hover,
-.squiz-fte-scope .toolbar-button:focus {
+.squiz-fte-scope .squiz-fte-btn.disabled,
+.squiz-fte-scope .squiz-fte-btn[disabled] {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+.squiz-fte-scope .squiz-fte-btn:hover,
+.squiz-fte-scope .squiz-fte-btn:focus {
   background-color: rgba(0, 0, 0, 0.04);
 }
-.squiz-fte-scope .toolbar-button.is-active,
-.squiz-fte-scope .toolbar-button:active {
+.squiz-fte-scope .squiz-fte-btn--is-active,
+.squiz-fte-scope .squiz-fte-btn:active {
   --tw-bg-opacity: 1;
   background-color: rgb(230 241 250 / var(--tw-bg-opacity));
   --tw-text-opacity: 1;
@@ -785,6 +841,7 @@
 .squiz-fte-scope .toolbar-dropdown__button {
   display: flex;
   align-items: center;
+  border-radius: 4px;
   font-family:
     Open Sans,
     Arial,
@@ -899,8 +956,23 @@
 }
 .squiz-fte-scope .squiz-fte-modal-footer__button {
   font-size: 0.875rem;
+  font-weight: 700;
+}
+.squiz-fte-scope .editor-toolbar .squiz-fte-modal-footer__button,
+.squiz-fte-scope .squiz-fte-scope__floating-popover .squiz-fte-modal-footer__button {
+  padding: 0.25rem;
+}
+.squiz-fte-scope .editor-toolbar .squiz-fte-modal-footer__button ~ .squiz-fte-btn,
+.squiz-fte-scope .squiz-fte-scope__floating-popover .squiz-fte-modal-footer__button ~ .squiz-fte-btn {
+  margin-left: 2px;
+}
+.squiz-fte-scope .squiz-fte-modal-footer__button {
   border-radius: 4px;
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
   font-weight: 400;
+  --tw-text-opacity: 1;
+  color: rgb(112 112 112 / var(--tw-text-opacity));
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
@@ -916,11 +988,24 @@
   border: 1px solid transparent;
   padding: 6px 12px;
 }
+.squiz-fte-scope .squiz-fte-modal-footer__button ~ .squiz-fte-btn {
+  margin-left: 2px;
+}
 .squiz-fte-scope .squiz-fte-modal-footer__button.disabled,
 .squiz-fte-scope .squiz-fte-modal-footer__button[disabled] {
   cursor: not-allowed;
   opacity: 0.5;
 }
+.squiz-fte-scope .squiz-fte-modal-footer__button:hover,
+.squiz-fte-scope .squiz-fte-modal-footer__button:focus {
+  background-color: rgba(0, 0, 0, 0.04);
+}
+.squiz-fte-scope .squiz-fte-modal-footer__button:active {
+  --tw-bg-opacity: 1;
+  background-color: rgb(230 241 250 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(7 116 210 / var(--tw-text-opacity));
+}
 .squiz-fte-scope .hover\:bg-blue-400:hover {
   --tw-bg-opacity: 1 !important;
   background-color: rgb(4 73 133 / var(--tw-bg-opacity)) !important;

package/lib/index.d.ts

@@ -1,2 +1,5 @@
-import FormattedTextEditor from './FormattedTextEditor';
-export { FormattedTextEditor };
+import Editor from './Editor/Editor';
+import { EditorContext } from './Editor/EditorContext';
+import { remirrorNodeToSquizNode } from './utils/converters/remirrorNodeToSquizNode/remirrorNodeToSquizNode';
+import { squizNodeToRemirrorNode } from './utils/converters/squizNodeToRemirrorNode/squizNodeToRemirrorNode';
+export { Editor, EditorContext, remirrorNodeToSquizNode, squizNodeToRemirrorNode };

package/lib/index.js

@@ -3,6 +3,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FormattedTextEditor = void 0;
-const FormattedTextEditor_1 = __importDefault(require("./FormattedTextEditor"));
-exports.FormattedTextEditor = FormattedTextEditor_1.default;
+exports.squizNodeToRemirrorNode = exports.remirrorNodeToSquizNode = exports.EditorContext = exports.Editor = void 0;
+const Editor_1 = __importDefault(require("./Editor/Editor"));
+exports.Editor = Editor_1.default;
+const EditorContext_1 = require("./Editor/EditorContext");
+Object.defineProperty(exports, "EditorContext", { enumerable: true, get: function () { return EditorContext_1.EditorContext; } });
+const remirrorNodeToSquizNode_1 = require("./utils/converters/remirrorNodeToSquizNode/remirrorNodeToSquizNode");
+Object.defineProperty(exports, "remirrorNodeToSquizNode", { enumerable: true, get: function () { return remirrorNodeToSquizNode_1.remirrorNodeToSquizNode; } });
+const squizNodeToRemirrorNode_1 = require("./utils/converters/squizNodeToRemirrorNode/squizNodeToRemirrorNode");
+Object.defineProperty(exports, "squizNodeToRemirrorNode", { enumerable: true, get: function () { return squizNodeToRemirrorNode_1.squizNodeToRemirrorNode; } });

package/lib/types.d.ts

@@ -0,0 +1,3 @@
+export type DeepPartial<T> = T extends Record<string, unknown> ? {
+    [P in keyof T]?: DeepPartial<T[P]>;
+} : T;

package/lib/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/ui/Button/Button.d.ts

@@ -0,0 +1,11 @@
+import { ReactElement } from 'react';
+type ButtonProps = {
+    handleOnClick: () => void;
+    isDisabled?: boolean;
+    isActive: boolean;
+    label: string;
+    text?: string;
+    icon?: ReactElement;
+};
+declare const Button: ({ handleOnClick, isDisabled, isActive, label, text, icon }: ButtonProps) => JSX.Element;
+export default Button;

package/lib/ui/{ToolbarButton/ToolbarButton.js → Button/Button.js}

@@ -4,7 +4,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
-const ToolbarButton = ({ handleOnClick, isDisabled, isActive, icon, label }) => {
-    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));
+const clsx_1 = __importDefault(require("clsx"));
+const Button = ({ handleOnClick, isDisabled, isActive, label, text, icon }) => {
+    return (react_1.default.createElement("button", { "aria-label": label, title: label, type: "button", onClick: handleOnClick, disabled: isDisabled, className: (0, clsx_1.default)('squiz-fte-btn', isActive && 'squiz-fte-btn--is-active', icon && ' squiz-fte-btn--is-icon') },
+        text && react_1.default.createElement("span", null, text),
+        icon && icon));
 };
-exports.default = ToolbarButton;
+exports.default = Button;

package/lib/ui/Fields/Input/Input.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const Input: React.ForwardRefExoticComponent<React.InputHTMLAttributes<HTMLInputElement> & {
+    label?: string | undefined;
+    error?: string | undefined;
+} & React.RefAttributes<HTMLInputElement>>;

package/lib/ui/{Inputs/Text/TextInput.js → Fields/Input/Input.js}

@@ -22,12 +22,17 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __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.TextInput = void 0;
+exports.Input = void 0;
 const react_1 = __importStar(require("react"));
-const TextInputInternal = ({ name, label, ...rest }, ref) => {
-    return (react_1.default.createElement(react_1.default.Fragment, null,
+const clsx_1 = __importDefault(require("clsx"));
+const InputInternal = ({ name, label, type = 'text', error, ...rest }, ref) => {
+    return (react_1.default.createElement("div", { className: (0, clsx_1.default)(error && 'squiz-fte-invalid-form-field') },
         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 })));
+        react_1.default.createElement("input", { ref: ref, id: name, name: name, type: type, "aria-invalid": !!error, className: "squiz-fte-form-control", ...rest }),
+        error && react_1.default.createElement("div", { className: "squiz-fte-form-error" }, error)));
 };
-exports.TextInput = (0, react_1.forwardRef)(TextInputInternal);
+exports.Input = (0, react_1.forwardRef)(InputInternal);

package/lib/ui/{Inputs → Fields}/Select/Select.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export type SelectOptions = Record<string, SelectOption>;
 export type SelectOption = {
     label: string;

package/lib/ui/Modal/Modal.js

@@ -30,7 +30,9 @@ 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 clsx_1 = __importDefault(require("clsx"));
 const Modal = ({ children, title, onCancel, onSubmit, className }, ref) => {
+    const content = (0, react_1.useRef)(null);
     const container = (0, react_1.useMemo)(() => {
         const element = document.createElement('div');
         element.classList.add('squiz-fte-scope');
@@ -51,7 +53,7 @@ const Modal = ({ children, title, onCancel, onSubmit, className }, ref) => {
     }, []);
     // add/remove the modal container from the DOM and focus on the first input
     (0, react_1.useEffect)(() => {
-        const firstInput = container.querySelector('input:not([type=hidden])');
+        const firstInput = content.current?.querySelector('input:not([type=hidden]), button');
         document.body.appendChild(container);
         firstInput?.focus();
         return () => {
@@ -60,14 +62,14 @@ const Modal = ({ children, title, onCancel, onSubmit, className }, ref) => {
     }, [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", { ref: ref, className: (0, clsx_1.default)('squiz-fte-modal-wrapper', 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-content", ref: 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"))))))),

package/lib/ui/ToolbarDropdown/ToolbarDropdown.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type ToolbarDropdownProps = {
     children: JSX.Element | JSX.Element[];
     label: string;

package/lib/ui/ToolbarDropdownButton/ToolbarDropdownButton.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type DropdownButtonProps = {
     children?: JSX.Element;
     handleOnClick: () => void;

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

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