@squiz/formatted-text-editor 1.35.1-alpha.5 → 1.38.0-alpha.2

package/demo/App.tsx

@@ -3,8 +3,20 @@ import { Editor, remirrorNodeToSquizNode, squizNodeToRemirrorNode } from '../src
 import { RemirrorEventListener, Extension } from '@remirror/core';
 import ReactDiffViewer from 'react-diff-viewer-continued';
 import { AppContext } from './AppContext';
+import Button from '../src/ui/Button/Button';
+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' }}>
+    <Button icon={<TextFieldsOutlinedIcon />} onClick={(x) => x} />
+    <VerticalDivider />
+    <Button icon={<DeleteOutlineOutlinedIcon />} onClick={(x) => x} />
+  </div>
+);
 
 function App() {
+  const [showChildren] = useState(false);
   const [doc, setDoc] = useState('');
   const [squizDoc, setSquizDoc] = useState('');
   const [reconvertedDoc, setReconvertedDoc] = useState('');
@@ -41,7 +53,9 @@ function App() {
             editable={editable}
             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}
-          />
+          >
+            {showChildren && <ComponentHandlers />}
+          </Editor>
         </AppContext>
       </div>
       <h1>Document</h1>

package/lib/Editor/Editor.d.ts

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

package/lib/Editor/Editor.js

@@ -28,10 +28,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
 const react_2 = require("@remirror/react");
+const clsx_1 = __importDefault(require("clsx"));
 const EditorToolbar_1 = require("../EditorToolbar");
 const EditorContext_1 = require("./EditorContext");
 const Extensions_1 = require("../Extensions/Extensions");
-const clsx_1 = __importDefault(require("clsx"));
+const useFocus_1 = __importDefault(require("../hooks/useFocus"));
 const WrappedEditor = () => {
     const preventImagePaste = (0, react_1.useCallback)((event) => {
         const { clipboardData } = event;
@@ -45,7 +46,7 @@ const WrappedEditor = () => {
     (0, react_2.useEditorEvent)('paste', preventImagePaste);
     return react_1.default.createElement(react_2.EditorComponent, null);
 };
-const Editor = ({ content, editable = true, onChange }) => {
+const Editor = ({ content, 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)),
         content,
@@ -56,10 +57,18 @@ const Editor = ({ content, editable = true, onChange }) => {
         setState(parameter.state);
         onChange?.(parameter);
     };
+    const { isVisible, handleFocus, handleBlur, wrapperRef } = (0, useFocus_1.default)(isFocused || false);
+    // On initial load, check if we need to focus the actual text content
+    (0, react_1.useEffect)(() => {
+        if (isFocused) {
+            manager.view.dom.focus();
+        }
+    }, []);
     return (react_1.default.createElement("div", { className: "squiz-fte-scope" },
-        react_1.default.createElement("div", { className: (0, clsx_1.default)('remirror-theme formatted-text-editor', !editable && 'formatted-text-editor--is-disabled') },
+        react_1.default.createElement("div", { ref: wrapperRef, onBlur: handleBlur, onFocusCapture: handleFocus, className: (0, clsx_1.default)('remirror-theme 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, null),
+                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)))));
 };

package/lib/EditorToolbar/FloatingToolbar.js

@@ -71,6 +71,6 @@ const FloatingToolbar = () => {
     if (extensionNames.clearFormatting && clearFormatting.enabled()) {
         buttons.push(react_1.default.createElement(ClearFormattingButton_1.default, { key: "clearFormatting" }));
     }
-    return (react_1.default.createElement(react_2.FloatingToolbar, { className: "squiz-fte-scope squiz-fte-scope__floating-popover", positioner: positioner }, buttons));
+    return (react_1.default.createElement(react_2.FloatingToolbar, { className: "squiz-fte-scope squiz-fte-scope__floating-popover", positioner: positioner, tabIndex: 0, role: 'toolbar' }, buttons));
 };
 exports.FloatingToolbar = FloatingToolbar;

package/lib/EditorToolbar/Toolbar.d.ts

@@ -1 +1,5 @@
-export declare const Toolbar: () => JSX.Element;
+type ToolbarProps = {
+    isVisible: boolean;
+};
+export declare const Toolbar: ({ isVisible }: ToolbarProps) => JSX.Element;
+export {};

package/lib/EditorToolbar/Toolbar.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Toolbar = void 0;
 const react_1 = __importDefault(require("react"));
 const react_components_1 = require("@remirror/react-components");
+const clsx_1 = __importDefault(require("clsx"));
 const ItalicButton_1 = __importDefault(require("./Tools/Italic/ItalicButton"));
 const UnderlineButton_1 = __importDefault(require("./Tools/Underline/UnderlineButton"));
 const BoldButton_1 = __importDefault(require("./Tools/Bold/BoldButton"));
@@ -13,14 +14,14 @@ const TextAlignButtons_1 = __importDefault(require("./Tools/TextAlign/TextAlignB
 const UndoButton_1 = __importDefault(require("./Tools/Undo/UndoButton"));
 const RedoButton_1 = __importDefault(require("./Tools/Redo/RedoButton"));
 const TextTypeDropdown_1 = __importDefault(require("./Tools/TextType/TextTypeDropdown"));
-const hooks_1 = require("../hooks");
 const LinkButton_1 = __importDefault(require("./Tools/Link/LinkButton"));
 const ImageButton_1 = __importDefault(require("./Tools/Image/ImageButton"));
 const RemoveLinkButton_1 = __importDefault(require("./Tools/Link/RemoveLinkButton"));
 const ClearFormattingButton_1 = __importDefault(require("./Tools/ClearFormatting/ClearFormattingButton"));
-const Toolbar = () => {
+const hooks_1 = require("../hooks");
+const Toolbar = ({ isVisible }) => {
     const extensionNames = (0, hooks_1.useExtensionNames)();
-    return (react_1.default.createElement(react_components_1.Toolbar, { className: "remirror-toolbar editor-toolbar" },
+    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),

package/lib/Extensions/UnsuportedExtension/UnsupportedNodeExtension.js

@@ -24,7 +24,7 @@ let UnsupportedNodeExtension = class UnsupportedNodeExtension extends core_1.Nod
     createNodeSpec(extra, override) {
         return {
             selectable: false,
-            draggable: true,
+            draggable: false,
             atom: true,
             inline: true,
             ...override,

package/lib/hooks/useFocus.d.ts

@@ -0,0 +1,8 @@
+import { FocusEventHandler, RefObject } from 'react';
+declare const useFocus: (initialState: boolean) => {
+    handleFocus: () => void;
+    handleBlur: FocusEventHandler<HTMLDivElement>;
+    isVisible: boolean;
+    wrapperRef: RefObject<HTMLDivElement>;
+};
+export default useFocus;

package/lib/hooks/useFocus.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const useFocus = (initialState) => {
+    const wrapperRef = (0, react_1.createRef)();
+    const [isVisible, setIsVisible] = (0, react_1.useState)(initialState);
+    const handleFocus = (0, react_1.useCallback)(() => {
+        setIsVisible(true);
+    }, []);
+    const handleBlur = (event) => {
+        const isOutside = wrapperRef.current !== null && !wrapperRef.current.contains(event.relatedTarget);
+        if (isOutside) {
+            setIsVisible(false);
+        }
+    };
+    return { handleFocus, handleBlur, isVisible, wrapperRef };
+};
+exports.default = useFocus;

package/lib/index.css

@@ -638,71 +638,71 @@
 .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 {
+.squiz-fte-scope .remirror-editor a {
   --tw-text-opacity: 1;
   color: rgb(7 116 210 / var(--tw-text-opacity));
   text-decoration: underline;
 }
-.squiz-fte-scope h1 {
+.squiz-fte-scope .remirror-editor h1 {
   font-size: 1.625rem;
   font-weight: 600;
   letter-spacing: -0.2px;
   line-height: 2rem;
 }
-.squiz-fte-scope h2 {
+.squiz-fte-scope .remirror-editor h2 {
   font-size: 1.25rem;
   font-weight: 600;
   letter-spacing: -0.5px;
   line-height: 1.5rem;
 }
-.squiz-fte-scope h3 {
+.squiz-fte-scope .remirror-editor h3 {
   font-size: 1.125rem;
   font-weight: 600;
   letter-spacing: -0.2px;
   line-height: 1.375rem;
 }
-.squiz-fte-scope h4 {
+.squiz-fte-scope .remirror-editor h4 {
   font-size: 1rem;
   font-weight: 700;
   letter-spacing: -0.2px;
   line-height: 1.25rem;
 }
-.squiz-fte-scope h5 {
+.squiz-fte-scope .remirror-editor h5 {
   font-size: 1rem;
   font-weight: 600;
   letter-spacing: -0.2px;
   line-height: 1.25rem;
 }
-.squiz-fte-scope h6 {
+.squiz-fte-scope .remirror-editor h6 {
   font-size: 0.875rem;
   font-weight: 600;
   letter-spacing: -0.2px;
   line-height: 1.25rem;
 }
-.squiz-fte-scope .code-block,
-.squiz-fte-scope .preformatted {
+.squiz-fte-scope .remirror-editor .code-block,
+.squiz-fte-scope .remirror-editor .preformatted {
   display: flex;
 }
-.squiz-fte-scope .code-block .material-symbols-rounded,
-.squiz-fte-scope .preformatted .material-symbols-rounded {
+.squiz-fte-scope .remirror-editor .code-block .material-symbols-rounded,
+.squiz-fte-scope .remirror-editor .preformatted .material-symbols-rounded {
   font-size: 1.125rem;
   --tw-text-opacity: 1;
   color: rgb(79 79 79 / var(--tw-text-opacity));
   pointer-events: none;
   margin-right: 0.375rem;
 }
-.squiz-fte-scope .code-block .block-divider,
-.squiz-fte-scope .preformatted .block-divider {
+.squiz-fte-scope .remirror-editor .code-block .block-divider,
+.squiz-fte-scope .remirror-editor .preformatted .block-divider {
   --tw-bg-opacity: 1;
   background-color: rgb(237 237 237 / var(--tw-bg-opacity));
   width: 4px;
   border-radius: 0.75rem;
   margin-right: 0.625rem;
 }
-.squiz-fte-scope .code-block code,
-.squiz-fte-scope .code-block pre,
-.squiz-fte-scope .preformatted code,
-.squiz-fte-scope .preformatted pre {
+.squiz-fte-scope .remirror-editor .code-block code,
+.squiz-fte-scope .remirror-editor .code-block pre,
+.squiz-fte-scope .remirror-editor .preformatted code,
+.squiz-fte-scope .remirror-editor .preformatted pre {
   --tw-text-opacity: 1;
   color: rgb(79 79 79 / var(--tw-text-opacity));
   font-size: 0.75rem;
@@ -835,8 +835,19 @@
 .squiz-fte-scope .formatted-text-editor img {
   display: inline;
 }
+.squiz-fte-scope .formatted-text-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);
+  box-shadow:
+    var(--tw-ring-offset-shadow, 0 0 #0000),
+    var(--tw-ring-shadow, 0 0 #0000),
+    var(--tw-shadow);
+}
 .squiz-fte-scope .editor-toolbar,
 .squiz-fte-scope__floating-popover {
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
   border-bottom-width: 2px;
   border-style: solid;
   --tw-border-opacity: 1;
@@ -846,6 +857,7 @@
   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) {
@@ -853,8 +865,8 @@
 }
 .squiz-fte-scope .editor-toolbar .MuiDivider-root,
 .squiz-fte-scope__floating-popover .MuiDivider-root {
-  margin-top: -0.25rem;
-  margin-bottom: -0.25rem;
+  margin-top: 0px;
+  margin-bottom: 0px;
   margin-left: 0.25rem;
   margin-right: 0.25rem;
   border-width: 1px;
@@ -870,6 +882,15 @@
 .squiz-fte-scope__floating-popover .squiz-fte-btn ~ .squiz-fte-btn {
   margin-left: 2px;
 }
+.squiz-fte-scope .header-toolbar {
+  transition: opacity 0.2s linear, max-height 0.2s linear;
+  opacity: 0;
+  max-height: 0;
+}
+.squiz-fte-scope .header-toolbar.show-toolbar {
+  opacity: 1;
+  max-height: 15vh;
+}
 .squiz-fte-scope__floating-popover {
   display: flex;
   border-radius: 6px;
@@ -890,7 +911,7 @@
   margin-top: 0px;
   margin-bottom: 0px;
 }
-.squiz-fte-scope .squiz-fte-btn {
+.squiz-fte-scope button.squiz-fte-btn {
   border-radius: 4px;
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -912,23 +933,23 @@
   border: 1px solid transparent;
   padding: 6px 12px;
 }
-.squiz-fte-scope .squiz-fte-btn--is-icon {
+.squiz-fte-scope button.squiz-fte-btn--is-icon {
   padding: 6px;
 }
-.squiz-fte-scope .squiz-fte-btn ~ .squiz-fte-btn {
+.squiz-fte-scope button.squiz-fte-btn ~ .squiz-fte-btn {
   margin-left: 2px;
 }
-.squiz-fte-scope .squiz-fte-btn.disabled,
-.squiz-fte-scope .squiz-fte-btn[disabled] {
+.squiz-fte-scope button.squiz-fte-btn.disabled,
+.squiz-fte-scope button.squiz-fte-btn[disabled] {
   cursor: not-allowed;
   opacity: 0.5;
 }
-.squiz-fte-scope .squiz-fte-btn:hover,
-.squiz-fte-scope .squiz-fte-btn:focus {
+.squiz-fte-scope button.squiz-fte-btn:hover,
+.squiz-fte-scope button.squiz-fte-btn:focus {
   background-color: rgba(0, 0, 0, 0.04);
 }
-.squiz-fte-scope .squiz-fte-btn--is-active,
-.squiz-fte-scope .squiz-fte-btn:active {
+.squiz-fte-scope button.squiz-fte-btn--is-active,
+.squiz-fte-scope button.squiz-fte-btn:active {
   --tw-bg-opacity: 1;
   background-color: rgb(230 241 250 / var(--tw-bg-opacity));
   --tw-text-opacity: 1;
@@ -1041,6 +1062,7 @@
 .squiz-fte-scope .collapse-box__label {
   margin-left: 0.5rem;
   margin-right: auto;
+  text-align: left;
 }
 .squiz-fte-scope .collapse-box__icon {
   --tw-text-opacity: 1;
@@ -1126,7 +1148,7 @@
 .squiz-fte-scope__floating-popover .squiz-fte-modal-footer__button ~ .squiz-fte-btn {
   margin-left: 2px;
 }
-.squiz-fte-scope .squiz-fte-modal-footer__button {
+.squiz-fte-scope button.squiz-fte-modal-footer__button {
   border-radius: 4px;
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -1148,19 +1170,19 @@
   border: 1px solid transparent;
   padding: 6px 12px;
 }
-.squiz-fte-scope .squiz-fte-modal-footer__button ~ .squiz-fte-btn {
+.squiz-fte-scope button.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] {
+.squiz-fte-scope button.squiz-fte-modal-footer__button.disabled,
+.squiz-fte-scope button.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 {
+.squiz-fte-scope button.squiz-fte-modal-footer__button:hover,
+.squiz-fte-scope button.squiz-fte-modal-footer__button:focus {
   background-color: rgba(0, 0, 0, 0.04);
 }
-.squiz-fte-scope .squiz-fte-modal-footer__button:active {
+.squiz-fte-scope button.squiz-fte-modal-footer__button:active {
   --tw-bg-opacity: 1;
   background-color: rgb(230 241 250 / var(--tw-bg-opacity));
   --tw-text-opacity: 1;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squiz/formatted-text-editor",
-  "version": "1.35.1-alpha.5",
+  "version": "1.38.0-alpha.2",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "scripts": {
@@ -20,8 +20,8 @@
     "@headlessui/react": "1.7.11",
     "@mui/icons-material": "5.11.16",
     "@remirror/react": "2.0.25",
-    "@squiz/dx-json-schema-lib": "1.35.1-alpha.5",
-    "@squiz/resource-browser": "1.35.1-alpha.5",
+    "@squiz/dx-json-schema-lib": "1.38.0-alpha.2",
+    "@squiz/resource-browser": "1.38.0-alpha.2",
     "clsx": "1.2.1",
     "react-hook-form": "7.43.2",
     "react-image-size": "2.0.0",
@@ -75,5 +75,5 @@
   "volta": {
     "node": "18.15.0"
   },
-  "gitHead": "6c976023e77f7cceab962b5563fcaf669aedaa6d"
+  "gitHead": "9c2f775a7d6607a73e5b25577d82be939d74ffec"
 }

package/src/Editor/Editor.spec.tsx

@@ -5,7 +5,23 @@ import '@testing-library/jest-dom';
 import { renderWithEditor } from '../../tests';
 import ImageButton from '../EditorToolbar/Tools/Image/ImageButton';
 
+const isVisible = jest.fn().mockReturnValue(false);
+const handleFocusMock = jest.fn();
+const handleBlurMock = jest.fn();
+jest.mock('../hooks/useFocus', () => ({
+  __esModule: true,
+  default: () => ({
+    isVisible: isVisible(),
+    handleFocus: handleFocusMock,
+    handleBlur: handleBlurMock,
+  }),
+}));
+
 describe('Formatted text editor', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
   it('Renders the text editor', () => {
     render(<Editor />);
     expect(screen.getByRole('textbox')).toBeInTheDocument();
@@ -311,4 +327,31 @@ describe('Formatted text editor', () => {
 
     expect(buttonLabels).toEqual([]);
   });
+
+  it('triggers handleFocus when editor is focused', async () => {
+    const { getByLabelText } = render(<Editor />);
+    const editorInput = getByLabelText('Text editor');
+
+    fireEvent.focus(editorInput);
+
+    expect(handleBlurMock).toHaveBeenCalledTimes(0);
+    expect(handleFocusMock).toHaveBeenCalledTimes(1);
+  });
+
+  it('triggers handleBlur when editor is blurred', () => {
+    const { getByLabelText } = render(<Editor />);
+    const editorInput = getByLabelText('Text editor');
+
+    fireEvent.blur(editorInput);
+
+    expect(handleBlurMock).toHaveBeenCalledTimes(1);
+    expect(handleFocusMock).toHaveBeenCalledTimes(0);
+  });
+
+  it('should apply hide class when focus hook returns false', () => {
+    isVisible.mockReturnValue(true);
+    const { container } = render(<Editor />);
+
+    expect(container.querySelector('.show-toolbar')).toBeInTheDocument();
+  });
 });

package/src/Editor/Editor.tsx

@@ -1,16 +1,19 @@
-import React, { useContext, useCallback } from 'react';
+import React, { useContext, useCallback, ReactNode, useEffect } from 'react';
 import { EditorComponent, Remirror, useRemirror, useEditorEvent } from '@remirror/react';
 import { RemirrorContentType, RemirrorEventListener, Extension } from '@remirror/core';
+import { ClipboardEventHandler } from '@remirror/extension-events/dist-types/events-extension';
+import clsx from 'clsx';
 import { Toolbar, FloatingToolbar } from '../EditorToolbar';
 import { EditorContext } from './EditorContext';
 import { createExtensions } from '../Extensions/Extensions';
-import clsx from 'clsx';
-import { ClipboardEventHandler } from '@remirror/extension-events/dist-types/events-extension';
+import useFocus from '../hooks/useFocus';
 
 type EditorProps = {
   content?: RemirrorContentType;
   onChange?: RemirrorEventListener<Extension>;
   editable?: boolean;
+  children?: ReactNode;
+  isFocused?: boolean;
 };
 
 const WrappedEditor = () => {
@@ -29,7 +32,7 @@ const WrappedEditor = () => {
   return <EditorComponent />;
 };
 
-const Editor = ({ content, editable = true, onChange }: EditorProps) => {
+const Editor = ({ content, editable = true, onChange, children, isFocused }: EditorProps) => {
   const { manager, state, setState } = useRemirror({
     extensions: createExtensions(useContext(EditorContext)),
     content,
@@ -42,9 +45,23 @@ const Editor = ({ content, editable = true, onChange }: EditorProps) => {
     onChange?.(parameter);
   };
 
+  const { isVisible, handleFocus, handleBlur, wrapperRef } = useFocus(isFocused || false);
+
+  // On initial load, check if we need to focus the actual text content
+  useEffect(() => {
+    if (isFocused) {
+      manager.view.dom.focus();
+    }
+  }, []);
+
   return (
     <div className="squiz-fte-scope">
-      <div className={clsx('remirror-theme formatted-text-editor', !editable && 'formatted-text-editor--is-disabled')}>
+      <div
+        ref={wrapperRef}
+        onBlur={handleBlur}
+        onFocusCapture={handleFocus}
+        className={clsx('remirror-theme formatted-text-editor', !editable && 'formatted-text-editor--is-disabled')}
+      >
         <Remirror
           manager={manager}
           state={state}
@@ -53,7 +70,8 @@ const Editor = ({ content, editable = true, onChange }: EditorProps) => {
           placeholder="Write something"
           label="Text editor"
         >
-          {editable && <Toolbar />}
+          {editable && <Toolbar isVisible={isVisible} />}
+          {children}
           <WrappedEditor />
           {editable && <FloatingToolbar />}
         </Remirror>

package/src/Editor/_editor.scss

@@ -48,4 +48,8 @@
   img {
     display: inline;
   }
+
+  &:has(.show-toolbar) {
+    @apply shadow-md border-0;
+  }
 }

package/src/EditorToolbar/FloatingToolbar.tsx

@@ -50,7 +50,12 @@ export const FloatingToolbar = () => {
   }
 
   return (
-    <RemirrorFloatingToolbar className="squiz-fte-scope squiz-fte-scope__floating-popover" positioner={positioner}>
+    <RemirrorFloatingToolbar
+      className="squiz-fte-scope squiz-fte-scope__floating-popover"
+      positioner={positioner}
+      tabIndex={0}
+      role={'toolbar'}
+    >
       {buttons}
     </RemirrorFloatingToolbar>
   );

package/src/EditorToolbar/Toolbar.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Toolbar as RemirrorToolbar, VerticalDivider } from '@remirror/react-components';
+import clsx from 'clsx';
 import ItalicButton from './Tools/Italic/ItalicButton';
 import UnderlineButton from './Tools/Underline/UnderlineButton';
 import BoldButton from './Tools/Bold/BoldButton';
@@ -7,17 +8,24 @@ import TextAlignButtons from './Tools/TextAlign/TextAlignButtons';
 import UndoButton from './Tools/Undo/UndoButton';
 import RedoButton from './Tools/Redo/RedoButton';
 import TextTypeDropdown from './Tools/TextType/TextTypeDropdown';
-import { useExtensionNames } from '../hooks';
 import LinkButton from './Tools/Link/LinkButton';
 import ImageButton from './Tools/Image/ImageButton';
 import RemoveLinkButton from './Tools/Link/RemoveLinkButton';
 import ClearFormattingButton from './Tools/ClearFormatting/ClearFormattingButton';
+import { useExtensionNames } from '../hooks';
 
-export const Toolbar = () => {
+type ToolbarProps = {
+  isVisible: boolean;
+};
+export const Toolbar = ({ isVisible }: ToolbarProps) => {
   const extensionNames = useExtensionNames();
 
   return (
-    <RemirrorToolbar className="remirror-toolbar editor-toolbar">
+    <RemirrorToolbar
+      className={clsx('remirror-toolbar editor-toolbar header-toolbar', isVisible && 'show-toolbar')}
+      role="toolbar"
+      tabIndex={0}
+    >
       {extensionNames.history && (
         <>
           <UndoButton />

package/src/EditorToolbar/_toolbar.scss

@@ -1,18 +1,20 @@
 .editor-toolbar {
-  @apply bg-white border-gray-200 border-b-2 border-solid p-1;
+  @apply bg-white border-gray-200 border-b-2 border-solid p-1 rounded-t;
 
   display: flex;
   justify-items: center;
+  flex-wrap: wrap;
 
   > *:not(:first-child, .MuiDivider-root) {
     margin: 0 0 0 2px;
   }
 
   .MuiDivider-root {
-    @apply -my-1 mx-1 border;
+    @apply my-0 mx-1 border;
     margin-right: 2px;
     height: auto;
   }
+
   .squiz-fte-btn {
     @apply p-1 font-bold;
     ~ .squiz-fte-btn {
@@ -20,3 +22,14 @@
     }
   }
 }
+
+.header-toolbar {
+  transition: opacity 0.2s linear, max-height 0.2s linear;
+  opacity: 0;
+  max-height: 0;
+
+  &.show-toolbar {
+    opacity: 1;
+    max-height: 15vh;
+  }
+}

package/src/Extensions/UnsuportedExtension/UnsupportedNodeExtension.spec.ts

@@ -35,7 +35,7 @@ describe('UnsupportedNodeExtension', () => {
     const nodeSpec = extension.createNodeSpec(extra, override);
 
     expect(nodeSpec.selectable).toBe(true);
-    expect(nodeSpec.draggable).toBe(true);
+    expect(nodeSpec.draggable).toBe(false);
     expect(nodeSpec.atom).toBe(true);
     expect(nodeSpec.inline).toBe(true);
     expect(nodeSpec.attrs).toEqual({ originalNode: {}, errorMessage: {} });
@@ -131,7 +131,7 @@ describe('UnsupportedNodeExtension', () => {
     });
 
     expect(getHtmlContent()).toBe(
-      '<span class="unsupported-node-node-view-wrapper" originalnode="null" errormessage="null" data-unsupported-node="{&quot;originalNode&quot;:null,&quot;errorMessage&quot;:null}" draggable="true"><div class="collapse-box" contenteditable="false"><button class="collapse-box__header" type="button"><svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium collapse-box__icon--warning css-i4bv87-MuiSvgIcon-root" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="MotionPhotosOffOutlinedIcon"><path d="M2.81 2.81 1.39 4.22l2.27 2.27C2.61 8.07 2 9.96 2 12c0 5.52 4.48 10 10 10 2.04 0 3.93-.61 5.51-1.66l2.27 2.27 1.41-1.42L2.81 2.81zM12 20c-4.41 0-8-3.59-8-8 0-1.48.41-2.86 1.12-4.06l10.93 10.94C14.86 19.59 13.48 20 12 20zm0-16c4.41 0 8 3.59 8 8 0 1.48-.41 2.86-1.12 4.05l1.45 1.45C21.39 15.93 22 14.04 22 12c0-5.52-4.48-10-10-10-2.04 0-3.93.61-5.51 1.66l1.45 1.45C9.14 4.41 10.52 4 12 4z"></path></svg><div class="collapse-box__label">This section cannot be displayed here due to unsupported HTML elements. The front-end view of your page won’t be affected.</div><svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="UnfoldLessOutlinedIcon"><path d="M7.41 18.59 8.83 20 12 16.83 15.17 20l1.41-1.41L12 14l-4.59 4.59zm9.18-13.18L15.17 4 12 7.17 8.83 4 7.41 5.41 12 10l4.59-4.59z"></path></svg></button><div class="collapse-box__content" hidden="" data-testid="content"><br>null</div></div></span>',
+      '<span class="unsupported-node-node-view-wrapper" originalnode="null" errormessage="null" data-unsupported-node="{&quot;originalNode&quot;:null,&quot;errorMessage&quot;:null}"><div class="collapse-box" contenteditable="false"><button class="collapse-box__header" type="button"><svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium collapse-box__icon--warning css-i4bv87-MuiSvgIcon-root" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="MotionPhotosOffOutlinedIcon"><path d="M2.81 2.81 1.39 4.22l2.27 2.27C2.61 8.07 2 9.96 2 12c0 5.52 4.48 10 10 10 2.04 0 3.93-.61 5.51-1.66l2.27 2.27 1.41-1.42L2.81 2.81zM12 20c-4.41 0-8-3.59-8-8 0-1.48.41-2.86 1.12-4.06l10.93 10.94C14.86 19.59 13.48 20 12 20zm0-16c4.41 0 8 3.59 8 8 0 1.48-.41 2.86-1.12 4.05l1.45 1.45C21.39 15.93 22 14.04 22 12c0-5.52-4.48-10-10-10-2.04 0-3.93.61-5.51 1.66l1.45 1.45C9.14 4.41 10.52 4 12 4z"></path></svg><div class="collapse-box__label">This section cannot be displayed here due to unsupported HTML elements. The front-end view of your page won’t be affected.</div><svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="UnfoldLessOutlinedIcon"><path d="M7.41 18.59 8.83 20 12 16.83 15.17 20l1.41-1.41L12 14l-4.59 4.59zm9.18-13.18L15.17 4 12 7.17 8.83 4 7.41 5.41 12 10l4.59-4.59z"></path></svg></button><div class="collapse-box__content" hidden="" data-testid="content"><br>null</div></div></span>',
     );
   });
 });

package/src/Extensions/UnsuportedExtension/UnsupportedNodeExtension.tsx

@@ -30,7 +30,7 @@ export class UnsupportedNodeExtension extends NodeExtension {
   createNodeSpec(extra: ApplySchemaAttributes, override: NodeSpecOverride): NodeExtensionSpec {
     return {
       selectable: false,
-      draggable: true,
+      draggable: false,
       atom: true,
       inline: true,
       ...override,

package/src/hooks/useFocus.ts

@@ -0,0 +1,28 @@
+import { useState, useCallback, FocusEvent, FocusEventHandler, RefObject, createRef } from 'react';
+
+const useFocus = (
+  initialState: boolean,
+): {
+  handleFocus: () => void;
+  handleBlur: FocusEventHandler<HTMLDivElement>;
+  isVisible: boolean;
+  wrapperRef: RefObject<HTMLDivElement>;
+} => {
+  const wrapperRef = createRef<HTMLDivElement>();
+  const [isVisible, setIsVisible] = useState(initialState);
+
+  const handleFocus = useCallback(() => {
+    setIsVisible(true);
+  }, []);
+
+  const handleBlur: FocusEventHandler<HTMLDivElement> = (event: FocusEvent<HTMLDivElement>) => {
+    const isOutside = wrapperRef.current !== null && !wrapperRef.current.contains(event.relatedTarget as Node);
+    if (isOutside) {
+      setIsVisible(false);
+    }
+  };
+
+  return { handleFocus, handleBlur, isVisible, wrapperRef };
+};
+
+export default useFocus;

package/src/ui/Button/_button.scss

@@ -1,4 +1,4 @@
-.squiz-fte-btn {
+button.squiz-fte-btn {
   @apply font-bold rounded ease-linear transition-all bg-white text-gray-600 duration-150;
   display: flex;
   align-items: center;

package/src/ui/CollapseBox/_collapseBox.scss

@@ -6,7 +6,7 @@
   }
 
   &__label {
-    @apply ml-2 mr-auto;
+    @apply ml-2 mr-auto text-left;
   }
 
   &__icon {

package/src/ui/_typography.scss

@@ -1,72 +1,74 @@
-a {
-  @apply text-blue-300;
-  text-decoration: underline;
-}
+.remirror-editor {
+  a {
+    @apply text-blue-300;
+    text-decoration: underline;
+  }
 
-h1 {
-  font-size: 1.625rem;
-  font-weight: 600;
-  letter-spacing: -0.2px;
-  line-height: 2rem;
-}
+  h1 {
+    font-size: 1.625rem;
+    font-weight: 600;
+    letter-spacing: -0.2px;
+    line-height: 2rem;
+  }
 
-h2 {
-  font-size: 1.25rem;
-  font-weight: 600;
-  letter-spacing: -0.5px;
-  line-height: 1.5rem;
-}
+  h2 {
+    font-size: 1.25rem;
+    font-weight: 600;
+    letter-spacing: -0.5px;
+    line-height: 1.5rem;
+  }
 
-h3 {
-  font-size: 1.125rem;
-  font-weight: 600;
-  letter-spacing: -0.2px;
-  line-height: 1.375rem;
-}
+  h3 {
+    font-size: 1.125rem;
+    font-weight: 600;
+    letter-spacing: -0.2px;
+    line-height: 1.375rem;
+  }
 
-h4 {
-  font-size: 1rem;
-  font-weight: 700;
-  letter-spacing: -0.2px;
-  line-height: 1.25rem;
-}
+  h4 {
+    font-size: 1rem;
+    font-weight: 700;
+    letter-spacing: -0.2px;
+    line-height: 1.25rem;
+  }
 
-h5 {
-  font-size: 1rem;
-  font-weight: 600;
-  letter-spacing: -0.2px;
-  line-height: 1.25rem;
-}
+  h5 {
+    font-size: 1rem;
+    font-weight: 600;
+    letter-spacing: -0.2px;
+    line-height: 1.25rem;
+  }
 
-h6 {
-  font-size: 0.875rem;
-  font-weight: 600;
-  letter-spacing: -0.2px;
-  line-height: 1.25rem;
-}
+  h6 {
+    font-size: 0.875rem;
+    font-weight: 600;
+    letter-spacing: -0.2px;
+    line-height: 1.25rem;
+  }
 
-.code-block,
-.preformatted {
-  display: flex;
+  .code-block,
+  .preformatted {
+    display: flex;
 
-  .material-symbols-rounded {
-    @apply text-gray-700 text-xlg;
-    pointer-events: none;
-    margin-right: 0.375rem;
-  }
+    .material-symbols-rounded {
+      @apply text-gray-700 text-xlg;
+      pointer-events: none;
+      margin-right: 0.375rem;
+    }
 
-  .block-divider {
-    @apply bg-gray-200;
-    width: 4px;
-    border-radius: 0.75rem;
-    margin-right: 0.625rem;
-  }
+    .block-divider {
+      @apply bg-gray-200;
+      width: 4px;
+      border-radius: 0.75rem;
+      margin-right: 0.625rem;
+    }
 
-  code,
-  pre {
-    @apply text-gray-700;
-    font-size: 0.75rem;
-    padding-top: 0.75rem;
-    padding-bottom: 0.75rem;
+    code,
+    pre {
+      @apply text-gray-700;
+      font-size: 0.75rem;
+      padding-top: 0.75rem;
+      padding-bottom: 0.75rem;
+    }
   }
 }