One of our clients wanted to build a custom Notion-like text editor with seamless integrations to their tools, streamlining the content creation process. We explored multiple open-source, highly customizable rich text editors like Slate.js, ProseMirror, Quill.js, Tiptap, and Lexical. After extensive research and experimentation, we decided to proceed with ProseMirror and Tiptap due to their high customizability, performance, and large, supportive communities.
Why ProseMirror and Tiptap?
ProseMirror:
ProseMirror is a toolkit for building rich text editors with a focus on modularity and flexibility. It is highly customizable, allowing developers to define their own schema, which is the backbone of the editor. This schema defines the document structure, ensuring that content adheres to specific rules, making ProseMirror an excellent choice for creating complex editors with bespoke functionality. For more detailed information, you can refer to the ProseMirror documentation.
Tiptap:
Tiptap is a headless editor built on top of ProseMirror, providing a more approachable API while retaining the powerful features of ProseMirror. It comes with a rich set of extensions and a large community, making it easier to extend and customize the editor. Tiptap’s compatibility with ProseMirror means you get the best of both worlds: a user-friendly API and robust underlying architecture.
Our Journey with ProseMirror and Tiptap
Initially, we experimented with BlockNote, an open-source editor library on top of Tiptap and ProseMirror. However, we encountered significant roadblocks due to the rigid schema structure in BlockNote. We decided to scrap BlockNote and fully commit to Tiptap and ProseMirror.
Building the Editor
We utilized a variety of Tiptap extensions to add essential text editing features:
@tiptap/extension-blockquote
@tiptap/extension-bold
@tiptap/extension-bullet-list
@tiptap/extension-code
@tiptap/extension-code-block-lowlight
@tiptap/extension-collaboration
@tiptap/extension-collaboration-cursor
@tiptap/extension-color
@tiptap/extension-document
@tiptap/extension-dropcursor
@tiptap/extension-font-family
@tiptap/extension-gapcursor
@tiptap/extension-hard-break
@tiptap/extension-heading
@tiptap/extension-highlight
@tiptap/extension-history
@tiptap/extension-horizontal-rule
@tiptap/extension-italic
@tiptap/extension-list-item
@tiptap/extension-ordered-list
@tiptap/extension-paragraph
@tiptap/extension-placeholder
@tiptap/extension-strike
@tiptap/extension-text
@tiptap/extension-text-align
@tiptap/extension-text-style
@tiptap/extension-underlineAdditionally, we built several custom nodes and components to enhance the editor’s functionality:
- Slash menu using Tippy.js
- Bubble menu using Tippy.js
- Turn into another node feature (similar to Notion)
- Drag and drop nodes to rearrange (similar to Notion)
- Table of contents
- Custom image node with resizable options
- Custom video node to embed YouTube and VdoCipher links
- Custom carousel node using Embla Carousel
- Custom math node using KaTeX.js
- And many other features
Implementing Real-Time Editing
To enable real-time collaboration, we used Yjs and Yjs WebSocket. Yjs is a powerful open-source CRDT (Conflict-free Replicated Data Type) library that enables real-time collaborative editing. It efficiently handles the synchronization of changes across multiple users, ensuring a seamless collaborative experience. Yjs’s robustness and active community support made it the best choice for our needs.
Adding Presentation Preview
We also added an option to preview the content in a presentation-like format using Reveal.js, a popular presentation library in React. This feature allows users to quickly switch from editing to presenting their content without leaving the editor environment.
Conclusion
Through careful selection of tools and extensive customization, we built a powerful, Notion-like text editor tailored to our client's needs. By leveraging ProseMirror and Tiptap, we created a highly flexible and performant editor with rich real-time collaboration features powered by Yjs. The addition of custom nodes, components, and a presentation preview feature ensured that the editor not only met but exceeded the client’s expectations.
This project highlights our commitment to delivering tailored solutions that enhance productivity and streamline workflows. By combining the strengths of open-source technologies and our expertise, we successfully delivered an editor that stands out in functionality and user experience.
About Boopesh Mahendran
Boopesh is one of the Co-Founders of CyberMind Works and the Head of Engineering. An alum of Madras Institute of Technology with a rich professional background, he has previously worked at Adobe and Amazon. His expertise drives the innovative solutions at CyberMind Works.