Make editors readonly during execution

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

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,
+      }}
     />
   );
 };

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" }}
     />