Add tab size configuration

src/components/codemirrorHooks/extensions.ts

@@ -507,5 +507,14 @@ export function useExtensions({
         }
     }, [fileIndentUnit, editorRef.current, justCreated])
 
+    useEffect(() => {
+        editorRef.current.view?.dispatch({
+            effects: indentCompartment.reconfigure([
+                indentUnit.of(" ".repeat(Number(settings.tabSize))), 
+                EditorState.tabSize.of(Number(settings.tabSize))
+            ]),
+        })
+    }, [settings.tabSize, editorRef.current, justCreated])
+
     return globalExtensions
 }

src/components/settingsPane.tsx

@@ -115,6 +115,26 @@ export function SettingsPopup() {
                                 />
                             </div>
 
+                            <div className="settings__item">
+                                <div className="settings__item_title">
+                                    Tab Size
+                                </div>
+                                <div className="settings__item_description">
+                                    Controls the tab size
+                                </div>
+                                <Dropdown
+                                    options={['2', '4', '8']}
+                                    onChange={(e) => {
+                                        dispatch(
+                                            changeSettings({
+                                                tabSize: e.value,
+                                            })
+                                        )
+                                    }}
+                                    value={settings.tabSize}
+                                />
+                            </div>
+
                             <div className="settings__item">
                                 <div className="settings__item_title">
                                     Text Wrapping

src/features/window/state.ts

@@ -300,6 +300,7 @@ export interface Settings {
     useFour: string
     contextType: string
     textWrapping: string
+    tabSize: string
 }
 
 export interface SettingsState {
@@ -400,6 +401,7 @@ export const initialSettingsState = {
         useFour: 'disabled',
         contextType: 'none',
         textWrapping: 'disabled',
+        tabSize: '2'
     },
 }