submit editor on cmd+enter

packages/components/src/components/CodeEditor.tsx

@@ -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?.(),
+        },
+      ]}
     />
   );
 };

packages/components/src/components/SquigglePlayground.tsx

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