From fe31a91c870298e40057e3986668ea557f95e045 Mon Sep 17 00:00:00 2001
From: Lois Wells <lois.wells@raspberrypi.org>
Date: Wed, 13 Nov 2024 16:01:15 +0000
Subject: [PATCH] fixes and improvements

---
 .../PyodideRunner/PyodideRunner.jsx           | 70 ++++++++++++-------
 1 file changed, 44 insertions(+), 26 deletions(-)

diff --git a/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.jsx b/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.jsx
index 6eaee4ccf..b4439ee07 100644
--- a/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.jsx
+++ b/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.jsx
@@ -75,7 +75,6 @@ const PyodideRunner = ({ active, consoleMode = false, autoRun = false }) => {
   const showVisualTab = queryParams.get("show_visual_tab") === "true";
   const [hasVisual, setHasVisual] = useState(showVisualTab || senseHatAlways);
   const [visuals, setVisuals] = useState([]);
-  const [showRunner, setShowRunner] = useState(active);
   const [inputStack, setInputStack] = useState([]);
   const [indentationLevel, setIndentationLevel] = useState(0);
   const [awaitingInput, setAwaitingInput] = useState(false);
@@ -88,30 +87,41 @@ const PyodideRunner = ({ active, consoleMode = false, autoRun = false }) => {
   const prependToInputStack = (input) => {
     setInputStack((prevInputStack) => {
       if (prevInputStack[0] === "") {
-        console.log("overwriting...");
         const newStack = [...prevInputStack];
         newStack[0] = input;
         return newStack;
       } else {
-        console.log("prepending...");
-        console.log(prevInputStack);
         return [input, ...prevInputStack];
       }
     });
   };
   const [inputStackIndex, setInputStackIndex] = useState(0);
 
-  const incrementIndentationLevel = () => {
-    setIndentationLevel((prevIndentationLevel) => prevIndentationLevel + 1);
+  const incrementIndentationLevel = (prevLine) => {
+    // console.log("prevLine", prevLine);
+    // console.log(prevLine.match(/^\s*/)[0].length);
+    const prevLevel = prevLine
+      ? Math.floor(prevLine.match(/^\s*/)[0].length / 4)
+      : 0;
+    setIndentationLevel(prevLevel + 1);
   };
 
-  useEffect(() => {
-    console.log("indentationLevel", indentationLevel);
-  }, [indentationLevel]);
+  const keepSameIndentationLevel = (prevLine) => {
+    const prevLevel = prevLine
+      ? Math.floor(prevLine.match(/^\s*/)[0].length / 4)
+      : 0;
+    setIndentationLevel(prevLevel);
+  };
 
-  useEffect(() => {
-    console.log("isOutputOnly", isOutputOnly);
-  });
+  const handleIndentationLevel = (prevLine) => {
+    if (prevLine.trimEnd().slice(-1) === ":") {
+      incrementIndentationLevel(prevLine);
+    } else if (prevLine.trimEnd() === "") {
+      setIndentationLevel(0);
+    } else {
+      keepSameIndentationLevel(prevLine);
+    }
+  };
 
   useEffect(() => {
     const handleKeyDown = (event) => {
@@ -149,14 +159,16 @@ const PyodideRunner = ({ active, consoleMode = false, autoRun = false }) => {
   }, [awaitingInput, indentationLevel, consoleMode]);
 
   useEffect(() => {
-    console.log("inputStack", inputStack);
-  }, [inputStack]);
-
-  useEffect(() => {
-    console.log("inputStackIndex", inputStackIndex);
     const inputElement = getInputElement();
     if (inputElement) {
       inputElement.innerText = inputStack[inputStackIndex];
+      // move cursor to end of text
+      const range = document.createRange();
+      const selection = window.getSelection();
+      range.selectNodeContents(inputElement);
+      range.collapse(false);
+      selection.removeAllRanges();
+      selection.addRange(range);
     }
   }, [inputStackIndex]);
 
@@ -199,10 +211,10 @@ const PyodideRunner = ({ active, consoleMode = false, autoRun = false }) => {
   }, [pyodideWorker]);
 
   useEffect(() => {
-    if (autoRun) {
+    if (autoRun && active && pyodideWorker) {
       dispatch(triggerCodeRun());
     }
-  }, []);
+  }, [active, pyodideWorker]);
 
   useEffect(() => {
     if (codeRunTriggered && active && output.current) {
@@ -254,13 +266,19 @@ const PyodideRunner = ({ active, consoleMode = false, autoRun = false }) => {
     setAwaitingInput(false);
 
     prependToInputStack(content);
-    if (content.trimEnd().slice(-1) === ":") {
-      incrementIndentationLevel();
-    } else if (content.trimEnd() === "") {
-      console.log("the content is");
-      console.log(content);
-      setIndentationLevel(0);
-    }
+    // if (content.trimEnd().slice(-1) === ":") {
+    //   incrementIndentationLevel(content);
+    // } else if (content.trimEnd() === "") {
+    //   // console.log("the content is");
+    //   // console.log(content);
+    //   setIndentationLevel(0);
+    // }
+
+    console.log(
+      "indentedLine",
+      getInputElement().parentElement.innerText.matches(/...:/),
+    );
+    handleIndentationLevel(content);
 
     const encoder = new TextEncoder();
     const bytes = encoder.encode(content + "\n");