VIM bindings in the code editor


#1

It would be nice to have the option of enabling VIM bindings in the CodeMirror editor.

Since I want this so much, I have created a script that I automatically run on each gomix.com page load that does just that.
Here it is in case someone else wants it:

(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);
}());

#2

How are you running the script? Is this pasted in your browser console?

EDIT: Yep, run it by opening a gomix project and paste it into your browser console :thumbsup: This is really fun!
Thanks for doing this :heart_eyes_cat:


#3

Jon, I’m glad you like it. :smile:

Yes, one way is to paste the script in the console.
You can, however, run it with an extension like TamperMonkey. I use this extension I’ve built for Chrome, which is essentially a super simplified TamperMonkey.


#4

idk if bumping works in this forum, but would love for more people to see this!


#5

I’m very glad you found it useful! :smile:


#6

Thanks! It works great.


#7

This is really nice. Thank you for the time you put into this.

Would Glitch/FogCreek be interested in providing this feature officially rather than for users having to resort to hacks?


Vim support for editor