CSound syntax highlighting support

src/App.svelte

@@ -340,7 +340,6 @@
     <div class="editor-area">
       <EditorWithLogs
         value={projectEditor.content}
-        language="javascript"
         onChange={handleEditorChange}
         onExecute={handleExecute}
         logs={interpreterLogs}

src/lib/components/editor/Editor.svelte

@@ -8,9 +8,7 @@
   import { autocompletion, completionKeymap, closeBrackets, closeBracketsKeymap } from '@codemirror/autocomplete';
   import { foldGutter, indentOnInput, syntaxHighlighting, defaultHighlightStyle, bracketMatching, foldKeymap } from '@codemirror/language';
   import { lintKeymap } from '@codemirror/lint';
-  import { javascript } from '@codemirror/lang-javascript';
-  import { html } from '@codemirror/lang-html';
-  import { css } from '@codemirror/lang-css';
+  import { csoundMode } from '@hlolli/codemirror-lang-csound';
   import { oneDark } from '@codemirror/theme-one-dark';
   import { vim } from '@replit/codemirror-vim';
   import type { EditorSettingsStore } from '../../stores/editorSettings';
@@ -24,7 +22,6 @@
 
   interface Props {
     value: string;
-    language?: 'javascript' | 'html' | 'css';
     onChange?: (value: string) => void;
     onExecute?: (code: string, source: 'selection' | 'block' | 'document') => void;
     editorSettings: EditorSettingsStore;
@@ -32,7 +29,6 @@
 
   let {
     value = '',
-    language = 'javascript',
     onChange,
     onExecute,
     editorSettings
@@ -41,12 +37,6 @@
   let editorContainer: HTMLDivElement;
   let editorView: EditorView | null = null;
 
-  const languageExtensions = {
-    javascript: javascript(),
-    html: html(),
-    css: css()
-  };
-
   const lineNumbersCompartment = new Compartment();
   const lineWrappingCompartment = new Compartment();
   const vimCompartment = new Compartment();
@@ -116,7 +106,7 @@
       doc: value,
       extensions: [
         ...baseExtensions,
-        languageExtensions[language],
+        csoundMode({ fileType: 'csd' }),
         oneDark,
         evaluateKeymap,
         flashField(),

src/lib/components/editor/EditorWithLogs.svelte

@@ -6,7 +6,6 @@
 
   interface Props {
     value: string;
-    language?: 'javascript' | 'html' | 'css';
     onChange?: (value: string) => void;
     onExecute?: (code: string, source: 'selection' | 'block' | 'document') => void;
     logs?: string[];
@@ -15,7 +14,6 @@
 
   let {
     value = '',
-    language = 'javascript',
     onChange,
     onExecute,
     logs = [],
@@ -83,7 +81,6 @@
   <div class="editor-section" style="height: {editorHeight}%;">
     <Editor
       {value}
-      {language}
       {onChange}
       {onExecute}
       {editorSettings}