editor: File extension-based language detection.

core/client.js

@@ -1601,6 +1601,25 @@ function connectSocket(path) {
 	}
 }
 
+/**
+ * Determine a CodeMirror language mode from filename.
+ * @param name Filename.
+ * @return The mode name.
+ */
+function modeFromName(name) {
+	switch (name.split('.').pop()) {
+		case 'md':
+			return 'markdown';
+		case 'css':
+			return 'css';
+		case 'js':
+			return 'javascript';
+		case 'xml':
+		case 'svg':
+			return 'xml';
+	}
+}
+
 /**
  * Open a file by name.
  * @param name The file to open.
@@ -1612,6 +1631,7 @@ function openFile(name) {
 			: cm6.EditorState.create({doc: '', extensions: cm6.extensions});
 	let oldDoc = g_editor.state;
 	g_editor.setState(newDoc);
+	cm6.setEditorMode(g_editor, modeFromName(name));
 
 	if (g_files[g_current_file]) {
 		g_files[g_current_file].doc = oldDoc;

deps/codemirror_src/editor.mjs

@@ -1,12 +1,14 @@
-import {EditorState} from "@codemirror/state"
+import {EditorState, Compartment} from "@codemirror/state"
 import {EditorView} from '@codemirror/view';
 import {javascript} from "@codemirror/lang-javascript"
-import {html} from "@codemirror/lang-html"
+import {htmlLanguage, html} from "@codemirror/lang-html"
 import {css} from "@codemirror/lang-css"
+import {markdown} from "@codemirror/lang-markdown"
+import {xml} from "@codemirror/lang-xml"
 import {search} from "@codemirror/search"
 import {oneDark} from "./theme-tf-dark.js"
 import {lineNumbers, highlightActiveLineGutter, highlightSpecialChars, highlightTrailingWhitespace, drawSelection, dropCursor, rectangularSelection, crosshairCursor, highlightActiveLine, keymap, highlightWhitespace} from '@codemirror/view';
-import {foldGutter, indentUnit, indentOnInput, syntaxHighlighting, defaultHighlightStyle, bracketMatching, foldKeymap} from '@codemirror/language';
+import {language, foldGutter, indentUnit, indentOnInput, syntaxHighlighting, defaultHighlightStyle, bracketMatching, foldKeymap} from '@codemirror/language';
 import {history, defaultKeymap, historyKeymap, indentWithTab} from '@codemirror/commands';
 import {highlightSelectionMatches, searchKeymap} from '@codemirror/search';
 import {autocompletion, closeBracketsKeymap, completionKeymap} from '@codemirror/autocomplete';
@@ -18,6 +20,23 @@ let updateListenerExtension = EditorView.updateListener.of((update) => {
 	}
 });
 
+/* https://codemirror.net/examples/config/ */
+const languageConfig = new Compartment();
+
+const autoLanguage = EditorState.transactionExtender.of(tr => {
+	if (!tr.docChanged) {
+		return null;
+	}
+	let doc_is_html = /\s*</.test(tr.newDoc.sliceString(0, 100));
+	let state_is_html = tr.startState.facet(language) == htmlLanguage;
+	if (doc_is_html == state_is_html) {
+		return null;
+	}
+	return {
+		effects: languageConfig.reconfigure(doc_is_html ? html() : javascript()),
+	};
+});
+
 const extensions = [
 	lineNumbers(),
 	highlightActiveLineGutter(),
@@ -47,9 +66,8 @@ const extensions = [
 		...lintKeymap,
 		indentWithTab,
 	]),
-	javascript(),
-	html(),
-	css(),
+	languageConfig.of(javascript()),
+	autoLanguage,
 	search(),
 	oneDark,
 	updateListenerExtension,
@@ -60,11 +78,25 @@ function TildeFriendsEditorView(parent) {
 		extensions: extensions,
 		parent: parent,
 	});
-};
+}
+
+function setEditorMode(view, mode) {
+	const k_modes = {
+		'css': css(),
+		'html': html(),
+		'javascript': javascript(),
+		'markdown': markdown(),
+		'xml': xml(),
+	};
+	view.dispatch({
+		effects: languageConfig.reconfigure(k_modes[mode])
+	});
+}
 
 export {
 	TildeFriendsEditorView,
 	EditorState,
 	EditorView,
 	extensions,
+	setEditorMode,
 };

deps/codemirror_src/package-lock.json

@@ -9,6 +9,8 @@
         "@codemirror/lang-html": "^6.4.8",
         "@codemirror/lang-javascript": "^6.2.2",
         "@codemirror/lang-json": "^6.0.1",
+        "@codemirror/lang-markdown": "^6.0.1",
+        "@codemirror/lang-xml": "^6.0.1",
         "@codemirror/theme-one-dark": "^6.1.2",
         "@rollup/plugin-node-resolve": "^15.2.3",
         "codemirror": "^6.0.1",
@@ -97,6 +99,35 @@
         "@lezer/json": "^1.0.0"
       }
     },
+    "node_modules/@codemirror/lang-markdown": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-markdown/-/lang-markdown-6.5.0.tgz",
+      "integrity": "sha512-0K40bZ35jpHya6FriukbgaleaqzBLZfOh7HuzqbMxBXkbYMJDxfF39c23xOgxFezR+3G+tR2/Mup+Xk865OMvw==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.7.1",
+        "@codemirror/lang-html": "^6.0.0",
+        "@codemirror/language": "^6.3.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "@lezer/common": "^1.2.1",
+        "@lezer/markdown": "^1.0.0"
+      }
+    },
+    "node_modules/@codemirror/lang-xml": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-xml/-/lang-xml-6.1.0.tgz",
+      "integrity": "sha512-3z0blhicHLfwi2UgkZYRPioSgVTo9PV5GP5ducFH6FaHy0IAJRg+ixj5gTR1gnT/glAIC8xv4w2VL1LoZfs+Jg==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/language": "^6.4.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "@lezer/common": "^1.0.0",
+        "@lezer/xml": "^1.0.0"
+      }
+    },
     "node_modules/@codemirror/language": {
       "version": "6.11.3",
       "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.11.3.tgz",
@@ -284,6 +315,27 @@
         "@lezer/common": "^1.0.0"
       }
     },
+    "node_modules/@lezer/markdown": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@lezer/markdown/-/markdown-1.6.0.tgz",
+      "integrity": "sha512-AXb98u3M6BEzTnreBnGtQaF7xFTiMA92Dsy5tqEjpacbjRxDSFdN4bKJo9uvU4cEEOS7D2B9MT7kvDgOEIzJSw==",
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.0.0",
+        "@lezer/highlight": "^1.0.0"
+      }
+    },
+    "node_modules/@lezer/xml": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/@lezer/xml/-/xml-1.0.6.tgz",
+      "integrity": "sha512-CdDwirL0OEaStFue/66ZmFSeppuL6Dwjlk8qk153mSQwiSH/Dlri4GNymrNWnUmPl2Um7QfV1FO9KFUyX3Twww==",
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
+      }
+    },
     "node_modules/@marijn/find-cluster-break": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/@marijn/find-cluster-break/-/find-cluster-break-1.0.2.tgz",

deps/codemirror_src/package.json

@@ -7,6 +7,8 @@
     "@codemirror/lang-html": "^6.4.8",
     "@codemirror/lang-javascript": "^6.2.2",
     "@codemirror/lang-json": "^6.0.1",
+    "@codemirror/lang-markdown": "^6.0.1",
+    "@codemirror/lang-xml": "^6.0.1",
     "@codemirror/theme-one-dark": "^6.1.2",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "codemirror": "^6.0.1",