From 83c17dc7bd7a65370931b14a180b0152efd6c73b Mon Sep 17 00:00:00 2001
From: sailong <sailong.rust@isrc.iscas.ac.cn>
Date: Tue, 3 Jun 2025 18:40:10 +0800
Subject: [PATCH] fix(UI):Fix the abnormal situation when the comment is empty

---
 .../apps/web/components/Issues/IssueDetailPage.tsx |  6 +++---
 moon/apps/web/components/Issues/IssueNewPage.tsx   |  6 +++---
 .../MrView/rich-editor/LexicalContent.tsx          | 14 +++++++++++++-
 .../components/MrView/rich-editor/RichEditor.tsx   | 10 ++++++++--
 moon/apps/web/pages/[org]/mr/[id].tsx              |  5 +++--
 5 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/moon/apps/web/components/Issues/IssueDetailPage.tsx b/moon/apps/web/components/Issues/IssueDetailPage.tsx
index f53ecb316..295a5183b 100644
--- a/moon/apps/web/components/Issues/IssueDetailPage.tsx
+++ b/moon/apps/web/components/Issues/IssueDetailPage.tsx
@@ -41,7 +41,7 @@ export default function IssueDetailPage({ id }: { id: string }) {
     conversations: [],
     title: ''
   })
-
+  const [editorHasText, setEditorHasText] = useState(false);
   const [buttonLoading, setButtonLoading] = useState<{ [key: string]: boolean }>({
     comment: false,
     close: false,
@@ -190,7 +190,7 @@ export default function IssueDetailPage({ id }: { id: string }) {
           {info && info.status === 'open' && (
             <>
               <h1>Add a comment</h1>
-              <RichEditor setEditorState={setEditorState} />
+              <RichEditor setEditorState={setEditorState} setEditorHasText={setEditorHasText}/>
               <Flex gap='small' justify={'flex-end'}>
                 <Button
                   // loading={motivation === 'close' ? loadings[3] : undefined}
@@ -202,7 +202,7 @@ export default function IssueDetailPage({ id }: { id: string }) {
                 </Button>
                 <Button
                   loading={buttonLoading.comment}
-                  disabled={editorState === '' || !login}
+                  disabled={editorState === '' || !login || !editorHasText}
                   onClick={() => save_comment(editorState)}
                 >
                   Comment
diff --git a/moon/apps/web/components/Issues/IssueNewPage.tsx b/moon/apps/web/components/Issues/IssueNewPage.tsx
index e2687b57f..120717a15 100644
--- a/moon/apps/web/components/Issues/IssueNewPage.tsx
+++ b/moon/apps/web/components/Issues/IssueNewPage.tsx
@@ -15,7 +15,7 @@ export default function IssueNewPage() {
   const [loadings, setLoadings] = useState<boolean[]>([])
   const router = useRouter()
   const { mutate: submitNewIssue } = usePostIssueSubmit()
-
+  const [editorHasText, setEditorHasText] = useState(false);
   const set_to_loading = (index: number) => {
     setLoadings((prevLoadings) => {
       const newLoadings = [...prevLoadings]
@@ -74,9 +74,9 @@ export default function IssueNewPage() {
         </Space>
         <Space direction='vertical' style={{ width: '100%' }}>
           <h1>Add a description</h1>
-          <RichEditor setEditorState={setEditorState} />
+          <RichEditor setEditorState={setEditorState} setEditorHasText={setEditorHasText}/>
           <Flex justify={'flex-end'}>
-            <Button loading={loadings[3]} onClick={() => submit(editorState)}>
+            <Button disabled={!editorHasText} loading={loadings[3]} onClick={() => submit(editorState)}>
               Submit New Issue
             </Button>
           </Flex>
diff --git a/moon/apps/web/components/MrView/rich-editor/LexicalContent.tsx b/moon/apps/web/components/MrView/rich-editor/LexicalContent.tsx
index 94521e665..76dd7b61e 100644
--- a/moon/apps/web/components/MrView/rich-editor/LexicalContent.tsx
+++ b/moon/apps/web/components/MrView/rich-editor/LexicalContent.tsx
@@ -3,6 +3,7 @@ import ExampleTheme from './ExampleTheme';
 import { ContentEditable } from '@lexical/react/LexicalContentEditable';
 import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
 import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary';
+import type { LexicalEditor } from 'lexical';
 
 const LexicalContent = ({ lexicalJson }: { lexicalJson: string }) => {
     const editorConfig = {
@@ -13,7 +14,18 @@ const LexicalContent = ({ lexicalJson }: { lexicalJson: string }) => {
         },
         theme: ExampleTheme,
         editable: false,
-        editorState: lexicalJson,
+        editorState: (editor: LexicalEditor) => {
+            if (lexicalJson) {
+                try {
+                    const parsedState = editor.parseEditorState(lexicalJson);
+                    
+                    editor.setEditorState(parsedState);
+                } catch (e) {
+                    // eslint-disable-next-line no-console
+                    console.warn('Invalid lexical JSON, loading empty editor state.');
+                }
+            }
+        },
     };
 
     const placeholder = 'No description provided.';
diff --git a/moon/apps/web/components/MrView/rich-editor/RichEditor.tsx b/moon/apps/web/components/MrView/rich-editor/RichEditor.tsx
index a1bf83733..f582a7b82 100644
--- a/moon/apps/web/components/MrView/rich-editor/RichEditor.tsx
+++ b/moon/apps/web/components/MrView/rich-editor/RichEditor.tsx
@@ -15,7 +15,7 @@ import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
 import ExampleTheme from './ExampleTheme';
 import ToolbarPlugin from './plugins/ToolbarPlugin';
 // import TreeViewPlugin from './plugins/TreeViewPlugin';
-
+import { $getRoot } from 'lexical';
 import './styles.css';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { useEffect} from 'react';
@@ -45,7 +45,7 @@ function OnChangePlugin({ onChange }:any) {
 }
 
 
-export default function RichEditor({ setEditorState }:any) {
+export default function RichEditor({ setEditorState, setEditorHasText}:any) {
 
   function onChange(editorState:any) {
     // Call toJSON on the EditorState object, which produces a serialization safe string
@@ -53,6 +53,12 @@ export default function RichEditor({ setEditorState }:any) {
     // However, we still have a JavaScript object, so we need to convert it to an actual string with JSON.stringify
 
     setEditorState(JSON.stringify(editorStateJSON));
+
+    editorState.read(() => {
+      const text = $getRoot().getTextContent();
+      
+      setEditorHasText(text.trim().length > 0);
+    });
   }
 
   return (
diff --git a/moon/apps/web/pages/[org]/mr/[id].tsx b/moon/apps/web/pages/[org]/mr/[id].tsx
index f792dddb9..8d0fc1c17 100644
--- a/moon/apps/web/pages/[org]/mr/[id].tsx
+++ b/moon/apps/web/pages/[org]/mr/[id].tsx
@@ -44,6 +44,7 @@ const  MRDetailPage:PageWithLayout<any> = () =>{
     const { id : tempId, title } = router.query;
     const { scope } = useScope()
     const [editorState, setEditorState] = useState("");
+    const [editorHasText, setEditorHasText] = useState(false);
     const [login, _setLogin] = useState(true);
     const [outputHtml, setOutputHtml] = useState('');
 
@@ -143,7 +144,7 @@ const  MRDetailPage:PageWithLayout<any> = () =>{
           <div className="flex flex-col w-full">
             <Timeline items={conv_items}/>
             <h1>Add a comment</h1>
-            <RichEditor setEditorState={setEditorState}/>
+            <RichEditor setEditorState={setEditorState} setEditorHasText={setEditorHasText}/>
             <div className="flex gap-2 justify-end">
               {mrDetail && mrDetail.status === "open" &&
                 <Button
@@ -168,7 +169,7 @@ const  MRDetailPage:PageWithLayout<any> = () =>{
                 </Button>
               }
               <Button
-                disabled={!login}
+                disabled={!login || !editorHasText}
                 onClick={() => save_comment()}
                 aria-label="Comment"
                 className={cn(buttonClasses)}