You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
import{basicSetup,EditorView}from'codemirror';import{vim}from"@replit/codemirror-vim"letview=newEditorView({doc: "",extensions: [// make sure vim is included before other keymapsvim(),// include the default keymap and all other keymaps you want to use in insert modebasicSetup,],parent: document.querySelector('#editor'),})
Note:
if you are not using basicSetup, make sure you include the 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
import{Vim,getCM}from"@replit/codemirror-vim"letcm=getCM(view)// use cm to access the old cm5 apiVim.exitInsertMode(cm)Vim.handleKey(cm,"<Esc>")
Define additional ex commands
Vim.defineEx('write','w',function(){// save the file});
Map keys
Vim.map("jj","<Esc>","insert");// in insert modeVim.map("Y","y$");// in normal mode
Unmap keys
Vim.unmap("jj","insert");
Add custom key
defaultKeymap.push({keys: 'gq',type: 'operator',operator: 'hardWrap'});Vim.defineOperator("hardWrap",function(cm,operatorArgs,ranges,oldAnchor,newHead){// make changes and return new cursor position});
Credits
This plugin was originally authored by @mightyguava (Yunchi Luo) as part of CodeMirror, before being extracted and maintained here.