Merge branch 'dev' into feat/open-multiple-files-from-cli

src/ScriptEditor/ui/ScriptEditorRoot.tsx

@@ -125,6 +125,25 @@ export function Root(props: IProps): React.ReactElement {
     vim: props.vim || Settings.MonacoVim,
   });
 
+  const [dimensions, setDimensions] = useState({
+    height: window.innerHeight,
+    width: window.innerWidth,
+  });
+  useEffect(() => {
+    const debouncedHandleResize = debounce(function handleResize() {
+      setDimensions({
+        height: window.innerHeight,
+        width: window.innerWidth,
+      });
+    }, 250);
+
+    window.addEventListener("resize", debouncedHandleResize);
+
+    return () => {
+      window.removeEventListener("resize", debouncedHandleResize);
+    };
+  }, []);
+
   useEffect(() => {
     // Save currentScript
     window.localStorage.setItem(
@@ -203,7 +222,7 @@ export function Root(props: IProps): React.ReactElement {
   // Generates a new model for the script
   function regenerateModel(script: OpenScript): void {
     if (monacoRef.current !== null) {
-      script.model = monacoRef.current.editor.createModel(script.code, "javascript");
+      script.model = monacoRef.current.editor.createModel(script.code, script.fileName.endsWith(".txt") ? "plaintext" : "javascript");
     }
   }
 
@@ -217,6 +236,10 @@ export function Root(props: IProps): React.ReactElement {
   );
 
   async function updateRAM(newCode: string): Promise<void> {
+    if (currentScript != null && currentScript.fileName.endsWith(".txt")) {
+      debouncedSetRAM("");
+      return;
+    }
     setUpdatingRam(true);
     const codeCopy = newCode + "";
     const ramUsage = await calculateRamUsage(codeCopy, props.player.getCurrentServer().scripts);
@@ -348,7 +371,7 @@ export function Root(props: IProps): React.ReactElement {
           code,
           props.hostname,
           new monacoRef.current.Position(0, 0),
-          monacoRef.current.editor.createModel(code, "javascript"),
+          monacoRef.current.editor.createModel(code, filename.endsWith(".txt") ? "plaintext" : "javascript"),
         );
         setOpenScripts((oldArray) => [...oldArray, newScript]);
         setCurrentScript({ ...newScript });
@@ -642,11 +665,13 @@ export function Root(props: IProps): React.ReactElement {
     }
   }
 
-  // TODO: Make this responsive to window resizes
-  // Toolbars are roughly 108px + vim bar 34px
-  // Get percentage of space that toolbars represent and the rest should be the
-  // editor
-  const editorHeight = 100 - ((108 + (options.vim ? 34 : 0)) / window.innerHeight) * 100;
+  // Toolbars are roughly 112px:
+  //  8px body margin top
+  //  38.5px filename tabs
+  //  5px padding for top of editor
+  //  44px bottom tool bar + 16px margin
+  //  + vim bar 34px
+  const editorHeight = dimensions.height - (112 + (options.vim ? 34 : 0));
 
   return (
     <>
@@ -725,7 +750,7 @@ export function Root(props: IProps): React.ReactElement {
           beforeMount={beforeMount}
           onMount={onMount}
           loading={<Typography>Loading script editor!</Typography>}
-          height={`${editorHeight}%`}
+          height={`${editorHeight}px`}
           defaultLanguage="javascript"
           defaultValue={""}
           onChange={updateCode}