How to customize the link in DraftJS?
One of the well-known rich text editor packages is DraftJS. You can configure it as per your needs. Recently, in one of our projects I came across one challenge of enriching the hyperlink feature of the editor. By default, it allows you to add a hyperlink, but in case you need to edit the same hyperlink, you need to remove the text, add the text and then attach the link. It is for sure not a good user experience. We wanted to provide the way Google provides users with the popup as shown in the below image.
You cannot manage a lot of data without having a proper object. Thus, we need one such object which represents the metadata for a range of text within a Draft editor and that object is called Entity. It has three properties:
- type: A string that indicates what kind of entity it is, e.g. ‘LINK’, ‘MENTION’, ‘PHOTO’.
- mutability: Not to be confused with immutability a la immutable-js, this property denotes the behaviour of a range of text annotated with this entity object when editing the text range within the editor.
- data: An optional object containing metadata for the entity. For instance, a ‘LINK’ entity might contain a data object that contains the href value for that link.
In the below snippet we override the default rendering.