@squiz/formatted-text-editor 1.35.1-alpha.12 → 1.35.1-alpha.13

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,10 @@
+import { ReactNode } from 'react';
 import { RemirrorContentType, RemirrorEventListener, Extension } from '@remirror/core';
 type EditorProps = {
     content?: RemirrorContentType;
     onChange?: RemirrorEventListener<Extension>;
     editable?: boolean;
+    children?: ReactNode;
 };
-declare const Editor: ({ content, editable, onChange }: EditorProps) => JSX.Element;
+declare const Editor: ({ content, editable, onChange, children }: 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 }) => {
     const { manager, state, setState } = (0, react_2.useRemirror)({
         extensions: (0, Extensions_1.createExtensions)((0, react_1.useContext)(EditorContext_1.EditorContext)),
         content,
@@ -56,10 +57,12 @@ const Editor = ({ content, editable = true, onChange }) => {
         setState(parameter.state);
         onChange?.(parameter);
     };
+    const { isEditorFocused, handleFocus, handleBlur } = (0, useFocus_1.default)();
     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", { onBlur: handleBlur, onFocus: 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, { isEditorFocused: isEditorFocused }),
+                children,
                 react_1.default.createElement(WrappedEditor, null),
                 editable && react_1.default.createElement(EditorToolbar_1.FloatingToolbar, null)))));
 };

package/lib/EditorToolbar/Toolbar.d.ts

