feat(editor): add setting to disable HTML tag auto closing (#2051)

Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>

Author: bajrangCoder

src/cm/supportedModes.ts

@@ -57,6 +57,72 @@ function escapeRegExp(value: string): string {
 	return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 }
 
+async function shouldAutoCloseTags(): Promise<boolean> {
+	const { default: appSettings } = await import("lib/settings");
+	return appSettings.value.autoCloseTags !== false;
+}
+
+function createLanguageLoader(name: string, lang: LanguageDescription) {
+	const normalizedName = normalizeModeKey(name);
+
+	switch (normalizedName) {
+		case "html":
+			return async () => {
+				const { html } = await import("@codemirror/lang-html");
+				return html({ autoCloseTags: await shouldAutoCloseTags() });
+			};
+
+		case "xml":
+			return async () => {
+				const { xml } = await import("@codemirror/lang-xml");
+				return xml({ autoCloseTags: await shouldAutoCloseTags() });
+			};
+
+		case "vue":
+			return async () => {
+				const [{ vue }, { html }] = await Promise.all([
+					import("@codemirror/lang-vue"),
+					import("@codemirror/lang-html"),
+				]);
+				return vue({
+					base: html({ autoCloseTags: await shouldAutoCloseTags() }),
+				});
+			};
+
+		case "angular":
+			return async () => {
+				const [{ angular }, { html }] = await Promise.all([
+					import("@codemirror/lang-angular"),
+					import("@codemirror/lang-html"),
+				]);
+				return angular({
+					base: html({
+						autoCloseTags: await shouldAutoCloseTags(),
+						selfClosingTags: true,
+					}),
+				});
+			};
+
+		case "php":
+			return async () => {
+				const [{ php }, { html }] = await Promise.all([
+					import("@codemirror/lang-php"),
+					import("@codemirror/lang-html"),
+				]);
+				const htmlSupport = html({
+					autoCloseTags: await shouldAutoCloseTags(),
+					matchClosingTags: false,
+				});
+				return [
+					php({ baseLanguage: htmlSupport.language }),
+					htmlSupport.support,
+				];
+			};
+	}
+
+	return typeof lang.load === "function" ? () => lang.load!() : null;
+}
+
 // 1) Always register a plain text fallback
 addMode("Text", "txt|text|log|plain", "Plain Text", () => []);
 
@@ -106,7 +172,7 @@ for (const lang of languages as readonly LanguageDescription[]) {
 
 		// Wrap language-data loader as our modelist language provider
 		// lang.load() returns a Promise<Extension>; we let the editor handle async loading
-		const loader = typeof lang.load === "function" ? () => lang.load!() : null;
+		const loader = createLanguageLoader(name, lang);
 
 		addMode(modeId, pattern, name, loader, {
 			aliases,

src/lang/ar-ye.json

@@ -721,5 +721,7 @@
 	"close selected tabs warning": "Are you sure you want to close the selected tabs? You will lose the unsaved changes and this action cannot be reversed.",
 	"close tabs to right": "Close Right",
 	"close tabs to left": "Close Left",
-	"close other tabs": "Close Others"
+	"close other tabs": "Close Others",
+	"auto close tags": "Auto close tags",
+	"settings-info-editor-auto-close-tags": "Automatically insert closing tags in HTML, XML, Vue, Angular, and PHP template files."
 }

src/lang/be-by.json

@@ -723,5 +723,7 @@
 	"close selected tabs warning": "Are you sure you want to close the selected tabs? You will lose the unsaved changes and this action cannot be reversed.",
 	"close tabs to right": "Close Right",
 	"close tabs to left": "Close Left",
-	"close other tabs": "Close Others"
+	"close other tabs": "Close Others",
+	"auto close tags": "Auto close tags",
+	"settings-info-editor-auto-close-tags": "Automatically insert closing tags in HTML, XML, Vue, Angular, and PHP template files."
 }

src/lang/bn-bd.json

@@ -722,5 +722,7 @@
 	"close selected tabs warning": "Are you sure you want to close the selected tabs? You will lose the unsaved changes and this action cannot be reversed.",
 	"close tabs to right": "Close Right",
 	"close tabs to left": "Close Left",
-	"close other tabs": "Close Others"
+	"close other tabs": "Close Others",
+	"auto close tags": "Auto close tags",
+	"settings-info-editor-auto-close-tags": "Automatically insert closing tags in HTML, XML, Vue, Angular, and PHP template files."
 }

src/lang/cs-cz.json

@@ -722,5 +722,7 @@
 	"close selected tabs warning": "Are you sure you want to close the selected tabs? You will lose the unsaved changes and this action cannot be reversed.",
 	"close tabs to right": "Close Right",
 	"close tabs to left": "Close Left",
-	"close other tabs": "Close Others"
+	"close other tabs": "Close Others",
+	"auto close tags": "Auto close tags",
+	"settings-info-editor-auto-close-tags": "Automatically insert closing tags in HTML, XML, Vue, Angular, and PHP template files."
 }

src/lang/de-de.json

@@ -722,5 +722,7 @@
 	"close selected tabs warning": "Are you sure you want to close the selected tabs? You will lose the unsaved changes and this action cannot be reversed.",
 	"close tabs to right": "Close Right",
 	"close tabs to left": "Close Left",
-	"close other tabs": "Close Others"
+	"close other tabs": "Close Others",
+	"auto close tags": "Auto close tags",
+	"settings-info-editor-auto-close-tags": "Automatically insert closing tags in HTML, XML, Vue, Angular, and PHP template files."
 }

src/lang/en-us.json

@@ -130,6 +130,7 @@
 	"invalid backup file": "Invalid backup file",
 	"add path": "Add path",
 	"live autocompletion": "Live autocompletion",
+	"auto close tags": "Auto close tags",
 	"file properties": "File properties",
 	"path": "Path",
 	"type": "Type",
@@ -662,6 +663,7 @@
 	"settings-info-editor-line-numbers": "Show line numbers in the gutter.",
 	"settings-info-editor-lint-gutter": "Show diagnostics and lint markers in the gutter.",
 	"settings-info-editor-live-autocomplete": "Show suggestions while you type.",
+	"settings-info-editor-auto-close-tags": "Automatically insert closing tags in HTML, XML, Vue, Angular, and PHP template files.",
 	"settings-info-editor-rainbow-brackets": "Color matching brackets by nesting depth.",
 	"settings-info-editor-relative-line-numbers": "Show distance from the current line.",
 	"settings-info-editor-rtl-text": "Switch right-to-left behavior per line.",

src/lang/es-sv.json

@@ -722,5 +722,7 @@
 	"close selected tabs warning": "Are you sure you want to close the selected tabs? You will lose the unsaved changes and this action cannot be reversed.",
 	"close tabs to right": "Close Right",
 	"close tabs to left": "Close Left",
-	"close other tabs": "Close Others"
+	"close other tabs": "Close Others",
+	"auto close tags": "Auto close tags",
+	"settings-info-editor-auto-close-tags": "Automatically insert closing tags in HTML, XML, Vue, Angular, and PHP template files."
 }

src/lang/fr-fr.json

@@ -722,5 +722,7 @@
 	"close selected tabs warning": "Are you sure you want to close the selected tabs? You will lose the unsaved changes and this action cannot be reversed.",
 	"close tabs to right": "Close Right",
 	"close tabs to left": "Close Left",
-	"close other tabs": "Close Others"
+	"close other tabs": "Close Others",
+	"auto close tags": "Auto close tags",
+	"settings-info-editor-auto-close-tags": "Automatically insert closing tags in HTML, XML, Vue, Angular, and PHP template files."
 }

src/lang/he-il.json

@@ -723,5 +723,7 @@
 	"close selected tabs warning": "Are you sure you want to close the selected tabs? You will lose the unsaved changes and this action cannot be reversed.",
 	"close tabs to right": "Close Right",
 	"close tabs to left": "Close Left",
-	"close other tabs": "Close Others"
+	"close other tabs": "Close Others",
+	"auto close tags": "Auto close tags",
+	"settings-info-editor-auto-close-tags": "Automatically insert closing tags in HTML, XML, Vue, Angular, and PHP template files."
 }