From 67893b9a57658417a2a99aaf652662ebe8d62ec2 Mon Sep 17 00:00:00 2001
From: Shirasawa <764798966@qq.com>
Date: Mon, 2 Mar 2026 04:52:20 +0800
Subject: [PATCH] fix: fix memory leaking in CodeEditor (#22110)

---
 src/lib/components/common/CodeEditor.svelte | 38 ++++++---------------
 src/lib/utils/codemirror.ts                 | 26 ++++++++++++++
 2 files changed, 36 insertions(+), 28 deletions(-)
 create mode 100644 src/lib/utils/codemirror.ts

diff --git a/src/lib/components/common/CodeEditor.svelte b/src/lib/components/common/CodeEditor.svelte
index ef8ed503d..c95d3e666 100644
--- a/src/lib/components/common/CodeEditor.svelte
+++ b/src/lib/components/common/CodeEditor.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import '$lib/utils/codemirror';
+
 	import { basicSetup, EditorView } from 'codemirror';
 	import { keymap, placeholder } from '@codemirror/view';
 	import { Compartment, EditorState } from '@codemirror/state';
@@ -6,7 +8,7 @@
 	import { acceptCompletion } from '@codemirror/autocomplete';
 	import { indentWithTab } from '@codemirror/commands';
 
-	import { indentUnit, LanguageDescription } from '@codemirror/language';
+	import { indentUnit } from '@codemirror/language';
 	import { languages } from '@codemirror/language-data';
 
 	import { oneDark } from '@codemirror/theme-one-dark';
@@ -75,41 +77,16 @@
 	export let id = '';
 	export let lang = '';
 
-	let codeEditor;
+	let codeEditor: EditorView | null = null;
 
 	export const focus = () => {
-		codeEditor.focus();
+		codeEditor?.focus();
 	};
 
 	let isDarkMode = false;
 	let editorTheme = new Compartment();
 	let editorLanguage = new Compartment();
 
-	languages.push(
-		LanguageDescription.of({
-			name: 'HCL',
-			extensions: ['hcl', 'tf'],
-			load() {
-				return import('codemirror-lang-hcl').then((m) => m.hcl());
-			}
-		})
-	);
-	languages.push(
-		LanguageDescription.of({
-			name: 'Elixir',
-			extensions: ['ex', 'exs'],
-			load() {
-				return import('codemirror-lang-elixir').then((m) => m.elixir());
-			}
-		})
-	);
-
-	// Add 'matlab' alias to Octave language (MATLAB-compatible syntax)
-	const octaveLang = languages.find((l) => l.name === 'Octave');
-	if (octaveLang && !octaveLang.alias.includes('matlab')) {
-		octaveLang.alias.push('matlab');
-	}
-
 	const getLang = async () => {
 		const language = languages.find((l) => l.alias.includes(lang));
 		return await language?.load();
@@ -326,6 +303,11 @@ print("${endTag}")
 		return () => {
 			observer.disconnect();
 			document.removeEventListener('keydown', keydownHandler);
+			// Must destroy EditorView so CodeMirror releases internal DOMObserver and DOM refs
+			if (codeEditor) {
+				codeEditor.destroy();
+				codeEditor = null;
+			}
 		};
 	});
 
diff --git a/src/lib/utils/codemirror.ts b/src/lib/utils/codemirror.ts
new file mode 100644
index 000000000..88724b42c
--- /dev/null
+++ b/src/lib/utils/codemirror.ts
@@ -0,0 +1,26 @@
+import { LanguageDescription } from '@codemirror/language';
+import { languages } from '@codemirror/language-data';
+
+const octaveLang = languages.find((l) => l.name === 'Octave');
+if (octaveLang) {
+	(octaveLang.alias as string[]).push('matlab');
+}
+
+languages.push(
+	LanguageDescription.of({
+		name: 'HCL',
+		extensions: ['hcl', 'tf'],
+		load() {
+			return import('codemirror-lang-hcl').then((m) => m.hcl());
+		}
+	})
+);
+languages.push(
+	LanguageDescription.of({
+		name: 'Elixir',
+		extensions: ['ex', 'exs'],
+		load() {
+			return import('codemirror-lang-elixir').then((m) => m.elixir());
+		}
+	})
+);