@codemirror/commands

A collection of editing, selection, deletion, indentation, and undo-history commands with default keymaps for the CodeMirror 6 code editor.

Library
npm
v6.11.1
39 stars
MIT License

Repository Health

Pre-computed score based on development activity, maintenance, community, maturity, and trend momentum. How we score it →
25 /100 Needs Attention
Development Activity 4
Maintenance 0
Community 24
Maturity 60
Momentum 12

Technical Analysis

AI-assessed by reading the actual repository — architecture, code quality, innovation, and documentation. How we score it →
74 /100 Good
Architecture 82
Code Quality 74
Innovation 70
Learning Curve 68

@codemirror/commands supplies the editing behavior that most code editors need but @codemirror/view and @codemirror/state deliberately leave out: cursor and selection movement (by character, group, subword, line, page, syntax node, or document boundary), deletion, line manipulation, indentation, character transposition, and an undo/redo history extension. Each behavior is exposed as a plain Command or StateCommand function plus pre-built KeyBinding arrays (standardKeymap, defaultKeymap, emacsStyleKeymap, historyKeymap), so an application wires up editing behavior by spreading a keymap into @codemirror/view’s keymap facet rather than reimplementing cursor and selection logic from scratch.

Because every command is just a function of {state, dispatch} or an EditorView, they compose cleanly with custom key bindings, can be called programmatically outside of a keypress, and interoperate with @codemirror/language for syntax-aware operations like toggleComment, indentSelection, and cursorSyntaxLeft/cursorSyntaxRight. The package is a peer dependency of nearly every CodeMirror 6 setup (including presets like codemirror and basic-setup) and receives frequent point releases fixing selection-association and cursor-placement edge cases.

What You Get

  • Cursor and selection commands for character, group, subword, line, page, syntax-node, and document-boundary motion, each with a select* counterpart for extending the selection
  • Deletion commands (deleteCharBackward, deleteGroupForward, deleteLine, deleteTrailingWhitespace, etc.) covering per-character, per-group, and per-line removal in both directions
  • Line manipulation and indentation commands: moveLineUp/moveLineDown, copyLineUp/copyLineDown, indentMore/indentLess, indentSelection, and Tab handling via insertTab/indentWithTab
  • An undo/redo history() extension with undo, redo, undoSelection, redoSelection, configurable grouping (newGroupDelay), and invertedEffects for making custom StateEffects undoable
  • Line and block commenting/uncommenting (toggleComment, toggleLineComment, toggleBlockComment) driven by language-provided CommentTokens
  • Pre-built keymaps — standardKeymap, defaultKeymap (superset with syntax-aware and Alt/Cmd bindings), emacsStyleKeymap, and historyKeymap — ready to spread into keymap.of([...])

Common Use Cases

  • Wiring baseline editing behavior (arrow keys, backspace, select-all, undo/redo) into a from-scratch CodeMirror 6 editor via defaultKeymap
  • Adding syntax-aware operations such as commenting a selection or expanding the selection to the enclosing syntax node in a code-editing product
  • Building a custom keymap (e.g. Emacs- or Vim-flavored bindings) by picking individual command functions like cursorGroupLeft or deleteToLineEnd rather than using the packaged keymaps
  • Adding an undo history to an embedded config/query/formula editor and exposing undo/redo as toolbar buttons that call the exported undo/redo commands directly

Under The Hood

Architecture — The package is organized around three files with a clean dependency direction: commands.ts (1,124 lines) defines pure selection/deletion/indentation commands as Command/StateCommand functions built from small composable helpers (moveSel, deleteBy, extendSel) that transform an EditorState’s EditorSelection and dispatch a Transaction; history.ts (399 lines) implements undo/redo as a StateField (historyField_) storing done/undone branches of HistEvents, using transaction annotations (fromHistory, isolateHistory) to distinguish history-replay transactions from normal edits and a time/newGroupDelay-based heuristic to merge adjacent keystrokes into one undo step; comment.ts (201 lines) implements line/block toggling by reading language-provided CommentTokens and computing per-line or per-range comment insertion/removal as a single ChangeSet. commands.ts re-exports both sibling modules so the whole package presents one flat public surface, and standardKeymap/defaultKeymap are assembled at the bottom of commands.ts by concatenating arrays of KeyBinding objects that reference the exported command functions.

Tech Stack — Pure TypeScript (100% of the codebase, 134KB) with @codemirror/state (^6.6.0), @codemirror/view (^6.27.0), @codemirror/language (^6.0.0), and @lezer/common (^1.1.0) as direct dependencies — it sits strictly above state/view and below any language-specific package. Build tooling is CodeMirror’s own @codemirror/buildhelper (cm-buildhelper src/commands.ts) producing dual ESM/CJS output (dist/index.js / dist/index.cjs) with bundled .d.ts types; package.json declares "type": "module" and "sideEffects": false for tree-shaking. Tests run via cm-runtests (the shared CodeMirror test runner, cm-buildhelper’s sibling).

