fix: fix memory leaking in CodeEditor (open-webui#22110)

Author: ShirasawaSama

src/lib/components/common/CodeEditor.svelte

@@ -1,12 +1,14 @@
 <script lang="ts">
+	import '$lib/utils/codemirror';
+
 	import { basicSetup, EditorView } from 'codemirror';
 	import { keymap, placeholder } from '@codemirror/view';
 	import { Compartment, EditorState } from '@codemirror/state';
 
 	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;
+			}
 		};
 	});
 

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());
+		}
+	})
+);