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

package/lib/Editor/Editor.js

@@ -58,6 +58,12 @@ const Editor = ({ content, editable = true, onChange, children, isFocused = fals
         onChange?.(parameter);
     };
     const { isEditorFocused, handleFocus, handleBlur } = (0, useFocus_1.default)(isFocused);
+    // 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", { 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squiz/formatted-text-editor",
-  "version": "1.35.1-alpha.22",
+  "version": "1.35.1-alpha.24",
   "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.22",
-    "@squiz/resource-browser": "1.35.1-alpha.22",
+    "@squiz/dx-json-schema-lib": "1.35.1-alpha.24",
+    "@squiz/resource-browser": "1.35.1-alpha.24",
     "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": "337ad0c517b0341aaf69121d83aa0b9497340c84"
+  "gitHead": "a0cdd85b7eb8ee15a882d57f0c89fb84c13e4e04"
 }

package/src/Editor/Editor.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useCallback, ReactNode } 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';
@@ -47,6 +47,13 @@ const Editor = ({ content, editable = true, onChange, children, isFocused = fals
 
   const { isEditorFocused, handleFocus, handleBlur } = useEditorFocus(isFocused);
 
+  // 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