I, too, am interested in using CodeMirror’s VIM mode in the online editor. Let me know if that’s possible.
Thanks,
Lothrien
Thanks,
@yaustar
!
I’ve had some luck activating Vim mode for the active PlayCanvas code editor instance with the following:
Install CodeMirror’s Vim keyMap by copy and pasting it from their javascript file here
https://codemirror.net/keymap/vim.js
into the browser’s javascript console and run that.
Then copy, paste, and run the following script I wrote which sets the editor’s active keyMap to being Vim and then uses the Vim CodeMirror event
vim-mode-change
to properly enable and disable the PlayCanvas CodeEditor autocomplete when the Vim mode changes:
// Get the CodeMirror instance in the document and set it to Vim mode
var editorcm = document.querySelector( '.CodeMirror' ).CodeMirror;
editorcm.setOption( 'keyMap', 'vim' );
// Vim's edit mode defaults to 'normal' so retrieve the keydown handler functions and disable them for now
var kdHandlers = [...editorcm._handlers['keydown']];
kdHandlers.forEach( fn => {
editorcm.off( 'keydown', fn );
// Add an event to changing modes in Vim so that the autocomplete functionality works as expected
// (in insert / replace mode, not in normal / visual mode)
CodeMirror.on( editorcm, 'vim-mode-change', function( modeObj ) {
if( modeObj.mode == 'insert' || modeObj.mode == 'replace' ) {
kdHandlers.forEach( fn => {
editorcm.on( 'keydown', fn );
} else {
// We always copy the keydown handlers before removing them in case there is any change to them that we want to preserve
kdHandlers = [...editorcm._handlers['keydown']];
kdHandlers.forEach( fn => {
editorcm.off( 'keydown', fn );
Now, one has to redo the steps every time they want to reload the PlayCanvas editor but at least it works for the current editor. 
Best,
Lothrien
@Lothrien I am trying to run the same script, found it in the internet archives Wayback Machine: https://web.archive.org/web/20210208215746/https://codemirror.net/keymap/vim.js
I can import this script without any issues (not sure if it’s right version).
But when I execute script part from forum it crashes with errors. Document.querySelector( ‘.CodeMirror’ ) returns undefined value and there is no CodeMirror in the global namespace. @yaustar Might it be that playcanvas editor updated and it’s not using codemirror anymore? I see it’s using monaco instead
