Merge pull request #239 from XRPLF/feat/monaco-comp

Monaco component.
2022-07-14 13:51:24 +05:30
parent e2acb48e03 a3d094e873
commit 8e2f20c5ac
14 changed files with 255 additions and 147 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -32,3 +32,4 @@ yarn-error.log*

 # vercel
 .vercel
+.vscode
--- a/components/DeployEditor.tsx
+++ b/components/DeployEditor.tsx
@@ -1,7 +1,6 @@
-import React, { useRef, useState } from "react";
-import { useSnapshot, ref } from "valtio";
-import Editor, { loader } from "@monaco-editor/react";
-import type monaco from "monaco-editor";
+import React, { useState } from "react";
+import { useSnapshot } from "valtio";
+
 import { useTheme } from "next-themes";
 import { useRouter } from "next/router";
 import NextLink from "next/link";
@@ -10,24 +9,16 @@ import filesize from "filesize";

 import Box from "./Box";
 import Container from "./Container";
-import dark from "../theme/editor/amy.json";
-import light from "../theme/editor/xcode_default.json";
 import state from "../state";
 import wat from "../utils/wat-highlight";

 import EditorNavigation from "./EditorNavigation";
 import { Button, Text, Link, Flex } from ".";
-
-loader.config({
-  paths: {
-    vs: "https://cdn.jsdelivr.net/npm/monaco-editor@0.30.1/min/vs",
-  },
-});
+import Monaco from "./Monaco";

 const FILESIZE_BREAKPOINTS: [number, number] = [2 * 1024, 5 * 1024];

 const DeployEditor = () => {
-  const editorRef = useRef<monaco.editor.IStandaloneCodeEditor>();
  const snap = useSnapshot(state);
  const router = useRouter();
  const { theme } = useTheme();
@@ -36,7 +27,7 @@ const DeployEditor = () => {

  const activeFile = snap.files[snap.active]?.compiledContent
    ? snap.files[snap.active]
-    : snap.files.filter((file) => file.compiledContent)[0];
+    : snap.files.filter(file => file.compiledContent)[0];
  const compiledSize = activeFile?.compiledContent?.byteLength || 0;
  const color =
    compiledSize > FILESIZE_BREAKPOINTS[1]
@@ -45,6 +36,10 @@ const DeployEditor = () => {
      ? "$warning"
      : "$success";

+  const isContentChanged =
+    activeFile && activeFile.compiledValueSnapshot !== activeFile.content;
+  // const hasDeployErros = activeFile && activeFile.containsErrors;
+
  const CompiledStatView = activeFile && (
    <Flex
      column
@@ -80,6 +75,12 @@ const DeployEditor = () => {
      <Button variant="link" onClick={() => setShowContent(true)}>
        View as WAT-file
      </Button>
+      {isContentChanged && (
+        <Text warning>
+          File contents were changed after last compile, compile again to
+          incorporate your latest changes in the build.
+        </Text>
+      )}
    </Flex>
  );
  const NoContentView = !snap.loading && router.isReady && (
@@ -99,7 +100,7 @@ const DeployEditor = () => {
    </Text>
  );
  const isContent =
-    snap.files?.filter((file) => file.compiledWatContent).length > 0 &&
+    snap.files?.filter(file => file.compiledWatContent).length > 0 &&
    router.isReady;
  return (
    <Box
@@ -126,32 +127,38 @@ const DeployEditor = () => {
        ) : !showContent ? (
          CompiledStatView
        ) : (
-          <Editor
+          <Monaco
            className="hooks-editor"
            defaultLanguage={"wat"}
            language={"wat"}
            path={`file://tmp/c/${activeFile?.name}.wat`}
            value={activeFile?.compiledWatContent || ""}
-            beforeMount={(monaco) => {
+            beforeMount={monaco => {
              monaco.languages.register({ id: "wat" });
              monaco.languages.setLanguageConfiguration("wat", wat.config);
              monaco.languages.setMonarchTokensProvider("wat", wat.tokens);
-              if (!state.editorCtx) {
-                state.editorCtx = ref(monaco.editor);
-                // @ts-expect-error
-                monaco.editor.defineTheme("dark", dark);
-                // @ts-expect-error
-                monaco.editor.defineTheme("light", light);
-              }
            }}
-            onMount={(editor, monaco) => {
-              editorRef.current = editor;
+            onMount={editor => {
              editor.updateOptions({
                glyphMargin: true,
                readOnly: true,
              });
            }}
            theme={theme === "dark" ? "dark" : "light"}
+            overlay={
+              <Flex
+                css={{
+                  m: "$1",
+                  ml: "auto",
+                  fontSize: "$sm",
+                  color: "$textMuted",
+                }}
+              >
+                <Link onClick={() => setShowContent(false)}>
+                  Exit editor mode
+                </Link>
+              </Flex>
+            }
          />
        )}
      </Container>
--- a/components/HooksEditor.tsx
+++ b/components/HooksEditor.tsx
@@ -1,6 +1,5 @@
 import React, { useEffect, useRef } from "react";
 import { useSnapshot, ref } from "valtio";
-import Editor from "@monaco-editor/react";
 import type monaco from "monaco-editor";
 import { ArrowBendLeftUp } from "phosphor-react";
 import { useTheme } from "next-themes";
@@ -8,8 +7,6 @@ import { useRouter } from "next/router";

 import Box from "./Box";
 import Container from "./Container";
-import dark from "../theme/editor/amy.json";
-import light from "../theme/editor/xcode_default.json";
 import { saveFile } from "../state/actions";
 import { apiHeaderFiles } from "../state/constants";
 import state from "../state";
@@ -22,10 +19,12 @@ import { listen } from "@codingame/monaco-jsonrpc";
 import ReconnectingWebSocket from "reconnecting-websocket";

 import docs from "../xrpl-hooks-docs/docs";
+import Monaco from "./Monaco";
+import { saveAllFiles } from '../state/actions/saveFile';

 const validateWritability = (editor: monaco.editor.IStandaloneCodeEditor) => {
  const currPath = editor.getModel()?.uri.path;
-  if (apiHeaderFiles.find((h) => currPath?.endsWith(h))) {
+  if (apiHeaderFiles.find(h => currPath?.endsWith(h))) {
    editor.updateOptions({ readOnly: true });
  } else {
    editor.updateOptions({ readOnly: false });
@@ -42,7 +41,7 @@ const setMarkers = (monacoE: typeof monaco) => {
    .getModelMarkers({})
    // Filter out the markers that are hooks specific
    .filter(
-      (marker) =>
+      marker =>
        typeof marker?.code === "string" &&
        // Take only markers that starts with "hooks-"
        marker?.code?.includes("hooks-")
@@ -56,16 +55,16 @@ const setMarkers = (monacoE: typeof monaco) => {
  // Add decoration (aka extra hoverMessages) to markers in the
  // exact same range (location) where the markers are
  const models = monacoE.editor.getModels();
-  models.forEach((model) => {
+  models.forEach(model => {
    decorations[model.id] = model?.deltaDecorations(
      decorations?.[model.id] || [],
      markers
-        .filter((marker) =>
+        .filter(marker =>
          marker?.resource.path
            .split("/")
            .includes(`${state.files?.[state.active]?.name}`)
        )
-        .map((marker) => ({
+        .map(marker => ({
          range: new monacoE.Range(
            marker.startLineNumber,
            marker.startColumn,
@@ -113,6 +112,13 @@ const HooksEditor = () => {
      setMarkers(monacoRef.current);
    }
  }, [snap.active]);
+  useEffect(() => {
+    return () => {
+      saveAllFiles();
+    };
+  }, []);
+
+  const file = snap.files[snap.active];
  return (
    <Box
      css={{
@@ -127,16 +133,16 @@ const HooksEditor = () => {
    >
      <EditorNavigation />
      {snap.files.length > 0 && router.isReady ? (
-        <Editor
-          className="hooks-editor"
+        <Monaco
          keepCurrentModel
-          defaultLanguage={snap.files?.[snap.active]?.language}
-          language={snap.files?.[snap.active]?.language}
-          path={`file:///work/c/${snap.files?.[snap.active]?.name}`}
-          defaultValue={snap.files?.[snap.active]?.content}
-          beforeMount={(monaco) => {
+          defaultLanguage={file?.language}
+          language={file?.language}
+          path={`file:///work/c/${file?.name}`}
+          defaultValue={file?.content}
+          // onChange={val => (state.files[snap.active].content = val)} // Auto save?
+          beforeMount={monaco => {
            if (!snap.editorCtx) {
-              snap.files.forEach((file) =>
+              snap.files.forEach(file =>
                monaco.editor.createModel(
                  file.content,
                  file.language,
@@ -161,7 +167,7 @@ const HooksEditor = () => {
              // listen when the web socket is opened
              listen({
                webSocket: webSocket as WebSocket,
-                onConnection: (connection) => {
+                onConnection: connection => {
                  // create and start the language client
                  const languageClient = createLanguageClient(connection);
                  const disposable = languageClient.start();
@@ -177,7 +183,6 @@ const HooksEditor = () => {
              });
            }

-            // // hook editor to global state
            // editor.updateOptions({
            //   minimap: {
            //     enabled: false,
@@ -186,10 +191,6 @@ const HooksEditor = () => {
            // });
            if (!state.editorCtx) {
              state.editorCtx = ref(monaco.editor);
-              // @ts-expect-error
-              monaco.editor.defineTheme("dark", dark);
-              // @ts-expect-error
-              monaco.editor.defineTheme("light", light);
            }
          }}
          onMount={(editor, monaco) => {
@@ -217,13 +218,13 @@ const HooksEditor = () => {
            });

            // Hacky way to hide Peek menu
-            editor.onContextMenu((e) => {
+            editor.onContextMenu(e => {
              const host =
                document.querySelector<HTMLElement>(".shadow-root-host");

              const contextMenuItems =
                host?.shadowRoot?.querySelectorAll("li.action-item");
-              contextMenuItems?.forEach((k) => {
+              contextMenuItems?.forEach(k => {
                // If menu item contains "Peek" lets hide it
                if (k.querySelector(".action-label")?.textContent === "Peek") {
                  // @ts-expect-error
--- a/components/Monaco.tsx
+++ b/components/Monaco.tsx
@@ -0,0 +1,75 @@
+import Editor, { loader, EditorProps, Monaco } from "@monaco-editor/react";
+import { CSS } from "@stitches/react";
+import type monaco from "monaco-editor";
+import { useTheme } from "next-themes";
+import { FC, MutableRefObject, ReactNode } from "react";
+import { Flex } from ".";
+import dark from "../theme/editor/amy.json";
+import light from "../theme/editor/xcode_default.json";
+
+export type MonacoProps = EditorProps & {
+  id?: string;
+  rootProps?: { css: CSS } & Record<string, any>;
+  overlay?: ReactNode;
+  editorRef?: MutableRefObject<monaco.editor.IStandaloneCodeEditor>;
+  monacoRef?: MutableRefObject<typeof monaco>;
+};
+
+loader.config({
+  paths: {
+    vs: "https://cdn.jsdelivr.net/npm/monaco-editor@0.30.1/min/vs",
+  },
+});
+
+const Monaco: FC<MonacoProps> = ({
+  id,
+  path = `file:///${id}`,
+  className = id,
+  language = "json",
+  overlay,
+  editorRef,
+  monacoRef,
+  beforeMount,
+  rootProps,
+  ...rest
+}) => {
+  const { theme } = useTheme();
+  const setTheme = (monaco: Monaco) => {
+    monaco.editor.defineTheme("dark", dark as any);
+    monaco.editor.defineTheme("light", light as any);
+  };
+  return (
+    <Flex
+      fluid
+      column
+      {...rootProps}
+      css={{
+        position: "relative",
+        height: "100%",
+        ...rootProps?.css,
+      }}
+    >
+      <Editor
+        className={className}
+        language={language}
+        path={path}
+        beforeMount={monaco => {
+          beforeMount?.(monaco);
+
+          setTheme(monaco);
+        }}
+        theme={theme === "dark" ? "dark" : "light"}
+        {...rest}
+      />
+      {overlay && (
+        <Flex
+          css={{ position: "absolute", bottom: 0, right: 0, width: "100%" }}
+        >
+          {overlay}
+        </Flex>
+      )}
+    </Flex>
+  );
+};
+
+export default Monaco;
--- a/components/Text.tsx
+++ b/components/Text.tsx
@@ -20,6 +20,11 @@ const Text = styled("span", {
        color: "$error",
      },
    },
+    warning: {
+      true: {
+        color: "$warning",
+      },
+    },
    monospace: {
      true: {
        fontFamily: "$monospace",
@@ -28,8 +33,8 @@ const Text = styled("span", {
    block: {
      true: {
        display: "block",
-      }
-    }
+      },
+    },
  },
 });

--- a/components/Transaction/json.tsx
+++ b/components/Transaction/json.tsx
@@ -1,9 +1,4 @@
-import Editor, { loader, useMonaco } from "@monaco-editor/react";
 import { FC, useCallback, useEffect, useState } from "react";
-import { useTheme } from "next-themes";
-
-import dark from "../../theme/editor/amy.json";
-import light from "../../theme/editor/xcode_default.json";
 import { useSnapshot } from "valtio";
 import state, {
  prepareState,
@@ -11,18 +6,13 @@ import state, {
  TransactionState,
 } from "../../state";
 import Text from "../Text";
-import Flex from "../Flex";
-import { Link } from "..";
+import { Flex, Link } from "..";
 import { showAlert } from "../../state/actions/showAlert";
 import { parseJSON } from "../../utils/json";
 import { extractSchemaProps } from "../../utils/schema";
 import amountSchema from "../../content/amount-schema.json";
-
-loader.config({
-  paths: {
-    vs: "https://cdn.jsdelivr.net/npm/monaco-editor@0.30.1/min/vs",
-  },
-});
+import Monaco from "../Monaco";
+import type monaco from "monaco-editor";

 interface JsonProps {
  value?: string;
@@ -40,7 +30,6 @@ export const TxJson: FC<JsonProps> = ({
 }) => {
  const { editorSettings, accounts } = useSnapshot(state);
  const { editorValue = value, estimatedFee } = txState;
-  const { theme } = useTheme();
  const [hasUnsaved, setHasUnsaved] = useState(false);
  const [currTxType, setCurrTxType] = useState<string | undefined>(
    txState.selectedTransaction?.value
@@ -95,9 +84,6 @@ export const TxJson: FC<JsonProps> = ({
    });
  };

-  const path = `file:///${header}`;
-  const monaco = useMonaco();
-
  const getSchemas = useCallback(async (): Promise<any[]> => {
    const txObj = transactionsData.find(
      td => td.TransactionType === currTxType
@@ -177,55 +163,63 @@ export const TxJson: FC<JsonProps> = ({
    ];
  }, [accounts, currTxType, estimatedFee, header]);

+  const [monacoInst, setMonacoInst] = useState<typeof monaco>();
  useEffect(() => {
-    if (!monaco) return;
+    if (!monacoInst) return;
    getSchemas().then(schemas => {
-      monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
+      monacoInst.languages.json.jsonDefaults.setDiagnosticsOptions({
        validate: true,
        schemas,
      });
    });
-  }, [getSchemas, monaco]);
+  }, [getSchemas, monacoInst]);

  return (
-    <Flex
-      fluid
-      column
-      css={{ height: "calc(100% - 45px)", position: "relative" }}
-    >
-      <Editor
-        className="hooks-editor"
-        language={"json"}
-        path={path}
-        height="100%"
-        beforeMount={monaco => {
-          monaco.editor.defineTheme("dark", dark as any);
-          monaco.editor.defineTheme("light", light as any);
-        }}
-        value={editorValue}
-        onChange={val => setState({ editorValue: val })}
-        onMount={(editor, monaco) => {
-          editor.updateOptions({
-            minimap: { enabled: false },
-            glyphMargin: true,
-            tabSize: editorSettings.tabSize,
-            dragAndDrop: true,
-            fontSize: 14,
-          });
+    <Monaco
+      rootProps={{
+        css: { height: "calc(100% - 45px)" },
+      }}
+      language={"json"}
+      id={header}
+      height="100%"
+      value={editorValue}
+      onChange={val => setState({ editorValue: val })}
+      onMount={(editor, monaco) => {
+        editor.updateOptions({
+          minimap: { enabled: false },
+          glyphMargin: true,
+          tabSize: editorSettings.tabSize,
+          dragAndDrop: true,
+          fontSize: 14,
+        });

-          // register onExit cb
-          const model = editor.getModel();
-          model?.onWillDispose(() => onExit(model.getValue()));
-        }}
-        theme={theme === "dark" ? "dark" : "light"}
-      />
-      {hasUnsaved && (
-        <Text muted small css={{ position: "absolute", bottom: 0, right: 0 }}>
-          This file has unsaved changes.{" "}
-          <Link onClick={() => saveState(editorValue, currTxType)}>save</Link>{" "}
-          <Link onClick={discardChanges}>discard</Link>
-        </Text>
-      )}
-    </Flex>
+        setMonacoInst(monaco);
+        // register onExit cb
+        const model = editor.getModel();
+        model?.onWillDispose(() => onExit(model.getValue()));
+      }}
+      overlay={
+        hasUnsaved ? (
+          <Flex
+            row
+            align="center"
+            css={{ fontSize: "$xs", color: "$textMuted", ml: 'auto' }}
+          >
+            <Text muted small>
+              This file has unsaved changes.
+            </Text>
+            <Link
+              css={{ ml: "$1" }}
+              onClick={() => saveState(editorValue, currTxType)}
+            >
+              save
+            </Link>
+            <Link css={{ ml: "$1" }} onClick={discardChanges}>
+              discard
+            </Link>
+          </Flex>
+        ) : undefined
+      }
+    />
  );
 };
--- a/components/Transaction/ui.tsx
+++ b/components/Transaction/ui.tsx
@@ -38,22 +38,23 @@ export const TxUI: FC<UIProps> = ({
    txFields,
  } = txState;

-  const transactionsOptions = transactionsData.map((tx) => ({
+
+  const transactionsOptions = transactionsData.map(tx => ({
    value: tx.TransactionType,
    label: tx.TransactionType,
  }));

-  const accountOptions: SelectOption[] = accounts.map((acc) => ({
+  const accountOptions: SelectOption[] = accounts.map(acc => ({
    label: acc.name,
    value: acc.address,
  }));

  const destAccountOptions: SelectOption[] = accounts
-    .map((acc) => ({
+    .map(acc => ({
      label: acc.name,
      value: acc.address,
    }))
-    .filter((acc) => acc.value !== selectedAccount?.value);
+    .filter(acc => acc.value !== selectedAccount?.value);

  const [feeLoading, setFeeLoading] = useState(false);

@@ -97,32 +98,37 @@ export const TxUI: FC<UIProps> = ({
    [estimateFee, handleSetField]
  );

-  const handleChangeTxType = (tt: SelectOption) => {
-    setState({ selectedTransaction: tt });
+  const handleChangeTxType = useCallback(
+    (tt: SelectOption) => {
+      setState({ selectedTransaction: tt });

-    const newState = resetOptions(tt.value);
+      const newState = resetOptions(tt.value);

-    handleEstimateFee(newState, true);
-  };
+      handleEstimateFee(newState, true);
+    },
+    [handleEstimateFee, resetOptions, setState]
+  );

  const specialFields = ["TransactionType", "Account", "Destination"];

  const otherFields = Object.keys(txFields).filter(
-    (k) => !specialFields.includes(k)
+    k => !specialFields.includes(k)
  ) as [keyof TxFields];

  const switchToJson = () =>
    setState({ editorSavedValue: null, viewType: "json" });

+  // default tx
  useEffect(() => {
+    if (selectedTransaction?.value) return;
+
    const defaultOption = transactionsOptions.find(
-      (tt) => tt.value === "Payment"
+      tt => tt.value === "Payment"
    );
    if (defaultOption) {
      handleChangeTxType(defaultOption);
    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [handleChangeTxType, selectedTransaction?.value, transactionsOptions]);

  return (
    <Container
@@ -204,7 +210,7 @@ export const TxUI: FC<UIProps> = ({
            />
          </Flex>
        )}
-        {otherFields.map((field) => {
+        {otherFields.map(field => {
          let _value = txFields[field];

          let value: string | undefined;
@@ -255,7 +261,7 @@ export const TxUI: FC<UIProps> = ({
                  <Input
                    type={isFee ? "number" : "text"}
                    value={value}
-                    onChange={(e) => {
+                    onChange={e => {
                      if (isFee) {
                        const val = e.target.value
                          .replaceAll(".", "")
@@ -267,7 +273,7 @@ export const TxUI: FC<UIProps> = ({
                    }}
                    onKeyPress={
                      isFee
-                        ? (e) => {
+                        ? e => {
                            if (e.key === "." || e.key === ",") {
                              e.preventDefault();
                            }
--- a/state/actions/compileCode.ts
+++ b/state/actions/compileCode.ts
@@ -14,19 +14,21 @@ import { ref } from "valtio";
 */
 export const compileCode = async (activeId: number) => {
  // Save the file to global state
-  saveFile(false);
+  saveFile(false, activeId);
  if (!process.env.NEXT_PUBLIC_COMPILE_API_ENDPOINT) {
    throw Error("Missing env!");
  }
  // Bail out if we're already compiling
  if (state.compiling) {
-    // if compiling is ongoing return
+    // if compiling is ongoing return // TODO Inform user about it.
    return;
  }
  // Set loading state to true
  state.compiling = true;
  state.logs = []
+  const file = state.files[activeId]
  try {
+    file.containsErrors = false
    const res = await fetch(process.env.NEXT_PUBLIC_COMPILE_API_ENDPOINT, {
      method: "POST",
      headers: {
@@ -40,8 +42,8 @@ export const compileCode = async (activeId: number) => {
          {
            type: "c",
            options: state.compileOptions.optimizationLevel || '-O2',
-            name: state.files[activeId].name,
-            src: state.files[activeId].content,
+            name: file.name,
+            src: file.content,
          },
        ],
      }),
@@ -49,15 +51,15 @@ export const compileCode = async (activeId: number) => {
    const json = await res.json();
    state.compiling = false;
    if (!json.success) {
-      state.logs.push({ type: "error", message: json.message });
+      const errors = [json.message]
      if (json.tasks && json.tasks.length > 0) {
        json.tasks.forEach((task: any) => {
          if (!task.success) {
-            state.logs.push({ type: "error", message: task?.console });
+            errors.push(task?.console)
          }
        });
      }
-      return toast.error(`Couldn't compile!`, { position: "bottom-center" });
+      throw errors
    }
    state.logs.push({
      type: "success",
@@ -67,8 +69,9 @@ export const compileCode = async (activeId: number) => {
    });
    // Decode base64 encoded wasm that is coming back from the endpoint
    const bufferData = await decodeBinary(json.output);
-    state.files[state.active].compiledContent = ref(bufferData);
-    state.files[state.active].lastCompiled = new Date();
+    file.compiledContent = ref(bufferData);
+    file.lastCompiled = new Date();
+    file.compiledValueSnapshot = file.content
    // Import wabt from and create human readable version of wasm file and
    // put it into state
    import("wabt").then((wabt) => {
@@ -84,10 +87,23 @@ export const compileCode = async (activeId: number) => {
    });
  } catch (err) {
    console.log(err);
-    state.logs.push({
-      type: "error",
-      message: "Error occured while compiling!",
-    });
+
+    if (err instanceof Array && typeof err[0] === 'string') {
+      err.forEach(message => {
+        state.logs.push({
+          type: "error",
+          message,
+        });
+      })
+    }
+    else {
+      state.logs.push({
+        type: "error",
+        message: "Something went wrong, check your connection try again later!",
+      });
+    }
    state.compiling = false;
+    toast.error(`Error occurred while compiling!`, { position: "bottom-center" });
+    file.containsErrors = true
  }
 };
--- a/state/actions/deployHook.tsx
+++ b/state/actions/deployHook.tsx
@@ -189,7 +189,7 @@ export const deployHook = async (
      console.log(err);
      state.deployLogs.push({
        type: "error",
-        message: "Error occured while deploying",
+        message: "Error occurred while deploying",
      });
    }
    if (currentAccount) {
@@ -272,10 +272,10 @@ export const deleteHook = async (account: IAccount & { name?: string }) => {
      }
    } catch (err) {
      console.log(err);
-      toast.error("Error occured while deleting hoook", { id: toastId });
+      toast.error("Error occurred while deleting hook", { id: toastId });
      state.deployLogs.push({
        type: "error",
-        message: "Error occured while deleting hook",
+        message: "Error occurred while deleting hook",
      });
    }
    if (currentAccount) {
--- a/state/actions/downloadAsZip.ts
+++ b/state/actions/downloadAsZip.ts
@@ -13,7 +13,7 @@ export const downloadAsZip = async () => {
        const zipFileName = guessZipFileName(files);
        zipped.saveFile(zipFileName);
    } catch (error) {
-        toast.error('Error occured while creating zip file, try again later')
+        toast.error('Error occurred while creating zip file, try again later')
    } finally {
        state.zipLoading = false
    }
--- a/state/actions/importAccount.ts
+++ b/state/actions/importAccount.ts
@@ -19,7 +19,7 @@ export const importAccount = (secret: string, name?: string) => {
    if (err?.message) {
      toast.error(err.message)
    } else {
-      toast.error('Error occured while importing account')
+      toast.error('Error occurred while importing account')
    }
    return;
  }
--- a/state/actions/saveFile.ts
+++ b/state/actions/saveFile.ts
@@ -2,14 +2,15 @@ import toast from "react-hot-toast";
 import state from '../index';

 // Saves the current editor content to global state
-export const saveFile = (showToast: boolean = true) => {
+export const saveFile = (showToast: boolean = true, activeId?: number) => {
  const editorModels = state.editorCtx?.getModels();
  const sought = '/' + state.files[state.active].name;
  const currentModel = editorModels?.find((editorModel) => {
    return editorModel.uri.path.endsWith(sought);
  });
+  const file = state.files[activeId || state.active]
  if (state.files.length > 0) {
-    state.files[state.active].content = currentModel?.getValue() || "";
+    file.content = currentModel?.getValue() || "";
  }
  if (showToast) {
    toast.success("Saved successfully", { position: "bottom-center" });
--- a/state/index.ts
+++ b/state/index.ts
@@ -13,9 +13,11 @@ export interface IFile {
  name: string;
  language: string;
  content: string;
+  compiledValueSnapshot?: string
  compiledContent?: ArrayBuffer | null;
  compiledWatContent?: string | null;
  lastCompiled?: Date
+  containsErrors?: boolean
 }

 export interface FaucetAccountRes {
--- a/utils/comment-parser.ts
+++ b/utils/comment-parser.ts
@@ -19,6 +19,6 @@ export const getErrors = (source?: string): Error | undefined => {
    );
    if (!probs.length) return undefined
    const errors = probs.map(prob => `[${prob.code}] on line ${prob.line}: ${prob.message}`)
-    const error = new Error(`The following error(s) occured while parsing JSDOC: \n${errors.join('\n')}`)
+    const error = new Error(`The following error(s) occurred while parsing JSDOC: \n${errors.join('\n')}`)
    return error
 }