From 7fe54043046e33b005fe90fe0f3e802b5bae972d Mon Sep 17 00:00:00 2001
From: Min <the7mincheol@gmail.com>
Date: Tue, 11 Mar 2025 00:03:04 +0900
Subject: [PATCH] add configuration of tab size

---
 electron/config.js                   |  2 ++
 src/components/settings/Settings.vue | 15 +++++++++++++++
 src/editor/editor.js                 | 10 +++++++++-
 src/stores/editor-cache.js           |  4 ++++
 4 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/electron/config.js b/electron/config.js
index f3ecd97..dad513c 100644
--- a/electron/config.js
+++ b/electron/config.js
@@ -35,6 +35,7 @@ const schema = {
             "showInMenu": {type: "boolean", default: false},
             "alwaysOnTop": {type: "boolean", default: false},
             "bracketClosing": {type: "boolean", default: false},
+            "tabSize": {type: "integer", default: 4},
             "defaultBlockLanguage": {type: "string"},
             "defaultBlockLanguageAutoDetect": {type: "boolean"},
 
@@ -72,6 +73,7 @@ const defaults = {
         showInMenu: false,
         alwaysOnTop: false,
         bracketClosing: false,
+        tabSize: 4,
     },
     theme: "system",
 }
diff --git a/src/components/settings/Settings.vue b/src/components/settings/Settings.vue
index f142b70..8c10838 100644
--- a/src/components/settings/Settings.vue
+++ b/src/components/settings/Settings.vue
@@ -40,6 +40,7 @@
                 showInMenu: this.initialSettings.showInMenu,
                 alwaysOnTop: this.initialSettings.alwaysOnTop,
                 bracketClosing: this.initialSettings.bracketClosing,
+                tabSize: this.initialSettings.tabSize || 4,
                 autoUpdate: this.initialSettings.autoUpdate,
                 bufferPath: this.initialSettings.bufferPath,
                 fontFamily: this.initialSettings.fontFamily || defaultFontFamily,
@@ -102,6 +103,7 @@
                     alwaysOnTop: this.alwaysOnTop,
                     autoUpdate: this.autoUpdate,
                     bracketClosing: this.bracketClosing,
+                    tabSize: this.tabSize,
                     bufferPath: this.bufferPath,
                     fontFamily: this.fontFamily === defaultFontFamily ? undefined : this.fontFamily,
                     fontSize: this.fontSize === defaultFontSize ? undefined : this.fontSize,
@@ -276,6 +278,19 @@
                                 </label>
                             </div>  
                         </div>
+                        <div class="row">
+                            <div class="entry">
+                                <h2>Tab Size</h2>
+                                <select v-model="tabSize" @change="updateSettings" class="tab-size">
+                                    <option
+                                        v-for="size in [1, 2, 3, 4, 5, 6, 7, 8]"
+                                        :key="size"
+                                        :selected="tabSize === size"
+                                        :value="size"
+                                    >{{ size }} {{ size === 1 ? 'space' : 'spaces' }}</option>
+                                </select>
+                            </div>
+                        </div>
                         <div class="row">
                             <div class="entry">
                                 <h2>Default Block Language</h2>
diff --git a/src/editor/editor.js b/src/editor/editor.js
index 749328a..38c8693 100644
--- a/src/editor/editor.js
+++ b/src/editor/editor.js
@@ -51,6 +51,7 @@ export class HeynoteEditor {
         bracketClosing=false,
         fontFamily,
         fontSize,
+        tabSize=4,
         defaultBlockToken,
         defaultBlockAutoDetect,
     }) {
@@ -63,6 +64,7 @@ export class HeynoteEditor {
         this.foldGutterCompartment = new Compartment
         this.readOnlyCompartment = new Compartment
         this.closeBracketsCompartment = new Compartment
+        this.indentUnitCompartment = new Compartment
         this.deselectOnCopy = keymap === "emacs"
         this.emacsMetaKey = emacsMetaKey
         this.fontTheme = new Compartment
@@ -91,7 +93,7 @@ export class HeynoteEditor {
                 this.themeCompartment.of(theme === "dark" ? heynoteDark : heynoteLight),
                 heynoteBase,
                 this.fontTheme.of(getFontTheme(fontFamily, fontSize)),
-                indentUnit.of("    "),
+                this.indentUnitCompartment.of(indentUnit.of(" ".repeat(tabSize))),
                 EditorView.scrollMargins.of(f => {
                     return {top: 80, bottom: 80}
                 }),
@@ -417,6 +419,12 @@ export class HeynoteEditor {
     selectAll() {
         selectAll(this.view)
     }
+
+    setTabSize(tabSize) {
+        this.view.dispatch({
+            effects: this.indentUnitCompartment.reconfigure(indentUnit.of(" ".repeat(tabSize)))
+        })
+    }
 }
 
 
diff --git a/src/stores/editor-cache.js b/src/stores/editor-cache.js
index 7badc2e..e8845c7 100644
--- a/src/stores/editor-cache.js
+++ b/src/stores/editor-cache.js
@@ -36,6 +36,7 @@ export const useEditorCacheStore = defineStore("editorCache", {
                     bracketClosing: settingsStore.settings.bracketClosing,
                     fontFamily: settingsStore.settings.fontFamily,
                     fontSize: settingsStore.settings.fontSize,
+                    tabSize: settingsStore.settings.tabSize,
                     defaultBlockToken: settingsStore.settings.defaultBlockLanguage,
                     defaultBlockAutoDetect: settingsStore.settings.defaultBlockLanguageAutoDetect,
                 })
@@ -137,6 +138,9 @@ export const useEditorCacheStore = defineStore("editorCache", {
                             case "fontSize":
                                 editor.setFont(newSettings.fontFamily, newSettings.fontSize)
                                 break
+                            case "tabSize":
+                                editor.setTabSize(newSettings.tabSize)
+                                break
                             case "defaultBlockLanguage":
                             case "defaultBlockLanguageAutoDetect":
                                 editor.setDefaultBlockLanguage(newSettings.defaultBlockLanguage, newSettings.defaultBlockLanguageAutoDetect)