fix: make output panes readonly (#42)

* fix: make output panes readonly

The output panes currently allow pasting, though not general editing. This change makes them
readonly, preventing any editing, but also allowing other features like copying, selecting, and
searching. We also enable tab to create spaces in the editor.

* Update README.md

* Update README.md

* fix: making alt+up/down navigate history on mac

For some reason cmd + up/down doesn't work when trying to navigate history. It must be overloaded.
This changes it to alt+up/down for mac.

Author: mdbenjam

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 (