From 78266378ff6ef668299456b53bd4fff47b9088c2 Mon Sep 17 00:00:00 2001
From: Jimmy Liow <lyj@hainatravel.com>
Date: Mon, 28 Oct 2024 10:19:18 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20DefaultValuePlugin=20=E9=BB=98=E8=AE=A4?=
 =?UTF-8?q?=E5=80=BC=E5=8F=AA=E7=94=A8=E5=88=9D=E5=A7=8B=E5=8C=96=E4=B8=80?=
 =?UTF-8?q?=E6=AC=A1=EF=BC=9BOnChangePlugin=20=E5=8F=AF=E4=BB=A5=E5=BF=BD?=
 =?UTF-8?q?=E7=95=A5=E9=80=89=E6=8B=A9=E6=96=87=E6=9C=AC=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/LexicalEditor/Index.jsx | 64 +++++++++++++++++---------
 1 file changed, 41 insertions(+), 23 deletions(-)

diff --git a/src/components/LexicalEditor/Index.jsx b/src/components/LexicalEditor/Index.jsx
index 5ec8e92..2e4312c 100644
--- a/src/components/LexicalEditor/Index.jsx
+++ b/src/components/LexicalEditor/Index.jsx
@@ -43,6 +43,7 @@ import {useLexicalEditable} from '@lexical/react/useLexicalEditable';
 import { $getRoot, $getSelection, $createParagraphNode } from 'lexical';
 import { $generateHtmlFromNodes, $generateNodesFromDOM, } from '@lexical/html';
 // import {  } from '@lexical/clipboard';
+import { isEmpty } from '@/utils/commons';
 
 import './styles.css';
 
@@ -87,7 +88,9 @@ function LexicalDefaultValuePlugin({ value = "" }= {}) {
     if (clear) {
       root.clear();
     }
-    // console.log(nodes);
+    console.log('default value:');
+    console.log(value);
+    console.log(isEmpty(value))
 
     const p = $createParagraphNode();
     const _p = nodes.filter(n => n).forEach((n) => {
@@ -100,41 +103,56 @@ function LexicalDefaultValuePlugin({ value = "" }= {}) {
     // root.append(...nodes.filter(n => n));
   };
 
+  // 默认值设置只用初始化一次；
+  // 空值不更新 HTML；
   useEffect(() => {
-    if (editor && value) {
+    if (editor && !isEmpty(value)) {
       editor.update(() => {
         updateHTML(editor, value, true);
       });
     }
-  }, [value]);
+  }, []);
 
   return null;
 }
-function MyOnChangePlugin({ onChange }) {
+function MyOnChangePlugin({ ignoreHistoryMergeTagChange = true, ignoreSelectionChange = true, onChange }) {
   const [editor] = useLexicalComposerContext();
   useEffect(() => {
-    return editor.registerUpdateListener(({ editorState }) => {
-      // const editorStateJSON = editorState.toJSON();
-      let html;
-      let textContent;
-      editorState.read(() => {
-        const root = $getRoot();
-        const textContent = root.getTextContent();
-        // console.log('textContent', textContent);
-
-        const html = $generateHtmlFromNodes(editor);
-        // console.log('html', html);
-
-        // setEditorContent(content);
-        if (typeof onChange === 'function') {
-          onChange({ editorState, html, textContent });
+    if (onChange) {
+      return editor.registerUpdateListener(({editorState, dirtyElements, dirtyLeaves, prevEditorState, tags}) => {
+
+        if (
+          (ignoreSelectionChange &&
+            dirtyElements.size === 0 &&
+            dirtyLeaves.size === 0) ||
+          (ignoreHistoryMergeTagChange && tags.has('history-merge')) ||
+          prevEditorState.isEmpty()
+        ) {
+          return;
         }
+        // const editorStateJSON = editorState.toJSON();
+        let html;
+        let textContent;
+        editorState.read(() => {
+          const root = $getRoot();
+          const textContent = root.getTextContent();
+          // console.log('textContent', textContent);
+
+          const html = $generateHtmlFromNodes(editor);
+          // console.log('html', html);
+
+          // setEditorContent(content);
+          if (typeof onChange === 'function') {
+            onChange({ editorState, editor, tags, html, textContent });
+          }
+        });
       });
-    });
-  }, [editor, onChange]);
+    }
+  }, [editor, ignoreHistoryMergeTagChange, ignoreSelectionChange, onChange]);
+
   return null;
 }
-export default function Editor({ isRichText, editorRef, onChange, initialValue, ...props }) {
+export default function Editor({ isRichText, isDebug, editorRef, onChange, initialValue, ...props }) {
   return (
     <LexicalComposer initialConfig={editorConfig}>
       <div className='editor-container'>
@@ -147,7 +165,7 @@ export default function Editor({ isRichText, editorRef, onChange, initialValue,
             <PlainTextPlugin contentEditable={<ContentEditable className='editor-pure-input' />} ErrorBoundary={LexicalErrorBoundary} />
           )}
           <HistoryPlugin />
-          {import.meta.env.DEV && <TreeViewPlugin />}
+          {(import.meta.env.DEV && isDebug) && <TreeViewPlugin />}
           <LexicalDefaultValuePlugin value={initialValue} />
           <AutoFocusPlugin />
           <CodeHighlightPlugin />