CodeMirror 6 support

[personalizedrefrigerator]

trafficstars

Summary

Currently, the Enhancement plugin doesn't support the beta CodeMirror 6-based markdown editor. As the CodeMirror 5 editor may be disabled by default in Joplin 3.0, it would be nice to have Enhancement working in CodeMirror 6.

Possible migration processes

There are a few different ways we could try to add CodeMirror 6 support to the Enhancement plugin:

1. Migrate the individual CodeMirror 5 plugins to support CodeMirror 6.
   • This is similar to what was done for the Quick Links plugin. Currently, Quick Links checks whether the markdown editor is CodeMirror 5 or CodeMirror 6, then loads the CodeMirror 5 extension or CodeMirror 6 extension based on that check.
   • The CodeMirror 5→6 migration guide and Joplin's work-in-progress CM6 editor documentation might be helpful here.
2. Improve the CodeMirror 5 compatibility layer and make small changes to the Enhancement plugin as necessary.
   • This is mostly the approach taken for migrating the Rich Markdown plugin
   • Eventually, Joplin plans to remove the compatibility layer, though this might be a few years in the future.
   • I've started doing this for the Enhancement plugin, but am having trouble with the line decorations added by the plugin.
3. Do a mix of options 1 and 2.

Suggested migration process

Rather than relying on the CodeMirror 5 compatibility layer, I suggest migrating the individual plugins to CodeMirror 6. To do this, I propose:

1. For each extension to be migrated, create subfolders cm5 and cm6.
2. For example, for the mermaidRenderer extension, the directory structure would look like this:

📂 mermaidRenderer
| 📂 cm5
|  |  📄 index.ts
| 📂 cm6
|  |  📄 index.ts
| 📄 index.ts
| 📄 mermaid.css

3. In the original index.ts, load one of cm5/index.ts or cm6/index.ts based on !!CodeMirror.cm6.

It might be simpler to make small changes to the CodeMirror 5 compatibility layer for some of the extensions (for example, the table formatter). For these, the above steps would be skipped.

I'm happy to create pull requests to help migrate this plugin!

[SeptemberHX]

It would be great if you can create a pull request! In fact, I'm not very good at JavaScript, TypeScript, and so on. At present, I have reached the limit of what I can do to implement the existing features. For example, I have no idea how to solve the compilation failures caused by some complex package imports (such as rendering issues with Mermaid, I tried updating to the latest version but it fails during compilation).

When developing this plugin before, I also referred to Obsidian's WYSIWYG editing feature. I remember that CodeMirror 6 provides new methods to implement the functionality of inserting rendered results in the editor. Compared to some basic functionalities, migrating to the new version may require more work for features like rendering math formulas, Mermaid, and so on.