Code Quality — Tests total 1,452 lines across four files (test-commands.ts 259, test-comment.ts 221, test-history.ts 646, webtest-commands.ts 292 for DOM-dependent cases), giving the undo history — the most stateful, edge-case-prone part of the package — by far the heaviest coverage. Every exported command in commands.ts and history.ts carries a ///-prefixed doc comment consumed by CodeMirror’s own doc generator, and internal helpers are small, single-purpose functions (moveSel, rangeEnd, deleteBy) rather than large branching functions, keeping each command’s diff-sized and independently testable. No linter config ships in the repo; consistency is enforced by the shared CodeMirror build tooling and code review norms across the monorepo-like family of packages.

API Design — The public surface is deliberately flat and uniform: nearly every export is either a Command/StateCommand function with the exact signature (target) => boolean, or a readonly KeyBinding[] array, so consumers can mix hand-picked commands and packaged keymaps without adapters. The select* naming convention (mirroring every cursor* command with a same-named select* variant) makes the API’s shape predictable without reading docs. The tradeoff is a large flat namespace — over 60 command exports — with no sub-grouping, so discoverability leans on the README’s categorized command list (Selection / Deletion / Line manipulation / Indentation / Undo History / Commenting) rather than the module structure itself.

Used by 55 apps in this directory

TypeScript
63%
MIT

Ghost

Blogging · CMS

55,598

Open source headless Node.js CMS for professional publishing, paid memberships, and newsletters with a fully owned audience.

View details
96
Repo Health
85
Technical
64
Dependency
Built with
TypeScript 63%
JavaScript 35%
Updated 1 weeks ago
Go
83%
MIT

Gitea

Developer Tools · Devops · Project Management

58,668

Self-hosted DevOps in a single Go binary — Git hosting, GitHub Actions-compatible CI/CD, and 30+ package registries without any SaaS dependency.

View details
93
Repo Health
79
Technical
64
Dependency
Built with
Go 83%
Updated 6 days ago
Go
62%
Apache 2.0

Harness Open Source

Code Editors · Developer Tools · Devops

38,684

A unified open source DevOps platform combining Git hosting, CI/CD pipelines, cloud development environments, and artifact registries in a single self-hosted system.

View details
90
Repo Health
79
Technical
64
Dependency
Built with
Go 62%
TypeScript 33%
Updated 1 weeks ago
TypeScript
71%
Other

highlight.io

Analytics · Developer Tools · Monitoring

9,384

Open-source full-stack monitoring that unifies session replay, error tracking, logging, and distributed tracing so you can stop context-switching between tools.

View details
76
Repo Health
78
Technical
65
Dependency
Built with
TypeScript 71%
Go 16%
Updated 1 weeks ago
Go
69%
MIT

hoop

Monitoring · Security

836

A wire-protocol gateway that enforces data masking, command blocking, approval workflows, and full session recording for engineers and AI agents accessing production infrastructure.

View details
86
Repo Health
80
Technical
64
Dependency
Built with
Go 69%
Clojure 13%
Updated 6 days ago
TypeScript
68%
MIT

Hoppscotch

Developer Tools

80,676

A lightweight, offline-capable API development ecosystem for testing HTTP, GraphQL, WebSocket, MQTT, and SSE endpoints across web, desktop, and CLI.

View details
91
Repo Health
83
Technical
62
Dependency
Built with
TypeScript 68%
Vue 24%
Updated 1 weeks ago
TypeScript
91%
Apache 2.0

HyperFrames

AI Design Tools · AI Development

70,938

Turn plain HTML and CSS into deterministic, pixel-perfect MP4 videos — authored by humans or AI agents, rendered by headless Chrome and FFmpeg.

View details
84
Repo Health
83
Technical
65
Dependency
Built with
TypeScript 91%
Updated 6 days ago
TypeScript
100%
Apache 2.0

ILLA Builder

Design Tools · Developer Tools · Low Code Platforms

12,333

Open-source low-code platform for building internal tools with drag-and-drop UI, reactive data bindings, and real-time collaboration.

View details
55
Repo Health
71
Technical
63
Dependency
Built with
TypeScript 100%
Updated 5 months ago
TypeScript
96%
Other

Infisical

Devops · Security

29,961

The open-source platform for secrets, certificates, privileged access, and AI agent security — all in one self-hostable system.

View details
91
Repo Health
84
Technical
64
Dependency
Built with
TypeScript 96%
Updated 6 days ago

Join founders buildingwith open source

Opinionated takes, migration guides, cost-saving tips, and insights from the open source ecosystem.

Subscribe on Substack
Join 750+ subscribers