How to Develop a Google Docs-like Text Editor in React with Real-time Collaboration and ImageResize?
I am planning to develop a feature-rich text editor similar to Google Docs using React. I need the following features:
* Real-time collaboration for multiple users with live cursors to show the cursor position of each user.
* Image upload and resize functionality within the text editor.
* Paged text editor to give the feel of pages similar to Google Docs.
Questions
What are the best approaches or libraries to implement real-time collaboration and live cursors in a React-based text editor?
How can I effectively integrate image uploading and resizing within the text editor?
What is the best way to create a paged text editor feel similar to Google Docs?
Any suggestions or advice on the best tools and practices to achieve these features would be greatly appreciated.
Thank you!
3 Replies
react-mde may be helpful for the markdown editor
BlockNote
BlockNote - Javascript Block-Based React rich text editor
A beautiful text editor that just works. Easily add an editor to your app that users will love. Customize it with your own functionality like custom blocks or AI tooling.
Example for real-time collaboration: https://www.blocknotejs.org/examples/collaboration/partykit