adding iframe console into actual editor and getting it autorunning with query string

Author: loiswells97

src/assets/stylesheets/PythonRunner.scss

@@ -17,7 +17,6 @@
   white-space: -moz-pre-wrap;
   white-space: -pre-wrap;
   white-space: -o-pre-wrap;
-  width: 100%;
   word-wrap: break-word;
   overflow-y: auto;
 

src/components/Editor/Output/Output.jsx

@@ -9,6 +9,7 @@ const Output = ({ outputPanels = ["text", "visual"], autoRun = false }) => {
   const isEmbedded = useSelector((state) => state.editor.isEmbedded);
   const searchParams = new URLSearchParams(window.location.search);
   const isBrowserPreview = searchParams.get("browserPreview") === "true";
+  const isAutoRun = autoRun || searchParams.get("autoRun") === "true";
 
   return (
     <>
@@ -17,7 +18,7 @@ const Output = ({ outputPanels = ["text", "visual"], autoRun = false }) => {
         <RunnerFactory
           projectType={project.project_type}
           outputPanels={outputPanels}
-          autoRun={autoRun}
+          autoRun={isAutoRun}
         />
         {isEmbedded && !isBrowserPreview && <RunBar embedded />}
       </div>

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

@@ -56,6 +56,7 @@ const PyodideRunner = (props) => {
   const settings = useContext(SettingsContext);
   const isMobile = useMediaQuery({ query: MOBILE_MEDIA_QUERY });
   const senseHatAlways = useSelector((s) => s.editor.senseHatAlwaysEnabled);
+  const isOutputOnly = useSelector((state) => state.editor.isOutputOnly);
   const queryParams = new URLSearchParams(window.location.search);
   const showVisualTab = queryParams.get("show_visual_tab") === "true";
   const [hasVisual, setHasVisual] = useState(showVisualTab || senseHatAlways);
@@ -78,6 +79,10 @@ const PyodideRunner = (props) => {
   };
   const [inputStackIndex, setInputStackIndex] = useState(0);
 
+  useEffect(() => {
+    console.log("isOutputOnly", isOutputOnly);
+  });
+
   useEffect(() => {
     const handleKeyDown = (event) => {
       if (event.key === "ArrowUp") {
@@ -414,6 +419,11 @@ const PyodideRunner = (props) => {
                       {t("output.textOutput")}
                     </span>
                   </Tab>
+                  {!isOutputOnly && (
+                    <Tab key={1}>
+                      <span className="react-tabs__tab-text">Console</span>
+                    </Tab>
+                  )}
                 </TabList>
                 {!hasVisual && !isEmbedded && isMobile && (
                   <RunnerControls skinny />
@@ -427,6 +437,16 @@ const PyodideRunner = (props) => {
                   ref={output}
                 ></pre>
               </TabPanel>
+              {!isOutputOnly && (
+                <TabPanel key={1}>
+                  <iframe
+                    title="console"
+                    src="http://localhost:3012/en/embed/viewer/ipython-console?browserPreview=true&autoRun=true"
+                    crossOrigin
+                    style={{ width: "100%", height: "100%" }}
+                  />
+                </TabPanel>
+              )}
             </Tabs>
           </div>
         </>
@@ -446,6 +466,11 @@ const PyodideRunner = (props) => {
                   {t("output.textOutput")}
                 </span>
               </Tab>
+              {/* {!isOutputOnly && (
+                <Tab key={2}>
+                  <span className="react-tabs__tab-text">Console</span>
+                </Tab>
+              )} */}
             </TabList>
             {!isEmbedded && hasVisual && <OutputViewToggle />}
             {!isEmbedded && isMobile && <RunnerControls skinny />}
@@ -463,6 +488,20 @@ const PyodideRunner = (props) => {
               ref={output}
             ></pre>
           </TabPanel>
+          {/* {!isOutputOnly && (
+            <TabPanel key={2}>
+              <editor-wc
+                autoRun={true}
+                class="c-editor__wc"
+                code={`from IPython import embed\nembed()`}
+                load_remix_disabled={true}
+                embedded={false}
+                output_only={true}
+                output_split_view={false}
+                use_editor_styles={true}
+              ></editor-wc>
+            </TabPanel>
+          )} */}
         </Tabs>
       )}
     </div>