From 7c87baf45100bc05364e546b9bc0a25d572c5229 Mon Sep 17 00:00:00 2001
From: Jan Prochazka <jan.prochazka@gmail.com>
Date: Fri, 19 Aug 2022 15:10:04 +0200
Subject: [PATCH] custom editor size #345

---
 packages/web/src/forms/TextField.svelte       |  1 +
 packages/web/src/query/AceEditor.svelte       |  3 ++-
 .../web/src/settings/SettingsModal.svelte     | 20 +++++++++++++++----
 3 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/packages/web/src/forms/TextField.svelte b/packages/web/src/forms/TextField.svelte
index 2200f01c..55f9a350 100644
--- a/packages/web/src/forms/TextField.svelte
+++ b/packages/web/src/forms/TextField.svelte
@@ -14,6 +14,7 @@
   bind:value
   on:change
   on:input
+  on:click
   bind:this={domEditor}
   on:keydown
   autocomplete="new-password"
diff --git a/packages/web/src/query/AceEditor.svelte b/packages/web/src/query/AceEditor.svelte
index abcb000d..cf18ea1d 100644
--- a/packages/web/src/query/AceEditor.svelte
+++ b/packages/web/src/query/AceEditor.svelte
@@ -49,6 +49,7 @@
     { label: '15', value: '15' },
     { label: '16', value: '16' },
     { label: '17', value: '17' },
+    { label: 'Custom', value: 'custom' },
   ];
 </script>
 
@@ -433,7 +434,7 @@
     });
     defaultFontSize = editor.getFontSize();
     if ($currentEditorFontSize) {
-      editor.setFontSize($currentEditorFontSize);
+      editor.setFontSize(parseInt($currentEditorFontSize) || 12);
     }
 
     editor.on('changeSelection', () => {
diff --git a/packages/web/src/settings/SettingsModal.svelte b/packages/web/src/settings/SettingsModal.svelte
index 97e45b63..99e0ca35 100644
--- a/packages/web/src/settings/SettingsModal.svelte
+++ b/packages/web/src/settings/SettingsModal.svelte
@@ -11,6 +11,7 @@
   import FormValues from '../forms/FormValues.svelte';
   import SelectField from '../forms/SelectField.svelte';
   import SettingsFormProvider from '../forms/SettingsFormProvider.svelte';
+  import TextField from '../forms/TextField.svelte';
   import FontIcon from '../icons/FontIcon.svelte';
 
   import ModalBase from '../modals/ModalBase.svelte';
@@ -128,7 +129,7 @@ ORDER BY
           <div class="heading">Editor theme</div>
 
           <div class="flex">
-            <div class="col-4">
+            <div class="col-3">
               <FormFieldTemplateLarge label="Theme" type="combo">
                 <SelectField
                   isNative
@@ -140,19 +141,30 @@ ORDER BY
               </FormFieldTemplateLarge>
             </div>
 
-            <div class="col-4">
+            <div class="col-3">
               <FormFieldTemplateLarge label="Font size " type="combo">
                 <SelectField
                   isNative
                   notSelected="(default)"
                   options={FONT_SIZES}
-                  value={$currentEditorFontSize}
+                  value={FONT_SIZES.find(x => x.value == $currentEditorFontSize) ? $currentEditorFontSize : 'custom'}
                   on:change={e => ($currentEditorFontSize = e.detail)}
                 />
               </FormFieldTemplateLarge>
             </div>
 
-            <div class="col-4">
+            <div class="col-3">
+              <FormFieldTemplateLarge label="Custom size " type="text">
+                <TextField
+                  value={$currentEditorFontSize == 'custom' ? '' : $currentEditorFontSize}
+                  on:change={e => ($currentEditorFontSize = e.target['value'])}
+                  disabled={!!FONT_SIZES.find(x => x.value == $currentEditorFontSize) &&
+                    $currentEditorFontSize != 'custom'}
+                />
+              </FormFieldTemplateLarge>
+            </div>
+
+            <div class="col-3">
               <FormTextField name="editor.fontFamily" label="Editor font family" />
             </div>
           </div>