[playground] Editing input shouldn't toggle diff view
ghstack-source-id: f9e80fc0c928e1ce1ec698d4d952e11402054843 Pull Request resolved: https://github.com/facebook/react-forget/pull/2833
Mofei Zhang committed
Apr 10, 2024 at 14:53 UTC
d2018c51e14f79c33cdeb2a702116607d2a724bf
1 file changed
+4
-6
compiler/apps/playground/components/Editor/Output.tsx
+4
-6
@@ -224,7 +224,7 @@ function TextTabContent({
224
diff: string | null;
225
showInfoPanel: boolean;
226
}) {
227
- const [value, setValue] = useState(output);
227
+ const [diffMode, setDiffMode] = useState(false);
228
return (
229
// Restrict MonacoEditor's height, since the config autoLayout:true
230
// will grow the editor to fit within parent element
@@ -234,11 +234,9 @@ function TextTabContent({
234
{diff != null && output !== diff ? (
235
<button
236
className="flex items-center gap-1 transition-colors duration-150 ease-in text-secondary hover:text-link"
237
- onClick={() =>
238
- value === output ? setValue(diff) : setValue(output)
239
- }
237
+ onClick={() => setDiffMode((diffMode) => !diffMode)}
238
>
241
- {value === output ? (
239
+ {!diffMode ? (
240
<>
241
<DocumentAddIcon className="w-5 h-5" /> Show Diff
242
</>
@@ -258,7 +256,7 @@ function TextTabContent({
256
)}
257
</div>
258
) : null}
261
- {diff != null && value !== output ? (
259
+ {diff != null && diffMode ? (
260
<DiffEditor
261
original={diff}
262
modified={output}