perf(workflow): debounce input changes to improve performance (#770)

frontend/packages/workflow/test-run/src/components/form-materials/full-input/full-input.tsx

@@ -17,6 +17,7 @@
 import { useState, useEffect, useRef, Suspense } from 'react';
 
 import { nanoid } from 'nanoid';
+import { debounce } from 'lodash-es';
 import cls from 'classnames';
 import { connect, mapProps } from '@formily/react';
 import type { Editor } from '@coze-common/md-editor-adapter';
@@ -56,23 +57,25 @@ const InnerFullInputAdapter: React.FC<FullInputProps> = ({
   const businessKeyRef = useRef(nanoid());
   const innerValueRef = useRef<string | undefined>();
 
-  const handleChange = (v: string) => {
-    if (!editorRef.current) {
-      return;
-    }
-    /**
-     * deltas => md
-     */
-    const content = editorRef.current.getContent();
-    const { markdown } = delta2md(content.deltas[0], content.deltas);
-    /**
-     * Changes may come from user input or initialization, do a diff to ensure performance
-     */
-    if (markdown !== innerValueRef.current) {
-      innerValueRef.current = markdown;
-      onChange(markdown);
-    }
-  };
+  const handleChange = useRef(
+    debounce((v: string) => {
+      if (!editorRef.current) {
+        return;
+      }
+      /**
+       * deltas => md
+       */
+      const content = editorRef.current.getContent();
+      const { markdown } = delta2md(content.deltas[0], content.deltas);
+      /**
+       * Changes may come from user input or initialization, do a diff to ensure performance
+       */
+      if (markdown !== innerValueRef.current) {
+        innerValueRef.current = markdown;
+        onChange(markdown);
+      }
+    }, 500),
+  ).current;
 
   useEffect(() => {
     if (value !== innerValueRef.current) {
@@ -84,6 +87,13 @@ const InnerFullInputAdapter: React.FC<FullInputProps> = ({
     }
   }, [value]);
 
+  useEffect(
+    () => () => {
+      handleChange.cancel();
+    },
+    [handleChange],
+  );
+
   return (
     <Suspense fallback={null}>
       <LazyEditorFullInputInner