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
Brian, many thanks for creating this mini tutorial. Following it, installed some software and got up and going with a minimal example quickly.
This process should be on the front page of Codemirror for n00bs (even though I used CM5). CM6 is a stunning piece of code.
GOD BLESS YOU dude… i spent 3 days trying to get this working, its completely hostile. Thanks to your examples i made it work and i didnt give up on this.
god bless you, you made a great service to this script, they should replace the current docs with this, even put it on homepage instead of that confusing and completely useless “example” they have now.
with all due respect, you are so wrong. In the official guide, you can not end up using it and making it work if you don’t assume a lot of things that not everyone can assume. In this guide, you start from a working example and you learn how to use it while actually using it. If you want to go deeper then you can follow the official example (that is way too confusing honestly), but for a “quick start” this one is best. Please do consider including this or similar simple and functional code samples in the official docs.
Another thing CM6 n00bs should read is Marijn s blog, especially this list: https://marijnhaverbeke.nl/blog/#javascript
It answers a lot of time consuming questions I’d probably ask here.
Just what i needed. Thanks!
Totally disagree, the quickstart guide is exactly what I needed. I think sometimes the creator of a library is the worst person to explain to a beginner how to use it because they don’t know what it’s like to come to it with no context and perhaps limited technical experience. Anyway thanks RPGillespie you saved me a bunch of time
Just chiming in to say the quickstart has from Gillespie has been a huge help. The official documentation - while admirable that the time was taken to put it together - is a huge miss if you’re a newcomer. Most of it jumps right into the middle of some topic that really requires much deeper background knowledge, and that background is unavailable or unclear how to find anywhere.
Couldn’t agree more w/ the point above, that frequently the original author might not be the best candidate to write documentation. No fault there, it’s just hard to deconstruct all the built up knowledge and act like you don’t know anything about a project, then write about it. Instead of turning away offers to help improve the documentation (like this quickstart), maybe see it as constructive feedback and wanting to contribute back to the project.
I’m still dumbfounded, days later, how to use CM. No doubt CM is a work of genius but the guide is way too terse and downright incomplete in basic details before it links to the bewildering one-page reference page and getting me completely lost. We need heavily commented reference examples. Separate pages per topic. Repetition is not a bad thing!
Thank you for this tool, it’s incredibly powerful!