Can I use "vim mode" on playcanvas codeMirror?

Help & Support
1

I think codeMirror has vim mode option.
If I can, I want use vim mode :smiley:

2

I, too, am interested in using CodeMirror’s VIM mode in the online editor. Let me know if that’s possible.

Thanks,
Lothrien

3

I don’t think the bindings have been hookup up unfortunately. You could try using a browser extension instead but I don’t know how much that interferes with the existing bindings.

4

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. :slight_smile:

Best,
Lothrien

5

You can probably inject the JS code via a bookmarklet to make it into a one click process or use an extension like Userscripts

6

@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

7

correct, it uses Monaco.

8