refactor: Update TextModal to use TextEditorArea for text input

src/frontend/src/modals/textModal/components/textEditorArea/index.tsx

@@ -0,0 +1,18 @@
+import { Textarea } from "../../../../components/ui/textarea";
+
+const TextEditorArea = ({ left, value,onChange }:{left:boolean|undefined,value:any,onChange?:(string)=>void;}) => {
+  if (typeof value === "object" && Object.keys(value).includes("text")) {
+    value = value.text;
+  }
+  return (
+    <Textarea
+      className={`w-full custom-scroll ${left ? "min-h-32" : "h-full"}`}
+      placeholder={"Empty"}
+      // update to real value on flowPool
+      value={value}
+      onChange={(e) => {if(onChange) onChange(e.target.value)}}
+    />
+  );
+};
+
+export default TextEditorArea;

src/frontend/src/modals/textModal/index.tsx

@@ -18,6 +18,7 @@ import {
 import TextOutputView from "../../shared/components/textOutputView";
 import { useDarkStore } from "../../stores/darkStore";
 import BaseModal from "../baseModal";
+import TextEditorArea from "./components/textEditorArea";
 
 export default function TextModal({
   children,
@@ -45,7 +46,7 @@ export default function TextModal({
       <BaseModal.Content>
         <div className="flex h-full w-full flex-col transition-all">
           <div className="h-[370px]">
-            <TextOutputView onChange={(text)=>setInternalValue(text)} value={internalValue} left={false} />
+            <TextEditorArea onChange={(text)=>setInternalValue(text)} value={internalValue} left={false} />
           </div>
         </div>
       </BaseModal.Content>

src/frontend/src/shared/components/textOutputView/index.tsx

@@ -1,6 +1,6 @@
 import { Textarea } from "../../../components/ui/textarea";
 
-const TextOutputView = ({ left, value,onChange }:{left:boolean|undefined,value:any,onChange?:(string)=>void;}) => {
+const TextOutputView = ({ left, value }:{left:boolean|undefined,value:any}) => {
   if (typeof value === "object" && Object.keys(value).includes("text")) {
     value = value.text;
   }
@@ -8,9 +8,9 @@ const TextOutputView = ({ left, value,onChange }:{left:boolean|undefined,value:a
     <Textarea
       className={`w-full custom-scroll ${left ? "min-h-32" : "h-full"}`}
       placeholder={"Empty"}
+      readOnly
       // update to real value on flowPool
       value={value}
-      onChange={(e) => {if(onChange) onChange(e.target.value)}}
     />
   );
 };