From d2018c51e14f79c33cdeb2a702116607d2a724bf Mon Sep 17 00:00:00 2001
From: Mofei Zhang <feifei0@meta.com>
Date: Wed, 10 Apr 2024 14:53:38 -0400
Subject: [PATCH] [playground] Editing input shouldn't toggle diff view

ghstack-source-id: f9e80fc0c928e1ce1ec698d4d952e11402054843
Pull Request resolved: https://github.com/facebook/react-forget/pull/2833
---
 compiler/apps/playground/components/Editor/Output.tsx | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/compiler/apps/playground/components/Editor/Output.tsx b/compiler/apps/playground/components/Editor/Output.tsx
index 905a040d52..adfdf0d675 100644
--- a/compiler/apps/playground/components/Editor/Output.tsx
+++ b/compiler/apps/playground/components/Editor/Output.tsx
@@ -224,7 +224,7 @@ function TextTabContent({
   diff: string | null;
   showInfoPanel: boolean;
 }) {
-  const [value, setValue] = useState(output);
+  const [diffMode, setDiffMode] = useState(false);
   return (
     // Restrict MonacoEditor's height, since the config autoLayout:true
     // will grow the editor to fit within parent element
@@ -234,11 +234,9 @@ function TextTabContent({
           {diff != null && output !== diff ? (
             <button
               className="flex items-center gap-1 transition-colors duration-150 ease-in text-secondary hover:text-link"
-              onClick={() =>
-                value === output ? setValue(diff) : setValue(output)
-              }
+              onClick={() => setDiffMode((diffMode) => !diffMode)}
             >
-              {value === output ? (
+              {!diffMode ? (
                 <>
                   <DocumentAddIcon className="w-5 h-5" /> Show Diff
                 </>
@@ -258,7 +256,7 @@ function TextTabContent({
           )}
         </div>
       ) : null}
-      {diff != null && value !== output ? (
+      {diff != null && diffMode ? (
         <DiffEditor
           original={diff}
           modified={output}