@squiz/formatted-text-editor 1.12.0-alpha.38 → 1.12.0-alpha.40

package/README.md

@@ -51,6 +51,8 @@ Or if you'd like to "watch" for changes:
 npm run test:watch
 ```
 
+When testing text input in the text editor, it is recommended to use the `<MockEditor />` component, which is a simple wrapper around the Remirror component that provides additional functionality for testing (supplying text into the editor).
+
 ### End to end testing
 
 This package uses [Cypress](https://docs.cypress.io/) for end to end testing.

package/lib/Editor/Editor.js

@@ -1,21 +1,10 @@
 import React from 'react';
-import { BoldExtension, HeadingExtension, ItalicExtension, NodeFormattingExtension, ParagraphExtension, UnderlineExtension, HistoryExtension, wysiwygPreset, } from 'remirror/extensions';
 import { EditorComponent, Remirror, useRemirror } from '@remirror/react';
 import { EditorToolbar } from '../EditorToolbar/EditorToolbar';
-import { PreformattedExtension } from '../extensions/PreformattedExtension/PreformattedExtension';
+import { Extensions } from '../Extensions/Extensions';
 const Editor = ({ content }) => {
     const { manager, state, setState } = useRemirror({
-        extensions: () => [
-            ...wysiwygPreset(),
-            new BoldExtension(),
-            new HeadingExtension(),
-            new ItalicExtension(),
-            new NodeFormattingExtension(),
-            new ParagraphExtension(),
-            new PreformattedExtension(),
-            new UnderlineExtension(),
-            new HistoryExtension(),
-        ],
+        extensions: Extensions,
         content,
         selection: 'start',
         stringHandler: 'html',

package/lib/Extensions/Extensions.d.ts

@@ -0,0 +1,3 @@
+import { BoldExtension, HeadingExtension, NodeFormattingExtension, HistoryExtension } from 'remirror/extensions';
+import { Extension } from '@remirror/core';
+export declare const Extensions: () => (BoldExtension | HistoryExtension | HeadingExtension | NodeFormattingExtension | Extension<import("@remirror/core").EmptyShape>)[];

package/lib/Extensions/Extensions.js

@@ -0,0 +1,13 @@
+import { BoldExtension, HeadingExtension, ItalicExtension, NodeFormattingExtension, ParagraphExtension, UnderlineExtension, HistoryExtension, wysiwygPreset, } from 'remirror/extensions';
+import { PreformattedExtension } from './PreformattedExtension/PreformattedExtension';
+export const Extensions = () => [
+    ...wysiwygPreset(),
+    new BoldExtension(),
+    new HeadingExtension(),
+    new ItalicExtension(),
+    new NodeFormattingExtension(),
+    new ParagraphExtension(),
+    new PreformattedExtension(),
+    new UnderlineExtension(),
+    new HistoryExtension(),
+];

package/lib/index.css

@@ -3882,7 +3882,7 @@ textarea {
 input::placeholder,
 textarea::placeholder {
   opacity: 1;
-  color: #9ca3af;
+  color: #9CA3AF;
 }
 button,
 [role=button] {
@@ -3910,6 +3910,309 @@ video {
 [hidden] {
   display: none;
 }
+[type=text],
+[type=email],
+[type=url],
+[type=password],
+[type=number],
+[type=date],
+[type=datetime-local],
+[type=month],
+[type=search],
+[type=tel],
+[type=time],
+[type=week],
+[multiple],
+textarea,
+select {
+  appearance: none;
+  background-color: #fff;
+  border-color: #6B7280;
+  border-width: 1px;
+  border-radius: 0px;
+  padding-top: 0.5rem;
+  padding-right: 0.75rem;
+  padding-bottom: 0.5rem;
+  padding-left: 0.75rem;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  --tw-shadow: 0 0 #0000;
+}
+[type=text]:focus,
+[type=email]:focus,
+[type=url]:focus,
+[type=password]:focus,
+[type=number]:focus,
+[type=date]:focus,
+[type=datetime-local]:focus,
+[type=month]:focus,
+[type=search]:focus,
+[type=tel]:focus,
+[type=time]:focus,
+[type=week]:focus,
+[multiple]:focus,
+textarea:focus,
+select:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  --tw-ring-inset: var(--tw-empty, );
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: #1C64F2;
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow:
+    var(--tw-ring-offset-shadow),
+    var(--tw-ring-shadow),
+    var(--tw-shadow);
+  border-color: #1C64F2;
+}
+input::placeholder,
+textarea::placeholder {
+  color: #6B7280;
+  opacity: 1;
+}
+::-webkit-datetime-edit-fields-wrapper {
+  padding: 0;
+}
+::-webkit-date-and-time-value {
+  min-height: 1.5em;
+}
+select:not([size]) {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
+  background-position: right 0.5rem center;
+  background-repeat: no-repeat;
+  background-size: 1.5em 1.5em;
+  padding-right: 2.5rem;
+  print-color-adjust: exact;
+}
+[multiple] {
+  background-image: initial;
+  background-position: initial;
+  background-repeat: unset;
+  background-size: initial;
+  padding-right: 0.75rem;
+  print-color-adjust: unset;
+}
+[type=checkbox],
+[type=radio] {
+  appearance: none;
+  padding: 0;
+  print-color-adjust: exact;
+  display: inline-block;
+  vertical-align: middle;
+  background-origin: border-box;
+  user-select: none;
+  flex-shrink: 0;
+  height: 1rem;
+  width: 1rem;
+  color: #1C64F2;
+  background-color: #fff;
+  border-color: #6B7280;
+  border-width: 1px;
+  --tw-shadow: 0 0 #0000;
+}
+[type=checkbox] {
+  border-radius: 0px;
+}
+[type=radio] {
+  border-radius: 100%;
+}
+[type=checkbox]:focus,
+[type=radio]:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  --tw-ring-inset: var(--tw-empty, );
+  --tw-ring-offset-width: 2px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: #1C64F2;
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow:
+    var(--tw-ring-offset-shadow),
+    var(--tw-ring-shadow),
+    var(--tw-shadow);
+}
+[type=checkbox]:checked,
+[type=radio]:checked,
+.dark [type=checkbox]:checked,
+.dark [type=radio]:checked {
+  border-color: transparent;
+  background-color: currentColor;
+  background-size: 100% 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+[type=checkbox]:checked {
+  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
+}
+[type=radio]:checked {
+  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
+}
+[type=checkbox]:indeterminate {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
+  border-color: transparent;
+  background-color: currentColor;
+  background-size: 100% 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+[type=checkbox]:indeterminate:hover,
+[type=checkbox]:indeterminate:focus {
+  border-color: transparent;
+  background-color: currentColor;
+}
+[type=file] {
+  background: unset;
+  border-color: inherit;
+  border-width: 0;
+  border-radius: 0;
+  padding: 0;
+  font-size: unset;
+  line-height: inherit;
+}
+[type=file]:focus {
+  outline: 1px auto inherit;
+}
+input[type=file]::file-selector-button {
+  color: white;
+  background: #1F2937;
+  border: 0;
+  font-weight: 500;
+  font-size: 0.8125rem;
+  cursor: pointer;
+  padding-top: 0.625rem;
+  padding-bottom: 0.625rem;
+  padding-left: 2rem;
+  padding-right: 1rem;
+  margin-inline-start: -1rem;
+  margin-inline-end: 1rem;
+}
+input[type=file]::file-selector-button:hover {
+  background: #374151;
+}
+input[type=range]::-webkit-slider-thumb {
+  height: 1.25rem;
+  width: 1.25rem;
+  background: #1C64F2;
+  border-radius: 9999px;
+  border: 0;
+  appearance: none;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  cursor: pointer;
+}
+input[type=range]:disabled::-webkit-slider-thumb {
+  background: #9CA3AF;
+}
+input[type=range]:focus::-webkit-slider-thumb {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow:
+    var(--tw-ring-offset-shadow),
+    var(--tw-ring-shadow),
+    var(--tw-shadow, 0 0 #0000);
+  --tw-ring-opacity: 1px;
+  --tw-ring-color: rgb(164 202 254 / var(--tw-ring-opacity));
+}
+input[type=range]::-moz-range-thumb {
+  height: 1.25rem;
+  width: 1.25rem;
+  background: #1C64F2;
+  border-radius: 9999px;
+  border: 0;
+  appearance: none;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  cursor: pointer;
+}
+input[type=range]:disabled::-moz-range-thumb {
+  background: #9CA3AF;
+}
+input[type=range]::-moz-range-progress {
+  background: #3F83F8;
+}
+input[type=range]::-ms-fill-lower {
+  background: #3F83F8;
+}
+[data-popper-arrow],
+[data-popper-arrow]:before {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background: inherit;
+}
+[data-popper-arrow] {
+  visibility: hidden;
+}
+[data-popper-arrow]:before {
+  content: "";
+  visibility: visible;
+  transform: rotate(45deg);
+}
+[data-popper-arrow]:after {
+  content: "";
+  visibility: visible;
+  transform: rotate(45deg);
+  position: absolute;
+  width: 9px;
+  height: 9px;
+  background: inherit;
+}
+[role=tooltip] > [data-popper-arrow]:before {
+  border-style: solid;
+  border-color: #e5e7eb;
+}
+[role=tooltip] > [data-popper-arrow]:after {
+  border-style: solid;
+  border-color: #e5e7eb;
+}
+[data-popover][role=tooltip][data-popper-placement^=top] > [data-popper-arrow]:before {
+  border-bottom-width: 1px;
+  border-right-width: 1px;
+}
+[data-popover][role=tooltip][data-popper-placement^=top] > [data-popper-arrow]:after {
+  border-bottom-width: 1px;
+  border-right-width: 1px;
+}
+[data-popover][role=tooltip][data-popper-placement^=right] > [data-popper-arrow]:before {
+  border-bottom-width: 1px;
+  border-left-width: 1px;
+}
+[data-popover][role=tooltip][data-popper-placement^=right] > [data-popper-arrow]:after {
+  border-bottom-width: 1px;
+  border-left-width: 1px;
+}
+[data-popover][role=tooltip][data-popper-placement^=bottom] > [data-popper-arrow]:before {
+  border-top-width: 1px;
+  border-left-width: 1px;
+}
+[data-popover][role=tooltip][data-popper-placement^=bottom] > [data-popper-arrow]:after {
+  border-top-width: 1px;
+  border-left-width: 1px;
+}
+[data-popover][role=tooltip][data-popper-placement^=left] > [data-popper-arrow]:before {
+  border-top-width: 1px;
+  border-right-width: 1px;
+}
+[data-popover][role=tooltip][data-popper-placement^=left] > [data-popper-arrow]:after {
+  border-top-width: 1px;
+  border-right-width: 1px;
+}
+[data-popover][role=tooltip][data-popper-placement^=top] > [data-popper-arrow] {
+  bottom: -5px;
+}
+[data-popover][role=tooltip][data-popper-placement^=bottom] > [data-popper-arrow] {
+  top: -5px;
+}
+[data-popover][role=tooltip][data-popper-placement^=left] > [data-popper-arrow] {
+  right: -5px;
+}
+[data-popover][role=tooltip][data-popper-placement^=right] > [data-popper-arrow] {
+  left: -5px;
+}
 *,
 ::before,
 ::after {
@@ -3934,7 +4237,7 @@ video {
   --tw-ring-inset: ;
   --tw-ring-offset-width: 0px;
   --tw-ring-offset-color: #fff;
-  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-color: rgb(63 131 248 / 0.5);
   --tw-ring-offset-shadow: 0 0 #0000;
   --tw-ring-shadow: 0 0 #0000;
   --tw-shadow: 0 0 #0000;
@@ -3980,7 +4283,7 @@ video {
   --tw-ring-inset: ;
   --tw-ring-offset-width: 0px;
   --tw-ring-offset-color: #fff;
-  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-color: rgb(63 131 248 / 0.5);
   --tw-ring-offset-shadow: 0 0 #0000;
   --tw-ring-shadow: 0 0 #0000;
   --tw-shadow: 0 0 #0000;
@@ -4004,48 +4307,44 @@ video {
   --tw-backdrop-saturate: ;
   --tw-backdrop-sepia: ;
 }
-.fixed {
-  position: fixed;
-}
-.left-20 {
-  left: 5rem;
-}
 .z-10 {
   z-index: 10;
 }
-.mt-2 {
-  margin-top: 0.5rem;
-}
 .block {
   display: block;
 }
 .inline {
   display: inline;
 }
-.w-56 {
-  width: 14rem;
+.hidden {
+  display: none;
 }
-.origin-top-right {
-  transform-origin: top right;
+.w-169 {
+  width: 169px;
 }
-.rounded-md {
-  border-radius: 6px;
+.divide-y > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-y-reverse: 0;
+  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
+  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
+}
+.divide-gray-100 > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-opacity: 1;
+  border-color: rgb(243 244 246 / var(--tw-divide-opacity));
+}
+.rounded-lg {
+  border-radius: 0.5rem;
 }
 .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
-.py-1 {
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
-}
 .italic {
   font-style: italic;
 }
 .underline {
   text-decoration-line: underline;
 }
-.shadow-md {
+.shadow {
   --tw-shadow: 0 0 0 1px rgba(0,0,0,0.04), 0 1px 12px 4px rgba(0,0,0,0.12);
   --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color), 0 1px 12px 4px var(--tw-shadow-color);
   box-shadow:
@@ -4053,6 +4352,9 @@ video {
     var(--tw-ring-shadow, 0 0 #0000),
     var(--tw-shadow);
 }
+.formatted-text-editor {
+  font-family: "Open Sans" !important;
+}
 .formatted-text-editor.editor-wrapper {
   border-radius: 4px;
   border-width: 2px;
@@ -4094,6 +4396,42 @@ video {
     var(--tw-ring-shadow, 0 0 #0000),
     var(--tw-shadow);
 }
+.remirror-theme h1 {
+  font-size: 1.625rem;
+  font-weight: 600;
+  letter-spacing: -0.2px;
+  line-height: 2rem;
+}
+.remirror-theme h2 {
+  font-size: 1.25rem;
+  font-weight: 600;
+  letter-spacing: -0.5px;
+  line-height: 1.5rem;
+}
+.remirror-theme h3 {
+  font-size: 1.125rem;
+  font-weight: 600;
+  letter-spacing: -0.2px;
+  line-height: 1.375rem;
+}
+.remirror-theme h4 {
+  font-size: 1rem;
+  font-weight: 700;
+  letter-spacing: -0.2px;
+  line-height: 1.25rem;
+}
+.remirror-theme h5 {
+  font-size: 1rem;
+  font-weight: 600;
+  letter-spacing: -0.2px;
+  line-height: 1.25rem;
+}
+.remirror-theme h6 {
+  font-size: 0.875rem;
+  font-weight: 600;
+  letter-spacing: -0.2px;
+  line-height: 1.25rem;
+}
 .formatted-text-editor .editor-toolbar {
   border-radius: 4px;
   border-width: 2px;
@@ -4172,10 +4510,7 @@ video {
   --tw-text-opacity: 1;
   color: rgb(7 116 210 / var(--tw-text-opacity));
 }
-.toolbar-dropdown {
-  align-self: center;
-}
-.toolbar-dropdown .toolbar-dropdown__button {
+.toolbar-dropdown__button {
   font-family:
     Open Sans,
     Arial,
@@ -4184,25 +4519,34 @@ video {
   font-weight: 600;
   --tw-text-opacity: 1;
   color: rgb(112 112 112 / var(--tw-text-opacity));
+  align-self: center;
   height: 2rem;
   padding-left: 0.5rem;
 }
-.toolbar-dropdown .toolbar-dropdown__button:active,
-.toolbar-dropdown .toolbar-dropdown__button:hover,
-.toolbar-dropdown .toolbar-dropdown__button:focus {
+.toolbar-dropdown__button:active,
+.toolbar-dropdown__button:hover,
+.toolbar-dropdown__button:focus {
   background-color: rgba(0, 0, 0, 0.04);
 }
-.toolbar-dropdown .toolbar-dropdown__button .toolbar-dropdown__label {
-  padding-right: 0.25rem;
+.toolbar-dropdown__button .toolbar-dropdown__label {
+  display: inline-flex;
+  width: 7rem;
 }
-.toolbar-dropdown .toolbar-dropdown__button .toolbar-dropdown__icon {
+.toolbar-dropdown__button .toolbar-dropdown__icon {
   width: 1rem;
   height: 1.5rem;
 }
+.toolbar-dropdown__menu {
+  inset: 0rem auto auto 1rem !important;
+}
 .dropdown-button {
-  height: 2.5rem;
-  padding: 0.25rem 0.5rem;
-  justify-content: space-between;
-  border-radius: 0;
+  padding: 4px 8px;
+  color: #707070;
+  height: 40px;
   width: 100%;
+  justify-content: space-between;
+}
+.dark .dark\:bg-gray-700 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(55 65 81 / var(--tw-bg-opacity));
 }

package/lib/ui/DropdownButton/DropdownButton.js

@@ -2,7 +2,7 @@ import React from 'react';
 import CheckIcon from '@mui/icons-material/Check';
 const DropdownButton = ({ children, handleOnClick, isDisabled, isActive, label }) => {
     return (React.createElement("button", { "aria-label": label, title: label, type: "button", onClick: handleOnClick, disabled: isDisabled, className: `btn dropdown-button ${isActive ? 'is-active' : ''}` },
-        children || label,
+        React.createElement("span", null, children || label),
         isActive && React.createElement(CheckIcon, { className: "dropdown-button-icon" })));
 };
 export default DropdownButton;

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

@@ -1,3 +1,4 @@
+import 'flowbite';
 type ToolbarDropdownProps = {
     children: JSX.Element | JSX.Element[];
     label: string;

package/lib/ui/ToolbarDropdown/ToolbarDropdown.js

@@ -1,13 +1,12 @@
 import React from 'react';
-import { Menu } from '@headlessui/react';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import 'flowbite';
 const ToolbarDropdown = ({ children, label }) => {
-    return (React.createElement(Menu, { as: "div", className: "toolbar-dropdown" },
-        React.createElement("div", null,
-            React.createElement(Menu.Button, { className: "toolbar-dropdown__button" },
-                React.createElement("span", { className: "toolbar-dropdown__label" }, label),
-                React.createElement(ExpandMoreIcon, { className: "toolbar-dropdown__icon", "aria-hidden": "true" }))),
-        React.createElement(Menu.Items, { className: "fixed left-20 z-10 mt-2 w-56 origin-top-right rounded-md bg-white shadow-md " },
-            React.createElement("div", { className: "py-1" }, children))));
+    return (React.createElement(React.Fragment, null,
+        React.createElement("button", { id: "dropdownHoverButton", "data-dropdown-toggle": "dropdown", className: "toolbar-dropdown__button", type: "button" },
+            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 hidden bg-white divide-y divide-gray-100 rounded-lg shadow w-169 dark:bg-gray-700" },
+            React.createElement("ul", { "aria-labelledby": "dropdownHoverButton" }, children))));
 };
 export default ToolbarDropdown;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squiz/formatted-text-editor",
-  "version": "1.12.0-alpha.38",
+  "version": "1.12.0-alpha.40",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "scripts": {
@@ -16,9 +16,9 @@
     "test:e2e": "vite build && vite preview --port 8080 & cypress open"
   },
   "dependencies": {
-    "@headlessui/react": "^1.7.10",
     "@mui/icons-material": "5.11.0",
-    "@remirror/react": "2.0.25"
+    "@remirror/react": "2.0.25",
+    "flowbite": "^1.6.3"
   },
   "devDependencies": {
     "@testing-library/cypress": "9.0.0",
@@ -61,5 +61,5 @@
   "volta": {
     "node": "16.19.0"
   },
-  "gitHead": "d4b60ab436f867e63c904ecabf780dce2a2b0a44"
+  "gitHead": "8db852ade2813dc297b7d0fa4975e0c5a57ac83e"
 }

package/src/Editor/Editor.mock.tsx

@@ -0,0 +1,40 @@
+import { Remirror, useRemirror, useRemirrorContext } from '@remirror/react';
+import React from 'react';
+import { EditorToolbar } from '../EditorToolbar/EditorToolbar';
+import { Extensions } from '../Extensions/Extensions';
+
+type MockEditorProps = {
+  setContent?: any;
+};
+
+export const MockEditor = ({ setContent }: MockEditorProps) => {
+  const { manager, state, setState } = useRemirror({
+    extensions: Extensions,
+    selection: 'start',
+    stringHandler: 'html',
+  });
+
+  const Component = () => {
+    setContent && setContent.mockImplementation(useRemirrorContext().setContent);
+    return null;
+  };
+
+  const handleChange = (parameter: { state: any }) => {
+    setState(parameter.state);
+  };
+
+  return (
+    <Remirror
+      manager={manager}
+      onChange={handleChange}
+      placeholder="Write something"
+      label="Text editor"
+      state={state}
+      autoRender="start"
+    >
+      <EditorToolbar manager={manager} />
+      <Component />
+      <EditorToolbar manager={manager} isPopover />
+    </Remirror>
+  );
+};

package/src/Editor/Editor.spec.tsx

@@ -1,7 +1,11 @@
+import { jest } from '@jest/globals';
 import React from 'react';
-import '@testing-library/jest-dom';
+import { act, fireEvent, render, screen } from '@testing-library/react';
+import { MockEditor } from './Editor.mock';
 import Editor from './Editor';
-import { fireEvent, render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+const setContent: any = jest.fn();
 
 describe('Formatted text editor', () => {
   it('Renders the text editor', () => {
@@ -92,7 +96,7 @@ describe('Formatted text editor', () => {
 
     expect(baseElement.querySelector('div.remirror-editor h1')).toBeFalsy();
 
-    const headingDropdown = baseElement.querySelector('.toolbar-dropdown button') as HTMLButtonElement;
+    const headingDropdown = baseElement.querySelector('.toolbar-dropdown__button') as HTMLButtonElement;
     expect(headingDropdown).toBeTruthy();
     fireEvent.click(headingDropdown);
 
@@ -109,7 +113,7 @@ describe('Formatted text editor', () => {
 
     expect(baseElement.querySelector('div.remirror-editor h2')).toBeFalsy();
 
-    const headingDropdown = baseElement.querySelector('.toolbar-dropdown button') as HTMLButtonElement;
+    const headingDropdown = baseElement.querySelector('.toolbar-dropdown__button') as HTMLButtonElement;
     expect(headingDropdown).toBeTruthy();
     fireEvent.click(headingDropdown);
 
@@ -126,7 +130,7 @@ describe('Formatted text editor', () => {
 
     expect(baseElement.querySelector('div.remirror-editor h3')).toBeFalsy();
 
-    const headingDropdown = baseElement.querySelector('.toolbar-dropdown button') as HTMLButtonElement;
+    const headingDropdown = baseElement.querySelector('.toolbar-dropdown__button') as HTMLButtonElement;
     expect(headingDropdown).toBeTruthy();
     fireEvent.click(headingDropdown);
 
@@ -143,7 +147,7 @@ describe('Formatted text editor', () => {
 
     expect(baseElement.querySelector('div.remirror-editor h4')).toBeFalsy();
 
-    const headingDropdown = baseElement.querySelector('.toolbar-dropdown button') as HTMLButtonElement;
+    const headingDropdown = baseElement.querySelector('.toolbar-dropdown__button') as HTMLButtonElement;
     expect(headingDropdown).toBeTruthy();
     fireEvent.click(headingDropdown);
 
@@ -160,7 +164,7 @@ describe('Formatted text editor', () => {
 
     expect(baseElement.querySelector('div.remirror-editor h5')).toBeFalsy();
 
-    const headingDropdown = baseElement.querySelector('.toolbar-dropdown button') as HTMLButtonElement;
+    const headingDropdown = baseElement.querySelector('.toolbar-dropdown__button') as HTMLButtonElement;
     expect(headingDropdown).toBeTruthy();
     fireEvent.click(headingDropdown);
 
@@ -177,7 +181,7 @@ describe('Formatted text editor', () => {
 
     expect(baseElement.querySelector('div.remirror-editor h6')).toBeFalsy();
 
-    const headingDropdown = baseElement.querySelector('.toolbar-dropdown button') as HTMLButtonElement;
+    const headingDropdown = baseElement.querySelector('.toolbar-dropdown__button') as HTMLButtonElement;
     expect(headingDropdown).toBeTruthy();
     fireEvent.click(headingDropdown);
 
@@ -194,7 +198,7 @@ describe('Formatted text editor', () => {
 
     expect(baseElement.querySelector('div.remirror-editor pre')).toBeFalsy();
 
-    const headingDropdown = baseElement.querySelector('.toolbar-dropdown button') as HTMLButtonElement;
+    const headingDropdown = baseElement.querySelector('.toolbar-dropdown__button') as HTMLButtonElement;
     expect(headingDropdown).toBeTruthy();
     fireEvent.click(headingDropdown);
 
@@ -211,7 +215,7 @@ describe('Formatted text editor', () => {
 
     expect(baseElement.querySelectorAll('div.remirror-editor p')).toHaveLength(1);
 
-    const headingDropdown = baseElement.querySelector('.toolbar-dropdown button') as HTMLButtonElement;
+    const headingDropdown = baseElement.querySelector('.toolbar-dropdown__button') as HTMLButtonElement;
     expect(headingDropdown).toBeTruthy();
     fireEvent.click(headingDropdown);
 
@@ -225,4 +229,26 @@ describe('Formatted text editor', () => {
 
     expect(baseElement.querySelectorAll('div.remirror-editor p')).toHaveLength(2);
   });
+
+  it('Should allow text input & undo input upon clicking undo button', () => {
+    const { baseElement, getByLabelText } = render(<MockEditor setContent={setContent} />);
+
+    const textContent = `This is a string with a random number: ${Math.random() * 9999}`;
+
+    // This sets the content of the text editor
+    act(() => {
+      setContent(`<p>${textContent}</p>`, { triggerChange: true });
+    });
+
+    const editorNode = getByLabelText(`Text editor`);
+    expect(editorNode).toBeTruthy();
+    expect(editorNode.textContent).toBe(textContent);
+
+    // Testing if clicking undo button removes text from editor
+    const undoButton = baseElement.querySelector('button[title="Undo (cmd+Z)"]') as HTMLButtonElement;
+    expect(undoButton).toBeTruthy();
+    fireEvent.click(undoButton);
+
+    expect(editorNode.textContent).toBe('');
+  });
 });

package/src/Editor/Editor.tsx

@@ -1,18 +1,8 @@
 import React from 'react';
-import {
-  BoldExtension,
-  HeadingExtension,
-  ItalicExtension,
-  NodeFormattingExtension,
-  ParagraphExtension,
-  UnderlineExtension,
-  HistoryExtension,
-  wysiwygPreset,
-} from 'remirror/extensions';
 import { EditorComponent, Remirror, useRemirror } from '@remirror/react';
-import { RemirrorContentType, Extension } from '@remirror/core';
+import { RemirrorContentType } from '@remirror/core';
 import { EditorToolbar } from '../EditorToolbar/EditorToolbar';
-import { PreformattedExtension } from '../extensions/PreformattedExtension/PreformattedExtension';
+import { Extensions } from '../Extensions/Extensions';
 
 type EditorProps = {
   content?: RemirrorContentType;
@@ -20,17 +10,7 @@ type EditorProps = {
 
 const Editor = ({ content }: EditorProps) => {
   const { manager, state, setState } = useRemirror({
-    extensions: () => [
-      ...(wysiwygPreset() as Extension[]),
-      new BoldExtension(),
-      new HeadingExtension(),
-      new ItalicExtension(),
-      new NodeFormattingExtension(),
-      new ParagraphExtension(),
-      new PreformattedExtension(),
-      new UnderlineExtension(),
-      new HistoryExtension(),
-    ],
+    extensions: Extensions,
     content,
     selection: 'start',
     stringHandler: 'html',

package/src/Editor/_editor.scss

@@ -1,4 +1,6 @@
 .formatted-text-editor {
+  font-family: 'Open Sans' !important;
+
   &.editor-wrapper {
     @apply bg-white rounded border-gray-300 border-2 border-solid;
   }
@@ -29,3 +31,45 @@
     @apply shadow-none;
   }
 }
+
+.remirror-theme h1 {
+  font-size: 1.625rem;
+  font-weight: 600;
+  letter-spacing: -0.2px;
+  line-height: 2rem;
+}
+
+.remirror-theme h2 {
+  font-size: 1.25rem;
+  font-weight: 600;
+  letter-spacing: -0.5px;
+  line-height: 1.5rem;
+}
+
+.remirror-theme h3 {
+  font-size: 1.125rem;
+  font-weight: 600;
+  letter-spacing: -0.2px;
+  line-height: 1.375rem;
+}
+
+.remirror-theme h4 {
+  font-size: 1rem;
+  font-weight: 700;
+  letter-spacing: -0.2px;
+  line-height: 1.25rem;
+}
+
+.remirror-theme h5 {
+  font-size: 1rem;
+  font-weight: 600;
+  letter-spacing: -0.2px;
+  line-height: 1.25rem;
+}
+
+.remirror-theme h6 {
+  font-size: 0.875rem;
+  font-weight: 600;
+  letter-spacing: -0.2px;
+  line-height: 1.25rem;
+}

package/src/EditorToolbar/Tools/TextType/Preformatted/PreformattedButton.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useCommands, useActive } from '@remirror/react';
-import { PreformattedExtension } from '../../../../extensions/PreformattedExtension/PreformattedExtension';
+import { PreformattedExtension } from '../../../../Extensions/PreformattedExtension/PreformattedExtension';
 import DropdownButton from '../../../../ui/DropdownButton/DropdownButton';
 
 const PreformattedButton = () => {

package/src/EditorToolbar/Tools/TextType/TextTypeDropdown.tsx

@@ -4,7 +4,7 @@ import ParagraphButton from './Paragraph/ParagraphButton';
 import PreformattedButton from './Preformatted/PreformattedButton';
 import ToolbarDropdown from '../../../ui/ToolbarDropdown/ToolbarDropdown';
 import { useActive, VerticalDivider } from '@remirror/react';
-import { PreformattedExtension } from '../../../extensions/PreformattedExtension/PreformattedExtension';
+import { PreformattedExtension } from '../../../Extensions/PreformattedExtension/PreformattedExtension';
 
 const TextTypeDropdown = () => {
   const active = useActive<PreformattedExtension>();

package/src/Extensions/Extensions.tsx

@@ -0,0 +1,24 @@
+import {
+  BoldExtension,
+  HeadingExtension,
+  ItalicExtension,
+  NodeFormattingExtension,
+  ParagraphExtension,
+  UnderlineExtension,
+  HistoryExtension,
+  wysiwygPreset,
+} from 'remirror/extensions';
+import { PreformattedExtension } from './PreformattedExtension/PreformattedExtension';
+import { Extension } from '@remirror/core';
+
+export const Extensions = () => [
+  ...(wysiwygPreset() as Extension[]),
+  new BoldExtension(),
+  new HeadingExtension(),
+  new ItalicExtension(),
+  new NodeFormattingExtension(),
+  new ParagraphExtension(),
+  new PreformattedExtension(),
+  new UnderlineExtension(),
+  new HistoryExtension(),
+];

package/src/FormattedTextEditor.spec.tsx

@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react';
+import { FormattedTextEditor } from './';
+import React from 'react';
+
+describe('<FormattedTextEditor />', () => {
+  it('should render "<FormattedTextEditor />" component', () => {
+    const { baseElement } = render(<FormattedTextEditor />);
+    expect(baseElement).toBeTruthy();
+  });
+});

package/src/ui/DropdownButton/DropdownButton.tsx

@@ -19,7 +19,7 @@ const DropdownButton = ({ children, handleOnClick, isDisabled, isActive, label }
       disabled={isDisabled}
       className={`btn dropdown-button ${isActive ? 'is-active' : ''}`}
     >
-      {children || label}
+      <span>{children || label}</span>
       {isActive && <CheckIcon className="dropdown-button-icon" />}
     </button>
   );

package/src/ui/DropdownButton/_dropdown-button.scss

@@ -1,7 +1,7 @@
 .dropdown-button {
-  height: 2.5rem;
-  padding: 0.25rem 0.5rem;
-  justify-content: space-between;
-  border-radius: 0;
+  padding: 4px 8px;
+  color: #707070;
+  height: 40px;
   width: 100%;
+  justify-content: space-between;
 }

package/src/ui/ToolbarDropdown/ToolbarDropdown.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Menu } from '@headlessui/react';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import 'flowbite';
 
 type ToolbarDropdownProps = {
   children: JSX.Element | JSX.Element[];
@@ -9,18 +9,23 @@ type ToolbarDropdownProps = {
 
 const ToolbarDropdown = ({ children, label }: ToolbarDropdownProps) => {
   return (
-    <Menu as="div" className="toolbar-dropdown">
-      <div>
-        <Menu.Button className="toolbar-dropdown__button">
-          <span className="toolbar-dropdown__label">{label}</span>
-          <ExpandMoreIcon className="toolbar-dropdown__icon" aria-hidden="true" />
-        </Menu.Button>
+    <>
+      <button
+        id="dropdownHoverButton"
+        data-dropdown-toggle="dropdown"
+        className="toolbar-dropdown__button"
+        type="button"
+      >
+        <span className="toolbar-dropdown__label">{label}</span>
+        <ExpandMoreIcon className="toolbar-dropdown__icon" aria-hidden="true" />
+      </button>
+      <div
+        id="dropdown"
+        className="toolbar-dropdown__menu z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow w-169 dark:bg-gray-700"
+      >
+        <ul aria-labelledby="dropdownHoverButton">{children}</ul>
       </div>
-
-      <Menu.Items className="fixed left-20 z-10 mt-2 w-56 origin-top-right rounded-md bg-white shadow-md ">
-        <div className="py-1">{children}</div>
-      </Menu.Items>
-    </Menu>
+    </>
   );
 };
 

package/src/ui/ToolbarDropdown/_toolbar-dropdown.scss

@@ -1,25 +1,27 @@
-.toolbar-dropdown {
+.toolbar-dropdown__button {
+  @apply font-base text-md font-semibold text-gray-600;
   align-self: center;
 
-  .toolbar-dropdown__button {
-    @apply font-base text-md font-semibold text-gray-600;
+  height: 2rem;
+  padding-left: 0.5rem;
 
-    height: 2rem;
-    padding-left: 0.5rem;
-
-    &:active,
-    &:hover,
-    &:focus {
-      background-color: rgba(black, 0.04);
-    }
+  &:active,
+  &:hover,
+  &:focus {
+    background-color: rgba(black, 0.04);
+  }
 
-    .toolbar-dropdown__label {
-      padding-right: 0.25rem;
-    }
+  .toolbar-dropdown__label {
+    display: inline-flex;
+    width: 7rem;
+  }
 
-    .toolbar-dropdown__icon {
-      width: 1rem;
-      height: 1.5rem;
-    }
+  .toolbar-dropdown__icon {
+    width: 1rem;
+    height: 1.5rem;
   }
 }
+
+.toolbar-dropdown__menu {
+  inset: 0rem auto auto 1rem !important;
+}

package/tailwind.config.cjs

@@ -1,6 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}', './node_modules/flowbite/**/*.js'],
   theme: {
     extend: {
       borderRadius: {
@@ -40,6 +40,7 @@ module.exports = {
         6: '1.5rem', // 24px
         7: '1.75rem', // 28px
         8: '2rem', // 32px
+        169: '169px', // 169px
       },
       colors: {
         gray: {
@@ -57,5 +58,5 @@ module.exports = {
       },
     },
   },
-  plugins: [],
+  plugins: [require('flowbite/plugin')],
 };