From c6d9dfbd73ee09c57c01e5464a1ffbb42e88fd66 Mon Sep 17 00:00:00 2001
From: Sofia Fristrom <sofia.p.fristrom@gmail.com>
Date: Fri, 20 Sep 2024 17:05:43 -0700
Subject: [PATCH 1/6] Add class names and pre to IDE div

---
 .../src/components/editor/IDEPlugin.tsx            | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/starter-frontend/src/components/editor/IDEPlugin.tsx b/starter-frontend/src/components/editor/IDEPlugin.tsx
index 9936452..15a693f 100644
--- a/starter-frontend/src/components/editor/IDEPlugin.tsx
+++ b/starter-frontend/src/components/editor/IDEPlugin.tsx
@@ -24,25 +24,25 @@ export default function IDEPlugin({editor, openIDE, openNewIDE}: PluginRegistrat
         
         if (oldDiv !== null) {
           let newDiv = document.createElement("div");
+          newDiv.className = "ide-div";
+
+          let newPre = document.createElement("pre");
 
           let newCode = document.createElement("code");
+          newCode.className = "ide-code";
           newCode.dataset.lang = "0";
           newCode.id = "active";
-          newDiv.appendChild(newCode);
-
-          let newBreak = document.createElement("br");
-          newDiv.appendChild(newBreak);
+          newPre.appendChild(newCode);
+          newDiv.appendChild(newPre);
 
           let newButton = document.createElement("button");
           newButton.textContent = "Run in IDE";
           newButton.addEventListener("click", openIDE);
+          newButton.className = "run-in-ide-btn";
           newDiv.appendChild(newButton);
 
           editor.dom.replace(newDiv, oldDiv);
         }
-        // editor.execCommand('mceInsertContent', false, newCont
-        //   // "<br><code data-language='0' id='active'></code><br><button onClick='openIDE()'>Run in IDE</button><br>"
-        // );
 
         openNewIDE();
     },

From 5eb3c1c1a04ce3a079c2fb20774db07aa8bcd1ce Mon Sep 17 00:00:00 2001
From: Sofia Fristrom <sofia.p.fristrom@gmail.com>
Date: Fri, 20 Sep 2024 18:28:39 -0700
Subject: [PATCH 2/6] Make it so buttons work after saving

---
 .../src/components/editor/IDEPlugin.tsx       |  1 -
 .../src/components/editor/TextEditor.tsx      | 21 +++++++---
 starter-frontend/src/components/ide/IDE.tsx   |  1 +
 starter-frontend/src/pages/editor/editor.tsx  | 42 ++++++++++---------
 4 files changed, 40 insertions(+), 25 deletions(-)

