Skip to content

Instantly share code, notes, and snippets.

@jonchurch
Last active April 18, 2021 01:57
Show Gist options
  • Save jonchurch/4c984d8f4daf67484ef879244bbe4d43 to your computer and use it in GitHub Desktop.
Save jonchurch/4c984d8f4daf67484ef879244bbe4d43 to your computer and use it in GitHub Desktop.
Vim Bindings for Glitch.com editor
// Load your Glitch project, paste this into the javascript console of chrome inspect
// Enjoy vim goodness!
(function () {
var makeCursorFat = function() {
var style = document.createElement('style');
style.textContent =
'div.CodeMirror div.CodeMirror-cursor { ' +
'width: auto; ' +
'border: 0; ' +
'background: transparent; ' +
'background: rgba(0, 200, 0, .4); ' +
'} ';
document.head.appendChild(style);
}
var addScript = function(callback) {
var scr = document.createElement('script');
scr.src = 'https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.22.0/keymap/vim.js';
scr.onload = callback;
document.head.appendChild(scr);
}
var retryInterval = 1000;
var vimify = function () {
var editorElement = document.querySelector('#text-editor > div.CodeMirror');
if (editorElement) {
editorElement.CodeMirror.options.keyMap = 'vim';
editorElement.CodeMirror.options.showCursorWhenSelecting = 'vim';
makeCursorFat();
console.log('VIMification complete!');
} else{
retryInterval = retryInterval * 2;
if (retryInterval < 20000) {
console.log('Retrying to VIMify... ' + retriesLeft);
window.setTimeout(vimify, retryInterval);
}
return;
}
};
addScript(vimify);
}());
@jonchurch
Copy link
Author

I found this here in the Gomix community forums, posted by user wolfascu
Thank you!

@jonchurch
Copy link
Author

CodeMirror.Vim.map('jk', '', 'insert')

@hbradio
Copy link

hbradio commented Nov 1, 2018

Thanks!
I had more luck with CodeMirror.Vim.map('jk', '<Esc>', 'insert') (stolen from here).

@ggorlen
Copy link

ggorlen commented Sep 28, 2019

This is awesome, thanks. I recommend adding ; after the makeCursorFat and addScript definitions (lines 15 and 22). This prevents Unexpected token 'var' if made into a single line of code (for example, in a bookmarklet).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment