VIM bindings in the code editor

Glitch Feedback
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);
}());
16 Likes
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:

2 Likes
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.

1 Like
4

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

1 Like
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?

3 Likes
8

Thank you so much for this! Now I can code on Glitch like I do anywhere else :star_struck:

1 Like
9

I tried turning this into a TamperMonkey script, but I’m getting a lot of this error:

EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self'

Reading about it makes me think I should have expected it.

I’m pretty new to TamperMonkey. Anyone have any workaround ideas?

10

@aninternetof yeah, Tampermonkey has a way to override Content Security Policy set in HTTP headers, but not one set in meta tags (which is what Glitch does). But if HTTP headers are fetched and enforced before the page gets loaded, meta CSP tags are only applied after they’re parsed. Tampermonkey has a settings tab in the userscript editor, you can go there and set “run at” option to “document-start”. This way Tampermonkey will run the script before CSP tags are parsed, so they won’t interfere.

If shameless self-advertisement is ok, I made this into a userscript and posted it here along with a few others, mentioning the workaround there too!

3 Likes
11

@wish Thanks for the explanation and the ready-made solution! Installed your script, changed the setting, and things are working great.

Next I’m going to try to add editorElement.CodeMirror.constructor.Vim.map('jk', '<Esc>', 'insert') to your script…

1 Like
12

The previous scripts were not working for me.

I created a new script: https://gist.github.com/aurelienbottazini/c2441113f8a6686e0fa1a2fc1f42020b
Add as a userscript in TamperMonkey and set script options: Run at: document-start

13

Here’s my enhanced version: glitch-vim.user.js

Features:

  • No setTimeout (succeeds even on a markdown preview)
  • Loads keymap/vim.js from cloudflare cdn (easier to update, reduced size)
  • New command! reload page (the editor) :reload
  • New command! refresh your app! :refresh
  • Blocks Ctrl-r from reloading the page
  • Ctrl-. toggles Vim
  • Styling of dialogs

Edit: and hosted on Glitch!

3 Likes