submit editor on cmd+enter
This commit is contained in:
parent
9208330038
commit
4fe30107a4
|
@ -1,5 +1,5 @@
|
|||
import _ from "lodash";
|
||||
import React, { FC, useMemo } from "react";
|
||||
import React, { FC, useMemo, useRef } from "react";
|
||||
import AceEditor from "react-ace";
|
||||
|
||||
import "ace-builds/src-noconflict/mode-golang";
|
||||
|
@ -8,6 +8,7 @@ import "ace-builds/src-noconflict/theme-github";
|
|||
interface CodeEditorProps {
|
||||
value: string;
|
||||
onChange: (value: string) => void;
|
||||
onSubmit?: () => void;
|
||||
oneLine?: boolean;
|
||||
width?: number;
|
||||
height: number;
|
||||
|
@ -17,6 +18,7 @@ interface CodeEditorProps {
|
|||
export const CodeEditor: FC<CodeEditorProps> = ({
|
||||
value,
|
||||
onChange,
|
||||
onSubmit,
|
||||
oneLine = false,
|
||||
showGutter = false,
|
||||
height,
|
||||
|
@ -24,6 +26,10 @@ export const CodeEditor: FC<CodeEditorProps> = ({
|
|||
const lineCount = value.split("\n").length;
|
||||
const id = useMemo(() => _.uniqueId(), []);
|
||||
|
||||
// this is necessary because AceEditor binds commands on mount, see https://github.com/securingsincity/react-ace/issues/684
|
||||
const onSubmitRef = useRef<typeof onSubmit | null>(null);
|
||||
onSubmitRef.current = onSubmit;
|
||||
|
||||
return (
|
||||
<AceEditor
|
||||
value={value}
|
||||
|
@ -46,6 +52,13 @@ export const CodeEditor: FC<CodeEditorProps> = ({
|
|||
enableBasicAutocompletion: false,
|
||||
enableLiveAutocompletion: false,
|
||||
}}
|
||||
commands={[
|
||||
{
|
||||
name: "submit",
|
||||
bindKey: { mac: "Cmd-Enter", win: "Ctrl-Enter" },
|
||||
exec: () => onSubmitRef.current?.(),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -330,6 +330,11 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
|
|||
}
|
||||
};
|
||||
|
||||
const manualPlay = () => {
|
||||
if (vars.autoplay) return; // should we allow reruns even in autoplay mode?
|
||||
setRenderedCode(code); // TODO - force play even if code hasn't changed
|
||||
};
|
||||
|
||||
const samplingSettings = (
|
||||
<div className="space-y-6 p-3 max-w-xl">
|
||||
<div>
|
||||
|
@ -503,6 +508,7 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
|
|||
<CodeEditor
|
||||
value={code ?? ""}
|
||||
onChange={setCode}
|
||||
onSubmit={manualPlay}
|
||||
oneLine={false}
|
||||
showGutter={true}
|
||||
height={height - 1}
|
||||
|
@ -547,9 +553,7 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
|
|||
<PlayControls
|
||||
autoplay={vars.autoplay || false}
|
||||
isStale={!vars.autoplay && renderedCode !== code}
|
||||
onPlay={() => {
|
||||
setRenderedCode(code);
|
||||
}}
|
||||
onPlay={manualPlay}
|
||||
onAutoplayChange={(newValue) => {
|
||||
if (!newValue) setRenderedCode(code);
|
||||
setFormValue("autoplay", newValue);
|
||||
|
|
Loading…
Reference in New Issue
Block a user