Google Docs like Inline Commenting with Draftjs Rich Text Editor. (Part 1)
At Denovers, we were working on a very interesting project of building an AI-Powered Doc Editor for Lawyers. Our responsibility was designing the entire experience as well as building the frontend with APIs Integration. We chose React.js along with Draft.js for this. There are a few things we would like to share.
Draft.js is a powerful rich text editor built by Facebook and Reactjs. However, the question arises that can we use drafts.js to make an editor like google docs that can have inline commenting as well?
The answer is yes.
The above screenshot is not from google docs but instead, it's from our own editor built on drafts.js, and here is how it's done.
Understanding Architecture
In order to achieve something like this, we need to understand the basics of draft.js. Draft.js provides us Entities that we can use for annotating text ranges with some sort of metadata.
A good example of an entity is a link. Link Entity has an URL as its metadata.
Similarly, we can use Entities to have inline commenting that can have comment text metadata (In our case we used unique span ids to have them as metadata and mapped comments with those span ids).
However there is one problem with entities, you can only have one entity at a time on the same text range. So if we have a link on some text range and we try to a comment entity on that text range the link will be lost.
To solve this issue we propose to have a single entity for everything. Link, comments, or whatever, we will have only one entity that manages them all.
This way we can achieve what we are looking for. When adding a comment we check that if selected text range has already got an entity in that case we append comment metadata to that entity or if this is not the case then we create a new entity with comment metadata.
Similarly for links, we check if selected text ranges already have entity applied on them if yes we append link metadata to that entity else we create a new entity on those text ranges with link metadata.
Denovers — Unlimited UI/UX and Frontend Development for SaaS and Mobile Apps
To be Continued…
