I created a repo here which contains the quickstart guide and examples I wish I had when I was learning CodeMirror 6. I found the learning curve of CM6 to be quite intimidating compared to CM5, which is what motivated me to create this resource.
I’m wondering if you would think it’s appropriate for me to open a PR for this page to add this repo as a community resource? I for one would have love something like it while I was bootstrapping CM6.
Sorry, no, that doesn’t really add anything that isn’t already addressed by the bundling example and the guide.
That’s fair. I guess devs that are struggling will stumble upon it via google if needed.
IMHO the value it adds is functional examples complete with HTML and premade bundle file. That lets you get started way faster than the official bundling guide and docs. It took me 5 hours of reading through docs and trying to understand all the new abstractions and tinkering with rollup/npm to get a CM6 editor the way I wanted. Heck, it took me an hour just to get One Dark theme working because it’s not obvious anywhere how to apply a 3rd party theme (it’s obvious now, but at the time I could not find a single working example in the official docs for applying a 3rd party theme and the docs got me on the wrong trail when I saw views had a “theme” property when in reality you want to add the theme as an extension). And I’m a CM5 user who thought CM5 on-boarding was very manageable.
There is just currently no way to easily bootstrap yourself with CM6 unless you are an expert front-end JS developer familiar with node.js style import/export conventions, npm, and bundlers (which I was not). I am, however, very familiar with vanilla HTML/JS/CSS.
So unless I missed something, what’s missing from CM6 onboarding is a quick way to get a local CM6 instance up and running.
CM5 had a really simple example to get up and running locally (as well as excellent demo pages):
Bam, you just paste that into an html file and open it in a browser and you can start iterating.
CM6 on the other hand has no easy way to do the equivalent. There is “some assembly required” to get a basic local instance up and running, and said required assembly was not obvious at all to me. Like, how do I take something from the CM6 try page and run it locally? I eventually figured out I’d need to use npm to create a bundle using the provided snippet and then craft my own HTML using the bundle.
Anyway, I think CM6 is a super powerful tool, just that learning curve is currently unreasonably steep for non-node.js devs because of lack of easy-to-setup examples.
Actually, now that I think of it. I think the number one change to the codemirror website that would have saved me a lot of time is just a little blurb on the on the Try page that says something like “To run these examples locally, create a bundle using the bundle guide”. Just some breadcrumbs to lead me from the examples to how to get examples running locally.
As a Node.js noob I didn’t immediately recognize that creating a bundle was the first thing I had to do to get up and running and I wasted a lot of time clicking around and reading stuff until I finally stumbled on the bundle guide…
This would have been very useful to me starting out, thanks for making it. I’ve considered making some blog posts with simple examples for people like me that found some difficulty getting started. Thanks.
They are inside the “node_modules” folder and need to be installed via npm
got it。could you give me a help for get selected context.
window.view.state.selection.ranges
I just get selected ranges ,no context