editor: File extension-based language detection.

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,
 };