@squiz/formatted-text-editor 1.35.1-alpha.24 → 1.35.1-alpha.26

package/lib/Editor/Editor.js

@@ -46,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, children, isFocused = false }) => {
+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,
@@ -57,7 +57,7 @@ const Editor = ({ content, editable = true, onChange, children, isFocused = fals
         setState(parameter.state);
         onChange?.(parameter);
     };
-    const { isEditorFocused, handleFocus, handleBlur } = (0, useFocus_1.default)(isFocused);
+    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) {
@@ -65,9 +65,9 @@ const Editor = ({ content, editable = true, onChange, children, isFocused = fals
         }
     }, []);
     return (react_1.default.createElement("div", { className: "squiz-fte-scope" },
-        react_1.default.createElement("div", { onBlur: handleBlur, onFocus: handleFocus, 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, { isEditorFocused: isEditorFocused }),
+                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,5 +1,5 @@
 type ToolbarProps = {
-    isEditorFocused: boolean;
+    isVisible: boolean;
 };
-export declare const Toolbar: ({ isEditorFocused }: ToolbarProps) => JSX.Element;
+export declare const Toolbar: ({ isVisible }: ToolbarProps) => JSX.Element;
 export {};

package/lib/EditorToolbar/Toolbar.js

@@ -19,9 +19,9 @@ 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 hooks_1 = require("../hooks");
-const Toolbar = ({ isEditorFocused }) => {
+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', isEditorFocused === true ? 'show' : 'hide') },
+    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/hooks/useFocus.d.ts

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

package/lib/hooks/useFocus.js

@@ -1,18 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("react");
-const useEditorFocus = (isFocused) => {
-    const [isEditorFocused, setIsEditorFocused] = (0, react_1.useState)(isFocused);
+const useFocus = (initialState) => {
+    const wrapperRef = (0, react_1.createRef)();
+    const [isVisible, setIsVisible] = (0, react_1.useState)(initialState);
     const handleFocus = (0, react_1.useCallback)(() => {
-        setIsEditorFocused(true);
+        setIsVisible(true);
     }, []);
-    const handleBlur = (0, react_1.useCallback)(() => {
-        setIsEditorFocused(false);
-    }, []);
-    return {
-        isEditorFocused,
-        handleFocus,
-        handleBlur,
+    const handleBlur = (event) => {
+        const isOutside = wrapperRef.current !== null && !wrapperRef.current.contains(event.relatedTarget);
+        if (isOutside) {
+            setIsVisible(false);
+        }
     };
+    return { handleFocus, handleBlur, isVisible, wrapperRef };
 };
-exports.default = useEditorFocus;
+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,9 +835,10 @@
 .squiz-fte-scope .formatted-text-editor img {
   display: inline;
 }
-.formatted-text-editor:has(.editor-toolbar.show, .show.squiz-fte-scope__floating-popover) {
-  --tw-shadow: 0 0 0 1px rgba(0,0,0,0.04), 0 1px 24px 12px rgba(0,0,0,0.12);
-  --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color), 0 1px 24px 12px var(--tw-shadow-color);
+.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),
@@ -845,6 +846,8 @@
 }
 .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;
@@ -862,12 +865,10 @@
 }
 .squiz-fte-scope .editor-toolbar .MuiDivider-root,
 .squiz-fte-scope__floating-popover .MuiDivider-root {
-  margin-top: -0.25rem;
-  margin-bottom: -0.25rem;
-  margin-left: 0.25rem;
-  margin-right: 0.25rem;
   margin-top: 0px;
   margin-bottom: 0px;
+  margin-left: 0.25rem;
+  margin-right: 0.25rem;
   border-width: 1px;
   margin-right: 2px;
   height: auto;
@@ -881,17 +882,14 @@
 .squiz-fte-scope__floating-popover .squiz-fte-btn ~ .squiz-fte-btn {
   margin-left: 2px;
 }
-.squiz-fte-scope .editor-toolbar.show,
-.show.squiz-fte-scope__floating-popover {
-  max-height: 200px;
-  opacity: 1;
-  transition: max-height 0.3s ease, opacity 0.4s ease;
-}
-.squiz-fte-scope .editor-toolbar.hide,
-.hide.squiz-fte-scope__floating-popover {
-  max-height: 0;
+.squiz-fte-scope .header-toolbar {
+  transition: opacity 0.2s linear, max-height 0.2s linear;
   opacity: 0;
-  transition: max-height 0.3s ease, opacity 0.4s ease;
+  max-height: 0;
+}
+.squiz-fte-scope .header-toolbar.show-toolbar {
+  opacity: 1;
+  max-height: 15vh;
 }
 .squiz-fte-scope__floating-popover {
   display: flex;
@@ -913,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));
@@ -935,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;
@@ -1150,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));
@@ -1172,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.24",
+  "version": "1.35.1-alpha.26",
   "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.24",
-    "@squiz/resource-browser": "1.35.1-alpha.24",
+    "@squiz/dx-json-schema-lib": "1.35.1-alpha.26",
+    "@squiz/resource-browser": "1.35.1-alpha.26",
     "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": "a0cdd85b7eb8ee15a882d57f0c89fb84c13e4e04"
+  "gitHead": "9c32fce90da5943c353c20cda9931efd5d5516af"
 }

package/src/Editor/Editor.spec.tsx

@@ -5,13 +5,13 @@ import '@testing-library/jest-dom';
 import { renderWithEditor } from '../../tests';
 import ImageButton from '../EditorToolbar/Tools/Image/ImageButton';
 
-const isEditorFocused = jest.fn().mockReturnValue(true);
+const isVisible = jest.fn().mockReturnValue(false);
 const handleFocusMock = jest.fn();
 const handleBlurMock = jest.fn();
 jest.mock('../hooks/useFocus', () => ({
   __esModule: true,
   default: () => ({
-    isEditorFocused: isEditorFocused(),
+    isVisible: isVisible(),
     handleFocus: handleFocusMock,
     handleBlur: handleBlurMock,
   }),
@@ -349,16 +349,9 @@ describe('Formatted text editor', () => {
   });
 
   it('should apply hide class when focus hook returns false', () => {
-    isEditorFocused.mockReturnValue(false);
+    isVisible.mockReturnValue(true);
     const { container } = render(<Editor />);
 
-    expect(container.querySelector('.hide')).toBeInTheDocument();
-  });
-
-  it('should apply show class when focus hook returns true', () => {
-    isEditorFocused.mockReturnValue(true);
-    const { container } = render(<Editor />);
-
-    expect(container.querySelector('.show')).toBeInTheDocument();
+    expect(container.querySelector('.show-toolbar')).toBeInTheDocument();
   });
 });

package/src/Editor/Editor.tsx

@@ -6,7 +6,7 @@ import clsx from 'clsx';
 import { Toolbar, FloatingToolbar } from '../EditorToolbar';
 import { EditorContext } from './EditorContext';
 import { createExtensions } from '../Extensions/Extensions';
-import useEditorFocus from '../hooks/useFocus';
+import useFocus from '../hooks/useFocus';
 
 type EditorProps = {
   content?: RemirrorContentType;
@@ -32,7 +32,7 @@ const WrappedEditor = () => {
   return <EditorComponent />;
 };
 
-const Editor = ({ content, editable = true, onChange, children, isFocused = false }: EditorProps) => {
+const Editor = ({ content, editable = true, onChange, children, isFocused }: EditorProps) => {
   const { manager, state, setState } = useRemirror({
     extensions: createExtensions(useContext(EditorContext)),
     content,
@@ -45,7 +45,7 @@ const Editor = ({ content, editable = true, onChange, children, isFocused = fals
     onChange?.(parameter);
   };
 
-  const { isEditorFocused, handleFocus, handleBlur } = useEditorFocus(isFocused);
+  const { isVisible, handleFocus, handleBlur, wrapperRef } = useFocus(isFocused || false);
 
   // On initial load, check if we need to focus the actual text content
   useEffect(() => {
@@ -57,8 +57,9 @@ const Editor = ({ content, editable = true, onChange, children, isFocused = fals
   return (
     <div className="squiz-fte-scope">
       <div
+        ref={wrapperRef}
         onBlur={handleBlur}
-        onFocus={handleFocus}
+        onFocusCapture={handleFocus}
         className={clsx('remirror-theme formatted-text-editor', !editable && 'formatted-text-editor--is-disabled')}
       >
         <Remirror
@@ -69,7 +70,7 @@ const Editor = ({ content, editable = true, onChange, children, isFocused = fals
           placeholder="Write something"
           label="Text editor"
         >
-          {editable && <Toolbar isEditorFocused={isEditorFocused} />}
+          {editable && <Toolbar isVisible={isVisible} />}
           {children}
           <WrappedEditor />
           {editable && <FloatingToolbar />}

package/src/Editor/_editor.scss

@@ -49,7 +49,7 @@
     display: inline;
   }
 
-  &:has(.editor-toolbar.show) {
-    @apply shadow-lg;
+  &: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

@@ -15,13 +15,17 @@ import ClearFormattingButton from './Tools/ClearFormatting/ClearFormattingButton
 import { useExtensionNames } from '../hooks';
 
 type ToolbarProps = {
-  isEditorFocused: boolean;
+  isVisible: boolean;
 };
-export const Toolbar = ({ isEditorFocused }: ToolbarProps) => {
+export const Toolbar = ({ isVisible }: ToolbarProps) => {
   const extensionNames = useExtensionNames();
 
   return (
-    <RemirrorToolbar className={clsx('remirror-toolbar editor-toolbar', isEditorFocused === true ? 'show' : 'hide')}>
+    <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,5 +1,5 @@
 .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;
@@ -10,7 +10,7 @@
   }
 
   .MuiDivider-root {
-    @apply -my-1 mx-1 border mt-0 mb-0;
+    @apply my-0 mx-1 border;
     margin-right: 2px;
     height: auto;
   }
@@ -21,16 +21,15 @@
       margin-left: 2px;
     }
   }
+}
 
-  &.show {
-    max-height: 200px;
-    opacity: 1;
-    transition: max-height 0.3s ease, opacity 0.4s ease;
-  }
+.header-toolbar {
+  transition: opacity 0.2s linear, max-height 0.2s linear;
+  opacity: 0;
+  max-height: 0;
 
-  &.hide {
-    max-height: 0;
-    opacity: 0;
-    transition: max-height 0.3s ease, opacity 0.4s ease;
+  &.show-toolbar {
+    opacity: 1;
+    max-height: 15vh;
   }
 }

package/src/hooks/useFocus.ts

@@ -1,21 +1,28 @@
-import { useState, useCallback } from 'react';
+import { useState, useCallback, FocusEvent, FocusEventHandler, RefObject, createRef } from 'react';
 
-const useEditorFocus = (isFocused: boolean) => {
-  const [isEditorFocused, setIsEditorFocused] = useState(isFocused);
+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(() => {
-    setIsEditorFocused(true);
+    setIsVisible(true);
   }, []);
 
-  const handleBlur = useCallback(() => {
-    setIsEditorFocused(false);
-  }, []);
-
-  return {
-    isEditorFocused,
-    handleFocus,
-    handleBlur,
+  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 useEditorFocus;
+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/_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;
+    }
   }
 }