With shame, I have to give up and ask about the simplest possible example, after many attempts.
I’m just trying to recreate Try example, the default one with JavaScript support.
Currently, it is:
import {basicSetup, EditorView} from "codemirror"
import {javascript} from "@codemirror/lang-javascript"
let view = new EditorView({
doc: "console.log('hello')\n",
extensions: [basicSetup, javascript()],
parent: document.querySelector("#editor")
})
where my HTML is trivial:
<body>
<div id="editor"></div>
<script src="public/bundle.js"></script>
</body>
and Rollup config:
import nodeResolve from '@rollup/plugin-node-resolve';
export default {
input: 'src/index.mjs', // the file where you import and set up CodeMirror
output: {
file: 'public/bundle.js', // the output file
format: 'iife',
},
plugins: [
nodeResolve()
],
};
In theory it works as expected:
But as you can see, there is no syntax highlighting. And apparently input is not parsed, because this line is rendered just as:
<div class="cm-activeLine cm-line">console.log('hello world!')</div>
instead of Try example’s additional span for string literal:
<div class="cm-activeLine cm-line">console.log(<span class="ͼe">'hello'</span>)</div>
Apparently I’m missing something obvious. Please help!
PS. In package.json
I have:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "rollup -c"
},