Draft JS linkify/mentions plugin on convertToRaw removes anchor tag

Question

I am using the draft js editor and its linkify and mentions plugin. Adding link and mentions with link work fine on editor but when I try to get the html, anchor tags are removed from the content.

My editor rendor

return (
    <div
      className={editorStyles.editor}
      style={{ height: '150px', padding: '10px' }}
      onClick={() => {
        ref.current.focus();
      }}>
      <Editor
        editorKey={'editor'}
        editorState={editorState}
        onChange={onChange}
        plugins={plugins}
        placeholder={"What's on your mind"}
        ref={ref}
      />
      <MentionSuggestions
        open={open}
        onOpenChange={onOpenChange}
        suggestions={mentions}
        onSearchChange={onSearchChange}
        onAddMention={(e) => {
         
        }}
      />
    </div>
  );

This is how I am trying to get the HTML

draftToHtml(convertToRaw(_editorState.getCurrentContent()));

If the editor has a link say google.com, the above code returns the plain text instead of the anchor tag though it shows the anchor tag in the editor. Same for the mention, I am adding the link for the mention, but there as well anchor tag getting removed. If I copy paste a link say Wikipedia , then this anchor tag isn't removed.

How to get these html with anchor tags for linkify and mentions? Need help. I am not a pro here.

Edit 1: I further checked and found out

1. Linkify on convertToRaw returns as plain text
2. Mentions works fine for convertToRaw, but draftToHtml not working here as its not supported.

I will have to manipulate the Raw data to achieve necessary result.

Answer 1

The rendered link is part of the mention/linkify component and not part of the text. That's why it is missing in the export.

If you want to have the links in the output from draftToHtml you need to use the customEntityTransform parameter.

As from the documentation :

customEntityTransform can be used for transformation of a custom entity block to html. If present its call to generate html for entity. It can take 2 parameter:

• entity ( object with { type, mutalibity, data})
• text text present in the block.