Hacker News Reader

Comment by gidan | Hacker News Reader

I tried codemirror and draftjs. Draftjs was actually much better than codemirror, the api for the former is so difficult to deal with, the latter was a bliss.

View on HN

One is for code, the other is for rich text. Are you sure it's an apt comparison?

Indeed there was a confusion, it was ProseMirror. To be more specific about my use-case, I wanted to build a text editor for a forum which allows to embed images and videos directly in the editing zone, in between paragraphs of the text. It’s a rather advanced thing to do for a text editor, and the solution took me several hundred of line of code with draftjs, but it was quite easy to achieve because draftjs api is very solid. Initially with ProseMirror it was a lot of struggling, and couldn’t find a way to do it . I also tried Quilljs, but wasn’t satisfied with it either.

I had a similar experience starting out with ProseMirror; I wanted to make something similar to the editors in Dropbox Paper and Notion, and found an out-of-the-box rich text editor called tiptap built onto of it.

They already had nodes for images and embeds [1, 2] which made development easy (I would recommend checking out the source code; its about a hundred lines of code for each, and simple). But as I made more custom nodes, I learned pretty well the internals of tiptap and how it used ProseMirror. And over time, I've come to appreciate knowing its api.

So if there's any advice for people trying to get started with ProseMirror, I would say to look at libraries which built upon it as example code such as tiptap or the outline rich-markdown-editor [3].

[1] https://github.com/ueberdosis/tiptap/blob/main/packages/tipt...

[2] https://github.com/ueberdosis/tiptap/blob/main/examples/Comp...

[3] https://github.com/outline/rich-markdown-editor

You can do some interesting non-code things with CodeMirror.

HyperMD[0] is probably the craziest (in a good way) thing I've seen done with CodeMirror.

[0] https://laobubu.net/HyperMD/#./docs/zh-CN/README.md and https://github.com/laobubu/HyperMD

OP should try out ProseMirror [1], which is the rich-text editor sibling of CodeMirror. And if you like ProseMirror's API, CodeMirror 6 is structured similar to it.

[1] https://prosemirror.net/

Reply on news.ycombinator.com