What is the best way to implement a WYSIWYG editor?

Question

Hi! I'm building a react app that needs a very powerful and customizable WYSIWYG editor. I will start by implementing things that Ghost, Medium, Typora, and Gitbook editor can do, and then maybe need to add other powerful features including collaboration. My project is in early prototype stage, so I don't even know what kind of features I may need to build in the future.What are my best options, which libraries should I consider?Did anyone experiment with Slate.js, ProseMirror, Tiptap, other libraries I may not be aware of? Which ones are the most flexible/powerful, and future proof enough to build a long term project around?Also, a side question - how hard is it to implement google-docs-like pagination in a WYSIWYG web text editor? I've asked on Slate.js chat, and apparently it's very hard, although I don't quite understand the reasons and details. Any tips on tackling that?

gerardnico · Accepted Answer

I wrote an article on this topic. https://datacadamia.com/web/html/editor
Basically, you work on a textarea, you work against a dom (html Dom directly or a virtual Dom) that acts as the AST.
Google docs is hard because it adds pagination which means you need to calculate all positions and dimension.
For basic text editing, this is not hard but if you want to add structural component, you have much more work.
React has already a text editing framework. Take a look.

billconan · Answer

https://prosemirror.net/

armchairhacker · Answer

what kind of WYSIWYG editor? Does it need to be custom?I&rsquo;ve used ToastUI editor in a side project and it integrated very well. You can use ToastUI, or look at its source code for inspiration / ideas