configurable editor font #308

packages/web/src/query/AceEditor.svelte

@@ -114,7 +114,13 @@
   import 'ace-builds/src-noconflict/theme-tomorrow_night';
   import 'ace-builds/src-noconflict/theme-twilight';
 
-  import { currentDropDownMenu, currentEditorFontSize, currentEditorTheme, currentThemeDefinition } from '../stores';
+  import {
+    currentDropDownMenu,
+    currentEditorFontSize,
+    currentEditorFont,
+    currentEditorTheme,
+    currentThemeDefinition,
+  } from '../stores';
   import _ from 'lodash';
   import { handleCommandKeyDown } from '../commands/CommandListener.svelte';
   import resizeObserver from '../utility/resizeObserver';
@@ -223,12 +229,15 @@
     }
   }
 
-  $: watchOptions(options);
-  function watchOptions(newOption: any) {
+  $: watchOptions(options, $currentEditorFont);
+  function watchOptions(newOption: any, fontFamily) {
     if (editor) {
       editor.setOptions({
         ...stdOptions,
         ...newOption,
+        fontFamily: fontFamily || 'Menlo, Monaco, Ubuntu Mono, Consolas, source-code-pro, monospace',
+        // fontFamily: 'tahoma,Menlo',
+        // fontSize: '10pt',
       });
     }
   }

packages/web/src/settings/SettingsModal.svelte

@@ -127,7 +127,7 @@ ORDER BY
           <div class="heading">Editor theme</div>
 
           <div class="flex">
-            <div class="col-6">
+            <div class="col-4">
               <FormFieldTemplateLarge label="Theme" type="combo">
                 <SelectField
                   isNative
@@ -139,7 +139,7 @@ ORDER BY
               </FormFieldTemplateLarge>
             </div>
 
-            <div class="col-6">
+            <div class="col-4">
               <FormFieldTemplateLarge label="Font size " type="combo">
                 <SelectField
                   isNative
@@ -150,6 +150,10 @@ ORDER BY
                 />
               </FormFieldTemplateLarge>
             </div>
+
+            <div class="col-4">
+              <FormTextField name="editor.fontFamily" label="Editor font family" />
+            </div>
           </div>
 
           <div class="editor">

packages/web/src/stores.ts

@@ -68,6 +68,7 @@ export const currentEditorTheme = getElectron()
 export const currentEditorFontSize = getElectron()
   ? writableSettingsValue(null, 'currentEditorFontSize')
   : writableWithStorage(null, 'currentEditorFontSize');
+export const currentEditorFont = writableSettingsValue(null, 'editor.fontFamily');
 export const activeTabId = derived([openedTabs], ([$openedTabs]) => $openedTabs.find(x => x.selected)?.tabid);
 export const activeTab = derived([openedTabs], ([$openedTabs]) => $openedTabs.find(x => x.selected));
 export const recentDatabases = writableWithStorage([], 'recentDatabases');