How to convert draft-js mentions into html?

Question

I am using "@draft-js-plugins/mention" plugin together with rich text functionality provided by draft-js. Also, I'm using "draft-js-export-html" library to convert the editor state into html. However, this library converts only rich text styling to html, mentions are converted as plain text. How can I convert mentions into html tags, something like anchor tags ? Do I have to manually manipulate JSON editorState after getting it through the convertToRaw function?

Answer 1

the "draft-js-export-html" library has a second argument for its stateToHtml function where options can be provided, such as entityStyleFn:

const options = {
  entityStyleFn: (entity) => {
    const entityType = entity.get("type").toLowerCase();

    if (entityType === "mention") {
      const { mention } = entity.get("data");
      return {
        element: "a",
        attributes: {
          userid: mention.userId,
        },
      };
    }
  },
};

let html = stateToHTML(contentState, options);

https://github.com/sstur/draft-js-utils/tree/master/packages/draft-js-export-html#entitystylefn

Or, draft-js' entire state can be sent to backend as JSON with the convertToRaw function, then, after getting back the data from the backend, that state can be fed back to draft-js and @draft-js-plugins/mention's mentionComponent function can be used for rendering custom html tags.

const mentionPlugin = createMentionPlugin({
      mentionComponent(mentionProps) {
        return (
          <span
            className={mentionProps.className}
            // eslint-disable-next-line no-alert
            onClick={() => alert('Clicked on the Mention!')}
          >
            {mentionProps.children}
          </span>
        );
      },
    });