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

package/demo/App.tsx

@@ -8,7 +8,7 @@ import TextFieldsOutlinedIcon from '@mui/icons-material/TextFieldsOutlined';
 import DeleteOutlineOutlinedIcon from '@mui/icons-material/DeleteOutlineOutlined';
 import { VerticalDivider } from '@remirror/react-components';
 const ComponentHandlers = () => (
-  <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '5px' }}>
+  <div style={{ display: 'flex', justifyContent: 'flex-end', maxHeight: '2rem' }}>
     <Button icon={<TextFieldsOutlinedIcon />} onClick={(x) => x} />
     <VerticalDivider />
     <Button icon={<DeleteOutlineOutlinedIcon />} onClick={(x) => x} />
@@ -16,12 +16,13 @@ const ComponentHandlers = () => (
 );
 
 function App() {
-  const [showChildren] = useState(false);
+  const [showChildren, setShowChildren] = useState(false);
   const [doc, setDoc] = useState('');
   const [squizDoc, setSquizDoc] = useState('');
   const [reconvertedDoc, setReconvertedDoc] = useState('');
   const [error, setError] = useState<unknown>(null);
   const [editable, setEditable] = useState(true);
+  const [border, setBorder] = useState(true);
 
   const handleEditorChange: RemirrorEventListener<Extension> = (parameter) => {
     try {
@@ -44,6 +45,15 @@ function App() {
         <div className="form-group">
           <label htmlFor="editable">Editable</label>&nbsp;
           <input id="editable" type="checkbox" onChange={() => setEditable(!editable)} checked={editable} />
+          <label htmlFor="border">Border</label>&nbsp;
+          <input id="border" type="checkbox" onChange={() => setBorder(!border)} checked={border} />
+          <label htmlFor="showChildren">Show children</label>&nbsp;
+          <input
+            id="showChildren"
+            type="checkbox"
+            onChange={() => setShowChildren(!showChildren)}
+            checked={showChildren}
+          />
         </div>
       </div>
       <h1>Editor</h1>
@@ -51,6 +61,7 @@ function App() {
         <AppContext>
           <Editor
             editable={editable}
+            border={border}
             content={`<p>Hello <a href="https://www.google.com"><strong>Mr Bean</strong></a>, nice to <a href="https://www.google.com">meet you</a>.<img src="https://media2.giphy.com/media/3o6ozsIxg5legYvggo/giphy.gif" height="150" width="200"/></p>`}
             onChange={handleEditorChange}
           >

package/demo/index.scss

@@ -28,12 +28,6 @@ h1 {
   overflow: scroll;
 }
 
-.remirror-editor {
-  height: 35vh;
-  max-height: 35vh;
-  overflow: scroll;
-}
-
 .error {
   color: red;
 }

package/lib/Editor/Editor.d.ts

@@ -1,11 +1,13 @@
 import { ReactNode } from 'react';
 import { RemirrorContentType, RemirrorEventListener, Extension } from '@remirror/core';
 type EditorProps = {
+    className?: string;
     content?: RemirrorContentType;
     onChange?: RemirrorEventListener<Extension>;
     editable?: boolean;
+    border?: boolean;
     children?: ReactNode;
     isFocused?: boolean;
 };
-declare const Editor: ({ content, editable, onChange, children, isFocused }: EditorProps) => JSX.Element;
+declare const Editor: ({ content, className, border, editable, onChange, children, isFocused }: EditorProps) => JSX.Element;
 export default Editor;

package/lib/Editor/Editor.js

@@ -47,7 +47,7 @@ const WrappedEditor = () => {
     (0, react_2.useEditorEvent)('paste', preventImagePaste);
     return react_1.default.createElement(react_2.EditorComponent, null);
 };
-const Editor = ({ content, editable = true, onChange, children, isFocused }) => {
+const Editor = ({ content, className, border = true, editable = true, onChange, children, isFocused }) => {
     const { manager, state, setState } = (0, react_2.useRemirror)({
         extensions: (0, Extensions_1.createExtensions)((0, react_1.useContext)(EditorContext_1.EditorContext), (0, react_1.useContext)(resource_browser_1.ResourceBrowserContext)),
         content,
@@ -65,12 +65,11 @@ const Editor = ({ content, editable = true, onChange, children, isFocused }) =>
             manager.view.dom.focus();
         }
     }, []);
-    return (react_1.default.createElement("div", { className: "squiz-fte-scope" },
-        react_1.default.createElement("div", { ref: wrapperRef, onBlur: handleBlur, onFocusCapture: handleFocus, className: (0, clsx_1.default)('formatted-text-editor', !editable && 'formatted-text-editor--is-disabled') },
-            react_1.default.createElement(react_2.Remirror, { manager: manager, state: state, editable: editable, onChange: handleChange, placeholder: "Write something", label: "Text editor" },
-                editable && react_1.default.createElement(EditorToolbar_1.Toolbar, { isVisible: isVisible }),
-                children,
-                react_1.default.createElement(WrappedEditor, null),
-                editable && react_1.default.createElement(EditorToolbar_1.FloatingToolbar, null)))));
+    return (react_1.default.createElement("div", { ref: wrapperRef, onBlur: handleBlur, onFocusCapture: handleFocus, className: (0, clsx_1.default)('squiz-fte-scope', 'squiz-fte-scope__editor', !editable && 'squiz-fte-scope__editor--is-disabled', border && 'squiz-fte-scope__editor--bordered', className) },
+        react_1.default.createElement(react_2.Remirror, { manager: manager, state: state, editable: editable, onChange: handleChange, placeholder: "Write something", label: "Text editor" },
+            editable && react_1.default.createElement(EditorToolbar_1.Toolbar, { isVisible: isVisible }),
+            children && react_1.default.createElement("div", { className: "squiz-fte-scope__editor__children" }, children),
+            react_1.default.createElement(WrappedEditor, null),
+            editable && react_1.default.createElement(EditorToolbar_1.FloatingToolbar, null))));
 };
 exports.default = Editor;

package/lib/EditorToolbar/Toolbar.js

@@ -23,22 +23,23 @@ const HorizontalLineButton_1 = __importDefault(require("./Tools/HorizontalLine/H
 const hooks_1 = require("../hooks");
 const Toolbar = ({ isVisible }) => {
     const extensionNames = (0, hooks_1.useExtensionNames)();
-    return (react_1.default.createElement(react_components_1.Toolbar, { className: (0, clsx_1.default)('remirror-toolbar editor-toolbar header-toolbar', isVisible && 'show-toolbar'), role: "toolbar", tabIndex: 0 },
-        extensionNames.history && (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(UndoButton_1.default, null),
-            react_1.default.createElement(RedoButton_1.default, null),
-            react_1.default.createElement(react_components_1.VerticalDivider, null))),
-        extensionNames.heading && extensionNames.paragraph && extensionNames.preformatted && react_1.default.createElement(TextTypeDropdown_1.default, null),
-        extensionNames.bold && react_1.default.createElement(BoldButton_1.default, null),
-        extensionNames.italic && react_1.default.createElement(ItalicButton_1.default, null),
-        extensionNames.underline && react_1.default.createElement(UnderlineButton_1.default, null),
-        extensionNames.nodeFormatting && react_1.default.createElement(TextAlignButtons_1.default, null),
-        extensionNames.listItem && react_1.default.createElement(ListButtons_1.default, null),
-        extensionNames.horizontalRule && react_1.default.createElement(HorizontalLineButton_1.default, null),
-        extensionNames.link && (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(LinkButton_1.default, null),
-            react_1.default.createElement(RemoveLinkButton_1.default, null))),
-        extensionNames.image && react_1.default.createElement(ImageButton_1.default, null),
-        extensionNames.clearFormatting && react_1.default.createElement(ClearFormattingButton_1.default, null)));
+    return (react_1.default.createElement(react_components_1.Toolbar, { className: (0, clsx_1.default)('editor-toolbar header-toolbar', isVisible && 'show-toolbar'), role: "toolbar", tabIndex: 0 },
+        react_1.default.createElement("div", { className: "editor-toolbar__tools" },
+            extensionNames.history && (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(UndoButton_1.default, null),
+                react_1.default.createElement(RedoButton_1.default, null),
+                react_1.default.createElement(react_components_1.VerticalDivider, null))),
+            extensionNames.heading && extensionNames.paragraph && extensionNames.preformatted && react_1.default.createElement(TextTypeDropdown_1.default, null),
+            extensionNames.bold && react_1.default.createElement(BoldButton_1.default, null),
+            extensionNames.italic && react_1.default.createElement(ItalicButton_1.default, null),
+            extensionNames.underline && react_1.default.createElement(UnderlineButton_1.default, null),
+            extensionNames.nodeFormatting && react_1.default.createElement(TextAlignButtons_1.default, null),
+            extensionNames.listItem && react_1.default.createElement(ListButtons_1.default, null),
+            extensionNames.horizontalRule && react_1.default.createElement(HorizontalLineButton_1.default, null),
+            extensionNames.link && (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(LinkButton_1.default, null),
+                react_1.default.createElement(RemoveLinkButton_1.default, null))),
+            extensionNames.image && react_1.default.createElement(ImageButton_1.default, null),
+            extensionNames.clearFormatting && react_1.default.createElement(ClearFormattingButton_1.default, null))));
 };
 exports.Toolbar = Toolbar;

package/lib/index.css

@@ -509,12 +509,15 @@
   white-space: nowrap !important;
 }
 .squiz-fte-scope .rounded {
-  border-radius: 4px !important;
+  border-radius: 8px !important;
 }
 .squiz-fte-scope .rounded-t-sm {
   border-top-left-radius: 0.125rem !important;
   border-top-right-radius: 0.125rem !important;
 }
+.squiz-fte-scope .border {
+  border-width: 1px !important;
+}
 .squiz-fte-scope .border-0 {
   border-width: 0px !important;
 }
@@ -741,7 +744,7 @@
   padding: 6px 12px;
   position: relative;
   width: 100%;
-  border-radius: 4px;
+  border-radius: 8px;
   border-width: 2px;
   --tw-border-opacity: 1;
   border-color: rgb(224 224 224 / var(--tw-border-opacity));
@@ -788,27 +791,23 @@
   line-height: 1.23;
   padding-top: 0.25rem;
 }
-.squiz-fte-scope .formatted-text-editor {
+.squiz-fte-scope.squiz-fte-scope__editor {
   font-family: "Open Sans" !important;
-  border-radius: 4px;
-  border-width: 2px;
-  border-style: solid;
+  border-radius: 8px;
   --tw-border-opacity: 1;
   border-color: rgb(224 224 224 / var(--tw-border-opacity));
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
-.squiz-fte-scope .formatted-text-editor .remirror-editor-wrapper {
+.squiz-fte-scope.squiz-fte-scope__editor:has(.squiz-fte-scope.squiz-fte-scope__editor__children) {
+  min-height: 2rem;
+  width: 100%;
+}
+.squiz-fte-scope.squiz-fte-scope__editor:has(.squiz-fte-scope.squiz-fte-scope__editor__children) .remirror-editor {
   padding-top: 0px;
-  --tw-text-opacity: 1;
-  color: rgb(61 61 61 / var(--tw-text-opacity));
 }
-.squiz-fte-scope .formatted-text-editor .remirror-editor {
-  border-bottom-right-radius: 4px;
-  border-bottom-left-radius: 4px;
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-  padding: 0.75rem;
+.squiz-fte-scope.squiz-fte-scope__editor .remirror-editor {
+  padding: 2rem;
   --tw-shadow: 0 0 #0000;
   --tw-shadow-colored: 0 0 #0000;
   box-shadow:
@@ -818,22 +817,27 @@
   overflow: auto;
   min-height: 15vh;
 }
-.squiz-fte-scope .formatted-text-editor .remirror-editor:active,
-.squiz-fte-scope .formatted-text-editor .remirror-editor:focus {
+.squiz-fte-scope.squiz-fte-scope__editor .remirror-editor:active,
+.squiz-fte-scope.squiz-fte-scope__editor .remirror-editor:focus {
   outline-width: 0px;
 }
-.squiz-fte-scope .formatted-text-editor .remirror-editor p {
+.squiz-fte-scope.squiz-fte-scope__editor .remirror-editor p {
   display: block;
 }
-.squiz-fte-scope .formatted-text-editor--is-disabled .remirror-editor {
+.squiz-fte-scope.squiz-fte-scope__editor--bordered {
+  border-width: 2px;
+  border-style: solid;
+}
+.squiz-fte-scope.squiz-fte-scope__editor--is-disabled {
   cursor: not-allowed;
+  border-width: 0px;
   --tw-bg-opacity: 1;
-  background-color: rgb(224 224 224 / var(--tw-bg-opacity));
+  background-color: rgb(247 247 247 / var(--tw-bg-opacity));
 }
-.squiz-fte-scope .formatted-text-editor--is-disabled .remirror-is-empty:first-of-type::before {
+.squiz-fte-scope.squiz-fte-scope__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 {
+.squiz-fte-scope.squiz-fte-scope__editor .remirror-is-empty:first-of-type::before {
   position: absolute;
   pointer-events: none;
   height: 0;
@@ -842,16 +846,16 @@
   --tw-text-opacity: 1;
   color: rgb(148 148 148 / var(--tw-text-opacity));
 }
-.squiz-fte-scope .formatted-text-editor .ProseMirror-selectednode {
+.squiz-fte-scope.squiz-fte-scope__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 {
+.squiz-fte-scope.squiz-fte-scope__editor img {
   display: inline;
 }
-.squiz-fte-scope .formatted-text-editor:has(.show-toolbar) {
+.squiz-fte-scope.squiz-fte-scope__editor:has(.show-toolbar) {
   border-width: 0px;
   --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);
@@ -862,25 +866,25 @@
 }
 .squiz-fte-scope .editor-toolbar,
 .squiz-fte-scope__floating-popover {
-  border-top-left-radius: 4px;
-  border-top-right-radius: 4px;
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+  background-color: transparent;
+}
+.squiz-fte-scope .editor-toolbar__tools {
+  display: flex;
+  width: 100%;
+  flex-wrap: wrap;
+  justify-items: center;
   border-bottom-width: 2px;
   border-style: solid;
   --tw-border-opacity: 1;
   border-color: rgb(237 237 237 / var(--tw-border-opacity));
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
   padding: 0.25rem;
-  display: flex;
-  justify-items: center;
-  flex-wrap: wrap;
 }
-.squiz-fte-scope .editor-toolbar > *:not(:first-child, .MuiDivider-root),
-.squiz-fte-scope__floating-popover > *:not(:first-child, .MuiDivider-root) {
+.squiz-fte-scope .editor-toolbar__tools > *:not(:first-child, .MuiDivider-root) {
   margin: 0 0 0 2px;
 }
-.squiz-fte-scope .editor-toolbar .MuiDivider-root,
-.squiz-fte-scope__floating-popover .MuiDivider-root {
+.squiz-fte-scope .editor-toolbar__tools .MuiDivider-root {
   margin-top: 0px;
   margin-bottom: 0px;
   margin-left: 0.25rem;
@@ -889,17 +893,17 @@
   margin-right: 2px;
   height: auto;
 }
-.squiz-fte-scope .editor-toolbar .squiz-fte-btn,
-.squiz-fte-scope__floating-popover .squiz-fte-btn {
+.squiz-fte-scope .editor-toolbar__tools .squiz-fte-btn {
   padding: 0.25rem;
   font-weight: 700;
 }
-.squiz-fte-scope .editor-toolbar .squiz-fte-btn ~ .squiz-fte-btn,
-.squiz-fte-scope__floating-popover .squiz-fte-btn ~ .squiz-fte-btn {
+.squiz-fte-scope .editor-toolbar__tools .squiz-fte-btn ~ .squiz-fte-btn {
   margin-left: 2px;
 }
 .squiz-fte-scope .header-toolbar {
-  transition: opacity 0.2s linear, max-height 0.2s linear;
+  transition-duration: 0.3s;
+  transition-property: max-height, opacity;
+  transition-timing-function: ease-out;
   opacity: 0;
   max-height: 0;
 }
@@ -928,7 +932,7 @@
   margin-bottom: 0px;
 }
 .squiz-fte-scope button.squiz-fte-btn {
-  border-radius: 4px;
+  border-radius: 8px;
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
   font-weight: 700;
@@ -974,7 +978,7 @@
 .squiz-fte-scope .toolbar-dropdown__button {
   display: flex;
   align-items: center;
-  border-radius: 4px;
+  border-radius: 8px;
   font-family:
     Open Sans,
     Arial,
@@ -1001,7 +1005,7 @@
   height: 1.5rem;
 }
 .squiz-fte-scope .toolbar-dropdown__menu {
-  border-radius: 4px;
+  border-radius: 8px;
   border-width: 1px;
   --tw-border-opacity: 1;
   border-color: rgb(224 224 224 / var(--tw-border-opacity));
@@ -1148,24 +1152,22 @@
   display: flex;
   align-items: center;
   justify-content: flex-end;
-  border-bottom-right-radius: 4px;
-  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 8px;
+  border-bottom-left-radius: 8px;
 }
 .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__floating-popover .squiz-fte-modal-footer__button {
+.squiz-fte-scope .editor-toolbar__tools .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__floating-popover .squiz-fte-modal-footer__button ~ .squiz-fte-btn {
+.squiz-fte-scope .editor-toolbar__tools .squiz-fte-modal-footer__button ~ .squiz-fte-btn {
   margin-left: 2px;
 }
 .squiz-fte-scope button.squiz-fte-modal-footer__button {
-  border-radius: 4px;
+  border-radius: 8px;
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
   font-weight: 700;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squiz/formatted-text-editor",
-  "version": "1.56.1-alpha.3",
+  "version": "1.56.1-alpha.30",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "scripts": {
@@ -10,7 +10,6 @@
     "compile:code": "tsc",
     "compile:styles": "node build.js",
     "dev": "vite",
-    "preview": "vite preview",
     "test": "jest",
     "test:coverage": "jest --coverage",
     "test:e2e": "vite build && vite preview --port 8080 & cypress open",
@@ -20,8 +19,8 @@
     "@headlessui/react": "1.7.11",
     "@mui/icons-material": "5.11.16",
     "@remirror/react": "2.0.25",
-    "@squiz/dx-json-schema-lib": "1.56.1-alpha.3",
-    "@squiz/resource-browser": "1.56.1-alpha.3",
+    "@squiz/dx-json-schema-lib": "1.56.1-alpha.30",
+    "@squiz/resource-browser": "1.56.1-alpha.30",
     "clsx": "1.2.1",
     "react-hook-form": "7.43.2",
     "react-image-size": "2.0.0",
@@ -55,7 +54,7 @@
     "tailwindcss": "3.2.6",
     "ts-jest": "29.0.5",
     "typescript": "4.9.3",
-    "vite": "4.0.0"
+    "vite": "^4.5.0"
   },
   "peerDependencies": {
     "@types/react": "^16.14.0 || ^17 || ^18",
@@ -75,5 +74,5 @@
   "volta": {
     "node": "18.15.0"
   },
-  "gitHead": "612c5b93f4c427865ea0d2da8b46111da78bb90c"
+  "gitHead": "a7c213b73e9131ac1739a6212820ea54e7839042"
 }

package/postcss.config.js

@@ -5,7 +5,7 @@ module.exports = {
     require('postcss-nested'),
     require('postcss-prefix-selector')({
       prefix: '.squiz-fte-scope',
-      exclude: [/\.squiz-fte-scope__floating-popover/],
+      exclude: [/\.squiz-fte-scope__floating-popover/, /\.squiz-fte-scope__editor/],
       includeFiles: ['./src/index.scss'],
     }),
   ],

package/src/Editor/Editor.tsx

@@ -10,9 +10,11 @@ import useFocus from '../hooks/useFocus';
 import { ResourceBrowserContext } from '@squiz/resource-browser';
 
 type EditorProps = {
+  className?: string;
   content?: RemirrorContentType;
   onChange?: RemirrorEventListener<Extension>;
   editable?: boolean;
+  border?: boolean;
   children?: ReactNode;
   isFocused?: boolean;
 };
@@ -33,7 +35,7 @@ const WrappedEditor = () => {
   return <EditorComponent />;
 };
 
-const Editor = ({ content, editable = true, onChange, children, isFocused }: EditorProps) => {
+const Editor = ({ content, className, border = true, editable = true, onChange, children, isFocused }: EditorProps) => {
   const { manager, state, setState } = useRemirror({
     extensions: createExtensions(useContext(EditorContext), useContext(ResourceBrowserContext)),
     content,
@@ -56,27 +58,31 @@ const Editor = ({ content, editable = true, onChange, children, isFocused }: Edi
   }, []);
 
   return (
-    <div className="squiz-fte-scope">
-      <div
-        ref={wrapperRef}
-        onBlur={handleBlur}
-        onFocusCapture={handleFocus}
-        className={clsx('formatted-text-editor', !editable && 'formatted-text-editor--is-disabled')}
+    <div
+      ref={wrapperRef}
+      onBlur={handleBlur}
+      onFocusCapture={handleFocus}
+      className={clsx(
+        'squiz-fte-scope',
+        'squiz-fte-scope__editor',
+        !editable && 'squiz-fte-scope__editor--is-disabled',
+        border && 'squiz-fte-scope__editor--bordered',
+        className,
+      )}
+    >
+      <Remirror
+        manager={manager}
+        state={state}
+        editable={editable}
+        onChange={handleChange}
+        placeholder="Write something"
+        label="Text editor"
       >
-        <Remirror
-          manager={manager}
-          state={state}
-          editable={editable}
-          onChange={handleChange}
-          placeholder="Write something"
-          label="Text editor"
-        >
-          {editable && <Toolbar isVisible={isVisible} />}
-          {children}
-          <WrappedEditor />
-          {editable && <FloatingToolbar />}
-        </Remirror>
-      </div>
+        {editable && <Toolbar isVisible={isVisible} />}
+        {children && <div className="squiz-fte-scope__editor__children">{children}</div>}
+        <WrappedEditor />
+        {editable && <FloatingToolbar />}
+      </Remirror>
     </div>
   );
 };

package/src/Editor/_editor.scss

@@ -1,13 +1,19 @@
-.formatted-text-editor {
+/* 2 class selectors so specificity is higher vs eg. ".squiz-ce-scope *" which would take priority over this. */
+.squiz-fte-scope.squiz-fte-scope__editor {
   font-family: 'Open Sans' !important;
-  @apply bg-white rounded border-gray-300 border-2 border-solid;
+  @apply bg-white rounded border-gray-300;
 
-  .remirror-editor-wrapper {
-    @apply text-gray-800 pt-0;
+  &:has(&__children) {
+    /* The children replace the space taken up by top padding of the editor when present. */
+    @apply w-full min-h-[2rem];
+
+    .remirror-editor {
+      @apply pt-0;
+    }
   }
 
   .remirror-editor {
-    @apply bg-white shadow-none rounded-b p-3;
+    @apply shadow-none p-8;
     overflow: auto;
     min-height: 15vh;
 
@@ -22,10 +28,13 @@
     }
   }
 
+  &--bordered {
+    @apply border-2 border-solid;
+  }
+
   &--is-disabled {
-    .remirror-editor {
-      @apply bg-gray-300 cursor-not-allowed;
-    }
+    @apply bg-gray-50 border-0 cursor-not-allowed;
+
     .remirror-is-empty:first-of-type::before {
       display: none;
     }

package/src/EditorToolbar/Toolbar.tsx

@@ -24,32 +24,34 @@ export const Toolbar = ({ isVisible }: ToolbarProps) => {
 
   return (
     <RemirrorToolbar
-      className={clsx('remirror-toolbar editor-toolbar header-toolbar', isVisible && 'show-toolbar')}
+      className={clsx('editor-toolbar header-toolbar', isVisible && 'show-toolbar')}
       role="toolbar"
       tabIndex={0}
     >
-      {extensionNames.history && (
-        <>
-          <UndoButton />
-          <RedoButton />
-          <VerticalDivider />
-        </>
-      )}
-      {extensionNames.heading && extensionNames.paragraph && extensionNames.preformatted && <TextTypeDropdown />}
-      {extensionNames.bold && <BoldButton />}
-      {extensionNames.italic && <ItalicButton />}
-      {extensionNames.underline && <UnderlineButton />}
-      {extensionNames.nodeFormatting && <TextAlignButtons />}
-      {extensionNames.listItem && <ListButtons />}
-      {extensionNames.horizontalRule && <HorizontalLineButton />}
-      {extensionNames.link && (
-        <>
-          <LinkButton />
-          <RemoveLinkButton />
-        </>
-      )}
-      {extensionNames.image && <ImageButton />}
-      {extensionNames.clearFormatting && <ClearFormattingButton />}
+      <div className="editor-toolbar__tools">
+        {extensionNames.history && (
+          <>
+            <UndoButton />
+            <RedoButton />
+            <VerticalDivider />
+          </>
+        )}
+        {extensionNames.heading && extensionNames.paragraph && extensionNames.preformatted && <TextTypeDropdown />}
+        {extensionNames.bold && <BoldButton />}
+        {extensionNames.italic && <ItalicButton />}
+        {extensionNames.underline && <UnderlineButton />}
+        {extensionNames.nodeFormatting && <TextAlignButtons />}
+        {extensionNames.listItem && <ListButtons />}
+        {extensionNames.horizontalRule && <HorizontalLineButton />}
+        {extensionNames.link && (
+          <>
+            <LinkButton />
+            <RemoveLinkButton />
+          </>
+        )}
+        {extensionNames.image && <ImageButton />}
+        {extensionNames.clearFormatting && <ClearFormattingButton />}
+      </div>
     </RemirrorToolbar>
   );
 };

package/src/EditorToolbar/_toolbar.scss

@@ -1,30 +1,32 @@
 .editor-toolbar {
-  @apply bg-white border-gray-200 border-b-2 border-solid p-1 rounded-t;
+  @apply bg-transparent rounded-t;
 
-  display: flex;
-  justify-items: center;
-  flex-wrap: wrap;
+  &__tools {
+    @apply border-gray-200 border-b-2 border-solid p-1 w-full flex flex-wrap justify-items-center;
 
-  > *:not(:first-child, .MuiDivider-root) {
-    margin: 0 0 0 2px;
-  }
+    > *:not(:first-child, .MuiDivider-root) {
+      margin: 0 0 0 2px;
+    }
 
-  .MuiDivider-root {
-    @apply my-0 mx-1 border;
-    margin-right: 2px;
-    height: auto;
-  }
+    .MuiDivider-root {
+      @apply my-0 mx-1 border;
+      margin-right: 2px;
+      height: auto;
+    }
 
-  .squiz-fte-btn {
-    @apply p-1 font-bold;
-    ~ .squiz-fte-btn {
-      margin-left: 2px;
+    .squiz-fte-btn {
+      @apply p-1 font-bold;
+      ~ .squiz-fte-btn {
+        margin-left: 2px;
+      }
     }
   }
 }
 
 .header-toolbar {
-  transition: opacity 0.2s linear, max-height 0.2s linear;
+  transition-duration: 0.3s;
+  transition-property: max-height, opacity;
+  transition-timing-function: ease-out;
   opacity: 0;
   max-height: 0;
 

package/tailwind.config.cjs

@@ -4,7 +4,7 @@ module.exports = {
   theme: {
     extend: {
       borderRadius: {
-        DEFAULT: '4px',
+        DEFAULT: '8px',
         md: '6px',
       },
       fontFamily: {