From 370f2dff6b5740418ddf956f56fdc2bcf88a6d8f Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Fri, 21 Jun 2024 17:42:52 -0300
Subject: [PATCH] refactor: Update TextModal to use TextEditorArea for text
 input

---
 .../components/textEditorArea/index.tsx        | 18 ++++++++++++++++++
 src/frontend/src/modals/textModal/index.tsx    |  3 ++-
 .../shared/components/textOutputView/index.tsx |  4 ++--
 3 files changed, 22 insertions(+), 3 deletions(-)
 create mode 100644 src/frontend/src/modals/textModal/components/textEditorArea/index.tsx

diff --git a/src/frontend/src/modals/textModal/components/textEditorArea/index.tsx b/src/frontend/src/modals/textModal/components/textEditorArea/index.tsx
new file mode 100644
index 000000000..5744ad8d8
--- /dev/null
+++ b/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;
diff --git a/src/frontend/src/modals/textModal/index.tsx b/src/frontend/src/modals/textModal/index.tsx
index 68a352234..1f81f3c62 100644
--- a/src/frontend/src/modals/textModal/index.tsx
+++ b/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>
diff --git a/src/frontend/src/shared/components/textOutputView/index.tsx b/src/frontend/src/shared/components/textOutputView/index.tsx
index 8ac35877d..c43e8048b 100644
--- a/src/frontend/src/shared/components/textOutputView/index.tsx
+++ b/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)}}
     />
   );
 };