Make editors readonly during execution
This commit is contained in:
parent
ffc9c03452
commit
251a6836f5
@ -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
|
||||
|
@ -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,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
@ -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" }}
|
||||
/>
|
||||
|
Loading…
x
Reference in New Issue
Block a user