Hello there, I have been looking into CodeMirror for a while, I am looking to create a WYSIWYM editor for markdown. Something like Typora, or the recent Obsidian projects implementation(which runs on CodeMirror 6 IIRC). I have looked into the System guide for CodeMirror 6, which doesn’t make full sense to me, but somewhat it does, I can keep up with the examples in the guide. I know that I need to use decorators, which add styling to the CodeMirror instance, like adding tags to element, making them headers, and so on. But keeping up with the examples set in the example of decorator is something that doesn’t make sense to me, like what is meant by StateEffect, and where is it even used in the main instance.
What is the best approach to learn about CodeMirror, because not much resources are available online, I am not very well versed with JS, but I do have a decent enough knowledge to understand and use Vue, if it helps, and I believe its not going to be a problem, I am not particularly new to programming, just haven’t touched it in a while. I have also looked into other posts, none of them seems to be on basic learning as far as I found.
For questions like that, looking the class up in the reference documentation can often help. In this case, it shows, among other things, that the core uses state effects to represent editor reconfiguration, which may be the kind of example you’re asking for.
CodeMirror 6 is a somewhat complicated system (mostly for good reasons) and will take a while to get used to if you haven’t worked with a similar system before. That’s unfortunately part of the trade-off in making it deeply configurable and powerful enough to do the kind of things a modern text editor needs to do. I’ve tried to keep things coherent and convenient wherever possible, but there’s going to be a learning curve.
Welp, I am still not sure how things work, I do to some point understand the decoration example a little bit better, after reading some guides outside the the official CodeMirror site. I was very much confused over how things connected to each other, which is somewhat more clear to be as I understood things connected though the addition of plugins and extensions which is added to the EditorView instance, NOT mentioned in the example anywhere. It would be great, if possible, to add these examples to a demo, or some kind of final file where we can see how things connect and run, where I can debug or try to understand things one by one while experimenting. As of now, I will be looking into the Configuration and the Zebra Stripes example and try to understand from there.
I also have this feeling, but recently I’ve found an article that helped me a lot to understand some concepts and its usage. I think it can be useful as an alternative Getting Started tutorial. Check it below.
But IMHO, the best way to learn would be to experiment around with the examples on a local repo, to look at this form for help and to look at the references docs. To get started the articles send by you, and the one above really helps.
The examples I found to be initial for me to start(I would recommend to reading all the examples to your requirement, but I found these to be essential):
CodeMirror System Guide - A overview, and general guide to using CM, there is a lot of content, but it really helps in understanding how things may work
CodeMirror Configuration Example - My main takeaway, which took me way longer then it should have been was the fact extensions are imported here, every example doesn’t state this, and it was very confusing to get started
For me the biggest reason for being able to move forward was getting these examples to run on a local repo, and experimenting with it, it really helps.