From 8defdc424c94bca5a1341d6d08e4253fd1978f7d Mon Sep 17 00:00:00 2001
From: Dsm0 <willrinkoff@gmail.com>
Date: Tue, 8 Jul 2025 17:57:24 -0700
Subject: [PATCH] added tab-indent setting

---
 packages/codemirror/codemirror.mjs                | 4 +++-
 website/src/repl/components/panel/SettingsTab.jsx | 6 ++++++
 website/src/settings.mjs                          | 2 ++
 3 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/packages/codemirror/codemirror.mjs b/packages/codemirror/codemirror.mjs
index 193d96b55..6ba1d9c40 100644
--- a/packages/codemirror/codemirror.mjs
+++ b/packages/codemirror/codemirror.mjs
@@ -1,7 +1,7 @@
 import { closeBrackets } from '@codemirror/autocomplete';
 export { toggleComment, toggleBlockComment, toggleLineComment, toggleBlockCommentByLine } from '@codemirror/commands';
 // import { search, highlightSelectionMatches } from '@codemirror/search';
-import { history } from '@codemirror/commands';
+import { history, indentWithTab } from '@codemirror/commands';
 import { javascript } from '@codemirror/lang-javascript';
 import { defaultHighlightStyle, syntaxHighlighting, bracketMatching } from '@codemirror/language';
 import { Compartment, EditorState, Prec } from '@codemirror/state';
@@ -37,6 +37,7 @@ const extensions = {
   isActiveLineHighlighted: (on) => (on ? [highlightActiveLine(), highlightActiveLineGutter()] : []),
   isFlashEnabled,
   keybindings,
+  isTabIndentationEnabled: (on) => (on ? keymap.of([indentWithTab]) : []),
 };
 const compartments = Object.fromEntries(Object.keys(extensions).map((key) => [key, new Compartment()]));
 
@@ -51,6 +52,7 @@ export const defaultSettings = {
   isFlashEnabled: true,
   isTooltipEnabled: false,
   isLineWrappingEnabled: false,
+  isTabIndentationEnabled: false,
   theme: 'strudelTheme',
   fontFamily: 'monospace',
   fontSize: 18,
diff --git a/website/src/repl/components/panel/SettingsTab.jsx b/website/src/repl/components/panel/SettingsTab.jsx
index 5be9b602e..e82d03d87 100644
--- a/website/src/repl/components/panel/SettingsTab.jsx
+++ b/website/src/repl/components/panel/SettingsTab.jsx
@@ -109,6 +109,7 @@ export function SettingsTab({ started }) {
     togglePanelTrigger,
     maxPolyphony,
     multiChannelOrbits,
+    isTabIndentationEnabled,
   } = useSettings();
   const shouldAlwaysSync = isUdels();
   const canChangeAudioDevice = AudioContext.prototype.setSinkId != null;
@@ -262,6 +263,11 @@ export function SettingsTab({ started }) {
           onChange={(cbEvent) => settingsMap.setKey('isLineWrappingEnabled', cbEvent.target.checked)}
           value={isLineWrappingEnabled}
         />
+        <Checkbox
+          label="Enable Tab indentation"
+          onChange={(cbEvent) => settingsMap.setKey('isTabIndentationEnabled', cbEvent.target.checked)}
+          value={isTabIndentationEnabled}
+        />
         <Checkbox
           label="Enable flashing on evaluation"
           onChange={(cbEvent) => settingsMap.setKey('isFlashEnabled', cbEvent.target.checked)}
diff --git a/website/src/settings.mjs b/website/src/settings.mjs
index 84b433141..6212a6da0 100644
--- a/website/src/settings.mjs
+++ b/website/src/settings.mjs
@@ -21,6 +21,7 @@ export const defaultSettings = {
   isSyncEnabled: false,
   isLineWrappingEnabled: false,
   isPatternHighlightingEnabled: true,
+  isTabIndentationEnabled: false,
   theme: 'strudelTheme',
   fontFamily: 'monospace',
   fontSize: 18,
@@ -77,6 +78,7 @@ export function useSettings() {
     isLineWrappingEnabled: parseBoolean(state.isLineWrappingEnabled),
     isFlashEnabled: parseBoolean(state.isFlashEnabled),
     isSyncEnabled: isUdels() ? true : parseBoolean(state.isSyncEnabled),
+    isTabIndentationEnabled: parseBoolean(state.isTabIndentationEnabled),
     fontSize: Number(state.fontSize),
     panelPosition: state.activeFooter !== '' && !isUdels() ? state.panelPosition : 'bottom', // <-- keep this 'bottom' where it is!
     isPanelPinned: parseBoolean(state.isPanelPinned),