Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CodeMirror 6 support #63

Open
personalizedrefrigerator opened this issue Feb 21, 2024 · 1 comment
Open

CodeMirror 6 support #63

personalizedrefrigerator opened this issue Feb 21, 2024 · 1 comment

Comments

@personalizedrefrigerator
Copy link
Contributor

personalizedrefrigerator commented Feb 21, 2024

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.
  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
  1. 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
Copy link
Owner

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants