fix indent guide setting issue

Author: bajrangCoder

src/cm/mainEditorExtensions.ts

@@ -0,0 +1,56 @@
+import type { Extension } from "@codemirror/state";
+import { EditorView, scrollPastEnd } from "@codemirror/view";
+
+interface MainEditorExtensionOptions {
+	emmetExtensions?: Extension[];
+	baseExtensions?: Extension[];
+	commandKeymapExtension?: Extension;
+	themeExtension?: Extension;
+	pointerCursorVisibilityExtension?: Extension;
+	shiftClickSelectionExtension?: Extension;
+	touchSelectionUpdateExtension?: Extension;
+	searchExtension?: Extension;
+	readOnlyExtension?: Extension;
+	optionExtensions?: Extension[];
+}
+
+function pushExtension(target: Extension[], extension?: Extension): void {
+	if (extension == null) return;
+	target.push(extension);
+}
+
+export const fixedHeightTheme = EditorView.theme({
+	"&": { height: "100%" },
+	".cm-scroller": { height: "100%", overflow: "auto" },
+});
+
+export function createMainEditorExtensions(
+	options: MainEditorExtensionOptions = {},
+): Extension[] {
+	const extensions: Extension[] = [];
+
+	if (options.emmetExtensions?.length) {
+		extensions.push(...options.emmetExtensions);
+	}
+	if (options.baseExtensions?.length) {
+		extensions.push(...options.baseExtensions);
+	}
+
+	pushExtension(extensions, options.commandKeymapExtension);
+	pushExtension(extensions, options.themeExtension);
+	extensions.push(fixedHeightTheme);
+	extensions.push(scrollPastEnd());
+	pushExtension(extensions, options.pointerCursorVisibilityExtension);
+	pushExtension(extensions, options.shiftClickSelectionExtension);
+	pushExtension(extensions, options.touchSelectionUpdateExtension);
+	pushExtension(extensions, options.searchExtension);
+	pushExtension(extensions, options.readOnlyExtension);
+
+	if (options.optionExtensions?.length) {
+		extensions.push(...options.optionExtensions);
+	}
+
+	return extensions;
+}
+
+export default createMainEditorExtensions;

src/lib/editorManager.js

@@ -16,7 +16,6 @@ import {
 	highlightWhitespace,
 	keymap,
 	lineNumbers,
-	scrollPastEnd,
 } from "@codemirror/view";
 import {
 	abbreviationTracker,
@@ -27,6 +26,7 @@ import {
 	wrapWithAbbreviation,
 } from "@emmetio/codemirror6-plugin";
 import createBaseExtensions from "cm/baseExtensions";
+import createMainEditorExtensions from "cm/mainEditorExtensions";
 import {
 	setKeyBindings as applyKeyBindings,
 	executeCommand,
@@ -163,12 +163,6 @@ async function EditorManager($header, $body) {
 		},
 	});
 
-	// Make CodeMirror fill the container height and manage scrolling internally
-	const fixedHeightTheme = EditorView.theme({
-		"&": { height: "100%" },
-		".cm-scroller": { height: "100%", overflow: "auto" },
-	});
-
 	const pointerCursorVisibilityExtension = EditorView.updateListener.of(
 		(update) => {
 			if (!update.selectionSet) return;
@@ -764,24 +758,25 @@ async function EditorManager($header, $body) {
 	// Create minimal CodeMirror editor
 	const editorState = EditorState.create({
 		doc: "",
-		extensions: [
+		extensions: createMainEditorExtensions({
 			// Emmet needs highest precedence so place before default keymaps
-			...createEmmetExtensionSet({ syntax: EmmetKnownSyntax.html }),
-			...createBaseExtensions(),
-			getCommandKeymapExtension(),
-			// Default theme
-			themeCompartment.of(oneDark),
-			fixedHeightTheme,
-			scrollPastEnd(),
+			emmetExtensions: createEmmetExtensionSet({
+				syntax: EmmetKnownSyntax.html,
+			}),
+			baseExtensions: createBaseExtensions(),
+			commandKeymapExtension: getCommandKeymapExtension(),
+			themeExtension: themeCompartment.of(oneDark),
 			pointerCursorVisibilityExtension,
 			shiftClickSelectionExtension,
 			touchSelectionUpdateExtension,
-			search(),
+			searchExtension: search(),
 			// Ensure read-only can be toggled later via compartment
-			readOnlyCompartment.of(EditorState.readOnly.of(false)),
+			readOnlyExtension: readOnlyCompartment.of(
+				EditorState.readOnly.of(false),
+			),
 			// Editor options driven by settings via compartments
-			...getBaseExtensionsFromOptions(),
-		],
+			optionExtensions: getBaseExtensionsFromOptions(),
+		}),
 	});
 
 	const editor = new EditorView({
@@ -1128,22 +1123,20 @@ async function EditorManager($header, $body) {
 	function applyFileToEditor(file) {
 		if (!file || file.type !== "editor") return;
 		const syntax = getEmmetSyntaxForFile(file);
-		const baseExtensions = [
+		const baseExtensions = createMainEditorExtensions({
 			// Emmet needs to precede default keymaps so tracker Tab wins over indent
-			...createEmmetExtensionSet({ syntax }),
-			...createBaseExtensions(),
-			getCommandKeymapExtension(),
+			emmetExtensions: createEmmetExtensionSet({ syntax }),
+			baseExtensions: createBaseExtensions(),
+			commandKeymapExtension: getCommandKeymapExtension(),
 			// keep compartment in the state to allow dynamic theme changes later
-			themeCompartment.of(oneDark),
-			fixedHeightTheme,
-			scrollPastEnd(),
+			themeExtension: themeCompartment.of(oneDark),
 			pointerCursorVisibilityExtension,
 			shiftClickSelectionExtension,
 			touchSelectionUpdateExtension,
-			search(),
+			searchExtension: search(),
 			// Keep dynamic compartments across state swaps
-			...getBaseExtensionsFromOptions(),
-		];
+			optionExtensions: getBaseExtensionsFromOptions(),
+		});
 		const exts = [...baseExtensions];
 		maybeAttachEmmetCompletions(exts, syntax);
 		try {

src/lib/settings.js

@@ -179,6 +179,7 @@ class Settings {
 			showSponsorSidebarApp: true,
 			showAnnotations: false,
 			lintGutter: true,
+			indentGuides: true,
 			rainbowBrackets: true,
 			pluginsDisabled: {}, // pluginId: true/false
 			lsp: {