feat: allows adjustable tab size in file editor (#1354)

src/components/inputs/Codemirror.vue

@@ -19,6 +19,7 @@ import { gcode } from '@/plugins/StreamParserGcode'
 import { indentWithTab } from '@codemirror/commands'
 import { json } from '@codemirror/lang-json'
 import { css } from '@codemirror/lang-css'
+import { indentUnit } from '@codemirror/language'
 
 @Component
 export default class Codemirror extends Mixins(BaseMixin) {
@@ -83,6 +84,7 @@ export default class Codemirror extends Mixins(BaseMixin) {
         const extensions = [
             basicSetup,
             mainsailTheme,
+            indentUnit.of(' '.repeat(this.getTabSize())),
             keymap.of([indentWithTab]),
             EditorView.updateListener.of((update) => {
                 this.content = update.state?.doc.toString()
@@ -103,5 +105,9 @@ export default class Codemirror extends Mixins(BaseMixin) {
     visibilityChanged(isVisible: boolean) {
         if (isVisible) this.cminstance?.focus()
     }
+
+    getTabSize() {
+        return this.$store.state.gui.editor.tabSize || 2
+    }
 }
 </script>

src/components/settings/SettingsEditorTab.vue

@@ -15,6 +15,15 @@
                     :dynamic-slot-width="true">
                     <v-switch v-model="confirmUnsavedChanges" hide-details class="mt-0"></v-switch>
                 </settings-row>
+
+                <v-divider class="my-2"></v-divider>
+                <settings-row
+                    :title="$t('Settings.EditorTab.TabSize')"
+                    :sub-title="$t('Settings.EditorTab.TabSizeDescription')"
+                    :dynamic-slot-width="true">
+                    <v-select v-model="tabSize" :items="tabSizes" hide-details outlined dense attached></v-select>
+                </settings-row>
+
                 <v-divider class="my-2"></v-divider>
                 <settings-row
                     :title="$t('Settings.EditorTab.KlipperRestartMethod')"
@@ -67,6 +76,14 @@ export default class SettingsEditorTab extends Mixins(BaseMixin) {
         },
     ]
 
+    get tabSizes() {
+        const spaces = [2, 4, 6, 8]
+        return spaces.map((space) => ({
+            text: this.$t('Settings.EditorTab.Spaces', { count: space }),
+            value: space,
+        }))
+    }
+
     get escToClose() {
         return this.$store.state.gui.editor.escToClose
     }
@@ -83,6 +100,14 @@ export default class SettingsEditorTab extends Mixins(BaseMixin) {
         this.$store.dispatch('gui/saveSetting', { name: 'editor.confirmUnsavedChanges', value: newVal })
     }
 
+    get tabSize() {
+        return this.$store.state.gui.editor.tabSize || 2
+    }
+
+    set tabSize(newVal) {
+        this.$store.dispatch('gui/saveSetting', { name: 'editor.tabSize', value: newVal })
+    }
+
     get klipperRestartMethod() {
         return this.$store.state.gui.editor.klipperRestartMethod
     }

src/locales/de.json

@@ -799,7 +799,10 @@
             "MoonrakerRestartInstance": "Moonraker Neustartinstanz",
             "MoonrakerRestartInstanceDescription": "Wähle aus, welche Moonrakerinstanz neu gestartet werden soll wenn 'Speichern & Neustarten' im Editor geklickt wird.",
             "UseEscToClose": "ESC drücken um Editor zu schließen",
-            "UseEscToCloseDescription": "Erlaubt es den Editor mit ESC zu schließen."
+            "UseEscToCloseDescription": "Erlaubt es den Editor mit ESC zu schließen.",
+            "TabSize": "TAB Größe",
+            "TabSizeDescription": "Legt fest, um wie viele Leerzeichen für TAB eingerückt werden sollen",
+            "Spaces": "Leerzeichen: {count}"
         },
         "GCodeViewerTab": {
             "BackgroundColor": "Hintergrundfarbe",

src/locales/en.json

@@ -804,7 +804,10 @@
             "MoonrakerRestartInstance": "Moonraker restart instance",
             "MoonrakerRestartInstanceDescription": "Select which Moonraker service will restart on 'Save & Restart' when editing Moonraker config files.",
             "UseEscToClose": "Use ESC to close editor",
-            "UseEscToCloseDescription": "Allows the ESC key to close the editor"
+            "UseEscToCloseDescription": "Allows the ESC key to close the editor",
+            "TabSize": "TAB Size",
+            "TabSizeDescription": "Adjusts how many spaces should be indented for TAB",
+            "Spaces": "Spaces: {count}"
         },
         "GCodeViewerTab": {
             "BackgroundColor": "Background Color",

src/locales/hu.json

@@ -725,7 +725,10 @@
             "MoonrakerRestartInstance": "Moonraker példány Újraindítása",
             "MoonrakerRestartInstanceDescription": "Válaszd ki melyik Moonraker szolgáltatást indítsuk újra a 'Ment és Újraindít' esetén, amikor a Moonraker konfig fájlait szerkeszted.",
             "UseEscToClose": "Kilépéshez nyomd meg az ESC gombot",
-            "UseEscToCloseDescription": "Az ESC gomb megnyomása bezárja a szerkesztőt"
+            "UseEscToCloseDescription": "Az ESC gomb megnyomása bezárja a szerkesztőt",
+            "TabSize": "TAB Méret",
+            "TabSizeDescription": "Beállítja, hogy hány szóközzel legyen behúzva a TAB-oknál",
+            "Spaces": "Szóközök: {count}"
         },
         "GCodeViewerTab": {
             "BackgroundColor": "Háttérszín",

src/locales/ru.json

@@ -726,7 +726,10 @@
             "MoonrakerRestartInstance": "Инстанция перезапуска Moonraker",
             "MoonrakerRestartInstanceDescription": "Выберите, какая служба Moonraker будет перезапускаться при 'Save & Restart' при редактировании файлов конфигурации Moonraker.",
             "UseEscToClose": "Нажмите ESC, чтобы закрыть редактор",
-            "UseEscToCloseDescription": "Позволяет закрыть редактор с помощью ESC."
+            "UseEscToCloseDescription": "Позволяет закрыть редактор с помощью ESC.",
+            "TabSize": "Размер TAB",
+            "TabSizeDescription": "Регулирует, сколько пробелов должно быть отступом для TAB",
+            "Spaces": "Пробе́лов: {count}"
         },
         "GCodeViewerTab": {
             "BackgroundColor": "Цвет фона",

src/store/gui/index.ts

@@ -111,6 +111,7 @@ export const getDefaultState = (): GuiState => {
             escToClose: true,
             confirmUnsavedChanges: true,
             klipperRestartMethod: 'FIRMWARE_RESTART',
+            tabSize: 2,
             moonrakerRestartInstance: null,
         },
         gcodeViewer: {

src/store/gui/types.ts

@@ -59,6 +59,7 @@ export interface GuiState {
         escToClose: boolean
         confirmUnsavedChanges: boolean
         klipperRestartMethod: 'FIRMWARE_RESTART' | 'RESTART'
+        tabSize: number
         moonrakerRestartInstance: string | null
     }
     gcodeViewer: {