add support for vim in the editor

g-w1 · g-w1 · commit 4b71b3b1868c · 2024-09-14T18:18:19.000-04:00
diff --git a/Makefile b/Makefile
@@ -151,6 +151,9 @@ build/web/js/require.js: node_modules/requirejs/require.js
 build/web/js/codemirror.js: $(CM)/lib/codemirror.js
 	cp $< $@
 
+build/web/js/codemirror-vim.js: $(CM)/keymap/vim.js
+	cp $< $@
+
 build/web/js/rulers.js: $(CM)/addon/display/rulers.js
 	cp $< $@
 
@@ -209,6 +212,7 @@ MISC_JS = build/web/js/q.js \
 	   build/web/js/url.js \
 	   build/web/js/require.js \
 	   build/web/js/codemirror.js \
+	   build/web/js/codemirror-vim.js \
 	   build/web/js/rulers.js \
 	   build/web/js/mark-selection.js \
 	   build/web/js/pyret-mode.js \
@@ -236,6 +240,7 @@ MISC_JS = build/web/js/q.js \
 EDITOR_MISC_JS = build/web/js/q.js \
 		  build/web/js/loader.js \
 		  build/web/js/codemirror.js \
+		  build/web/js/codemirror-vim.js \
 		  build/web/js/rulers.js \
 		  build/web/js/scrollpastend.js \
 		  build/web/js/foldcode.js \
diff --git a/src/web/editor.html b/src/web/editor.html
@@ -29,6 +29,7 @@
 <body class="default">
   <script>
     var themeOnLoad = localSettings.getItem('theme') || 'default';
+    var keybindOnLoad = localSettings.getItem('keybind') || 'default';
     document.body.classList.remove("default");
     document.body.classList.add(themeOnLoad);
     var params = {};
@@ -64,6 +65,7 @@
     }
     window.addEventListener('load', function() {
       document.getElementById('theme-select').value = themeOnLoad;
+      document.getElementById('keybind-select').value = keybindOnLoad;
     }, { once: true });
   </script>
   <main>
@@ -205,6 +207,13 @@ <h2 id="menutitle" class="screenreader-only">Navigation Controls</h2>
                 <option value="high-contrast-dark">High Contrast Dark</option>
               </select>
             </li>
+            <li id="keybinds" role="presentation" style="white-space: nowrap;">
+              <label for="keybind-select">Key bindings:</label>
+              <select id="keybind-select">
+                <option value="default">Default</option>
+                <option value="vim">Vim</option>
+              </select>
+            </li>
           </ul>
         </li>
 
diff --git a/src/web/js/beforePyret.js b/src/web/js/beforePyret.js
@@ -188,20 +188,24 @@ $(function() {
     const mac = CodeMirror.keyMap.default === CodeMirror.keyMap.macDefault;
     const modifier = mac ? "Cmd" : "Ctrl";
 
-    var cmOptions = {
-      extraKeys: CodeMirror.normalizeKeyMap({
+    defaultKeyMap = CodeMirror.normalizeKeyMap({
         "Shift-Enter": function(cm) { runFun(cm.getValue()); },
         "Shift-Ctrl-Enter": function(cm) { runFun(cm.getValue()); },
         "Tab": "indentAuto",
         "Ctrl-I": reindentAllLines,
-        "Esc Left": "goBackwardSexp",
         "Alt-Left": "goBackwardSexp",
-        "Esc Right": "goForwardSexp",
         "Alt-Right": "goForwardSexp",
         "Ctrl-Left": "goBackwardToken",
         "Ctrl-Right": "goForwardToken",
         [`${modifier}-/`]: "toggleComment",
-      }),
+    });
+    CPO.noVimKeyMap = CodeMirror.normalizeKeyMap({
+        "Esc Left": "goBackwardSexp",
+        "Esc Right": "goForwardSexp",
+    });
+
+    var cmOptions = {
+      extraKeys: defaultKeyMap,
       indentUnit: 2,
       tabSize: 2,
       viewportMargin: Infinity,
@@ -221,6 +225,8 @@ $(function() {
     cmOptions = merge(cmOptions, options.cmOptions || {});
 
     var CM = CodeMirror.fromTextArea(textarea[0], cmOptions);
+    // we do this separately so we can more easily add and remove it for vim mode
+    CM.addKeyMap(CPO.noVimKeyMap);
 
     function firstLineIsNamespace() {
       const firstline = CM.getLine(0);
diff --git a/src/web/js/cpo-main.js b/src/web/js/cpo-main.js
@@ -498,6 +498,36 @@
       localSettings.change("theme", function(_, newTheme) {
         applyTheme(newTheme);
       });
+
+      var curKeybind = document.getElementById("keybind-select").value;
+      var keybindSelect = $("#keybind-select");
+
+      function applyKeybind(keybinding) {
+        var cm = CPO.editor.cm;
+        cm.state.keyMaps = [];
+        if (keybinding !== 'vim') {
+          cm.addKeyMap(CPO.noVimKeyMap, true);
+        }
+        curKeybind = keybinding;
+        cm.setOption('keyMap', curKeybind);
+      }
+
+      if (localSettings.getItem('keybind') !== null) {
+        applyKeybind(localSettings.getItem('keybind'));
+      } else {
+        localSettings.setItem('keybind', curKeybind);
+      }
+
+      $("#keybinds").change(function(e) {
+        var value = e.target.value;
+        applyKeybind(value);
+
+        localSettings.setItem("keybind", curKeybind);
+      });
+
+      localSettings.change("keybind", function(_, newKeybinds) {
+        applyKeybind(newKeybinds);
+      });
       
       $('.notificationArea').click(function() {$('.notificationArea span').fadeOut(1000);});
 
