CM6 - Will we always be able to use CM without import ?

v6
1

Hi,

I wanted to use code mirror and saw there was a new version (CM6), so I decided to use it.

I was at first surprised that there is no “getting started” guide that you show you how to display a simple editor (and now real download link). It was only after reading the “migration guide” that I was able to know that the exemple “Bundling with Rollup” was what I was looking.

However this, seems a lots of work to just to load the editor. Luckily, I discovered from the homepage that I could download https://codemirror.net/6/codemirror.js and include it normally, and then do things like

const {EditorState, basicSetup} = CM["@codemirror/basic-setup"];

Will this solution always be possible ?

Thanks

2

No. Hot-linking scripts from other servers that don’t explicitly allow this is never a good idea—you’re stealing bandwidth and opening yourself up to security problems. This file isn’t going to stick around. So yeah, you will need to set up a build process to create your script. But the good news is that this isn’t actually that hard.

3

The idea is not to hotlink the script but to download it and then use the downloaded version, but didn’t know if there would always be this file to download after update. But as you said the file isn’t going to always be here, this can’t be the solution. Thanks for the answer.

4

So I was able to do the tutorial and it’s indeed easy.

However, I can’t use it like that as my js file containing my code that setup codemirror will be inside an other javascript file with a special structure that need to be keeped (so I can’t just give it to rollup as it will change everything).

How can I do to generate the same files as https://codemirror.net/6/codemirror.js and be able to access with CM[“XXXX”] ? Thanks !

5

So I searched in rollsup documentation with outputglobals / extends but wasn’t able to find a solution.

An easy solution was to just add this (for example) in my editor.js file:

window.CM = {}
window.CM["@codemirror/basic-setup"] = {EditorState, EditorView, basicSetup}
window.CM["@codemirror/lang-javascript"] = {javascript}

I also found this which is probably the file used to generate the codemirror.js file I linked earlier.