From 090329593e457ff95cc8452b3546f3740b8ab6e7 Mon Sep 17 00:00:00 2001
From: Mohamed Elhefni <elhefnymohamed446@gmail.com>
Date: Sat, 6 Jan 2024 14:06:40 +0200
Subject: [PATCH] feat(web): add support for vim keybindings

---
 packages/web/src/query/AceEditor.svelte       | 21 +++++++++++++++++++
 .../web/src/settings/SettingsModal.svelte     | 17 ++++++++++++++-
 packages/web/src/stores.ts                    |  3 +++
 3 files changed, 40 insertions(+), 1 deletion(-)

diff --git a/packages/web/src/query/AceEditor.svelte b/packages/web/src/query/AceEditor.svelte
index d9a1c909..4f12a1dc 100644
--- a/packages/web/src/query/AceEditor.svelte
+++ b/packages/web/src/query/AceEditor.svelte
@@ -38,6 +38,11 @@
     'twilight',
   ];
 
+  export const EDITOR_KEYBINDINGS_MODES = [
+    { label: 'Default', value: 'default' },
+    { label: 'Vim', value: 'vim' },
+  ];
+
   export const FONT_SIZES = [
     { label: '8', value: '8' },
     { label: '9', value: '9' },
@@ -116,6 +121,7 @@
   import 'ace-builds/src-noconflict/theme-tomorrow_night_eighties';
   import 'ace-builds/src-noconflict/theme-tomorrow_night';
   import 'ace-builds/src-noconflict/theme-twilight';
+  import 'ace-builds/src-noconflict/keybinding-vim';
 
   import {
     currentDropDownMenu,
@@ -123,11 +129,13 @@
     currentEditorFont,
     currentEditorTheme,
     currentThemeDefinition,
+    currentEditorKeybindigMode,
   } from '../stores';
   import _ from 'lodash';
   import { handleCommandKeyDown } from '../commands/CommandListener.svelte';
   import resizeObserver from '../utility/resizeObserver';
   import queryParserWorkerFallback from './queryParserWorkerFallback';
+  import { key } from 'localforage';
 
   const EDITOR_ID = `svelte-ace-editor-div:${Math.floor(Math.random() * 10000000000)}`;
   const dispatch = createEventDispatcher<{
@@ -182,6 +190,7 @@
   };
 
   $: theme = $currentEditorTheme || ($currentThemeDefinition?.themeType == 'dark' ? 'merbivore' : 'github');
+  $: keyBindingMode = $currentEditorKeybindigMode || null;
   $: watchEditorFontSize($currentEditorFontSize);
 
   export function getEditor(): ace.Editor {
@@ -239,6 +248,17 @@
     }
   }
 
+  $: watchKeyBindingMode(keyBindingMode);
+  function watchKeyBindingMode(newMode: string) {
+    if (editor) {
+      if (newMode == 'default') {
+        editor.setKeyboardHandler(null);
+      } else {
+        editor.setKeyboardHandler('ace/keyboard/' + newMode);
+      }
+    }
+  }
+
   $: watchMode(mode);
   function watchMode(newOption: any) {
     if (editor) {
@@ -449,6 +469,7 @@
 
     editor.container.addEventListener('contextmenu', handleContextMenu);
     editor.keyBinding.addKeyboardHandler(handleKeyDown);
+    editor.setKeyboardHandler(keyBindingMode == 'default' ? null : 'ace/keyboard/' + keyBindingMode);
     editor.renderer.setScrollMargin(2, 0);
     changedQueryParts();
 
diff --git a/packages/web/src/settings/SettingsModal.svelte b/packages/web/src/settings/SettingsModal.svelte
index a43713e2..000ea304 100644
--- a/packages/web/src/settings/SettingsModal.svelte
+++ b/packages/web/src/settings/SettingsModal.svelte
@@ -17,11 +17,12 @@
 
   import ModalBase from '../modals/ModalBase.svelte';
   import { closeCurrentModal } from '../modals/modalTools';
-  import { EDITOR_THEMES, FONT_SIZES } from '../query/AceEditor.svelte';
+  import { EDITOR_KEYBINDINGS_MODES, EDITOR_THEMES, FONT_SIZES } from '../query/AceEditor.svelte';
   import SqlEditor from '../query/SqlEditor.svelte';
   import {
     currentEditorFontSize,
     currentEditorTheme,
+    currentEditorKeybindigMode,
     extensions,
     selectedWidget,
     lockedDatabaseMode,
@@ -219,6 +220,20 @@ ORDER BY
             </div>
           </div>
 
+          <div class="flex">
+            <div class="col-3">
+              <FormFieldTemplateLarge label="Mode" type="combo">
+                <SelectField
+                  isNative
+                  notSelected="(use Default)"
+                  options={EDITOR_KEYBINDINGS_MODES.map(mode => ({ label: mode.label, value: mode.value }))}
+                  value={$currentEditorKeybindigMode}
+                  on:change={e => ($currentEditorKeybindigMode = e.detail)}
+                />
+              </FormFieldTemplateLarge>
+            </div>
+          </div>
+
           <div class="editor">
             <SqlEditor value={sqlPreview} readOnly />
           </div>
diff --git a/packages/web/src/stores.ts b/packages/web/src/stores.ts
index 94751c66..d6cc249b 100644
--- a/packages/web/src/stores.ts
+++ b/packages/web/src/stores.ts
@@ -96,6 +96,9 @@ export const currentTheme = getElectron()
 export const currentEditorTheme = getElectron()
   ? writableSettingsValue(null, 'currentEditorTheme')
   : writableWithStorage(null, 'currentEditorTheme');
+export const currentEditorKeybindigMode = getElectron()
+  ? writableSettingsValue(null, 'currentEditorKeybindigMode')
+  : writableWithStorage(null, 'currentEditorKeybindigMode');
 export const currentEditorFontSize = getElectron()
   ? writableSettingsValue(null, 'currentEditorFontSize')
   : writableWithStorage(null, 'currentEditorFontSize');