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

package/lib/EditorToolbar/index.js

@@ -1,2 +1,18 @@
-export * from './FloatingToolbar';
-export * from './Toolbar';
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./FloatingToolbar"), exports);
+__exportStar(require("./Toolbar"), exports);

package/lib/Extensions/Extensions.d.ts

@@ -1,4 +1,2 @@
-import { BoldExtension, HeadingExtension, ItalicExtension, NodeFormattingExtension, ParagraphExtension, UnderlineExtension, HistoryExtension } from 'remirror/extensions';
-import { PreformattedExtension } from './PreformattedExtension/PreformattedExtension';
-import { LinkExtension } from './LinkExtension/LinkExtension';
-export declare const Extensions: () => (BoldExtension | HistoryExtension | HeadingExtension | ItalicExtension | NodeFormattingExtension | ParagraphExtension | UnderlineExtension | LinkExtension | PreformattedExtension)[];
+import { Extension } from '@remirror/core';
+export declare const Extensions: () => Extension[];

package/lib/Extensions/Extensions.js

@@ -1,16 +1,21 @@
-import { BoldExtension, HeadingExtension, ItalicExtension, NodeFormattingExtension, ParagraphExtension, UnderlineExtension, HistoryExtension, } from 'remirror/extensions';
-import { PreformattedExtension } from './PreformattedExtension/PreformattedExtension';
-import { LinkExtension } from './LinkExtension/LinkExtension';
-export const Extensions = () => [
-    new BoldExtension(),
-    new HeadingExtension(),
-    new ItalicExtension(),
-    new NodeFormattingExtension(),
-    new ParagraphExtension(),
-    new PreformattedExtension(),
-    new UnderlineExtension(),
-    new HistoryExtension(),
-    new LinkExtension({
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Extensions = void 0;
+const extensions_1 = require("remirror/extensions");
+const PreformattedExtension_1 = require("./PreformattedExtension/PreformattedExtension");
+const LinkExtension_1 = require("./LinkExtension/LinkExtension");
+const ImageExtension_1 = require("./ImageExtension/ImageExtension");
+const Extensions = () => [
+    new extensions_1.BoldExtension(),
+    new extensions_1.HeadingExtension(),
+    new extensions_1.ItalicExtension(),
+    new extensions_1.NodeFormattingExtension({ indents: [] }),
+    new extensions_1.ParagraphExtension(),
+    new PreformattedExtension_1.PreformattedExtension(),
+    new extensions_1.UnderlineExtension(),
+    new extensions_1.HistoryExtension(),
+    new ImageExtension_1.ImageExtension(),
+    new LinkExtension_1.LinkExtension({
         supportedTargets: [
             // '_self' is the browser default and will be used when encountering a link with a
             // different target is encountered.
@@ -18,3 +23,4 @@ export const Extensions = () => [
         ],
     }),
 ];
+exports.Extensions = Extensions;

package/lib/Extensions/ImageExtension/ImageExtension.d.ts

@@ -0,0 +1,3 @@
+import { ImageExtension as RemirrorImageExtension } from 'remirror/extensions';
+export declare class ImageExtension extends RemirrorImageExtension {
+}

package/lib/Extensions/ImageExtension/ImageExtension.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImageExtension = void 0;
+const extensions_1 = require("remirror/extensions");
+class ImageExtension extends extensions_1.ImageExtension {
+}
+exports.ImageExtension = ImageExtension;

package/lib/Extensions/LinkExtension/LinkExtension.js

@@ -1,7 +1,10 @@
-import { getMarkRanges, isElementDomNode } from 'remirror';
-import { getTextSelection, getMarkRange, updateMark, removeMark } from '@remirror/core';
-import { LinkExtension as RemirrorLinkExtension } from 'remirror/extensions';
-export class LinkExtension extends RemirrorLinkExtension {
+"use strict";
+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 {
     createMarkSpec(extra, override) {
         const spec = super.createMarkSpec(extra, override);
         return {
@@ -15,7 +18,7 @@ export class LinkExtension extends RemirrorLinkExtension {
                 {
                     tag: 'a[href]',
                     getAttrs: (node) => {
-                        if (!isElementDomNode(node)) {
+                        if (!(0, remirror_1.isElementDomNode)(node)) {
                             return false;
                         }
                         return {
@@ -33,7 +36,7 @@ export class LinkExtension extends RemirrorLinkExtension {
     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 = getMarkRange($from, this.type);
+        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,
@@ -48,7 +51,7 @@ export class LinkExtension extends RemirrorLinkExtension {
         // the select text is widened to include the link but retains non-link selected text as well.
         return (props) => {
             const { tr } = props;
-            const ranges = getMarkRanges(tr.selection, this.type);
+            const ranges = (0, remirror_1.getMarkRanges)(tr.selection, this.type);
             if (ranges.length === 0) {
                 return false;
             }
@@ -72,20 +75,23 @@ export class LinkExtension extends RemirrorLinkExtension {
             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.
-                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((0, core_1.getTextSelection)({ from: range.to, to: range.to }, tr.doc));
+            // apply the transaction.
+            dispatch?.(tr);
             view?.focus();
             return true;
         };
     }
 }
+exports.LinkExtension = LinkExtension;

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

@@ -1,16 +1,19 @@
+"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;
 };
-import { command, extension, ExtensionTag, NodeExtension, toggleBlockItem, } from '@remirror/core';
-let PreformattedExtension = class PreformattedExtension extends NodeExtension {
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PreformattedExtension = void 0;
+const core_1 = require("@remirror/core");
+let PreformattedExtension = class PreformattedExtension extends core_1.NodeExtension {
     get name() {
         return 'preformatted';
     }
     createTags() {
-        return [ExtensionTag.Block, ExtensionTag.TextBlock, ExtensionTag.FormattingNode];
+        return [core_1.ExtensionTag.Block, core_1.ExtensionTag.TextBlock, core_1.ExtensionTag.FormattingNode];
     }
     createNodeSpec(extra, override) {
         return {
@@ -31,16 +34,16 @@ let PreformattedExtension = class PreformattedExtension extends NodeExtension {
      * Toggle the <pre> for the current block.
      */
     togglePreformatted() {
-        return toggleBlockItem({
+        return (0, core_1.toggleBlockItem)({
             type: this.type,
             toggleType: 'paragraph',
         });
     }
 };
 __decorate([
-    command()
+    (0, core_1.command)()
 ], PreformattedExtension.prototype, "togglePreformatted", null);
 PreformattedExtension = __decorate([
-    extension({})
+    (0, core_1.extension)({})
 ], PreformattedExtension);
-export { PreformattedExtension };
+exports.PreformattedExtension = PreformattedExtension;

package/lib/FormattedTextEditor.js

@@ -1,2 +1,7 @@
-import Editor from './Editor/Editor';
-export default Editor;
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const Editor_1 = __importDefault(require("./Editor/Editor"));
+exports.default = Editor_1.default;

package/lib/hooks/index.js

@@ -1 +1,17 @@
-export * from './useExtensionNames';
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./useExtensionNames"), exports);

package/lib/hooks/useExtensionNames.js

@@ -1,8 +1,11 @@
-import { useRemirrorContext } from '@remirror/react';
-import { useMemo } from 'react';
-export const useExtensionNames = () => {
-    const { manager } = useRemirrorContext();
-    return useMemo(() => {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useExtensionNames = void 0;
+const react_1 = require("@remirror/react");
+const react_2 = require("react");
+const useExtensionNames = () => {
+    const { manager } = (0, react_1.useRemirrorContext)();
+    return (0, react_2.useMemo)(() => {
         const extensionNames = {};
         manager.extensions.forEach((extension) => {
             extensionNames[extension.name] = true;
@@ -10,3 +13,4 @@ export const useExtensionNames = () => {
         return extensionNames;
     }, [manager]);
 };
+exports.useExtensionNames = useExtensionNames;

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,50 @@
   --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 .filter {
+  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,29 +665,6 @@
 .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-btn.disabled,
-.squiz-fte-scope .squiz-fte-btn[disabled] {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
 .squiz-fte-scope .formatted-text-editor {
   font-family: "Open Sans" !important;
 }
@@ -649,7 +680,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 +694,7 @@
     var(--tw-ring-offset-shadow, 0 0 #0000),
     var(--tw-ring-shadow, 0 0 #0000),
     var(--tw-shadow);
-  min-height: 6rem;
+  overflow: auto;
 }
 .squiz-fte-scope .formatted-text-editor .remirror-editor:active,
 .squiz-fte-scope .formatted-text-editor .remirror-editor:focus {
@@ -681,48 +712,7 @@
   --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 .remirror-theme h6 {
-  font-size: 0.875rem;
-  font-weight: 600;
-  letter-spacing: -0.2px;
-  line-height: 1.25rem;
-}
-.squiz-fte-scope .formatted-text-editor .editor-toolbar {
+.squiz-fte-scope .editor-toolbar {
   border-bottom-width: 2px;
   border-style: solid;
   --tw-border-opacity: 1;
@@ -733,10 +723,10 @@
   display: flex;
   justify-items: center;
 }
-.squiz-fte-scope .formatted-text-editor .editor-toolbar > *:not(:first-child) {
+.squiz-fte-scope .editor-toolbar > *:not(:first-child, .editor-divider) {
   margin: 0 0 0 2px;
 }
-.squiz-fte-scope .formatted-text-editor .editor-toolbar .editor-divider {
+.squiz-fte-scope .editor-toolbar .editor-divider {
   margin-top: -0.25rem;
   margin-bottom: -0.25rem;
   margin-left: 0.25rem;
@@ -745,6 +735,12 @@
   margin-right: 2px;
   height: auto;
 }
+.squiz-fte-scope .editor-toolbar .squiz-fte-btn {
+  padding: 0.25rem;
+}
+.squiz-fte-scope .editor-toolbar .squiz-fte-btn ~ .squiz-fte-btn {
+  margin-left: 2px;
+}
 .squiz-fte-scope__floating-popover {
   display: flex;
   border-radius: 6px;
@@ -761,22 +757,51 @@
     var(--tw-ring-shadow, 0 0 #0000),
     var(--tw-shadow);
 }
-.squiz-fte-scope .toolbar-button {
+.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-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;
@@ -899,8 +924,27 @@
 }
 .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 {
+  padding: 0.25rem;
+}
+.squiz-fte-scope .editor-toolbar .squiz-fte-modal-footer__button ~ .squiz-fte-btn {
+  margin-left: 2px;
+}
+.squiz-fte-scope .squiz-fte-scope__floating-popover .squiz-fte-modal-footer__button {
+  padding: 0.25rem;
+}
+.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 +960,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,4 @@
 import FormattedTextEditor from './FormattedTextEditor';
-export { FormattedTextEditor };
+import { remirrorNodeToSquizNode } from './utils/converters/remirrorNodeToSquizNode/remirrorNodeToSquizNode';
+import { squizNodeToRemirrorNode } from './utils/converters/squizNodeToRemirrorNode/squizNodeToRemirrorNode';
+export { FormattedTextEditor, remirrorNodeToSquizNode, squizNodeToRemirrorNode };

package/lib/index.js

@@ -1,2 +1,12 @@
-import FormattedTextEditor from './FormattedTextEditor';
-export { FormattedTextEditor };
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.squizNodeToRemirrorNode = exports.remirrorNodeToSquizNode = exports.FormattedTextEditor = void 0;
+const FormattedTextEditor_1 = __importDefault(require("./FormattedTextEditor"));
+exports.FormattedTextEditor = FormattedTextEditor_1.default;
+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/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/Button/Button.js

@@ -0,0 +1,14 @@
+"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 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)));
+};
+exports.default = Button;

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

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

package/lib/ui/Fields/Input/Input.js

@@ -0,0 +1,33 @@
+"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.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,
+        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 })));
+};
+exports.Input = (0, react_1.forwardRef)(InputInternal);