From 251a6836f566451426b90e787d0f872488832d10 Mon Sep 17 00:00:00 2001
From: Nilay Majorwar <nilaymajorwar@gmail.com>
Date: Sat, 22 Jan 2022 21:57:53 +0530
Subject: [PATCH] Make editors readonly during execution

---
 ui/Mainframe.tsx         | 8 +++++++-
 ui/code-editor/index.tsx | 8 +++++++-
 ui/input-editor.tsx      | 6 +++++-
 3 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/ui/Mainframe.tsx b/ui/Mainframe.tsx
index 2a330a8..5e2fcbf 100644
--- a/ui/Mainframe.tsx
+++ b/ui/Mainframe.tsx
@@ -137,6 +137,7 @@ export const Mainframe = <RS extends {}>({ langName, provider }: Props<RS>) => {
         <CodeEditor
           ref={codeEditorRef}
           languageId="brainfuck"
+          readOnly={execController.state === "processing"}
           defaultValue={providerRef.current.sampleProgram}
           tokensProvider={providerRef.current.editorTokensProvider}
           onValidateCode={execController.validateCode}
@@ -151,7 +152,12 @@ export const Mainframe = <RS extends {}>({ langName, provider }: Props<RS>) => {
           renderer={providerRef.current.Renderer as any}
         />
       )}
-      renderInput={() => <InputEditor ref={inputEditorRef} />}
+      renderInput={() => (
+        <InputEditor
+          ref={inputEditorRef}
+          readOnly={execController.state === "processing"}
+        />
+      )}
       renderOutput={() => <OutputViewer ref={outputEditorRef} />}
       renderExecControls={() => (
         <ExecutionControls
diff --git a/ui/code-editor/index.tsx b/ui/code-editor/index.tsx
index 6b3dac6..473f44a 100644
--- a/ui/code-editor/index.tsx
+++ b/ui/code-editor/index.tsx
@@ -29,6 +29,8 @@ type Props = {
   defaultValue: string;
   /** Tokens provider for the language */
   tokensProvider?: MonacoTokensProvider;
+  /** Set editor as read-only */
+  readOnly?: boolean;
   /** Callback to validate code syntax */
   onValidateCode: (code: string) => Promise<WorkerParseError | undefined>;
   /** Callback to update debugging breakpoints */
@@ -107,7 +109,11 @@ const CodeEditorComponent = (props: Props, ref: React.Ref<CodeEditorRef>) => {
         setEditor(editor);
         setMonaco(monaco);
       }}
-      options={{ minimap: { enabled: false }, glyphMargin: true }}
+      options={{
+        minimap: { enabled: false },
+        glyphMargin: true,
+        readOnly: props.readOnly,
+      }}
     />
   );
 };
diff --git a/ui/input-editor.tsx b/ui/input-editor.tsx
index 63713d6..3b65122 100644
--- a/ui/input-editor.tsx
+++ b/ui/input-editor.tsx
@@ -12,7 +12,10 @@ export interface InputEditorRef {
 /**
  * A very simple text editor for user input
  */
-const InputEditorComponent = (_: {}, ref: React.Ref<InputEditorRef>) => {
+const InputEditorComponent = (
+  props: { readOnly?: boolean },
+  ref: React.Ref<InputEditorRef>
+) => {
   const textareaRef = React.useRef<HTMLTextAreaElement | null>(null);
 
   React.useImperativeHandle(
@@ -29,6 +32,7 @@ const InputEditorComponent = (_: {}, ref: React.Ref<InputEditorRef>) => {
       large
       growVertically
       inputRef={textareaRef}
+      readOnly={props.readOnly}
       placeholder="Enter program input here..."
       style={{ height: "100%", resize: "none", boxShadow: "none" }}
     />