CodeMirror keymap: set shortcut precedence and let unhandled commands fall through

In CodeMirror 6, register shortcuts with keymap.of([...]). Each binding's run(view) function returns true when it handles the key and false when CodeMirror should try another matching binding. Keymaps earlier in configuration, or placed in a higher Prec bucket, are checked first. CodeMirror keymap reference

A SQL scratchpad needs Ctrl+Enter on Windows or Linux, and Cmd+Enter on macOS, to preview the selected query. When nothing is selected, the existing application command should receive the shortcut. Ordinary Enter must continue inserting a newline.

Register a command that reports whether it acted

For an existing CodeMirror 6 application with compatible packages, make the selected-query behavior an extension:

import { Prec } from '@codemirror/state';
import { keymap } from '@codemirror/view';

export function selectionPreviewKeymap(showPreview) {
  return Prec.high(keymap.of([{
    key: 'Mod-Enter',
    run(view) {
      const range = view.state.selection.main;
      if (range.empty) return false;

      const query = view.state.sliceDoc(range.from, range.to);
      if (!query.trim()) return false;

      showPreview(query);
      return true;
    }
  }]));
}

showPreview is an application callback that displays the selected text. It is not a CodeMirror API or a database execution function. This example deliberately uses only the primary selection; an application that supports running multiple selections needs an explicit policy for them.

Include selectionPreviewKeymap(showPreview) in the editor's extension list alongside its existing editing setup and later application keymaps. The Mod shorthand means Cmd on macOS and Ctrl on other platforms. CodeMirror also supports explicit mac, win, and linux keys when a command needs different combinations. KeyBinding options

Understand what false permits

For an isolated integration check, a later binding can report that no query was selected:

const noSelectionFallback = keymap.of([{
  key: 'Mod-Enter',
  run() {
    showStatus('Select query text before previewing.');
    return true;
  }
}]);

Here showStatus is your application's visible status-message function. Add this fallback at normal precedence. With a nonempty query selection, the high-priority command previews the query and ends dispatch. With an empty selection, it returns false, allowing the fallback to show its message.

Returning undefined by accident is not a good command contract. Write the intended boolean in every branch. Also avoid returning true before a context check: doing so consumes the key even when the action cannot run.

This fallthrough is useful for context-sensitive behavior. It is not a promise that every key has another editor command waiting for it. If no binding handles the key, browser behavior may remain relevant.

Use precedence where the conflict exists

CodeMirror flattens extension arrays and groups extensions into precedence buckets. Prec.high(...) puts this binding above normal-precedence keymaps, but another binding in a still higher bucket can take priority. Within a bucket, order still matters. Configuration and precedence

Inspect the application's complete setup when a shortcut seems ignored. A convenience setup may already install default, search, history, or completion bindings. Adding another copy without understanding the order makes the conflict harder to find. The CodeMirror autocomplete guide describes another case where a completion interface can have its own key behavior.

Avoid a document-wide keydown listener for this editor-specific action. CodeMirror's default keymap scope is the focused editor content. A page-level listener can compete with another editor, a search field, or the browser. Use the general keyboard shortcut guide for application-wide controls that genuinely need that scope.

Keep preventDefault separate from command success

preventDefault: true suppresses further native handling of the bound key even when the command returns false. Use it only when that suppression is part of the intended behavior. It does not turn a failed command into a successful preview or supply a missing fallback.

The selected-query example omits it. A successful command already tells CodeMirror it handled the key; an unsuccessful one should permit the next configured handler. Do not broadly capture Enter, Tab, or every key to make one shortcut win.

For the integration check, select SELECT 1; and press the platform's Mod+Enter combination. Expect the preview to contain exactly that selection. Clear the selection and repeat; expect the fallback message. Finally press plain Enter while editing and verify that it inserts a newline. Keep a visible preview button for readers who do not use the shortcut, and validate any real query execution through the application's separate authorization and execution path.

Keep reading