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.

The interesting thing about DraftJS is we can enhance the functionality as per our needs. We can achieve our task using a feature called Decorator. If you are aware of the decorator design pattern, then it will click you. Decorator in Draftjs allows you to add more functionality on top of the existing one.

Let’s create one such decorator. In the below code snippet, we have created a link Decorator. As per the API, you need to define strategy and components.

Strategy: The strategy takes the function as a value which will be called when a user adds the text in the editor. It checks for entity match, which in our case is “LINK”. Once this is done, it will pass on the control to the component.

Component: We need to define a component that would be rendered when LINK is detected in the editor.

Why Entity?

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.

Using decorators or custom block components, you can add rich rendering to your editor based on entity metadata.

In the below snippet we override the default rendering.

Now we’ll create the dialog which has two inputs, one for text and another for a hyperlink and submit button. The below code gets executed when the user hits submit button.

The function accepts two parameters: hyperlink (the original link) and the link display text (the text which will be shown in the editor). Now, we’ll get the current content that is already present in the editor and then create a link entity with the create entity () function provided by DraftJS.

We’ll get selected text as well to add or replace our link entity with selected text.
Finally, to add a link in the editor we need to call create with content () which takes entity and decorator as arguments. It will return the Editor State object. We can set it in our state variable which is used in Editor.

Conclusion:

It is always better to explore the library you are using before jumping onto the custom solutions. Initially, we achieved the same task through vanilla JavaScript but then faced difficult scenarios like How can we manage editing hyperlinks? and How we can add hyperlink it into the editor? But the decorator plugin from DraftJS helped us out.