fix: Capture Tab within editor, remove custom key handling in favor of keymaps

closes #3118

shared/editor/lib/ExtensionManager.ts

@@ -117,25 +117,18 @@ export default class ExtensionManager {
   }
 
   keymaps({ schema }: { schema: Schema }) {
-    const extensionKeymaps = this.extensions
+    const keymaps = this.extensions
-      .filter((extension) => ["extension"].includes(extension.type))
       .filter((extension) => extension.keys)
-      .map((extension: Extension) => extension.keys({ schema }));
+      .map((extension) =>
-
+        ["node", "mark"].includes(extension.type)
-    const nodeKeymaps = this.extensions
+          ? extension.keys({
-      .filter((extension) => ["node", "mark"].includes(extension.type))
+              type: schema[`${extension.type}s`][extension.name],
-      .filter((extension) => extension.keys)
+              schema,
-      .map((extension: Node | Mark) =>
+            })
-        extension.keys({
+          : (extension as Extension).keys({ schema })
-          type: schema[`${extension.type}s`][extension.name],
-          schema,
-        })
       );
 
-    return [
+    return keymaps.map(keymap);
-      ...extensionKeymaps,
-      ...nodeKeymaps,
-    ].map((keys: Record<string, any>) => keymap(keys));
   }
 
   inputRules({ schema }: { schema: Schema }) {

shared/editor/plugins/Keys.ts

@@ -4,9 +4,9 @@ import {
   Selection,
   AllSelection,
   TextSelection,
+  EditorState,
 } from "prosemirror-state";
-import Extension from "../lib/Extension";
+import Extension, { Command } from "../lib/Extension";
-import isModKey from "../lib/isModKey";
 import isInCode from "../queries/isInCode";
 
 export default class Keys extends Extension {
@@ -14,6 +14,37 @@ export default class Keys extends Extension {
     return "keys";
   }
 
+  keys(): Record<string, Command> {
+    return {
+      // No-ops prevent Tab escaping the editor bounds
+      Tab: () => true,
+      "Shift-Tab": () => true,
+
+      // Shortcuts for when editor has separate edit mode
+      Escape: () => {
+        if (this.options.onCancel) {
+          this.options.onCancel();
+          return true;
+        }
+        return false;
+      },
+      "Mod-s": () => {
+        if (this.options.onSave) {
+          this.options.onSave();
+          return true;
+        }
+        return false;
+      },
+      "Mod-Enter": (state: EditorState) => {
+        if (!isInCode(state) && this.options.onSaveAndExit) {
+          this.options.onSaveAndExit();
+          return true;
+        }
+        return false;
+      },
+    };
+  }
+
   get plugins() {
     return [
       new Plugin({
@@ -60,29 +91,6 @@ export default class Keys extends Extension {
               }
             }
 
-            // All the following keys require mod to be down
-            if (!isModKey(event)) {
-              return false;
-            }
-
-            if (event.key === "s") {
-              event.preventDefault();
-              this.options.onSave();
-              return true;
-            }
-
-            if (event.key === "Enter" && !isInCode(view.state)) {
-              event.preventDefault();
-              this.options.onSaveAndExit();
-              return true;
-            }
-
-            if (event.key === "Escape") {
-              event.preventDefault();
-              this.options.onCancel();
-              return true;
-            }
-
             return false;
           },
         },