☰

Overleaf Editor Custom VIM Keybindings (Code Mirror v6)

Configure a list of shortcuts for Vim-mode + user-defined :commands for toggling panels on Overleaf.

  1. // ==UserScript==
  2. // @name         Overleaf Editor Custom VIM Keybindings (Code Mirror v6)
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.1.1
  5. // @match        https://www.overleaf.com/project/*
  6. // @grant        none
  7. // @description  Configure a list of shortcuts for Vim-mode + user-defined :commands for toggling panels on Overleaf.
  8. // @license MIT
  9. // ==/UserScript==
  10.  
  11. /* globals jQuery, $, waitForKeyElements */
  12.  
  13. (function() {
  14.     'use strict';
  15.     // Interact with Writefull suggestion card.
  16.     setTimeout(function(){
  17.         var card;
  18.         var editor = window.editor
  19.         // Use ESC to dismiss the suggestion card
  20.         $(document).keyup(function(event){
  21.             switch(event.keyCode) {
  22.                 case 27:
  23.                     esc()
  24.                 case 96:
  25.                     esc()
  26.             }
  27.         });
  28.         function esc(){
  29.             card = $('.writefull-suggest-card');
  30.             if(card.css("display")=='flex'){
  31.                 card.css("display",'none')
  32.                 // Restore the focus back to ACE editor
  33.                 editor.focus() // side-effect - a side box is drawn
  34.             }
  35.         };
  36.  
  37.         var KeycodeMap = {49:1, 50:2, 82:'r', 65:"a", 57:9, 48:0}; // scancode to literal keys
  38.         $(document).keyup(function(event){
  39.              card = $('.writefull-suggest-card');
  40.                 if(card.css("display")=='flex'){
  41.  
  42.                     // If 1 is pressed - accept the current suggestion
  43.                     if (KeycodeMap[event.which] == 1){
  44.                     console.log('1 is pressed -> accepting the current instance')
  45.                     card.find('li.replacement').eq(0)[0].click();
  46.                     editor.focus()
  47.                     }
  48.  
  49.                     // If 2 is pressed - reject the current suggestion
  50.                     if (KeycodeMap[event.which] == 2){
  51.                     console.log('2 is pressed -> rejecting the current instance')
  52.                     card.find('li.replacement').eq(1)[0].click();
  53.                     editor.focus()
  54.                     }
  55.  
  56.                     // If 9 is pressed - accept all
  57.                     if (KeycodeMap[event.which] == 9){
  58.                     console.log('9 is pressed -> accept all is pressed')
  59.                     card.find('span.accept-all').click();
  60.                     editor.focus()
  61.                     }
  62.                     // If 0 is pressed - reject all
  63.                     if (KeycodeMap[event.which] == 0){
  64.                     console.log('0 is pressed -> reject all is pressed')
  65.                     card.find('span.reject-all').click();
  66.                     editor.focus()
  67.                     }
  68.  
  69.                     // TODO-1: use a and r to accept and reject.
  70.                     // Note, refer to TDOD-2 as well - need to block a/r from CodeMirror's vim.
  71.                 }
  72.         });
  73.     },2000);
  74.  
  75.     window.addEventListener("UNSTABLE_editor:extensions", (event) => {
  76.         const { CodeMirror, CodeMirrorVim, extensions } = event.detail;
  77.  
  78.         // Nullify keys used for choosing Writefull card (TODO-2)
  79.         // Reference: https://stackoverflow.com/a/24490849
  80.         // Task: condition the execution of key "a" and "r" based on whether the Writefull card is available.
  81.  
  82.         // Mappings in insert mode
  83.         CodeMirrorVim.Vim.map("<c-]>", "<Esc>", "insert");
  84.         CodeMirrorVim.Vim.map("jj", "<Esc>", "insert");
  85.         CodeMirrorVim.Vim.map("jk", "<Esc>", "insert");
  86.         // Remap in normal mode
  87.         /// To navigate through wrapped long lines
  88.         CodeMirrorVim.Vim.map("$", "g$", "normal");
  89.         CodeMirrorVim.Vim.map("0", "g0", "normal");
  90.         CodeMirrorVim.Vim.map("j", "gj", "normal");
  91.         CodeMirrorVim.Vim.map("k", "gk", "normal");
  92.  
  93.  
  94.  
  95.         // User-defined commands
  96.         CodeMirrorVim.Vim.defineEx("home", undefined, buctton_click_ProjectList);
  97.         CodeMirrorVim.Vim.defineEx("back", undefined, buctton_click_ProjectList);
  98.         CodeMirrorVim.Vim.defineEx("forward", undefined, buctton_click_forward_search); // ref: https://discuss.codemirror.net/t/vim-how-to-use-defineex/738/2
  99.         CodeMirrorVim.Vim.defineEx("pdf", undefined, buctton_click_toggle_pdf_panel);
  100.         CodeMirrorVim.Vim.defineEx("p", undefined, buctton_click_toggle_pdf_panel);
  101.         CodeMirrorVim.Vim.defineEx("toc", undefined, buctton_click_toggle_TOC_left_panel);
  102.         CodeMirrorVim.Vim.defineEx("only", undefined, buctton_click_toggle_editor_only);
  103.         CodeMirrorVim.Vim.defineEx("o", undefined, buctton_click_toggle_editor_only); // :o as :o[nly]
  104.         CodeMirrorVim.Vim.defineEx("re", undefined, writefull_rephrase); // :re[phrase]
  105.         // Access the functions by defining them as actions first
  106.         CodeMirrorVim.Vim.defineAction('jumpToPdf', buctton_click_forward_search);
  107.         CodeMirrorVim.Vim.defineAction('only', buctton_click_toggle_editor_only);
  108.         CodeMirrorVim.Vim.defineAction('toc', buctton_click_toggle_TOC_left_panel);
  109.         CodeMirrorVim.Vim.defineAction('WritefullPrevious', writefull_previous_error);
  110.         CodeMirrorVim.Vim.defineAction('WritefullNext', writefull_next_error);
  111.         CodeMirrorVim.Vim.defineAction('WritefullRephrase', writefull_rephrase);
  112.  
  113.         // forward search: from VimTeX, <localleader>lv
  114.         CodeMirrorVim.Vim.unmap(';');
  115.         CodeMirrorVim.Vim.mapCommand("\\lv", "action", "jumpToPdf");
  116.         CodeMirrorVim.Vim.mapCommand(";lv", 'action', 'jumpToPdf');
  117.         // Alternatively: use , as leader key
  118.         CodeMirrorVim.Vim.unmap(',');
  119.         CodeMirrorVim.Vim.mapCommand(",lv", 'action', 'jumpToPdf');
  120.         // quick toggles
  121.         CodeMirrorVim.Vim.mapCommand(",v", 'action', 'toc'); // <leader>v is from VimTeX
  122.         CodeMirrorVim.Vim.mapCommand(",o", 'action', 'only'); // <leader>o for :o[nly]
  123.  
  124.  
  125.         // Writefull shortcuts:
  126.         // Jump to suggested typo using Writefull, with [s and ]s
  127.         CodeMirrorVim.Vim.mapCommand("[s", 'action', 'WritefullPrevious');
  128.         CodeMirrorVim.Vim.mapCommand("]s", 'action', 'WritefullNext');
  129.         // Remap in visual mode - select a paragraph, press gr to trigger the rephrase tool
  130.         CodeMirrorVim.Vim.mapCommand("gr", "action", "WritefullRephrase", "visual");
  131.         // Next step:
  132.         // It would be nice to accept/reject the suggestion card using 1/a or 2/r, for example. Leave it for Writefull to build this for now (2023-03-02, 15:52)
  133.  
  134.  
  135.         // 2. Restore Ctrl+C to copy into system clipboard
  136.         // Solution: Undo mappings for Ctrl+C completely.
  137.         // Ref: https://discuss.codemirror.net/t/vim-how-to-copy-selected-text-in-visual-mode-with-ctrl-c-on-windows/5855/6
  138.         // Caveat: upon unmapping <C-c>, copying with Ctrl+C works. Yet, if one were to copy from Visual mode, an extract j/k movement is needed to "escape" from Visual mode.
  139.         CodeMirrorVim.Vim.unmap('<C-c>');
  140.         CodeMirrorVim.Vim.map("<C-c>", "<C-c><Esc>");
  141.     });
  142. })();
  143.  
  144. // Collection of functions
  145.  
  146. // Navigation releated functions
  147. function buctton_click_forward_search(cm) {
  148.     document.querySelector('.fa-arrow-right').click()
  149. };
  150. function buctton_click_toggle_pdf_panel(cm) {
  151.     document.querySelector('a[class*="custom-toggler-east"]').click()
  152. };
  153. function buctton_click_toggle_TOC_left_panel(cm) {
  154.     document.querySelector('a[tooltip*="the file-tree"]').click()
  155. };
  156. function buctton_click_toggle_editor_only(cm) {
  157.     // This is just the sum of the two: toggle toc and toggle pdf
  158.     document.querySelector('a[class*="custom-toggler-east"]').click()
  159.     document.querySelector('a[tooltip*="the file-tree"]').click()
  160. };
  161. function buctton_click_ProjectList(cm) {
  162.     document.querySelector('i[class*="fa-home"]').click()
  163. };
  164.  
  165. // Spell-checker specific functions
  166. function writefull_next_error(cm) {
  167.     document.querySelector('mwc-icon-button[id="writefull-next"]').click()
  168. }
  169. function writefull_previous_error(cm) {
  170.     document.querySelector('mwc-icon-button[id="writefull-previous"]').click()
  171. }
  172. function writefull_rephrase(cm) {
  173.     document.querySelector('mwc-icon-button[id="writefull-rephrase"]').click()
  174. }