feat: Added UI functions related to data-flow knowledge base #3221 (#10038)

### What problem does this PR solve?

feat: Added UI functions related to data-flow knowledge base #3221

### Type of change

- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/dataflow-result/components/parse-editer/index.tsx

@@ -0,0 +1,48 @@
+import { Textarea } from '@/components/ui/textarea';
+import { cn } from '@/lib/utils';
+import { useState } from 'react';
+
+interface FormatPreserveEditorProps {
+  initialValue: string;
+  onSave: (value: string) => void;
+  className?: string;
+}
+const FormatPreserveEditor = ({
+  initialValue,
+  onSave,
+  className,
+}: FormatPreserveEditorProps) => {
+  const [content, setContent] = useState(initialValue);
+  const [isEditing, setIsEditing] = useState(false);
+
+  const handleEdit = () => setIsEditing(true);
+
+  const handleSave = () => {
+    onSave(content);
+    setIsEditing(false);
+  };
+
+  return (
+    <div className="editor-container">
+      {isEditing ? (
+        <Textarea
+          className={cn(
+            'w-full h-full bg-transparent text-text-secondary',
+            className,
+          )}
+          value={content}
+          onChange={(e) => setContent(e.target.value)}
+          onBlur={handleSave}
+          autoSize={{ maxRows: 100 }}
+          autoFocus
+        />
+      ) : (
+        <pre className="text-text-secondary" onClick={handleEdit}>
+          {content}
+        </pre>
+      )}
+    </div>
+  );
+};
+
+export default FormatPreserveEditor;