Add keyboard binding option.

2 files changed, 27 insertions, 4 deletions

diff --git a/gn2/wqflask/templates/gn_editor.html b/gn2/wqflask/templates/gn_editor.html
index 4116c398..4d449b75 100644
--- a/gn2/wqflask/templates/gn_editor.html
+++ b/gn2/wqflask/templates/gn_editor.html
@@ -21,7 +21,7 @@
           <ul class="nav navbar-nav navbar-right">
             <li><a href="#" hx-get="/editor/commit" hx-target="#output" hx-trigger="click" hx-swap="innerHTML"  >Commit </a></li>
             <li><a href="#" hx-get="/editor/settings" hx-target="#output" hx-trigger="click" hx-swap="innerHTML"  >Settings </a></li>
-            <li><a href="#">Help</a></li>
+            <li><a href="https://github.com/ajaxorg/ace/wiki/Default-Keyboard-Shortcuts" target="_blank">Help</a></li>
           </ul>
         </div>
       </div>
@@ -73,7 +73,7 @@
           behavioursEnabled: true, // boolean: true if enable custom behaviours
           wrapBehavioursEnabled: true, // boolean
           autoScrollEditorIntoView: undefined, // boolean: this is needed if editor is inside scrollable
-          keyboardHandler: null, // function: handle custom keyboard events
+          keyboardHandler: "ace/keyboard/emacs",
 
           // renderer options
           animatedScroll: false, // boolean: true if scroll should be animated
@@ -96,7 +96,7 @@
           maxPixelHeight: 0, // number -> maxLines: set the maximum height in pixel, when 'maxLines' is defined.
           scrollPastEnd: 0, // number -> !maxLines: if positive, user can scroll pass the last line and go n * editorHeight more distance
           fixedWidthGutter: false, // boolean: true if the gutter should be fixed width
-          theme: "ace/theme/dracula", // theme string from ace/theme or custom?
+          theme: "ace/theme/text", // theme string from ace/theme or custom?
           scrollSpeed: 2, // number: the scroll speed index
           dragDelay: 0,
           dragEnabled: true, // boolean: enable dragging
diff --git a/gn2/wqflask/templates/gn_editor_settings.html b/gn2/wqflask/templates/gn_editor_settings.html
index 769fe23d..62ab4f6a 100644
--- a/gn2/wqflask/templates/gn_editor_settings.html
+++ b/gn2/wqflask/templates/gn_editor_settings.html
@@ -63,6 +63,26 @@
     </div>
   </form>
   <br>
+
+  <h4><i>Choose KeyBoard Binding:</i></h4>
+  <div class="form-check">
+    <input class="form-check-input" type="radio" name="keyboard" id="default" value="default" checked >
+    <label class="form-check-label" for="default">Default</label>
+  </div>
+
+  <div class="form-check">
+    <input class="form-check-input" type="radio" name="keyboard" id="vscode" value="vscode">
+    <label class="form-check-label" for="vscode">Vscode</label>
+  </div>
+  <div class="form-check">
+    <input class="form-check-input" type="radio" name="keyboard" id="emacs" value="emacs">
+    <label class="form-check-label" for="emacs">Emacs</label>
+  </div>
+  <div class="form-check">
+    <input class="form-check-input" type="radio" name="keyboard" id="vim" value="vim" >
+    <label class="form-check-label" for="vim">Vim</label>
+  </div>
+  <br>
   <div class="row">
     <div class="col-sm-offset-1">
       <button class="btn btn-primary" id="settingBtn">
@@ -85,7 +105,10 @@
           theme: `ace/theme/${$('input[name="theme"]:checked').val()}`,
           fontSize: parseInt($("#fontSizeRange").val()),
           wrap:$('input[name="wrap"]:checked').val()== "false" ? false : true,
-          cursorStyle: $('input[name="cursor"]:checked').val()
+          cursorStyle: $('input[name="cursor"]:checked').val(),
+          keyboardHandler:($('input[name="keyboard"]:checked').val()  == "default"?
+                           null: `ace/keyboard/${$('input[name="keyboard"]:checked').val()}`
+                          )
 
       }
       htmx.find("#output").dispatchEvent(