Why did Codemirror v6 become so complicated?

v6
1

I have an old application running CodeMirror v5 that I was planning on Migrating to v6. Looking at the configuration code for v6 though… my god what happened to this library? How did it become so complicated to setup something that should be simple?

Super basic example: Setting the Tabsize for your editor. It used to be:

tabSize: 4

in the instantiation configuration. Simple. Straightforward. Requires no explanation. Easy to remember.

Now, in v6 it’s this:

tabSize.of(EditorState.tabSize.of(4))

wtf is this? How is that supposed to be an improvement in any way? How did this editor get to this point? The documentation is so convoluted now that it’s not clear how to do things that used to be very simple in v5.

1 Like
2

I am not the best person to share opinion. However, while migrating from v5 to v6 I firstly had similar feelings. Then, I have realised it just serves slightly different purposes. v6 is almost an IDE, the functionality can be extended on all levels. v5 looked for me more like a tokinezer, but here it performs syntax parsing, builds AST, therefore it can guess classes, some objects, gives autocomplete and also extremely fast. From the other hand since it is so modular, simple things like tabs and etc comes as an extension you can apply for example to a specific compartment (i.e. switch between sets of extensions/plugins based on what you typing seamessly). So you can also make it extremely lightweight throwing out all default extensions and it so so cool (the performance is amazing). Of course all of this demands a complex architecture.

I am also keeping v5 for some simple stuff, and it is good enough (and probably will be for the next years). You can still easily write a language pack or improve one you have. But if you want more features or more flexibility in configuration, then v6

3

This is something a wrapper would take care of.

There’s no wrapper because that depends on the framework someone is using.

Here’s one: React CodeMirror - CodeMirror component for React.

You have to dig, through the docs to see how to change the tab size, but there’s no .of( involved. It’s under basicSetupOptions.

You might try asking this question to those writing wrappers.

There might just be a general dearth of people writing wrappers.

4

I am definitely not an expert on v5 nor v6, but I happened to spend some time reading the v6 documentation, here’s one that is exactly made for your question: CodeMirror Configuration Example

IMHO, you can think of v6 a stricter state management system, which means you have to follow some patterns to update the state, and everything is extension based. There’s always a price for correctness, I think it’s worth paying.