initial console functionality

Author: loiswells97

src/assets/stylesheets/PythonRunner.scss

@@ -41,7 +41,6 @@
 .pythonrunner-input {
   caret-color: inherit;
   color: rgb(36, 103, 236);
-  display: block;
   line-height: 20px;
   padding: 2px 1px 2px 0;
 }

src/components/Editor/Output/Output.jsx

@@ -4,7 +4,7 @@ import ExternalFiles from "../../ExternalFiles/ExternalFiles";
 import RunnerFactory from "../Runners/RunnerFactory";
 import RunBar from "../../RunButton/RunBar";
 
-const Output = ({ outputPanels = ["text", "visual"] }) => {
+const Output = ({ outputPanels = ["text", "visual"] }, autoRun = false) => {
   const project = useSelector((state) => state.editor.project);
   const isEmbedded = useSelector((state) => state.editor.isEmbedded);
   const searchParams = new URLSearchParams(window.location.search);
@@ -17,6 +17,7 @@ const Output = ({ outputPanels = ["text", "visual"] }) => {
         <RunnerFactory
           projectType={project.project_type}
           outputPanels={outputPanels}
+          autoRun={autoRun}
         />
         {isEmbedded && !isBrowserPreview && <RunBar embedded />}
       </div>

src/components/Editor/Project/Project.jsx

@@ -18,6 +18,7 @@ import { projContainer } from "../../../utils/containerQueries";
 const Project = (props) => {
   const webComponent = useSelector((state) => state.editor.webComponent);
   const {
+    autoRun = false,
     nameEditable = true,
     withProjectbar = true,
     withSidebar = true,
@@ -75,7 +76,7 @@ const Project = (props) => {
               >
                 <EditorInput />
               </ResizableWithHandle>
-              <Output />
+              <Output autoRun={autoRun} />
             </div>
           )}
         </div>

src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.jsx

@@ -7,6 +7,7 @@ import {
   setError,
   codeRunHandled,
   loadingRunner,
+  triggerCodeRun,
 } from "../../../../../redux/EditorSlice";
 import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
 import { useMediaQuery } from "react-responsive";
@@ -31,7 +32,7 @@ const getWorkerURL = (url) => {
 };
 
 const PyodideRunner = (props) => {
-  const { active } = props;
+  const { active, consoleMode = false, autoRun = false } = props;
 
   // Blob approach + targeted headers - no errors but headers required in host app to interrupt code
   const workerUrl = getWorkerURL(`${process.env.PUBLIC_URL}/PyodideWorker.js`);
@@ -60,6 +61,53 @@ const PyodideRunner = (props) => {
   const [hasVisual, setHasVisual] = useState(showVisualTab || senseHatAlways);
   const [visuals, setVisuals] = useState([]);
   const [showRunner, setShowRunner] = useState(active);
+  const [inputStack, setInputStack] = useState([]);
+  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);
+
+  useEffect(() => {
+    const handleKeyDown = (event) => {
+      if (event.key === "ArrowUp") {
+        if (inputStackIndex < inputStack.length - 1) {
+          setInputStackIndex(inputStackIndex + 1);
+        }
+      } else if (event.key === "ArrowDown") {
+        if (inputStackIndex > 0) {
+          setInputStackIndex(inputStackIndex - 1);
+        }
+      }
+    };
+    if (consoleMode) {
+      const inputElement = getInputElement();
+      inputElement?.removeEventListener("keydown", handleKeyDown);
+      inputElement?.addEventListener("keydown", handleKeyDown);
+    }
+  }, [inputStack, inputStackIndex, consoleMode]);
+
+  useEffect(() => {
+    console.log("inputStack", inputStack);
+  }, [inputStack]);
+
+  useEffect(() => {
+    console.log("inputStackIndex", inputStackIndex);
+    const inputElement = getInputElement();
+    if (inputElement) {
+      inputElement.innerText = inputStack[inputStackIndex];
+    }
+  }, [inputStackIndex]);
 
   useEffect(() => {
     if (pyodideWorker) {
@@ -99,6 +147,13 @@ const PyodideRunner = (props) => {
     }
   }, []);
 
+  useEffect(() => {
+    if (autoRun) {
+      console.log("autorunning...");
+      dispatch(triggerCodeRun());
+    }
+  }, []);
+
   useEffect(() => {
     if (codeRunTriggered && active) {
       console.log("running with pyodide");
@@ -137,11 +192,19 @@ const PyodideRunner = (props) => {
       return;
     }
 
+    prependToInputStack("");
+    setInputStackIndex(0);
     const outputPane = output.current;
-    outputPane.appendChild(inputSpan());
+    // remove last new line character from last line
+    outputPane.lastChild.innerText = outputPane.lastChild.innerText.slice(
+      0,
+      -1,
+    );
+    outputPane.lastChild.appendChild(inputSpan());
 
     const element = getInputElement();
     const { content, ctrlD } = await getInputContent(element);
+    prependToInputStack(content);
 
     const encoder = new TextEncoder();
     const bytes = encoder.encode(content + "\n");
@@ -305,6 +368,7 @@ const PyodideRunner = (props) => {
     if (element) {
       element.removeAttribute("id");
       element.removeAttribute("contentEditable");
+      element.addEventListener("keydown");
     }
   };
 

src/components/Editor/Runners/PythonRunner/PythonRunner.jsx

@@ -13,7 +13,7 @@ const SKULPT_ONLY_MODULES = [
   "turtle",
 ];
 
-const PythonRunner = () => {
+const PythonRunner = ({ autoRun = false }) => {
   const project = useSelector((state) => state.editor.project);
   const codeRunTriggered = useSelector(
     (state) => state.editor.codeRunTriggered,
@@ -22,6 +22,7 @@ const PythonRunner = () => {
     (state) => state.editor.senseHatAlwaysEnabled,
   );
   const [usePyodide, setUsePyodide] = useState(true);
+  const [consoleMode, setConsoleMode] = useState(false);
   const { t } = useTranslation();
 
   useEffect(() => {
@@ -64,6 +65,12 @@ const PythonRunner = () => {
             break;
           } else {
             setUsePyodide(true);
+            if (imports.includes("IPython")) {
+              setConsoleMode(true);
+              break;
+            } else {
+              setConsoleMode(false);
+            }
           }
         } catch (error) {
           console.error("Error occurred while getting imports:", error);
@@ -73,7 +80,11 @@ const PythonRunner = () => {
   }, [project, codeRunTriggered, senseHatAlwaysEnabled, t]);
   return (
     <>
-      <PyodideRunner active={usePyodide} />
+      <PyodideRunner
+        active={usePyodide}
+        consoleMode={consoleMode}
+        autoRun={autoRun}
+      />
       <SkulptRunner active={!usePyodide} />
     </>
   );

src/components/Editor/Runners/PythonRunner/SkulptRunner/SkulptRunner.jsx

@@ -259,7 +259,7 @@ const SkulptRunner = ({ active, outputPanels = ["text", "visual"] }) => {
       Sk.sense_hat.mz_criteria.noInputEvents = false;
     }
     const outputPane = output.current;
-    outputPane.appendChild(inputSpan());
+    outputPane.lastChild.appendChild(inputSpan());
 
     const input = getInput();
     input.focus();

src/components/Editor/Runners/RunnerFactory.jsx

@@ -2,7 +2,11 @@ import React from "react";
 import PythonRunner from "./PythonRunner/PythonRunner";
 import HtmlRunner from "./HtmlRunner/HtmlRunner";
 
-const RunnerFactory = ({ projectType, outputPanels = ["text", "visual"] }) => {
+const RunnerFactory = ({
+  autoRun,
+  projectType,
+  outputPanels = ["text", "visual"],
+}) => {
   const Runner = () => {
     if (projectType === "html") {
       return HtmlRunner;
@@ -13,7 +17,7 @@ const RunnerFactory = ({ projectType, outputPanels = ["text", "visual"] }) => {
 
   const Selected = Runner();
 
-  const props = projectType === "html" ? {} : { outputPanels };
+  const props = projectType === "html" ? {} : { outputPanels, autoRun };
 
   return <Selected {...props} />;
 };

src/components/Mobile/MobileProject/MobileProject.jsx

@@ -14,7 +14,11 @@ import { useTranslation } from "react-i18next";
 import Sidebar from "../../Menus/Sidebar/Sidebar";
 import { showSidebar } from "../../../redux/EditorSlice";
 
-const MobileProject = ({ withSidebar, sidebarOptions = [] }) => {
+const MobileProject = ({
+  autoRun = false,
+  withSidebar,
+  sidebarOptions = [],
+}) => {
   const projectType = useSelector((state) => state.editor.project.project_type);
   const sidebarShowing = useSelector((state) => state.editor.sidebarShowing);
   const codeRunTriggered = useSelector(
@@ -55,7 +59,7 @@ const MobileProject = ({ withSidebar, sidebarOptions = [] }) => {
           <EditorInput />
         </TabPanel>
         <TabPanel>
-          <Output />
+          <Output autoRun={autoRun} />
         </TabPanel>
         <MobileProjectBar />
         <div className="react-tabs__tab-container mobile-nav">

src/components/WebComponentProject/WebComponentProject.jsx

@@ -24,6 +24,7 @@ import {
 } from "../../events/WebComponentCustomEvents";
 
 const WebComponentProject = ({
+  autoRun = false,
   withProjectbar = false,
   nameEditable = false,
   withSidebar = false,
@@ -97,11 +98,13 @@ const WebComponentProject = ({
       {!outputOnly &&
         (isMobile ? (
           <MobileProject
+            autoRun={autoRun}
             withSidebar={withSidebar}
             sidebarOptions={sidebarOptions}
           />
         ) : (
           <Project
+            autoRun={autoRun}
             nameEditable={nameEditable}
             withProjectbar={withProjectbar}
             withSidebar={withSidebar}

src/containers/WebComponentLoader.jsx

@@ -31,6 +31,7 @@ const WebComponentLoader = (props) => {
   const {
     assetsIdentifier,
     authKey,
+    autoRun = false,
     identifier,
     code,
     senseHatAlwaysEnabled = false,
@@ -175,6 +176,7 @@ const WebComponentLoader = (props) => {
               closeButton={ToastCloseButton}
             />
             <WebComponentProject
+              autoRun={autoRun}
               withProjectbar={withProjectbar}
               nameEditable={projectNameEditable}
               withSidebar={withSidebar}