@@ -1 +1,5 @@
-export declare const Toolbar: () => JSX.Element;
+type ToolbarProps = {
+    isEditorFocused: boolean;
+};
+export declare const Toolbar: ({ isEditorFocused }: 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 = ({ isEditorFocused }) => {
     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', isEditorFocused === true ? 'show' : 'hide') },
         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

@@ -0,0 +1,6 @@
+declare const useEditorFocus: () => {
+    isEditorFocused: boolean;
+    handleFocus: () => void;
+    handleBlur: () => void;
+};
+export default useEditorFocus;

package/lib/hooks/useFocus.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const useEditorFocus = () => {
+    const [isEditorFocused, setIsEditorFocused] = (0, react_1.useState)(false);
+    const handleFocus = (0, react_1.useCallback)(() => {
+        setIsEditorFocused(true);
+    }, []);
+    const handleBlur = (0, react_1.useCallback)(() => {
+        setIsEditorFocused(false);
+    }, []);
+    return {
+        isEditorFocused,
+        handleFocus,
+        handleBlur,
+    };
+};
+exports.default = useEditorFocus;

package/lib/index.css

@@ -835,6 +835,14 @@
 .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);
+  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-bottom-width: 2px;
@@ -846,6 +854,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) {
@@ -857,6 +866,8 @@
   margin-bottom: -0.25rem;
   margin-left: 0.25rem;
   margin-right: 0.25rem;
+  margin-top: 0px;
+  margin-bottom: 0px;
   border-width: 1px;
   margin-right: 2px;
   height: auto;
@@ -870,6 +881,18 @@
 .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;
+  opacity: 0;
+  transition: max-height 0.3s ease, opacity 0.4s ease;
+}
 .squiz-fte-scope__floating-popover {
   display: flex;
   border-radius: 6px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squiz/formatted-text-editor",
-  "version": "1.35.1-alpha.12",
+  "version": "1.35.1-alpha.13",
   "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.12",
-    "@squiz/resource-browser": "1.35.1-alpha.12",
+    "@squiz/dx-json-schema-lib": "1.35.1-alpha.13",
+    "@squiz/resource-browser": "1.35.1-alpha.13",
     "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": "2dcb733dfca6ef7a1de6ad58cca13496529de539"
+  "gitHead": "1bfc8c5f43eb37847e86d3dc77b4e30d203a703b"
 }

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 isEditorFocused = jest.fn().mockReturnValue(true);
+const handleFocusMock = jest.fn();
+const handleBlurMock = jest.fn();
+jest.mock('../hooks/useFocus', () => ({
+  __esModule: true,
+  default: () => ({
+    isEditorFocused: isEditorFocused(),
+    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,38 @@ 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', () => {
+    isEditorFocused.mockReturnValue(false);
+    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();
+  });
 });

package/src/Editor/Editor.tsx

@@ -1,16 +1,18 @@
-import React, { useContext, useCallback } from 'react';
+import React, { useContext, useCallback, ReactNode } 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 useEditorFocus from '../hooks/useFocus';
 
 type EditorProps = {
   content?: RemirrorContentType;
   onChange?: RemirrorEventListener<Extension>;
   editable?: boolean;
+  children?: ReactNode;
 };
 
 const WrappedEditor = () => {
@@ -29,7 +31,7 @@ const WrappedEditor = () => {
   return <EditorComponent />;
 };
 
-const Editor = ({ content, editable = true, onChange }: EditorProps) => {
+const Editor = ({ content, editable = true, onChange, children }: EditorProps) => {
   const { manager, state, setState } = useRemirror({
     extensions: createExtensions(useContext(EditorContext)),
     content,
@@ -42,9 +44,15 @@ const Editor = ({ content, editable = true, onChange }: EditorProps) => {
     onChange?.(parameter);
   };
 
+  const { isEditorFocused, handleFocus, handleBlur } = useEditorFocus();
+
   return (
     <div className="squiz-fte-scope">
-      <div className={clsx('remirror-theme formatted-text-editor', !editable && 'formatted-text-editor--is-disabled')}>
+      <div
+        onBlur={handleBlur}
+        onFocus={handleFocus}
+        className={clsx('remirror-theme formatted-text-editor', !editable && 'formatted-text-editor--is-disabled')}
+      >
         <Remirror
           manager={manager}
           state={state}
@@ -53,7 +61,8 @@ const Editor = ({ content, editable = true, onChange }: EditorProps) => {
           placeholder="Write something"
           label="Text editor"
         >
-          {editable && <Toolbar />}
+          {editable && <Toolbar isEditorFocused={isEditorFocused} />}
+          {children}
           <WrappedEditor />
           {editable && <FloatingToolbar />}
         </Remirror>

package/src/Editor/_editor.scss

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

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,20 @@ 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 = {
+  isEditorFocused: boolean;
+};
+export const Toolbar = ({ isEditorFocused }: ToolbarProps) => {
   const extensionNames = useExtensionNames();
 
   return (
-    <RemirrorToolbar className="remirror-toolbar editor-toolbar">
+    <RemirrorToolbar className={clsx('remirror-toolbar editor-toolbar', isEditorFocused === true ? 'show' : 'hide')}>
       {extensionNames.history && (
         <>
           <UndoButton />

package/src/EditorToolbar/_toolbar.scss

@@ -3,20 +3,34 @@
 
   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-1 mx-1 border mt-0 mb-0;
     margin-right: 2px;
     height: auto;
   }
+
   .squiz-fte-btn {
     @apply p-1 font-bold;
     ~ .squiz-fte-btn {
       margin-left: 2px;
     }
   }
+
+  &.show {
+    max-height: 200px;
+    opacity: 1;
+    transition: max-height 0.3s ease, opacity 0.4s ease;
+  }
+
+  &.hide {
+    max-height: 0;
+    opacity: 0;
+    transition: max-height 0.3s ease, opacity 0.4s ease;
+  }
 }

package/src/hooks/useFocus.ts

@@ -0,0 +1,21 @@
+import { useState, useCallback } from 'react';
+
+const useEditorFocus = () => {
+  const [isEditorFocused, setIsEditorFocused] = useState(false);
+
+  const handleFocus = useCallback(() => {
+    setIsEditorFocused(true);
+  }, []);
+
+  const handleBlur = useCallback(() => {
+    setIsEditorFocused(false);
+  }, []);
+
+  return {
+    isEditorFocused,
+    handleFocus,
+    handleBlur,
+  };
+};
+
+export default useEditorFocus;