Implementing WYSIWYG Markdown editor in CodeMirror

First of all, CodeMirror is awesome! We’ve developing a Markdown note-taking app and we’re using CodeMirror for our Markdown source code editor. We’re still in private beta, so haven’t made any money yet, nonetheless we just donated a small amount on PayPal to thank @marijn for your work. It was very to work with CodeMirror.

Onto the crazy-sounding title… I know CodeMirror is supposed to work with highlighting and editing source code, but recently we came across something called HyperMD (GitHub, online demo). It’s basically a WYSIWYG editor in CodeMirror. Inline elements like bold and italics would display their markup upon being edited, and inline HTML will expand to its raw form when interacted. I looked at the code and it looks like it was done through inner modes and attaching lots of DOM event handlers…

For our project, we’re planning to build a WYSIWYG Markdown editor. HyperMD’s approach looks interesting, and if implemented in CodeMirror, we can get some otherwise tricky features for free (multiple carets and vim mode, for example). Our other alternative is to use ProseMirror and extend it ourselves.

My question is, is there some fundamental problem with HyperMD’s approach? For example, I know weird things might happen when the lines have different heights in CodeMirror, and that’s one of our concerns. Is there anything else we should look out for? Is CodeMirror designed with this kind of (crazy) use case in mind at all?

1 Like

Different line heights should not be a problem. You’ll have to do a lot of custom scripting to apply styles to your elements and expand/collapse them at the right moment, and something like tables is probably not going to work, but other than that I don’t see any serious problems.

2 Likes

Thanks so much for you answer! That’s reassuring to know.

Tables will not be expanded back to Markdown when edited, but rather created after the header has been entered. Is that realistic to do?

@marijn I dug into ProseMirror some more and felt like ProseMirror is a better choice for something like this, especially with NodeView for editing math and code blocks. By storing the markup in Marks expanding/folding should also be doable.

Do you think using ProseMirror would be better than hacking CodeMirror to accomplish the same thing? I hate to bother you, but being the author of both libraries, I think you’re the world’s most qualified person to give me some pointers…

Probably. It’ll definitely involve less fighting against the library.

1 Like

Thank you so much! <3

@ericaxu

Can you make prosemirror be like HyperMD to “click a line to show raw md source or raw html source”?