@squiz/formatted-text-editor 1.21.1-alpha.7 → 1.22.0

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

@@ -1,16 +1,23 @@
-import { ApplySchemaAttributes, MarkExtensionSpec, MarkSpecOverride } from 'remirror';
-import { KeyBindingProps } from '@remirror/core';
-import { CommandFunction } from '@remirror/pm';
-import { LinkAttributes as RemirrorLinkAttributes, LinkExtension as RemirrorLinkExtension } from 'remirror/extensions';
-export type UpdateLinkOptions = LinkAttributes & {
-    text: string;
-};
-export type LinkAttributes = RemirrorLinkAttributes & {
+import { ApplySchemaAttributes, FromToProps, MarkExtensionSpec, MarkSpecOverride } from 'remirror';
+import { CommandFunction, MarkExtension } from '@remirror/core';
+import { LinkTarget } from './common';
+export type LinkAttributes = {
+    href: string;
     title?: string;
+    target: LinkTarget;
+};
+export type LinkOptions = {
+    defaultTarget?: LinkTarget;
+    supportedTargets?: LinkTarget[];
+};
+export type UpdateLinkProps = {
+    text: string;
+    attrs: Partial<LinkAttributes>;
+    range: FromToProps;
 };
-export declare class LinkExtension extends RemirrorLinkExtension {
+export declare class LinkExtension extends MarkExtension<LinkOptions> {
+    get name(): string;
     createMarkSpec(extra: ApplySchemaAttributes, override: MarkSpecOverride): MarkExtensionSpec;
-    shortcut({ tr }: KeyBindingProps): boolean;
-    selectLink(): CommandFunction;
-    updateLink(options: UpdateLinkOptions): CommandFunction;
+    updateLink({ text, attrs, range }: UpdateLinkProps): CommandFunction;
+    removeLink(): CommandFunction;
 }

package/lib/Extensions/LinkExtension/LinkExtension.js

@@ -1,18 +1,31 @@
 "use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LinkExtension = void 0;
 const remirror_1 = require("remirror");
 const core_1 = require("@remirror/core");
-const extensions_1 = require("remirror/extensions");
-class LinkExtension extends extensions_1.LinkExtension {
+const common_1 = require("./common");
+const CommandsExtension_1 = require("../CommandsExtension/CommandsExtension");
+const Extensions_1 = require("../Extensions");
+let LinkExtension = class LinkExtension extends core_1.MarkExtension {
+    get name() {
+        return Extensions_1.MarkName.Link;
+    }
     createMarkSpec(extra, override) {
-        const spec = super.createMarkSpec(extra, override);
         return {
-            ...spec,
-            excludes: undefined,
+            inclusive: false,
+            excludes: Extensions_1.MarkName.AssetLink,
+            ...override,
             attrs: {
-                ...spec.attrs,
+                ...extra.defaults(),
+                href: {},
                 title: { default: undefined },
+                target: { default: this.options.defaultTarget },
             },
             parseDOM: [
                 {
@@ -23,75 +36,52 @@ class LinkExtension extends extensions_1.LinkExtension {
                         }
                         return {
                             ...extra.parse(node),
-                            auto: false,
                             href: node.getAttribute('href'),
-                            target: node.getAttribute('target'),
                             title: node.getAttribute('title'),
+                            target: (0, common_1.validateTarget)(node.getAttribute('target'), this.options.supportedTargets, this.options.defaultTarget),
                         };
                     },
                 },
             ],
+            toDOM: (node) => {
+                const { target, ...rest } = (0, core_1.omitExtraAttributes)(node.attrs, extra);
+                const rel = 'noopener noreferrer nofollow';
+                const attrs = {
+                    ...extra.dom(node),
+                    ...rest,
+                    rel,
+                    target: (0, common_1.validateTarget)(target, this.options.supportedTargets, this.options.defaultTarget),
+                };
+                return ['a', attrs, 0];
+            },
         };
     }
-    shortcut({ tr }) {
-        // override parent implementation to allow a link to be inserted without requiring a text selection first.
-        const { from, to, $from } = tr.selection;
-        const mark = (0, core_1.getMarkRange)($from, this.type);
-        const selectedText = tr.doc.textBetween(from, to);
-        this.options.onShortcut({
-            activeLink: mark ? { attrs: mark.mark.attrs, from: mark.from, to: mark.to } : undefined,
-            selectedText,
-            from,
-            to,
+    updateLink({ text, attrs, range }) {
+        return this.store.getExtension(CommandsExtension_1.CommandsExtension).updateMark({
+            attrs,
+            text,
+            range,
+            mark: this.type,
+            removeMark: !attrs.href,
         });
-        return true;
     }
-    selectLink() {
-        // parent implementation selects only the link text, this mimics closer to Google Docs where
-        // the select text is widened to include the link but retains non-link selected text as well.
-        return (props) => {
-            const { tr } = props;
-            const ranges = (0, remirror_1.getMarkRanges)(tr.selection, this.type);
-            if (ranges.length === 0) {
-                return false;
-            }
-            // work out the start position of the first link and end position of the last link in the selection.
-            const from = Math.min(tr.selection.from, ...ranges.map((range) => range.from));
-            const to = Math.max(tr.selection.to, ...ranges.map((range) => range.to));
-            // don't need to widen the selection, return early.
-            if (tr.selection.from === from && tr.selection.to === to) {
-                return false;
-            }
-            // widen the selection to make sure the full link is included.
-            this.store.commands.selectText.original({ from, to })(props);
-            return true;
-        };
-    }
-    updateLink(options) {
-        const { text, ...attrs } = options;
-        return (props) => {
-            const { tr, dispatch, view } = props;
-            const range = { from: tr.selection.from, to: tr.selection.to };
-            const selectedText = tr.doc.textBetween(range.from, range.to);
-            if (text !== selectedText) {
-                // update the text in the editor if it was updated, update the range to cover the length of the new 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) {
-                tr.addMark(range.from, range.to, this.type.create(attrs));
-            }
-            else {
-                tr.removeMark(range.from, range.to, this.type);
-            }
-            // move the cursor to the end of the link and re-focus the editor.
-            tr.setSelection((0, core_1.getTextSelection)({ from: range.to, to: range.to }, tr.doc));
-            // apply the transaction.
-            dispatch?.(tr);
-            view?.focus();
-            return true;
-        };
+    removeLink() {
+        return (0, core_1.removeMark)({ type: this.type });
     }
-}
+};
+__decorate([
+    (0, core_1.command)()
+], LinkExtension.prototype, "updateLink", null);
+__decorate([
+    (0, core_1.command)()
+], LinkExtension.prototype, "removeLink", null);
+LinkExtension = __decorate([
+    (0, core_1.extension)({
+        defaultOptions: {
+            defaultTarget: common_1.LinkTarget.Self,
+            supportedTargets: [common_1.LinkTarget.Self, common_1.LinkTarget.Blank],
+        },
+        defaultPriority: remirror_1.ExtensionPriority.Medium,
+    })
+], LinkExtension);
 exports.LinkExtension = LinkExtension;

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

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

package/lib/Extensions/LinkExtension/common.js

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

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

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

package/lib/Extensions/PreformattedExtension/PreformattedExtension.js

@@ -24,9 +24,13 @@ let PreformattedExtension = class PreformattedExtension extends core_1.NodeExten
             attrs: {
                 ...extra.defaults(),
             },
-            parseDOM: [...(override.parseDOM ?? [])],
+            parseDOM: [
+                {
+                    tag: 'pre',
+                },
+            ],
             toDOM: (node) => {
-                return [`pre`, extra.dom(node), 0];
+                return ['pre', extra.dom(node), 0];
             },
         };
     }

package/lib/hooks/index.d.ts

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

package/lib/hooks/index.js

@@ -15,3 +15,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./useExtensionNames"), exports);
+__exportStar(require("./useExpandedSelection"), exports);

package/lib/hooks/useExpandedSelection.d.ts

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

package/lib/hooks/useExpandedSelection.js

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

package/lib/index.css

@@ -388,6 +388,10 @@
   margin-top: 1.5rem !important;
   margin-bottom: 1.5rem !important;
 }
+.squiz-fte-scope .my-auto {
+  margin-top: auto !important;
+  margin-bottom: auto !important;
+}
 .squiz-fte-scope .-mr-3 {
   margin-right: -0.75rem !important;
 }
@@ -444,9 +448,6 @@
 .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;
 }
@@ -662,10 +663,24 @@
 .squiz-fte-scope .squiz-fte-form-control:active {
   box-shadow: none;
 }
+.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;
+  padding-right: 2rem;
+  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-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;
@@ -692,6 +707,7 @@
     var(--tw-ring-shadow, 0 0 #0000),
     var(--tw-shadow);
   overflow: auto;
+  min-height: 15vh;
 }
 .squiz-fte-scope .formatted-text-editor .remirror-editor:active,
 .squiz-fte-scope .formatted-text-editor .remirror-editor:focus {
@@ -700,6 +716,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;
@@ -709,7 +733,17 @@
   --tw-text-opacity: 1;
   color: rgb(148 148 148 / var(--tw-text-opacity));
 }
-.squiz-fte-scope .editor-toolbar {
+.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 .formatted-text-editor img {
+  display: inline;
+}
+.squiz-fte-scope .editor-toolbar,
+.squiz-fte-scope__floating-popover {
   border-bottom-width: 2px;
   border-style: solid;
   --tw-border-opacity: 1;
@@ -720,10 +754,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-toolbar .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;
@@ -732,10 +768,13 @@
   margin-right: 2px;
   height: auto;
 }
-.squiz-fte-scope .editor-toolbar .squiz-fte-btn {
+.squiz-fte-scope .editor-toolbar .squiz-fte-btn,
+.squiz-fte-scope .squiz-fte-scope__floating-popover .squiz-fte-btn {
   padding: 0.25rem;
+  font-weight: 700;
 }
-.squiz-fte-scope .editor-toolbar .squiz-fte-btn ~ .squiz-fte-btn {
+.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 {
@@ -754,17 +793,15 @@
     var(--tw-ring-shadow, 0 0 #0000),
     var(--tw-shadow);
 }
-.squiz-fte-scope .squiz-fte-scope__floating-popover .squiz-fte-btn {
-  padding: 0.25rem;
-}
-.squiz-fte-scope .squiz-fte-scope__floating-popover .squiz-fte-btn ~ .squiz-fte-btn {
-  margin-left: 2px;
+.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));
-  font-weight: 400;
+  font-weight: 700;
   --tw-text-opacity: 1;
   color: rgb(112 112 112 / var(--tw-text-opacity));
   transition-property: all;
@@ -807,6 +844,7 @@
 .squiz-fte-scope .toolbar-dropdown__button {
   display: flex;
   align-items: center;
+  border-radius: 4px;
   font-family:
     Open Sans,
     Arial,
@@ -923,15 +961,12 @@
   font-size: 0.875rem;
   font-weight: 700;
 }
-.squiz-fte-scope .editor-toolbar .squiz-fte-modal-footer__button {
-  padding: 0.25rem;
-}
-.squiz-fte-scope .editor-toolbar .squiz-fte-modal-footer__button ~ .squiz-fte-btn {
-  margin-left: 2px;
-}
+.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;
+  font-weight: 700;
 }
+.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;
 }
@@ -939,7 +974,7 @@
   border-radius: 4px;
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-  font-weight: 400;
+  font-weight: 700;
   --tw-text-opacity: 1;
   color: rgb(112 112 112 / var(--tw-text-opacity));
   transition-property: all;

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

@@ -6,6 +6,7 @@ type ButtonProps = {
     label: string;
     text?: string;
     icon?: ReactElement;
+    className?: string;
 };
-declare const Button: ({ handleOnClick, isDisabled, isActive, label, text, icon }: ButtonProps) => JSX.Element;
+declare const Button: ({ handleOnClick, isDisabled, isActive, label, text, icon, className }: ButtonProps) => JSX.Element;
 export default Button;

package/lib/ui/Button/Button.js

@@ -5,10 +5,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 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') },
-        react_1.default.createElement(react_1.default.Fragment, null,
-            text && react_1.default.createElement("span", null, text),
-            icon && icon)));
+const Button = ({ handleOnClick, isDisabled, isActive, label, text, icon, className }) => {
+    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', className) },
+        text && react_1.default.createElement("span", null, text),
+        icon && icon));
 };
 exports.default = Button;

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

@@ -1,4 +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/Fields/Input/Input.js

@@ -22,12 +22,18 @@ 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.Input = void 0;
 const react_1 = __importStar(require("react"));
-const InputInternal = ({ name, label, type = 'text', ...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, required, ...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: type, className: "squiz-fte-form-control", ...rest })));
+        required && (react_1.default.createElement("span", { className: "text-gray-600", "aria-label": "Required field" }, "*")),
+        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.Input = (0, react_1.forwardRef)(InputInternal);

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