Merge pull request #55 from hcp-uw/ide-on-view-only

Make IDE openable on notes from Collaboration
hcp-uw · Sep 29, 2024 · 190b243 · 190b243
2 parents 7797f1e + f29a6a7
commit 190b243
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 44 deletions.
diff --git a/starter-frontend/src/components/editor/IDEPlugin.tsx b/starter-frontend/src/components/editor/IDEPlugin.tsx
@@ -1,15 +1,13 @@
 // TinyMCE React Plugin: https://stackoverflow.com/a/77054502
 
-import React from "react";
 import { Editor } from "tinymce";
 
 type PluginRegistrationProps = {
   editor: Editor, 
-  openIDE: (this: HTMLButtonElement, ev: MouseEvent) => void,
   openNewIDE: () => void
 };
 
-export default function IDEPlugin({editor, openIDE, openNewIDE}: PluginRegistrationProps) {
+export default function IDEPlugin({editor, openNewIDE}: PluginRegistrationProps) {
   editor.ui.registry.addButton("ide", {
     text: "IDE",
     icon: "sourcecode", 

diff --git a/starter-frontend/src/components/editor/TextEditor.tsx b/starter-frontend/src/components/editor/TextEditor.tsx
@@ -24,7 +24,7 @@ export default function TextEditor({editorRef, initContent, eRoute, setIsLoading
     const [content, setContent] = useState<string>(initContent);
 
     const setup = useCallback((editor: TinyMCEEditor) => {
-      IDEPlugin( {editor, openIDE, openNewIDE} );
+      IDEPlugin( {editor, openNewIDE} );
       setupEditor && setupEditor(editor);
     }, []);
 

diff --git a/starter-frontend/src/components/ide/IDE.css b/starter-frontend/src/components/ide/IDE.css
@@ -15,16 +15,14 @@
     flex-grow: 1;
 }
 
-.editor-wrapper, .monaco-editor, .overflow-guard { 
-
-}
 
 /* Input and Output */
 .in-output {
     display: flex;
     height: 35%
 }
 
+
 /* Output Window */
 .ide-output-full {
     width: 60%;
@@ -48,14 +46,10 @@
     overflow: auto;
 }
 
-
-
 .ide-err {
     color: red;
 }
 
-.ide-output {
-}
 
 /* Custom Input */
 .ide-input {
@@ -74,6 +68,7 @@
     outline: none
 }
 
+
 /* Footer */
 .ide-footer {
     display: flex;
@@ -83,14 +78,21 @@
 }
 
 .ide-btn {
-    width: 33.33%;
     border-radius: 0;
     border: 0.3px var(--dark-gray) solid;
     border-bottom: 0;
     background-color: var(--light-green);
     font-family: 'Amiko';
 }
 
+.half-width {
+    width: 50%;
+}
+
+.third-width {
+    width: 33.33%;
+}
+
 .compile-btn {
     border-left: 0;
 }

diff --git a/starter-frontend/src/components/ide/IDE.tsx b/starter-frontend/src/components/ide/IDE.tsx
@@ -9,6 +9,9 @@ import LanguagesDropdown from "./LanguagesDropdown";
 import { Editor as TinyMCEEditor } from "tinymce";
 
 type IDEProps = {
+    // True if note is in collaboration space (no Update Note button)
+    collab: boolean,
+
     // Initial code in the IDE
     code: string,
 
@@ -24,7 +27,7 @@ type IDEProps = {
 }
 
 
-export default function IDE({code, setCode, language, setLanguage, setIsIDEOpen, editorRef}: IDEProps): JSX.Element {
+export default function IDE({collab, 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);
@@ -177,20 +180,23 @@ export default function IDE({code, setCode, language, setLanguage, setIsIDEOpen,
                 <button 
                     onClick={handleCompile}
                     disabled={!code}
-                    className="ide-btn compile-btn"
+                    className={collab ? "ide-btn compile-btn half-width" : "ide-btn compile-btn third-width"}
                 >
                     {processing ? "Processing..." : "Run"}
                 </button>
-                <button
-                    onClick={handleUpdate}
-                    disabled={updated}
-                    className="ide-btn"
-                >
-                    Update Note
-                </button>
+                {!collab && 
+                    <button
+                        onClick={handleUpdate}
+                        disabled={updated}
+                        className="third-width ide-btn"
+                    >
+                        Update Note
+                    </button>
+                }
+
                 <button
                     onClick={handleClose}
-                    className="ide-btn close-btn"
+                    className={collab ? "ide-btn close-btn half-width" : "ide-btn close-btn third-width"}
                 >
                     Close
                 </button>

diff --git a/starter-frontend/src/pages/editor/editor.css b/starter-frontend/src/pages/editor/editor.css
@@ -1,23 +1,16 @@
 .display-window {
+    height: calc(100vh - 105px);
+    background-color: var(--light-gray);
+    overflow-wrap: break-word;
+    width: auto;
+    flex-grow: 2;
+
     padding: 25px;
-    height: calc(90vh - 55px);
 
     background-color: var(--offbase-white);
-    width: min(70vw, 1200px);
-    /* position: relative; */
-
-    position: absolute;
-    transform: translate(-50%, -50%);
-    left: 50%;
-    top: 55%;
-
+    overflow: auto;
 
-    overflow-wrap: break-word;
-    overflow: scroll;
-
-    margin-top: 10px;
     border-radius: 10px;
-
 }
 
 #main-area {

diff --git a/starter-frontend/src/pages/editor/editor.tsx b/starter-frontend/src/pages/editor/editor.tsx
@@ -66,9 +66,7 @@ export function Note(): JSX.Element {
         setIsIDEOpen(true);
     }
 
-    function openIDE(this: HTMLButtonElement, ev: MouseEvent): void {
-
-
+    function openIDE(ev: MouseEvent): void {
         // @ts-ignore
         if (ev.target !== null && ev.target.className !== null && ev.target.className === "run-in-ide-btn") {
             // @ts-ignore
@@ -262,9 +260,14 @@ export function Note(): JSX.Element {
 
     if (isPublic) { // If note is publicly shared
         return (
-            <div className="page gray-background flex">
+            <div className="page gray-background">
                 <SavePublicButton setIsPublicSaving={setIsPublicSaving}/>
-                <PublicNoteDisplayer body={currBody}/>
+                <div id="main-area">
+                    <PublicNoteDisplayer body={currBody} openIDE={openIDE}/>
+                    {
+                    isIDEOpen && 
+                    <IDE collab={true} code={code} setCode={setCode} language={language} setLanguage={setLanguage} setIsIDEOpen={setIsIDEOpen} editorRef={editorRef}/>}
+                </div>
                 <PublicSaveModal isPublicSaving={isPublicSaving} setIsPublicSaving={setIsPublicSaving} 
                 noteName={currName} currBody={currBody}/>
             </div>
@@ -282,7 +285,7 @@ export function Note(): JSX.Element {
                 openNewIDE={openNewIDE}/>
                 {
                 isIDEOpen && 
-                <IDE code={code} setCode={setCode} language={language} setLanguage={setLanguage} setIsIDEOpen={setIsIDEOpen} editorRef={editorRef}/>}
+                <IDE collab={false} code={code} setCode={setCode} language={language} setLanguage={setLanguage} setIsIDEOpen={setIsIDEOpen} editorRef={editorRef}/>}
             </div>
 
 
@@ -299,11 +302,14 @@ export function Note(): JSX.Element {
 }
 
 /** Element to display content when the note is a publicly shared one */
-const PublicNoteDisplayer = ({body}: {body: string}): JSX.Element => {
+const PublicNoteDisplayer = ({body, openIDE}: {body: string, openIDE: (ev: MouseEvent) => void}): JSX.Element => {
+    useEffect(() => {
+        document.addEventListener("click", openIDE);
+    });
+
     return (
     <div className="display-window" >
         <div dangerouslySetInnerHTML={{__html: body}}>
-
         </div>
     </div>
     )