fix(options): code preview doesn't reflect tab width

This commit is contained in:
Elian Doran
2026-04-14 23:40:39 +03:00
parent 54a6e3d9a1
commit 249b08f1ce
2 changed files with 16 additions and 4 deletions

View File

@@ -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")}>

View File

@@ -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}
}
`;