Advantages over Tiptap.dev implementation?

[aquelehugo]

I used Tiptap.dev's implementation which is also a React layer over Prosemirror.
After testing lots of rich text editors, that was the only one which was fully functional across iOS, Android and desktop browsers.
So I wonder if there is something new that would justify using react-prosemirror instead

[smoores-dev]

Ultimately, React ProseMirror and TipTap are solving different problems.

TipTap is aiming to provide an abstraction layer over ProseMirror, along with many building blocks for common rich text editing use cases. This includes, for example, extensions for comments and an entire fullstack system for CRDT-based collaborative editing. Incidentally, this includes integrations with multiple frontend libraries, including React, but also Vue and Svelte.

React ProseMirror aims to solve one problem: safely integrate ProseMirror and React. It avoids introducing any new APIs, and aims to be compatible with most existing ProseMirror code and libraries out of the box. A library like TipTap could, conceivably, use React ProseMirror as its React integration layer.

By and large, choosing React ProseMirror over TipTap comes down to personal preference. If you prefer ProseMirror's programming model to TipTap's abstraction layer, or you wish to mostly build your own functionality rather than relying on TipTap's prebuilt extensions, then you may wish to choose React ProseMirror. Otherwise, you may wish to choose TipTap.

Aside from personal preference, there are at least two concrete advantages to React ProseMirror's approach to integrating with React over TipTap's:

1. No wrapping elements. TipTap uses a similar approach to React ProseMirror v1 to integrate with React. It synchronously produces empty DOM elements that it hands to ProseMirror as its node view DOM and content DOM, and then uses portals to render React components into them. This results in unnecessary wrapping elements around React-based node views, which can interfere with styling (and sometimes introduce unexpected editing behavior).
2. Context flows naturally. TipTap does not render elements of child nodes as children of their parent node's elements. That is, in a document with a list node with one list item child, the React elements representing the list and list item are siblings. That means that any context provided in the list component can't be consumed by the list item child.
3. Supports server side rendering. This is helpful for improving initial perceived load performance for large documents, as well as for providing semantically marked up documents for search engines.

These first two are subtle and minor improvements, but they are actually the ones that drove the development of this library, so they may matter to you, in which case you may wish to use React ProseMirror.

Finally, React ProseMirror does work across all major desktop browsers and iOS. It also appears to work on Android, but I don't have an Android device myself and have only tested this secondhand through others. If editing on Android is an important use case for you (or anyone!) and you'd like to help us out by either donating a device, testing time, or development time, please reach out!

[aquelehugo]

Thank you! I will try it for the next project I need a rich text solution :)