monaco-vim

Vim keybindings for monaco-editor demo

Install

Webpack/browserify

npm install monaco-vim

As global

This package will only work when bundled using webpack/browserify or using AMD. Including globally is not possible due to the use of an internal dependency of monaco-editor which is not exposed in the API. Loading 'monaco' globally is also not possible as you'll have to use its

loader.js

Usage

import { initVimMode } from 'monaco-vim';

const vimMode = initVimMode(editor, document.getElementById('my-statusbar'))

Here,

editor

To remove the attached VIM bindings, call

vimMode.dispose();

Handling key presses

If you would like a particular keypress to not be handled by this extension, add your

onKeyDown

monaco-vim

preventDefault()

monaco-vim

CTRL/CMD+Enter

monaco-vim

AMD

If you are following the official guide and integrating the AMD version of

monaco-editor

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

See demo.js for full usage.

If you would like to customize the statusbar or provide your own implementation, see

initVimMode

Adding custom key bindings

Actual vim implementation can be imported as:

import { VimMode } from 'monaco-vim';

Defining ex mode command

// VimMode.Vim.defineEx(name, shorthand, callback);
VimMode.Vim.defineEx('write', 'w', function() {
  // your own implementation on what you want to do when :w is pressed
  localStorage.setItem('editorvalue', editor.getValue());
});

For advanced usage, refer codemirror.

CodeMirror.Vim

VimMode.Vim

This implementaion of VIM is a layer between Codemirror's VIM keybindings and monaco. There may be issues in some of the keybindings, especially those that expect extra input like the Ex commands or search/replace. If you encounter such bugs, create a new issue. PRs to resolve those are welcome too.