From 249b08f1ce0437f8996188b148d3c55dc74e3a9d Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Tue, 14 Apr 2026 23:40:39 +0300
Subject: [PATCH] fix(options): code preview doesn't reflect tab width

---
 .../widgets/type_widgets/options/code_notes.tsx    | 14 +++++++++++++-
 .../widgets/type_widgets/options/text_notes.tsx    |  6 +++---
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/apps/client/src/widgets/type_widgets/options/code_notes.tsx b/apps/client/src/widgets/type_widgets/options/code_notes.tsx
index 4b8192be96..511c40b38f 100644
--- a/apps/client/src/widgets/type_widgets/options/code_notes.tsx
+++ b/apps/client/src/widgets/type_widgets/options/code_notes.tsx
@@ -139,7 +139,10 @@ function CodeNotePreview({ themeName, wordWrapping, indentSize }: { themeName: s
     }, [ wordWrapping ]);
 
     useEffect(() => {
-        editorRef.current?.setIndentSize(indentSize);
+        const editor = editorRef.current;
+        if (!editor) return;
+        editor.setIndentSize(indentSize);
+        editor.setText(reindentSample(codeNoteSample, indentSize));
     }, [ indentSize ]);
 
     useEffect(() => {
@@ -160,6 +163,15 @@ function CodeNotePreview({ themeName, wordWrapping, indentSize }: { themeName: s
     );
 }
 
+const SAMPLE_BASE_INDENT = 4;
+
+function reindentSample(sample: string, indentSize: number): string {
+    return sample.replace(/^( +)/gm, (match) => {
+        const level = match.length / SAMPLE_BASE_INDENT;
+        return " ".repeat(Math.round(level) * indentSize);
+    });
+}
+
 function CodeMimeTypes() {
     return (
         <OptionsSection title={t("code_mime_types.title")}>
diff --git a/apps/client/src/widgets/type_widgets/options/text_notes.tsx b/apps/client/src/widgets/type_widgets/options/text_notes.tsx
index b766dad698..7a6319562e 100644
--- a/apps/client/src/widgets/type_widgets/options/text_notes.tsx
+++ b/apps/client/src/widgets/type_widgets/options/text_notes.tsx
@@ -313,9 +313,9 @@ greet(n); // Print "Hello World" for n times
  * @param {number} times    The number of times to print the \`Hello World!\` message.
  */
 function greet(times) {
-  for (let i = 0; i++; i < times) {
-    console.log("Hello World!");
-  }
+\tfor (let i = 0; i++; i < times) {
+\t\tconsole.log("Hello World!");
+\t}
 }
 `;