From a8f18f48fa9e272334df600ff8b3e1c1835d5c82 Mon Sep 17 00:00:00 2001
From: badukwei <linwgpeter@gmail.com>
Date: Wed, 18 Dec 2024 21:17:03 +0800
Subject: [PATCH 1/3] fix: minor fix

---
 .../shared/components/Inputs/SearchInput.tsx  | 21 +++++++++++++++----
 .../components/RichTextEditor/index.tsx       |  6 +++---
 2 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/packages/frontend/src/features/shared/components/Inputs/SearchInput.tsx b/packages/frontend/src/features/shared/components/Inputs/SearchInput.tsx
index 40831b04e..1c955675f 100644
--- a/packages/frontend/src/features/shared/components/Inputs/SearchInput.tsx
+++ b/packages/frontend/src/features/shared/components/Inputs/SearchInput.tsx
@@ -1,21 +1,34 @@
 import { useNavigate } from 'react-router-dom'
-import { useState, KeyboardEvent } from 'react'
+import { useState, KeyboardEvent, useEffect } from 'react'
+import { PATHS } from '@/constants/paths'
 import { ReactComponent as SearchIcon } from '@/assets/svg/search.svg'
+import { useLocation } from 'react-router-dom'
 
 export default function SearchInput() {
     const [query, setQuery] = useState('')
     const navigate = useNavigate()
-
+    const location = useLocation()
     const handleSearch = (e: KeyboardEvent<HTMLInputElement>) => {
         if (e.key === 'Enter') {
-            navigate(`?q=${encodeURIComponent(query.trim())}`)
+            e.preventDefault()
+            e.stopPropagation()
+            navigate(`${PATHS.HOME}?q=${encodeURIComponent(query.trim())}`)
         }
     }
 
     const onClick = () => {
-        navigate(`?q=${encodeURIComponent(query.trim())}`)
+        navigate(`${PATHS.HOME}?q=${encodeURIComponent(query.trim())}`)
     }
 
+    useEffect(() => {
+        const searchInput = document.querySelector(
+            'input[placeholder="Search"]',
+        ) as HTMLElement
+        if (searchInput) {
+            searchInput.focus() // 手动设置焦点到搜索框
+        }
+    }, [location.search])
+
     return (
         <div className="h-10 px-4 flex items-center gap-2 bg-[#3E3E3E] rounded-full text-white">
             <SearchIcon className="w-5 h-5 cursor-pointer" onClick={onClick} />
diff --git a/packages/frontend/src/features/shared/components/RichTextEditor/index.tsx b/packages/frontend/src/features/shared/components/RichTextEditor/index.tsx
index fcea90df0..0c6dd1ea9 100644
--- a/packages/frontend/src/features/shared/components/RichTextEditor/index.tsx
+++ b/packages/frontend/src/features/shared/components/RichTextEditor/index.tsx
@@ -59,7 +59,7 @@ export default function RichTextEditor({
 }) {
     let searchParams: URLSearchParams | null = null
     try {
-        ;[searchParams] = useSearchParams()
+        [searchParams] = useSearchParams()
     } catch (e) {
         console.warn('RichTextEditor is not within a Router context')
     }
@@ -126,7 +126,7 @@ export default function RichTextEditor({
     }
 
     return (
-        <div className={classes?.root}>
+        <div className={classes?.root} tabIndex={-1}>
             <LexicalComposer
                 initialConfig={initialConfig}
                 key={localFailedPostContent}
@@ -156,7 +156,7 @@ export default function RichTextEditor({
                     />
                     <MarkdownShortcutPlugin />
                     <OnChangePlugin onChange={_onChange} />
-                    <AutoFocusPlugin />
+                    {/* <AutoFocusPlugin /> */}
                     <HistoryPlugin />
                     <ClearEditorPlugin />
                     <ClearAllPlugin

From ecf5326315d21aba2e2dcb244ede23d6537853bf Mon Sep 17 00:00:00 2001
From: badukwei <linwgpeter@gmail.com>
Date: Thu, 19 Dec 2024 01:35:47 +0800
Subject: [PATCH 2/3] fix: add checker to ClearAllPlugin to prevent auto focus

---
 .../shared/components/Inputs/SearchInput.tsx  | 14 ++-----------
 .../components/RichTextEditor/index.tsx       |  7 ++++---
 .../RichTextEditor/plugins/ClearAllPlugin.tsx | 20 +++++++++++++++----
 3 files changed, 22 insertions(+), 19 deletions(-)

diff --git a/packages/frontend/src/features/shared/components/Inputs/SearchInput.tsx b/packages/frontend/src/features/shared/components/Inputs/SearchInput.tsx
index 1c955675f..5a6088f38 100644
--- a/packages/frontend/src/features/shared/components/Inputs/SearchInput.tsx
+++ b/packages/frontend/src/features/shared/components/Inputs/SearchInput.tsx
@@ -1,13 +1,12 @@
 import { useNavigate } from 'react-router-dom'
-import { useState, KeyboardEvent, useEffect } from 'react'
+import { useState, KeyboardEvent } from 'react'
 import { PATHS } from '@/constants/paths'
 import { ReactComponent as SearchIcon } from '@/assets/svg/search.svg'
-import { useLocation } from 'react-router-dom'
 
 export default function SearchInput() {
     const [query, setQuery] = useState('')
     const navigate = useNavigate()
-    const location = useLocation()
+
     const handleSearch = (e: KeyboardEvent<HTMLInputElement>) => {
         if (e.key === 'Enter') {
             e.preventDefault()
@@ -20,15 +19,6 @@ export default function SearchInput() {
         navigate(`${PATHS.HOME}?q=${encodeURIComponent(query.trim())}`)
     }
 
-    useEffect(() => {
-        const searchInput = document.querySelector(
-            'input[placeholder="Search"]',
-        ) as HTMLElement
-        if (searchInput) {
-            searchInput.focus() // 手动设置焦点到搜索框
-        }
-    }, [location.search])
-
     return (
         <div className="h-10 px-4 flex items-center gap-2 bg-[#3E3E3E] rounded-full text-white">
             <SearchIcon className="w-5 h-5 cursor-pointer" onClick={onClick} />
diff --git a/packages/frontend/src/features/shared/components/RichTextEditor/index.tsx b/packages/frontend/src/features/shared/components/RichTextEditor/index.tsx
index 0c6dd1ea9..d224dac82 100644
--- a/packages/frontend/src/features/shared/components/RichTextEditor/index.tsx
+++ b/packages/frontend/src/features/shared/components/RichTextEditor/index.tsx
@@ -126,7 +126,7 @@ export default function RichTextEditor({
     }
 
     return (
-        <div className={classes?.root} tabIndex={-1}>
+        <div className={classes?.root}>
             <LexicalComposer
                 initialConfig={initialConfig}
                 key={localFailedPostContent}
@@ -153,12 +153,13 @@ export default function RichTextEditor({
                             </div>
                         }
                         ErrorBoundary={LexicalErrorBoundary}
+                        
                     />
                     <MarkdownShortcutPlugin />
                     <OnChangePlugin onChange={_onChange} />
-                    {/* <AutoFocusPlugin /> */}
+                    <AutoFocusPlugin />
                     <HistoryPlugin />
-                    <ClearEditorPlugin />
+                    <ClearEditorPlugin /> 
                     <ClearAllPlugin
                         value={value}
                         onClear={() => {
diff --git a/packages/frontend/src/features/shared/components/RichTextEditor/plugins/ClearAllPlugin.tsx b/packages/frontend/src/features/shared/components/RichTextEditor/plugins/ClearAllPlugin.tsx
index 8924829f9..b249bf1e1 100644
--- a/packages/frontend/src/features/shared/components/RichTextEditor/plugins/ClearAllPlugin.tsx
+++ b/packages/frontend/src/features/shared/components/RichTextEditor/plugins/ClearAllPlugin.tsx
@@ -1,4 +1,4 @@
-import { CLEAR_EDITOR_COMMAND } from 'lexical'
+import { $getRoot, CLEAR_EDITOR_COMMAND } from 'lexical'
 import { useEffect } from 'react'
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
 import { useIsFirstRender } from '@uidotdev/usehooks'
@@ -14,9 +14,21 @@ export default function ClearAllPlugin({
     const [editor] = useLexicalComposerContext()
     useEffect(() => {
         if (!value && !isFirstRender) {
-            editor.dispatchCommand(CLEAR_EDITOR_COMMAND, undefined)
-            editor.focus()
-            onClear?.()
+            editor.getEditorState().read(() => {
+                const root = $getRoot()
+                const isContentEmpty = root.getTextContent() === ''
+
+                if (isContentEmpty) {
+                    console.log(
+                        'Editor already empty, skipping CLEAR_EDITOR_COMMAND',
+                    )
+                    return
+                }
+
+                editor.dispatchCommand(CLEAR_EDITOR_COMMAND, undefined)
+                editor.focus()
+                onClear?.()
+            })
         }
     }, [value, isFirstRender, editor, onClear])
     return null

From 789e976b23251f29c89d60ca2af9d8b61fb36f3f Mon Sep 17 00:00:00 2001
From: badukwei <linwgpeter@gmail.com>
Date: Thu, 19 Dec 2024 01:42:20 +0800
Subject: [PATCH 3/3] fix: lint:fix

---
 .../features/shared/components/RichTextEditor/index.tsx    | 5 ++---
 .../components/RichTextEditor/plugins/ClearAllPlugin.tsx   | 7 +------
 2 files changed, 3 insertions(+), 9 deletions(-)

diff --git a/packages/frontend/src/features/shared/components/RichTextEditor/index.tsx b/packages/frontend/src/features/shared/components/RichTextEditor/index.tsx
index d224dac82..fcea90df0 100644
--- a/packages/frontend/src/features/shared/components/RichTextEditor/index.tsx
+++ b/packages/frontend/src/features/shared/components/RichTextEditor/index.tsx
@@ -59,7 +59,7 @@ export default function RichTextEditor({
 }) {
     let searchParams: URLSearchParams | null = null
     try {
-        [searchParams] = useSearchParams()
+        ;[searchParams] = useSearchParams()
     } catch (e) {
         console.warn('RichTextEditor is not within a Router context')
     }
@@ -153,13 +153,12 @@ export default function RichTextEditor({
                             </div>
                         }
                         ErrorBoundary={LexicalErrorBoundary}
-                        
                     />
                     <MarkdownShortcutPlugin />
                     <OnChangePlugin onChange={_onChange} />
                     <AutoFocusPlugin />
                     <HistoryPlugin />
-                    <ClearEditorPlugin /> 
+                    <ClearEditorPlugin />
                     <ClearAllPlugin
                         value={value}
                         onClear={() => {
diff --git a/packages/frontend/src/features/shared/components/RichTextEditor/plugins/ClearAllPlugin.tsx b/packages/frontend/src/features/shared/components/RichTextEditor/plugins/ClearAllPlugin.tsx
index b249bf1e1..0bed9f5c6 100644
--- a/packages/frontend/src/features/shared/components/RichTextEditor/plugins/ClearAllPlugin.tsx
+++ b/packages/frontend/src/features/shared/components/RichTextEditor/plugins/ClearAllPlugin.tsx
@@ -18,12 +18,7 @@ export default function ClearAllPlugin({
                 const root = $getRoot()
                 const isContentEmpty = root.getTextContent() === ''
 
-                if (isContentEmpty) {
-                    console.log(
-                        'Editor already empty, skipping CLEAR_EDITOR_COMMAND',
-                    )
-                    return
-                }
+                if (isContentEmpty) return
 
                 editor.dispatchCommand(CLEAR_EDITOR_COMMAND, undefined)
                 editor.focus()