diff --git a/starter-frontend/src/components/editor/IDEPlugin.tsx b/starter-frontend/src/components/editor/IDEPlugin.tsx
index 15a693f..ca52b25 100644
--- a/starter-frontend/src/components/editor/IDEPlugin.tsx
+++ b/starter-frontend/src/components/editor/IDEPlugin.tsx
@@ -37,7 +37,6 @@ export default function IDEPlugin({editor, openIDE, openNewIDE}: PluginRegistrat
 
           let newButton = document.createElement("button");
           newButton.textContent = "Run in IDE";
-          newButton.addEventListener("click", openIDE);
           newButton.className = "run-in-ide-btn";
           newDiv.appendChild(newButton);
 
diff --git a/starter-frontend/src/components/editor/TextEditor.tsx b/starter-frontend/src/components/editor/TextEditor.tsx
index 471788e..1bf20e7 100644
--- a/starter-frontend/src/components/editor/TextEditor.tsx
+++ b/starter-frontend/src/components/editor/TextEditor.tsx
@@ -28,23 +28,27 @@ export default function TextEditor({editorRef, initContent, eRoute, setIsLoading
       setupEditor && setupEditor(editor);
     }, []);
 
+    
+
 
     return (
       <div id="editor-area">
         <form>
         <Editor 
-          initialValue={content}
+          initialValue={"<div id='placement'></div>" + content}
           tinymceScriptSrc={process.env.PUBLIC_URL + '/tinymce/tinymce.min.js'}
           id='editor'
           licenseKey="gpl"
           // @ts-ignore
-          onInit={(_evt, editor) => {editorRef.current = editor}}
+          onInit={(_evt, editor) => {editorRef.current = editor; 
+            setupIDEButtons(openIDE, editorRef);
+          }}
           init={{ 
             height: "calc(100vh - 105px)",
             width: "auto",
             resize: false, 
             menubar: false,
-            extended_valid_elements: 'button[className|onClick]',
+            extended_valid_elements: 'button[class|className|onClick|onclick|classname]',
             plugins: [
               'advlist', 'autolink', 'lists', 'link', 'image', 'charmap',
               'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
@@ -58,7 +62,7 @@ export default function TextEditor({editorRef, initContent, eRoute, setIsLoading
             content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }', 
             save_onsavecallback: (): void => {
               // @ts-ignore
-              save(setContent, editorRef, eRoute, setIsLoading, setCurrContent)
+              save(setContent, editorRef, eRoute, setIsLoading, setCurrContent, openIDE)
             }, 
             setup, 
             ...init,
@@ -76,13 +80,14 @@ export default function TextEditor({editorRef, initContent, eRoute, setIsLoading
  * TO-DO: Implement.
  */
 function save(setContent: React.Dispatch<React.SetStateAction<string>>, editorRef: React.RefObject<TinyMCEEditor>, eRoute: string, setIsLoading: React.Dispatch<React.SetStateAction<boolean>>,
-              setCurrContent: React.Dispatch<React.SetStateAction<string>>): void {
+              setCurrContent: React.Dispatch<React.SetStateAction<string>>, openIDE: (this: HTMLButtonElement, ev: MouseEvent) => void): void {
   if (editorRef.current !== null) {
     const content = editorRef.current.getContent();
     setContent(content);
     setCurrContent(content);
     doSave(content, eRoute, setIsLoading, setContent, setCurrContent);
     
+    setupIDEButtons(openIDE, editorRef);
   }
 }
 
@@ -124,3 +129,9 @@ const doSave = async (content: string, route: string, setIsLoading: React.Dispat
     console.log(e);
   }
 }
+
+
+// @ts-ignore
+function setupIDEButtons(openIDE, editorRef): void {
+  editorRef.current.dom.getRoot().addEventListener("click", openIDE);
+}
diff --git a/starter-frontend/src/components/ide/IDE.tsx b/starter-frontend/src/components/ide/IDE.tsx
index 3540d4f..3ae9e62 100644
--- a/starter-frontend/src/components/ide/IDE.tsx
+++ b/starter-frontend/src/components/ide/IDE.tsx
@@ -142,6 +142,7 @@ export default function IDE({initCode, initLang, setIsIDEOpen, editorRef}: IDEPr
                 const langIndex = languageOptions.findIndex(function(obj){return obj.id == language.id});
                 newCode.dataset.lang = "" + langIndex;
                 newCode.id = "active";
+                newCode.className = "ide-code";
                 editor.dom.replace(newCode, oldCode);
             }
             
diff --git a/starter-frontend/src/pages/editor/editor.tsx b/starter-frontend/src/pages/editor/editor.tsx
index a600a5b..117ab05 100644
--- a/starter-frontend/src/pages/editor/editor.tsx
+++ b/starter-frontend/src/pages/editor/editor.tsx
@@ -66,29 +66,33 @@ export function Note(): JSX.Element {
         setIsIDEOpen(true);
     }
 
-    function openIDE(this: HTMLButtonElement, _ev: MouseEvent): void {
-        const parentDiv = this.parentNode;
-        if (parentDiv !== null) {
-            const codeBlock = parentDiv.querySelector("code");
-            if (codeBlock !== null) {
-                const codeContent = codeBlock.textContent;
-                if (codeContent === null) {
-                    setInitIDECode("");
-                } else {
-                    setInitIDECode(codeContent);
+    function openIDE(this: HTMLButtonElement, ev: MouseEvent): void {
+        // @ts-ignore
+        if (ev.target !== null && ev.target.className !== null && ev.target.className === "run-in-ide-btn") {
+            // @ts-ignore
+            const parentDiv = ev.target.parentNode;
+            if (parentDiv !== null) {
+                const codeBlock = parentDiv.querySelector("code");
+                if (codeBlock !== null) {
+                    const codeContent = codeBlock.textContent;
+                    if (codeContent === null) {
+                        setInitIDECode("");
+                    } else {
+                        setInitIDECode(codeContent);
+                    }
+                    const language = codeBlock.dataset.lang;
+                    if (language === null) {
+                        setInitIDELang(0);
+                    } else {
+                        setInitIDELang(Number(language));
+                    }
+                    
+                    setIsIDEOpen(true);    
                 }
-                const language = codeBlock.dataset.lang;
-                if (language === null) {
-                    setInitIDELang(0);
-                } else {
-                    setInitIDELang(Number(language));
-                }
-                
-                setIsIDEOpen(true);    
             }
         }
-    }
 
+    }
     
 
     const [currName, setCurrName] = useState<string>("");

From 99ce00264a6162807c769e80bef74036aac54fe1 Mon Sep 17 00:00:00 2001
From: Sofia Fristrom <sofia.p.fristrom@gmail.com>
Date: Fri, 20 Sep 2024 20:09:04 -0700
Subject: [PATCH 3/6] Makes IDE updateable when opened again

---
 starter-frontend/src/pages/editor/editor.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/starter-frontend/src/pages/editor/editor.tsx b/starter-frontend/src/pages/editor/editor.tsx
index 117ab05..7ac402e 100644
--- a/starter-frontend/src/pages/editor/editor.tsx
+++ b/starter-frontend/src/pages/editor/editor.tsx
@@ -74,6 +74,7 @@ export function Note(): JSX.Element {
             if (parentDiv !== null) {
                 const codeBlock = parentDiv.querySelector("code");
                 if (codeBlock !== null) {
+                    codeBlock.id = "active";
                     const codeContent = codeBlock.textContent;
                     if (codeContent === null) {
                         setInitIDECode("");

From e2b3ff6deb30dc061cc522522c0ca8d259c983d5 Mon Sep 17 00:00:00 2001
From: Sofia Fristrom <sofia.p.fristrom@gmail.com>
Date: Fri, 20 Sep 2024 20:18:30 -0700
Subject: [PATCH 4/6] Language updateable

---
 starter-frontend/src/components/ide/IDE.tsx               | 4 ++--
 starter-frontend/src/components/ide/LanguagesDropdown.tsx | 7 ++++---
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/starter-frontend/src/components/ide/IDE.tsx b/starter-frontend/src/components/ide/IDE.tsx
index 3ae9e62..5f60953 100644
--- a/starter-frontend/src/components/ide/IDE.tsx
+++ b/starter-frontend/src/components/ide/IDE.tsx
@@ -154,11 +154,11 @@ export default function IDE({initCode, initLang, setIsIDEOpen, editorRef}: IDEPr
     
     return (
         <div className="ide">
-            <LanguagesDropdown onSelectChange={onSelectChange} />
+            <LanguagesDropdown onSelectChange={onSelectChange} language={language} />
             <CodeEditor 
                 code={code}
                 onChange={onChange}
-                language={language?.value}
+                language={language.value}
                 theme="vs-dark"
             />
             
diff --git a/starter-frontend/src/components/ide/LanguagesDropdown.tsx b/starter-frontend/src/components/ide/LanguagesDropdown.tsx
index 1f04656..0366afc 100644
--- a/starter-frontend/src/components/ide/LanguagesDropdown.tsx
+++ b/starter-frontend/src/components/ide/LanguagesDropdown.tsx
@@ -7,10 +7,11 @@ import Select, { SingleValue } from "react-select";
 import { languageOptions, languageOption } from "./languageOptions";
 
 type LanguagesDropdownProps = {
-    onSelectChange: (sl: languageOption | null) => void
+    onSelectChange: (sl: languageOption | null) => void,
+    language: languageOption
 }
 
-export default function LanguagesDropdown( { onSelectChange }: LanguagesDropdownProps ): JSX.Element {
+export default function LanguagesDropdown( { onSelectChange, language }: LanguagesDropdownProps ): JSX.Element {
     const customStyles = {
         control: (provided, state) => ({
           ...provided,
@@ -46,7 +47,7 @@ export default function LanguagesDropdown( { onSelectChange }: LanguagesDropdown
     return (
         <Select 
             options={languageOptions}
-            defaultValue={languageOptions[0]}
+            defaultValue={language}
             onChange={(selectedOption) => onSelectChange(selectedOption)}
             className="ide-dropdown"
             styles={customStyles}

From 927ed05a7b5d8f6337945d1fec126dc2c082eb73 Mon Sep 17 00:00:00 2001
From: Sofia Fristrom <sofia.p.fristrom@gmail.com>
Date: Fri, 20 Sep 2024 20:32:31 -0700
Subject: [PATCH 5/6] Update active IDE when clicking on another while open

---
 starter-frontend/src/pages/editor/editor.tsx | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/starter-frontend/src/pages/editor/editor.tsx b/starter-frontend/src/pages/editor/editor.tsx
index 7ac402e..3f45372 100644
--- a/starter-frontend/src/pages/editor/editor.tsx
+++ b/starter-frontend/src/pages/editor/editor.tsx
@@ -67,8 +67,18 @@ export function Note(): JSX.Element {
     }
 
     function openIDE(this: HTMLButtonElement, ev: MouseEvent): void {
+        
+
         // @ts-ignore
         if (ev.target !== null && ev.target.className !== null && ev.target.className === "run-in-ide-btn") {
+            // @ts-ignore
+            const editor = ev.target.getRootNode();
+            const oldActive = editor.getElementById("active");
+            if (oldActive !== null) {
+                oldActive.setAttribute("id", "");
+            }
+
+
             // @ts-ignore
             const parentDiv = ev.target.parentNode;
             if (parentDiv !== null) {
@@ -88,7 +98,7 @@ export function Note(): JSX.Element {
                         setInitIDELang(Number(language));
                     }
                     
-                    setIsIDEOpen(true);    
+                    setIsIDEOpen(true);   
                 }
             }
         }

From fc4564f076b7c42e482ea0f64ed249644012c2a9 Mon Sep 17 00:00:00 2001
From: Sofia Fristrom <sofia.p.fristrom@gmail.com>
Date: Fri, 20 Sep 2024 21:09:21 -0700
Subject: [PATCH 6/6] Make it possible to switch IDEs while IDE is open

---
 .../src/components/ide/CodeEditor.tsx         | 22 +++++++++------
 starter-frontend/src/components/ide/IDE.tsx   | 16 ++++++-----
 .../src/components/ide/LanguagesDropdown.tsx  |  1 +
 starter-frontend/src/pages/editor/editor.tsx  | 28 +++++++++++--------
 4 files changed, 39 insertions(+), 28 deletions(-)

diff --git a/starter-frontend/src/components/ide/CodeEditor.tsx b/starter-frontend/src/components/ide/CodeEditor.tsx
index 055c9f4..88bda75 100644
--- a/starter-frontend/src/components/ide/CodeEditor.tsx
+++ b/starter-frontend/src/components/ide/CodeEditor.tsx
@@ -1,25 +1,29 @@
 import React, { ChangeEvent, useState } from "react";
 import Editor from "@monaco-editor/react";
+import { languageOption } from "./languageOptions";
 
 type CodeEditorProps = {
     onChange: (action: string, data: string
         // : ChangeEvent<HTMLInputElement>
     ) => void, 
-    // To-DO: Change to list of options
-    language: string, 
-    code: string, 
-    // To-do: change to list of options
+    
+    code: string,
+
+    setCode: React.Dispatch<React.SetStateAction<string>>;
+
+    language: languageOption,
+    
     theme: string
 };
 
-export default function CodeEditor( {onChange, language, code, theme}: CodeEditorProps ) {
-    const [value, setValue] = useState<string>(code || "");
+export default function CodeEditor( {onChange, code, setCode, language, theme}: CodeEditorProps ) {
+    // const [value, setValue] = useState<string>(code || "");
 
     const handleEditorChange = (value: string | undefined) => {
         if (typeof value === "undefined") {
             throw new Error("Editor value is undefined.");
         } else {
-            setValue(value);
+            setCode(value);
             onChange("code", value);   
         }
     }
@@ -29,8 +33,8 @@ export default function CodeEditor( {onChange, language, code, theme}: CodeEdito
             <Editor 
                 height={`100%`}
                 width={`100%`}
-                language={language || "javascript"}
-                value={value}
+                language={language.value || "javascript"}
+                value={code}
                 theme={theme}
                 onChange={handleEditorChange}
             />
diff --git a/starter-frontend/src/components/ide/IDE.tsx b/starter-frontend/src/components/ide/IDE.tsx
index 5f60953..3a00cd6 100644
--- a/starter-frontend/src/components/ide/IDE.tsx
+++ b/starter-frontend/src/components/ide/IDE.tsx
@@ -10,27 +10,28 @@ import { Editor as TinyMCEEditor } from "tinymce";
 
 type IDEProps = {
     // Initial code in the IDE
-    initCode: string,
+    code: string,
 
-    initLang: number,
+    setCode: React.Dispatch<React.SetStateAction<string>>;
+
+    language: languageOption,
     
+    setLanguage: React.Dispatch<React.SetStateAction<languageOption>>, 
+
     setIsIDEOpen: React.Dispatch<React.SetStateAction<boolean>>, 
 
     editorRef: React.RefObject<TinyMCEEditor | null>
 }
 
 
-export default function IDE({initCode, initLang, setIsIDEOpen, editorRef}: IDEProps): JSX.Element {
-    const [code, setCode] = useState<string>(initCode);
+export default function IDE({code, setCode, language, setLanguage, setIsIDEOpen, editorRef}: IDEProps): JSX.Element {
     const [customInput, setCustomInput] = useState<string>("");
     const [output, setOutput] = useState<boolean>(true);
     const [outputDetails, setOutputDetails] = useState<any | null>(null);
     const [processing, setProcessing] = useState<boolean | null>(null);
-    const [language, setLanguage] = useState<languageOption>(languageOptions[initLang]);
     const [updated, setUpdated] = useState<boolean>(true);
     
     function onSelectChange(sl: languageOption | null): void {
-        console.log("Selected option ", sl);
         if (sl !== null) {
             setLanguage(sl);
             setUpdated(false);
@@ -157,8 +158,9 @@ export default function IDE({initCode, initLang, setIsIDEOpen, editorRef}: IDEPr
             <LanguagesDropdown onSelectChange={onSelectChange} language={language} />
             <CodeEditor 
                 code={code}
+                setCode={setCode}
                 onChange={onChange}
-                language={language.value}
+                language={language}
                 theme="vs-dark"
             />
             
diff --git a/starter-frontend/src/components/ide/LanguagesDropdown.tsx b/starter-frontend/src/components/ide/LanguagesDropdown.tsx
index 0366afc..cf96ab8 100644
--- a/starter-frontend/src/components/ide/LanguagesDropdown.tsx
+++ b/starter-frontend/src/components/ide/LanguagesDropdown.tsx
@@ -48,6 +48,7 @@ export default function LanguagesDropdown( { onSelectChange, language }: Languag
         <Select 
             options={languageOptions}
             defaultValue={language}
+            value={language}
             onChange={(selectedOption) => onSelectChange(selectedOption)}
             className="ide-dropdown"
             styles={customStyles}
diff --git a/starter-frontend/src/pages/editor/editor.tsx b/starter-frontend/src/pages/editor/editor.tsx
index 3f45372..7f6e28c 100644
--- a/starter-frontend/src/pages/editor/editor.tsx
+++ b/starter-frontend/src/pages/editor/editor.tsx
@@ -16,6 +16,7 @@ import SavePublicButton from "../../components/editor/SavePublicButton";
 import PublicSaveModal from "../../components/editor/PublicSaveModal";
 import IDE from "../../components/ide/IDE";
 import { Editor as TinyMCEEditor } from 'tinymce';
+import { languageOption, languageOptions } from "../../components/ide/languageOptions";
 
 /** Type for storing details about note documents */
 export type DetailsData = {
@@ -49,20 +50,19 @@ export function Note(): JSX.Element {
 
     // IDE
     // If IDE is open
-    // TO-DO CHANGE false
     const [isIDEOpen, setIsIDEOpen] = useState<boolean>(false);
-    // Initial IDE code
-    const [initIDECode, setInitIDECode] = useState<string>("");
-    // Initial IDE language
-    const [initIDELang, setInitIDELang] = useState<number>(0);
+    // IDE code
+    const [code, setCode] = useState<string>("");
+    // IDE language
+    const [language, setLanguage] = useState<languageOption>(languageOptions[0]);
 
     // ***
     const editorRef = useRef<TinyMCEEditor | null>(null);
 
     
     function openNewIDE(): void {
-        setInitIDECode("");
-        setInitIDELang(0);
+        setCode("");
+        setLanguage(languageOptions[0]);
         setIsIDEOpen(true);
     }
 
@@ -87,16 +87,20 @@ export function Note(): JSX.Element {
                     codeBlock.id = "active";
                     const codeContent = codeBlock.textContent;
                     if (codeContent === null) {
-                        setInitIDECode("");
+                        console.log("code null");
+                        setCode("");
                     } else {
-                        setInitIDECode(codeContent);
+                        setCode(codeContent);
                     }
+                    console.log("setting code");
                     const language = codeBlock.dataset.lang;
                     if (language === null) {
-                        setInitIDELang(0);
+                        console.log("language null");
+                        setLanguage(languageOptions[0]);
                     } else {
-                        setInitIDELang(Number(language));
+                        setLanguage(languageOptions[Number(language)]);
                     }
+                    console.log("setting language");
                     
                     setIsIDEOpen(true);   
                 }
@@ -278,7 +282,7 @@ export function Note(): JSX.Element {
                 openNewIDE={openNewIDE}/>
                 {
                 isIDEOpen && 
-                <IDE initCode={initIDECode} initLang={initIDELang} setIsIDEOpen={setIsIDEOpen} editorRef={editorRef}/>}
+                <IDE code={code} setCode={setCode} language={language} setLanguage={setLanguage} setIsIDEOpen={setIsIDEOpen} editorRef={editorRef}/>}
             </div>