Userscript to enable Vim mode in most ServiceNow script fields. Also dynamically resizes the editor to fit content

sn-vimify.user.js

// ==UserScript==
// @name        SNOW CodeMirror Vim activator & embiggener
// @description Enables vim mode for ServiceNow in most script editor fields. Also enlarges the field!
// @namespace   https://gist.githubusercontent.com/chaorace/dc49a18f876a9814c8b27d637bfb4f44/raw/sn-vimify.user.js
// @updateURL   https://gist.githubusercontent.com/chaorace/dc49a18f876a9814c8b27d637bfb4f44/raw/sn-vimify.user.js
// @supportURL  https://gist.github.com/chaorace/dc49a18f876a9814c8b27d637bfb4f44
// @include     http://*.service-now.com/*
// @include     https://*.service-now.com/*
// @require     https://codemirror.net/3/keymap/vim.js
// @run-at      document-idle
// ==/UserScript==
(function() {
    // NOTE: This userscript will throw harmless errors if a given frame doesn't have a CodeMirror editor
    // This is something that happens during the loading phase for @require, so we can't suppress it
    if (typeof g_glideEditorArray !== 'undefined' && Array.isArray(g_glideEditorArray)){
        // Apply the below modifications to each major CodeMirror editor
        g_glideEditorArray.forEach((cm) => {
            // Drop the escape keybind that advances to the next field (obviously, we need escape for vim mode!)
            cm.editor.state.keyMaps = cm.editor.state.keyMaps.filter((x) => !x.Esc)
            // Actually set the keymap to the one previously loaded from our @require
            cm.editor.options.keyMap = 'vim'
            // An infinite viewport margin lets the editor grow with content
            cm.editor.options.viewportMargin = Infinity
            // Set the max height to 2/3rds of a screen height
            cm.editor.getScrollerElement().style.maxHeight = '66vh'
        })
    }
})()

The URL for codemirror Vim keymaps has changed to https://codemirror.net/3/keymap/vim.js. Can you please update your gist to the same?

@adarsh-kishore786 Updated! Thanks for the heads up

It doesn't work for me. I opened a random script include on my personal developer instance and the code editor is still acting the same as before. Is something else also required to be done after I upload this userscript to Violentmonkey extension?

Has ServiceNow changed its code editor from CodeMirror to Monaco?

@adarsh-kishore786 I believe the Monaco editor is the CodeMirror editor. Assuming this script used to work for you, you most likely need to ask ViolentMonkey to purge the old @require download. I don't use ViolentMonkey and I can't find documentation for this, so I'm afraid you'll need to find the button/option for this by exploring the ViolentMonkey UI.

If this script never worked for you, please check your web console for errors/warnings and share here. Thanks!

@chaorace The script has never worked for me before. Can I ask how you vimify your code editor with this userscript without ViolentMonkey?

Uncaught ReferenceError: CodeMirror is not defined
    at SNOW CodeMirror Vim activator & embiggener.user.js:4162:3
    at SNOW CodeMirror Vim activator & embiggener.user.js:4164:2
    at VMnicvhfhnuw (SNOW CodeMirror Vim activator & embiggener.user.js:4193:7)
    at Yt (injected-web.js:1:15586)
    at SNOW CodeMirror Vim activator & embiggener.user.js:1:20
    at async Gt (injected.js:1:8860)
    at async injected.js:1:14358

I am getting this error in the console @chaorace. Any idea what this means?

@adarsh-kishore786

Can I ask how you vimify your code editor with this userscript without ViolentMonkey?

"Userscripts" -- which are what ViolentMonkey loads -- were originally invented 19 years ago by the Firefox addon "Greasemonkey". GreaseMonkey was never ported to other web browsers, so eventually alternative browser extensions were created (such as ViolentMonkey) in order to enable installing Greasemonkey userscripts on other browsers.

To make a long story short: userscripts are a sort of unofficial standard with several cross-compatible implementations. I don't use ViolentMonkey because the browser I use (qutebrowser) can install userscripts out-of-box without requiring any extra extensions.

On that note: it's quite possible that the reason it works on my machine and not yours is some heretofore unnoticed cross-compatibility issue in Qutebrowser's userscript code. This is pretty hard to test for, so we should first pursue other lower-hanging fruit.

I am getting this error in the console @chaorace. Any idea what this means?

This error indicates that the injected code from https://codemirror.net/3/keymap/vim.js could not find an instance of CodeMirror loaded in the webframe. This error in and of itself isn't strictly unexpected -- we attempt loading the vim keymap code in every webframe on the page, even those that don't have any code editors in them. Indeed, there's a remark about this issue in the code comment on line 13.

Of course, it's also possible that this error is the cause of your problem. It depends on if the specific frame this error originated from had a codemirror editor or not. Naturally, if there is a code editor in the frame, then seeing this error come from the same frame would indicate an issue.

We can find out more if we attempt loading the userscript in a page that we can guarantee has exactly one frame in it (i.e.: no soft tabs, no application navigator, no Polaris toolbar). Please follow these steps on your PDI:

1. Open any page on your PDI to make sure you're already authenticated.
2. Navigate to this URL: https://[PDI ID].service-now.com/sys_script_include.do?sys_id=595cfcd50ab301570068b5007a26bd1c.
3. Once the page is loaded, double-check and confirm that you're seeing only the script include page without any extra sidebars or toolbars.
4. Attempt keybinds for switching between normal/insert mode in the code editor (Esc, i, etc.).
5. Check the web console for any error messages.

@chaorace as per your instructions

1. I logged on to my PDI and navigated to the URL that you had mentioned.
2. Then I zoomed out the page so that there would be no scrollbar.
3. I also switched off the line numbering and removed the toolbar inside the code editor by removing all the pre-existing code there.

If there is anything I missed, then please tell me, because although there was no error in the web console but the vim bindings were not working, the code editor was acting the same as before.

@adarsh-kishore786 Steps #2 & #3 were not necessary. The scrollbars and the code editor toolbar are normal and no action is required there.

Can you share a screenshot of the page?

If it helps to know, I am also using the extensions Vimium C and SN Utils, although for testing I disabled both of them and it was still not working.