I want to display a description that was created in a rich text editor created with Draft.js. The description is being saved to a mongoDB. When the description is retrieved from the DB, all the content is displayed correctly, even content with styling (e.g. h1, h2) but the links that were created in the initial description text are not being displayed as links, they are being displayed as simple text(span elements).
At the moment i am storing successfully the editorState in the DB using the convertToRaw util, and to display it i am using the convertFromRaw util as stated in the official documentation.
I think it is better if i show the JSON i am storing and how i am initiating state in the component when i want to display the description. In this example i am just storing a link with the text "link" that points to google.
JSON:
{"blocks":[{"key":"3echq","text":"link","type":"unstyled","depth":0,"inlineStyleRanges":[],"entityRanges":[{"offset":0,"length":4,"key":0}],"data":{}}],"entityMap":{"0":{"type":"LINK","mutability":"MUTABLE","data":{"url":"http://google.com"}}}}
This is how i am instantiating state in the editor component (i am just adding the "readonly" attribute to the editor if a description is being displayed):
const [editorState, setEditorState] = useState(
hasDescription
? EditorState.createWithContent(eventDescription)
: EditorState.createEmpty()
);
I am receiving from the DB the exact same JSON that i am storing but the link entity is not being display, the markup will only show the span element and not the anchor element that should be wrapping it.
You need to use DraftJS decorator. Also, DraftJS has an example in their repository
Here, the simple example with your case on Codesanbox: https://codesandbox.io/s/link-filks?fontsize=14