https://github.com/replit/codemirror-vim

Vim keybindings for CM6
https://github.com/replit/codemirror-vim

codemirror codemirror-6 editor vim

Last synced: 5 days ago
JSON representation

Vim keybindings for CM6

• Host: GitHub
• URL: https://github.com/replit/codemirror-vim
• Owner: replit
• License: mit
• Created: 2021-09-24T19:20:01.000Z (about 3 years ago)
• Default Branch: master
• Last Pushed: 2024-09-16T20:40:37.000Z (about 2 months ago)
• Last Synced: 2024-09-17T02:09:40.971Z (about 2 months ago)
• Topics: codemirror, codemirror-6, editor, vim
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/@replit/codemirror-vim
• Size: 590 KB
• Stars: 287
• Watchers: 37
• Forks: 29
• Open Issues: 30
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Vim keybindings for CM6





## Installation

```sh

npm i @replit/codemirror-vim

```

## Usage

```js

import { basicSetup, EditorView } from 'codemirror';

import { vim } from "@replit/codemirror-vim"

let view = new EditorView({

  doc: "",

  extensions: [

    // make sure vim is included before other keymaps

    vim(), 

    // include the default keymap and all other keymaps you want to use in insert mode

    basicSetup, 

  ],

  parent: document.querySelector('#editor'),

})

```

> **Note**:

> if you are not using `basicSetup`, make sure you include the [drawSelection](https://codemirror.net/docs/ref/#view.drawSelection) plugin to correctly render the selection in visual mode.

## Usage of cm5 vim extension api

The same api that could be used in previous version of codemirror https://codemirror.net/doc/manual.html#vimapi, can be used with this plugin too, just replace the old editor instance with `view.cm` in your code

```js

import {Vim, getCM} from "@replit/codemirror-vim"

let cm = getCM(view)

// use cm to access the old cm5 api

Vim.exitInsertMode(cm)

Vim.handleKey(cm, "")

```

### Define additional ex commands

```js

Vim.defineEx('write', 'w', function() {

    // save the file

});

```

### Map keys

```js

Vim.map("jj", "", "insert"); // in insert mode

Vim.map("Y", "y$"); // in normal mode

```

### Unmap keys

```js

Vim.unmap("jj", "insert");

```

### Add custom key

```js

  defaultKeymap.push({ keys: 'gq', type: 'operator', operator: 'hardWrap' });

  Vim.defineOperator("hardWrap", function(cm, operatorArgs, ranges, oldAnchor, newHead) {

    // make changes and return new cursor position

  });

```