Merge pull request #836 from SuanmoSuanyangTechnology/feature/ui_upgrade_zy

fix(web): editor init

web/src/views/Workflow/components/Editor/index.tsx

@@ -149,8 +149,8 @@ const Editor: FC<LexicalEditorProps> =({
         <HistoryPlugin />
         <CommandPlugin />
         <AutocompletePlugin options={options} />
-        <CharacterCountPlugin setCount={setCount} onChange={onChange} />
+        <CharacterCountPlugin setCount={setCount} />
-        <InitialValuePlugin value={value} options={options} />
+        <InitialValuePlugin value={value} options={options} onChange={onChange} />
         <BlurPlugin />
       </div>
     </LexicalComposer>

web/src/views/Workflow/components/Editor/plugin/CharacterCountPlugin.tsx

@@ -1,41 +1,22 @@
-import { useEffect, useRef } from 'react';
+import { useEffect } from 'react';
 import { $getRoot, $isParagraphNode } from 'lexical';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 
-import { $isVariableNode } from '../nodes/VariableNode';
+const CharacterCountPlugin = ({ setCount }: { setCount: (count: number) => void }) => {
-
-const CharacterCountPlugin = ({ setCount, onChange }: { setCount: (count: number) => void; onChange?: (value: string) => void }) => {
   const [editor] = useLexicalComposerContext();
-  const onChangeRef = useRef(onChange);
-  onChangeRef.current = onChange;
 
   useEffect(() => {
     return editor.registerUpdateListener(({ editorState, tags }) => {
       if (tags.has('programmatic')) return;
       editorState.read(() => {
         const root = $getRoot();
-        let serializedContent = '';
-        
-        // Traverse all nodes and serialize properly
         const paragraphs: string[] = [];
         root.getChildren().forEach(child => {
           if ($isParagraphNode(child)) {
-            let paragraphContent = '';
+            paragraphs.push(child.getChildren().map(n => n.getTextContent()).join(''));
-            child.getChildren().forEach(node => {
-              if ($isVariableNode(node)) {
-                paragraphContent += node.getTextContent();
-              } else {
-                paragraphContent += node.getTextContent();
-              }
-            });
-            paragraphs.push(paragraphContent);
           }
         });
-        
+        setCount(paragraphs.join('\n').length);
-        serializedContent = paragraphs.join('\n');
-        
-        setCount(serializedContent.length);
-        onChangeRef.current?.(serializedContent);
       });
     });
   }, [editor, setCount]);

web/src/views/Workflow/components/Editor/plugin/InitialValuePlugin.tsx

@@ -6,7 +6,7 @@
  */
 import { useEffect, useRef } from 'react';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import { $getRoot, $createParagraphNode, $createTextNode } from 'lexical';
+import { $getRoot, $createParagraphNode, $createTextNode, $isParagraphNode } from 'lexical';
 
 import { $createVariableNode } from '../nodes/VariableNode';
 import { type Suggestion } from '../plugin/AutocompletePlugin'
@@ -14,24 +14,34 @@ import { type Suggestion } from '../plugin/AutocompletePlugin'
 interface InitialValuePluginProps {
   value: string;
   options?: Suggestion[];
+  onChange?: (value: string) => void;
 }
 
-const InitialValuePlugin: React.FC<InitialValuePluginProps> = ({ value, options = [] }) => {
+const InitialValuePlugin: React.FC<InitialValuePluginProps> = ({ value, options = [], onChange }) => {
   const [editor] = useLexicalComposerContext();
   const prevValueRef = useRef<string>('');
   const isUserInputRef = useRef(false);
   const optionsRef = useRef(options);
   optionsRef.current = options;
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
 
   useEffect(() => {
     return editor.registerUpdateListener(({ editorState, tags }) => {
       if (tags.has('programmatic')) return;
       editorState.read(() => {
         const root = $getRoot();
-        const textContent = root.getTextContent();
+        const paragraphs: string[] = [];
-        if (textContent !== prevValueRef.current) {
+        root.getChildren().forEach(child => {
+          if ($isParagraphNode(child)) {
+            paragraphs.push(child.getChildren().map(n => n.getTextContent()).join(''));
+          }
+        });
+        const text = paragraphs.join('\n');
+        if (text !== prevValueRef.current) {
           isUserInputRef.current = true;
-          prevValueRef.current = textContent;
+          prevValueRef.current = text;
+          onChangeRef.current?.(text);
         }
       });
     });