Add support for inserting blank line with Alt+Enter (#2652)

Co-authored-by: Jonatan Kłosko <jonatanklosko@gmail.com>

assets/js/hooks/cell_editor/live_editor.js

@@ -50,8 +50,10 @@ import { wait } from "../../lib/utils";
 import Emitter from "../../lib/emitter";
 import CollabClient from "./live_editor/collab_client";
 import { languages } from "./live_editor/codemirror/languages";
-import { exitMulticursor } from "./live_editor/codemirror/commands";
-import { highlight } from "./live_editor/highlight";
+import {
+  exitMulticursor,
+  insertBlankLineAndCloseHints,
+} from "./live_editor/codemirror/commands";
 import { ancestorNode, closestNode } from "./live_editor/codemirror/tree_utils";
 import { selectingClass } from "./live_editor/codemirror/selecting_class";
 
@@ -289,7 +291,10 @@ export default class LiveEditor {
       this.language &&
       LanguageDescription.matchLanguageName(languages, this.language, false);
 
-    const customKeymap = [{ key: "Escape", run: exitMulticursor }];
+    const customKeymap = [
+      { key: "Escape", run: exitMulticursor },
+      { key: "Alt-Enter", run: insertBlankLineAndCloseHints },
+    ];
 
     this.view = new EditorView({
       parent: this.container,
@@ -314,8 +319,8 @@ export default class LiveEditor {
         history(),
         EditorState.readOnly.of(this.readOnly),
         readOnlyHint(),
-        keymap.of(vscodeKeymap),
         keymap.of(customKeymap),
+        keymap.of(vscodeKeymap),
         EditorState.tabSize.of(2),
         EditorState.lineSeparator.of("\n"),
         lineWrappingEnabled ? EditorView.lineWrapping : [],

assets/js/hooks/cell_editor/live_editor/codemirror/commands.js

@@ -1,3 +1,7 @@
+import { closeCompletion } from "@codemirror/autocomplete";
+import { insertBlankLine } from "@codemirror/commands";
+import { closeSignature } from "./signature";
+
 /**
  * This command, when multi-cursor is active, collapses the selection
  * to the main cursor only.
@@ -12,3 +16,16 @@ export function exitMulticursor(view) {
 
   return false;
 }
+
+/**
+ * Calls `insertBlankLine` and closes active intellisense hints.
+ */
+export function insertBlankLineAndCloseHints(view) {
+  if (insertBlankLine(view)) {
+    closeCompletion(view);
+    closeSignature(view);
+    return true;
+  }
+
+  return false;
+}

assets/js/hooks/cell_editor/live_editor/codemirror/signature.js

@@ -335,7 +335,10 @@ function startSignature(view) {
   return true;
 }
 
-function closeSignature(view) {
+/**
+ * Closes the currently active completion.
+ */
+export function closeSignature(view) {
   const signatureState = view.state.field(signatureField, false);
   if (!signatureState || !signatureState.hint) return false;
   view.dispatch({ effects: [closeSignatureEffect.of(null)] });