Need help with monaco-vim?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

brijeshb42
132 Stars 14 Forks MIT License 75 Commits 21 Opened issues

Description

VIM keybindings for monaco editor

Services available

!
?

Need anything else?

Contributors list

# 32,251
CSS
Sass
vscode
medium-...
46 commits
# 402,206
HTML
Jupyter...
CSS
keybind...
4 commits
# 102,672
polling
Socket....
vscode
CSS
2 commits
# 268,093
C
OCaml
dota
React
2 commits
# 152,374
Rust
wayland...
tiling-...
Shell
2 commits
# 84,536
HTML
CSS
keybind...
Vim
1 commit
# 106,515
C
HTML
Amazon ...
Vim
1 commit
# 153,652
C++
Lua
keybind...
Vim
1 commit
# 11,338
unittes...
Raspber...
dlang
assembl...
1 commit
# 579,257
HTML
Shell
Go
keybind...
1 commit

monaco-vim

Vim keybindings for monaco-editor demo

npm version

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
file. If you are using that, then there will be no problem. See AMD.

Usage

import { initVimMode } from 'monaco-vim';

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

Here,

editor
is initialized instance of monaco editor and the 2nd argument should be the node where you would like to place/show the VIM status info.

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
handler before initializing
monaco-vim
and call
preventDefault()
on it.
monaco-vim
will ignore such events and won't do anything. This can be useful if you want to handle events like running code on
CTRL/CMD+Enter
which otherwise would have been eaten up by
monaco-vim
. (Available from v0.0.14 onwards).

AMD

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

monaco-editor
, you can follow this -
<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
's implementation in src/index.js.

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
is available as
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.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.