fix: make output panes readonly

README.md

@@ -93,7 +93,7 @@ The library also reads from console.error and reports any errors printed out whi
 
 ## History
 
-The library maintains the list of commands run in the upper read only code editor. It also maintains a buffer of previous commands that can be accessed in the code input section by using `super+arrow up/down`. This history is stored in local storage so that you can access it between test runs. You can clear this history by using the `Clear History` button.
+The library maintains the list of commands run in the upper read only code editor. It also maintains a buffer of previous commands that can be accessed in the code input section by using `ctrl+arrow up/down` (`alt+arrow up/down` on Mac). This history is stored in local storage so that you can access it between test runs. You can clear this history by using the `Clear History` button.
 
 ## Restarting Tests
 
@@ -144,3 +144,12 @@ registerCommands({
 ```
 
 You can pass an object to `registerCommands` where each key is the name of the command, and the value is the function it will run when invoked.
+
+## Shortcuts
+
+| Key | Shortcut|
+|---|---|
+| Ctrl + Arrow Up/Down (Mac: Alt + Arrow Up/Down) | Navigate history |
+| Ctrl + Enter (Mac: Cmd + Enter) | Submit command |
+| Esc then Tab | Tab out of the command editor. Without hitting escape first, tab acts to indent |
+

test-runner/src/App.css

@@ -9,7 +9,7 @@
   height: 100vh;
   display: flex;
   flex-direction: column;
-  width: 450px;
+  width: 500px;
   justify-content: space-between;
 }
 
@@ -49,3 +49,7 @@ button:focus {
   min-height: 0;
   overflow: auto;
 }
+
+.tab-instruction {
+  font-size: 10pt;
+}

test-runner/src/CommandInput.js

@@ -181,6 +181,10 @@ function CommandInput({ setInnerHTML, availableCommands }) {
         </button>
         <button onClick={() => axios.post("/stop")}>Stop Test</button>
       </div>
+      <p className="tab-instruction">
+        Note the tab key is used to indent inside the editor. Hit esc then tab
+        to escape.
+      </p>
     </>
   );
 }

test-runner/src/Editor.js

@@ -1,5 +1,4 @@
 import { useEffect, useCallback, useRef, useMemo } from "react";
-
 import {
   keymap,
   highlightSpecialChars,
@@ -19,7 +18,7 @@ import {
   gutter,
   GutterMarker,
 } from "@codemirror/gutter";
-import { defaultKeymap } from "@codemirror/commands";
+import { defaultKeymap, indentWithTab } from "@codemirror/commands";
 import { bracketMatching } from "@codemirror/matchbrackets";
 import { closeBrackets, closeBracketsKeymap } from "@codemirror/closebrackets";
 import { searchKeymap, highlightSelectionMatches } from "@codemirror/search";
@@ -432,23 +431,22 @@ export default function Editor({
 
         const previousCommandsKeyMap = [
           {
-            key: "Ctrl-ArrowUp",
-            mac: "Cmd-ArrowUp",
+            key: "Mod-ArrowUp",
+            mac: "Alt-ArrowUp",
             run: ctrlCursorArrowUp,
             preventDefault: true,
           },
           {
-            key: "Ctrl-ArrowDown",
-            mac: "Cmd-ArrowDown",
+            key: "Mod-ArrowDown",
+            mac: "Alt-ArrowDown",
             run: ctrlCursorArrowDown,
             preventDefault: true,
           },
         ];
 
         const sendCommandKeyMap = [
           {
-            key: "Ctrl-Enter",
-            mac: "Cmd-Enter",
+            key: "Mod-Enter",
             run: ({ state }) => {
               state.field(submitFunctionState).submit();
             },
@@ -486,6 +484,7 @@ export default function Editor({
               ...completionKeymap,
               ...lintKeymap,
               ...previousCommandsKeyMap,
+              indentWithTab,
             ]),
             javascript(),
             autocompletion({ override: [myCompletions] }),
@@ -499,7 +498,7 @@ export default function Editor({
             cursorTooltipBaseTheme,
             errorUnderlineTheme,
             warningUnderlineTheme,
-            EditorView.editable.of(!readonly),
+            EditorState.readOnly.of(readonly),
           ],
         });
         if (