@squiz/formatted-text-editor 1.35.1-alpha.19 → 1.35.1-alpha.20

package/lib/Editor/Editor.d.ts

@@ -5,6 +5,7 @@ type EditorProps = {
     onChange?: RemirrorEventListener<Extension>;
     editable?: boolean;
     children?: ReactNode;
+    isFocused?: boolean;
 };
-declare const Editor: ({ content, editable, onChange, children }: EditorProps) => JSX.Element;
+declare const Editor: ({ content, editable, onChange, children, isFocused }: EditorProps) => JSX.Element;
 export default Editor;

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 }) => {
+const Editor = ({ content, editable = true, onChange, children, isFocused = false }) => {
     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 }) => {
         setState(parameter.state);
         onChange?.(parameter);
     };
-    const { isEditorFocused, handleFocus, handleBlur } = (0, useFocus_1.default)();
+    const { isEditorFocused, handleFocus, handleBlur } = (0, useFocus_1.default)(isFocused);
     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(react_2.Remirror, { manager: manager, state: state, editable: editable, onChange: handleChange, placeholder: "Write something", label: "Text editor" },

package/lib/hooks/useFocus.d.ts

@@ -1,4 +1,4 @@
-declare const useEditorFocus: () => {
+declare const useEditorFocus: (isFocused: boolean) => {
     isEditorFocused: boolean;
     handleFocus: () => void;
     handleBlur: () => void;

package/lib/hooks/useFocus.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squiz/formatted-text-editor",
-  "version": "1.35.1-alpha.19",
+  "version": "1.35.1-alpha.20",
   "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.19",
-    "@squiz/resource-browser": "1.35.1-alpha.19",
+    "@squiz/dx-json-schema-lib": "1.35.1-alpha.20",
+    "@squiz/resource-browser": "1.35.1-alpha.20",
     "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": "ba42b99e3436caf08abd1b367ea10edfcdf6b8c5"
+  "gitHead": "396845eead32496e1a0297790fb3488c4dd85f2a"
 }

package/src/Editor/Editor.tsx

@@ -13,6 +13,7 @@ type EditorProps = {
   onChange?: RemirrorEventListener<Extension>;
   editable?: boolean;
   children?: ReactNode;
+  isFocused?: boolean;
 };
 
 const WrappedEditor = () => {
@@ -31,7 +32,7 @@ const WrappedEditor = () => {
   return <EditorComponent />;
 };
 
-const Editor = ({ content, editable = true, onChange, children }: EditorProps) => {
+const Editor = ({ content, editable = true, onChange, children, isFocused = false }: EditorProps) => {
   const { manager, state, setState } = useRemirror({
     extensions: createExtensions(useContext(EditorContext)),
     content,
@@ -44,7 +45,7 @@ const Editor = ({ content, editable = true, onChange, children }: EditorProps) =
     onChange?.(parameter);
   };
 
-  const { isEditorFocused, handleFocus, handleBlur } = useEditorFocus();
+  const { isEditorFocused, handleFocus, handleBlur } = useEditorFocus(isFocused);
 
   return (
     <div className="squiz-fte-scope">

package/src/hooks/useFocus.ts

@@ -1,7 +1,7 @@
 import { useState, useCallback } from 'react';
 
-const useEditorFocus = () => {
-  const [isEditorFocused, setIsEditorFocused] = useState(false);
+const useEditorFocus = (isFocused: boolean) => {
+  const [isEditorFocused, setIsEditorFocused] = useState(isFocused);
 
   const handleFocus = useCallback(() => {
     setIsEditorFocused(true);