I am working on a pastebin-like website, and trying to switch to using CodeMirror v6, the issue is supporting all of the languages that the old CodeMirror supported.
The website is paste.myst.rs, and there you can see the dropdown with all of the supported languages, and the way I did that was download all the languages, and dynamically import the proper language.
import(`../libs/codemirror/${mode}/${mode}.js`).then(() =>
{
editor.setOption("mode", mime);
});
In v6, the languages are npm packages, and because I’m using rollup I can’t dynamically import npm modules. So for now I have this:
import { javascript } from "@codemirror/lang-javascript";
import { html } from "@codemirror/lang-html";
import { css } from "@codemirror/lang-css";
import { markdown } from "@codemirror/lang-markdown";
import { json } from "@codemirror/lang-json";
import { python } from "@codemirror/lang-python";
import { xml } from "@codemirror/lang-xml";
import { java } from "@codemirror/lang-java";
import { rust } from "@codemirror/lang-rust";
import { cpp } from "@codemirror/lang-cpp";
import { sql } from "@codemirror/lang-sql";
import { php } from "@codemirror/lang-php";
const onLangSelected = async () => {
let ls: LanguageSupport = undefined;
switch (selectedLanguage[0]) {
case "JavaScript": ls = javascript(); break;
case "HTML": ls = html(); break;
case "CSS": ls = css(); break;
case "Markdown": ls = markdown(); break;
case "JSON": ls = json(); break;
case "Python": ls = python(); break;
case "XML": ls = xml(); break;
case "Java": ls = java(); break;
case "Rust": ls = rust(); break;
case "C++": ls = cpp(); break;
case "SQL": ls = sql(); break;
case "PHP": ls = php(); break;
}
editorView.dispatch({
effects: language.reconfigure(ls)
});
};
This looks pretty ugly, and this doesn’t even include the “legacy” languages. So I wonder if there’s some solution to handling literally every language CM can support.