Merge pull request #685 from mohamedelhefni/add-vim-support

feat(web): add support for vim keybindings

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();
 

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,
@@ -110,6 +111,9 @@ ORDER BY
           />
 
           <div class="heading">SQL editor</div>
+
+          <div class="flex">
+            <div class="col-3">
               <FormSelectField
                 label="SQL commands case"
                 name="sqlEditor.sqlCommandsCase"
@@ -120,6 +124,19 @@ ORDER BY
                   { value: 'lowerCase', label: 'lower case' },
                 ]}
               />
+            </div>
+            <div class="col-3">
+              <FormFieldTemplateLarge label="Editor keybinds" type="combo">
+                <SelectField
+                  isNative
+                  defaultValue="default"
+                  options={EDITOR_KEYBINDINGS_MODES.map(mode => ({ label: mode.label, value: mode.value }))}
+                  value={$currentEditorKeybindigMode}
+                  on:change={e => ($currentEditorKeybindigMode = e.detail)}
+                />
+              </FormFieldTemplateLarge>
+            </div>
+          </div>
         </svelte:fragment>
         <svelte:fragment slot="2">
           <div class="heading">Connection</div>

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');