feat: make tab size configurable (#442)

* feat: make tab size configurable

* fix: ensure default tab size present

Author: x1unix

web/src/components/features/settings/SettingsModal.tsx

@@ -49,7 +49,7 @@ const modalStyles = {
 const pivotStyles: Partial<IPivotStyles> = {
   itemContainer: {
     // Set height to highest of pivots. See: #371
-    minHeight: 490,
+    minHeight: 567,
   },
 }
 
@@ -223,6 +223,25 @@ class SettingsModal extends ThemeableComponent<Props, SettingsModalState> {
                 />
               }
             />
+            <SettingsProperty
+              key="tabSize"
+              title="Tab Size"
+              description="The number of spaces a tab is equal to."
+              control={
+                <TextField
+                  type="number"
+                  min={1}
+                  max={12}
+                  defaultValue={`${this.props.monaco?.tabSize ?? 4}`}
+                  onChange={(_, val) => {
+                    const tabSize = Number(val)
+                    if (!isNaN(tabSize)) {
+                      this.touchMonacoProperty('tabSize', tabSize)
+                    }
+                  }}
+                />
+              }
+            />
             <SettingsProperty
               key="smoothScroll"
               title="Smooth Scrolling"

web/src/components/features/workspace/CodeEditor/CodeEditor.tsx

@@ -21,6 +21,8 @@ import classes from './CodeEditor.module.css'
 // ask monaco-editor/react to use our own Monaco instance.
 configureMonacoLoader()
 
+const defaultTabSize = 4
+
 export interface CodeEditorState {
   code?: string
   loading?: boolean
@@ -59,7 +61,25 @@ class CodeEditorView extends React.Component<Props> {
     )
   }, 1000)
 
+  private configureEditorOverrides(editor: monaco.editor.IStandaloneCodeEditor) {
+    const { tabSize = defaultTabSize, fontSize } = this.props.options
+    const opts: Parameters<monaco.editor.IStandaloneCodeEditor['updateOptions']>[0] = {
+      detectIndentation: false, // required to override tab sizes
+      tabSize,
+    }
+
+    // Font should be set only once during boot as when font size changes
+    // by zoom and editor config object is updated - this cause infinite
+    // font change calls with random values.
+    if (fontSize) {
+      opts.fontSize = fontSize
+    }
+
+    editor.updateOptions(opts)
+  }
+
   editorDidMount(editor: monaco.editor.IStandaloneCodeEditor, monacoInstance: Monaco) {
+    this.configureEditorOverrides(editor)
     this.syntaxChecker = new GoSyntaxChecker(this.props.dispatch)
     const [langWorker, workerDisposer] = spawnLanguageWorker()
 
@@ -73,15 +93,6 @@ class CodeEditorView extends React.Component<Props> {
     this.vimAdapter = vimAdapter
     this.vimCommandAdapter = statusAdapter
 
-    // Font should be set only once during boot as when font size changes
-    // by zoom and editor config object is updated - this cause infinite
-    // font change calls with random values.
-    if (this.props.options.fontSize) {
-      editor.updateOptions({
-        fontSize: this.props.options.fontSize,
-      })
-    }
-
     if (this.props.vimModeEnabled) {
       console.log('Vim mode enabled')
       this.vimAdapter.attach()
@@ -133,7 +144,8 @@ class CodeEditorView extends React.Component<Props> {
   }
 
   componentDidUpdate(prevProps: Props) {
-    if (prevProps.projectId !== this.props.projectId) {
+    const projectChanged = prevProps.projectId !== this.props.projectId
+    if (projectChanged) {
       this.metadataCache.flush()
     }
 
@@ -142,6 +154,15 @@ class CodeEditorView extends React.Component<Props> {
       this.updateModelMarkers()
     }
 
+    // HACK: tab size field in prevProps might be a new val instead of prev.
+    // Workaround by comparing a reference.
+    const configChanged = prevProps.options !== this.props.options
+    if (configChanged) {
+      this.editor?.updateOptions({
+        tabSize: this.props.options.tabSize ?? defaultTabSize,
+      })
+    }
+
     this.applyVimModeChanges(prevProps)
   }
 

web/src/services/config/monaco.ts

@@ -3,6 +3,7 @@ import { DEFAULT_FONT } from '../fonts'
 export interface MonacoSettings {
   fontFamily: string
   fontSize?: number
+  tabSize: number
   fontLigatures: boolean
   cursorBlinking: 'blink' | 'smooth' | 'phase' | 'expand' | 'solid'
   cursorStyle: 'line' | 'block' | 'underline' | 'line-thin' | 'block-outline' | 'underline-thin'
@@ -24,4 +25,5 @@ export const defaultMonacoSettings: MonacoSettings = {
   contextMenu: true,
   smoothScrolling: true,
   mouseWheelZoom: true,
+  tabSize: 4,
 }