Make editors readonly during execution

This commit is contained in:
Nilay Majorwar 2022-01-22 21:57:53 +05:30
parent ffc9c03452
commit 251a6836f5
3 changed files with 19 additions and 3 deletions

View File

@ -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

View File

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

View File

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