From 0b5dc0ef4f9aaff4b0dc740981b491828bbdf2e8 Mon Sep 17 00:00:00 2001
From: Kwanghyun On <kwanghyun.on@gmail.com>
Date: Fri, 1 Nov 2024 17:22:29 +0900
Subject: [PATCH] Fix bug where autofocus is not working

---
 .../chat-input/LexicalContentEditable.tsx     | 19 +++++++++---
 .../plugins/auto-focus/AutoFocusPlugin.tsx    | 29 -------------------
 2 files changed, 15 insertions(+), 33 deletions(-)
 delete mode 100644 src/components/chat-view/chat-input/plugins/auto-focus/AutoFocusPlugin.tsx

diff --git a/src/components/chat-view/chat-input/LexicalContentEditable.tsx b/src/components/chat-view/chat-input/LexicalContentEditable.tsx
index eafb6b5..b7947fe 100644
--- a/src/components/chat-view/chat-input/LexicalContentEditable.tsx
+++ b/src/components/chat-view/chat-input/LexicalContentEditable.tsx
@@ -10,12 +10,11 @@ import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin'
 import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin'
 import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin'
 import { LexicalEditor, SerializedEditorState } from 'lexical'
-import { RefObject, useCallback } from 'react'
+import { RefObject, useCallback, useEffect } from 'react'
 
 import { useApp } from '../../../contexts/app-context'
 import { fuzzySearch } from '../../../utils/fuzzy-search'
 
-import AutoFocusPlugin from './plugins/auto-focus/AutoFocusPlugin'
 import AutoLinkMentionPlugin from './plugins/mention/AutoLinkMentionPlugin'
 import { MentionNode } from './plugins/mention/MentionNode'
 import MentionPlugin from './plugins/mention/MentionPlugin'
@@ -60,7 +59,7 @@ export default function LexicalContentEditable({
   const app = useApp()
 
   const initialConfig: InitialConfigType = {
-    namespace: 'ChatUserInput',
+    namespace: 'LexicalContentEditable',
     theme: {
       root: 'smtcmp-lexical-content-editable-root',
       paragraph: 'smtcmp-lexical-content-editable-paragraph',
@@ -77,6 +76,19 @@ export default function LexicalContentEditable({
     [app],
   )
 
+  /*
+   * Using requestAnimationFrame for autoFocus instead of using editor.focus()
+   * due to known issues with editor.focus() when initialConfig.editorState is set
+   * See: https://github.com/facebook/lexical/issues/4460
+   */
+  useEffect(() => {
+    if (autoFocus) {
+      requestAnimationFrame(() => {
+        contentEditableRef.current?.focus()
+      })
+    }
+  }, [autoFocus, contentEditableRef])
+
   return (
     <LexicalComposer initialConfig={initialConfig}>
       {/* 
@@ -101,7 +113,6 @@ export default function LexicalContentEditable({
         ErrorBoundary={LexicalErrorBoundary}
       />
       <HistoryPlugin />
-      {autoFocus && <AutoFocusPlugin defaultSelection="rootEnd" />}
       <MentionPlugin searchResultByQuery={searchResultByQuery} />
       <OnChangePlugin
         onChange={(editorState) => {
diff --git a/src/components/chat-view/chat-input/plugins/auto-focus/AutoFocusPlugin.tsx b/src/components/chat-view/chat-input/plugins/auto-focus/AutoFocusPlugin.tsx
deleted file mode 100644
index 714a990..0000000
--- a/src/components/chat-view/chat-input/plugins/auto-focus/AutoFocusPlugin.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
-import { useEffect } from 'react'
-
-export type AutoFocusPluginProps = {
-  defaultSelection?: 'rootStart' | 'rootEnd'
-}
-
-export default function AutoFocusPlugin({
-  defaultSelection,
-}: AutoFocusPluginProps) {
-  const [editor] = useLexicalComposerContext()
-
-  useEffect(() => {
-    editor.focus(
-      () => {
-        const rootElement = editor.getRootElement()
-        if (rootElement) {
-          // requestAnimationFrame is required here for unknown reasons, possibly related to the Obsidian plugin environment.
-          requestAnimationFrame(() => {
-            rootElement.focus()
-          })
-        }
-      },
-      { defaultSelection },
-    )
-  }, [defaultSelection, editor])
-
-  return null
-}