@codemirror/commands

What is @codemirror/commands?

@codemirror/commands is a package that provides a collection of commands for the CodeMirror code editor. These commands are used to manipulate the editor's content, navigate through the text, and perform various editing operations. The package is designed to be used with the CodeMirror 6 framework.

What are @codemirror/commands's main functionalities?

Basic Editing Commands

This feature includes basic editing commands such as inserting a newline and deleting a character forward. The code sample demonstrates how to bind these commands to specific keys in a CodeMirror editor instance.

import { insertNewline, deleteCharForward } from '@codemirror/commands';

// Example usage in a CodeMirror setup
const editor = new EditorView({
  state: EditorState.create({
    doc: 'Hello, world!',
    extensions: [
      keymap.of([{
        key: 'Enter', run: insertNewline
      }, {
        key: 'Delete', run: deleteCharForward
      }])
    ]
  }),
  parent: document.body
});

Selection Commands

This feature includes commands for selecting text, such as selecting all text or selecting the current line. The code sample shows how to bind these commands to specific key combinations in a CodeMirror editor instance.

import { selectAll, selectLine } from '@codemirror/commands';

// Example usage in a CodeMirror setup
const editor = new EditorView({
  state: EditorState.create({
    doc: 'Hello, world!',
    extensions: [
      keymap.of([{
        key: 'Ctrl-a', run: selectAll
      }, {
        key: 'Ctrl-l', run: selectLine
      }])
    ]
  }),
  parent: document.body
});

Navigation Commands

This feature includes navigation commands such as moving the cursor left or right by one character. The code sample demonstrates how to bind these commands to the arrow keys in a CodeMirror editor instance.

import { cursorCharLeft, cursorCharRight } from '@codemirror/commands';

// Example usage in a CodeMirror setup
const editor = new EditorView({
  state: EditorState.create({
    doc: 'Hello, world!',
    extensions: [
      keymap.of([{
        key: 'ArrowLeft', run: cursorCharLeft
      }, {
        key: 'ArrowRight', run: cursorCharRight
      }])
    ]
  }),
  parent: document.body
});

Other packages similar to @codemirror/commands

monaco-editor

Monaco Editor is the code editor that powers Visual Studio Code. It provides a rich set of commands for editing, navigating, and managing code. Compared to @codemirror/commands, Monaco Editor offers a more comprehensive and integrated development experience, especially for larger projects.

ace-builds

Ace is a standalone code editor written in JavaScript. It provides a wide range of commands for code editing and navigation. While @codemirror/commands is designed to work with the CodeMirror 6 framework, Ace is a self-contained editor with its own set of features and commands.

codemirror

CodeMirror is a versatile text editor implemented in JavaScript for the browser. It provides a variety of commands for text editing and navigation. The original CodeMirror (version 5) has a different API and architecture compared to CodeMirror 6 and its @codemirror/commands package.

README

@codemirror/commands

[ WEBSITE | DOCS | ISSUES | FORUM | CHANGELOG ]

This package implements a collection of editing commands for the CodeMirror code editor.

The project page has more information, a number of examples and the documentation.

This code is released under an MIT license.

We aim to be an inclusive, welcoming community. To make that explicit, we have a code of conduct that applies to communication around the project.

Changelog

0.20.0 (2022-04-20)

Breaking changes

There is no longer a separate commentKeymap. Those bindings are now part of defaultKeymap.

Bug fixes

Make cursorPageUp and cursorPageDown move by window height when the editor is higher than the window.

Make sure the default behavior of Home/End is prevented, since it could produce unexpected results on macOS.

New features

The exports from @codemirror/comment are now available in this package.

The exports from the @codemirror/history package are now available from this package.