Rosey/markdown-draft-js

markdown to draft: links, mentions, and strikethrough not preserved (typescript)

Closed this issue · 1 comments

hi there,

i noticed that although the standard styles like headings, bold, and italics are supported i am still unable to render mentions, links, or strikethrough properly.
this is the code line i use to extract editor content as markdown (to then store in a DB):

draftToMarkdown(convertToRaw(editorState.getCurrentContent()));

this is the code im using to render it back up as readOnly

const rawData = markdownToDraft(note.note, {
remarkablePreset: 'commonmark',
remarkableOptions: {
enable: {
inline: ['links', 'emphasis'],
core: ['abbr']
}
}
});
const contentState = convertFromRaw(rawData);
const editorState = EditorState.createWithContent(contentState);
...
<Editor editorState={editorState} onChange={() => {}} readOnly={true}/>

i noticed when displaying previously saved strikethrough text, the text was bounded by '~~' , links just appear as normal text, and mentions dont seem to be registered as links to the drafToMarkdown conversion (?)

Rosey commented

Hello 🙂

Something like mentions you'd need to define your own rules for, since it isn't supported by markdown normally, which isn't included in your code here. You can checkout my README, and @danielsnider kindly added some additional information on how one might go about this here - #116 (he also opened a PR to update the readme but I'm a bit behind on issues right now.)

Something like links: Is the issue that the draft readonly editor isn't including it? It seems you aren't passing in any decorators, which would be required for properly displaying links in a draft editor. (example code - https://github.com/facebook/draft-js/tree/master/examples/draft-0-10-0/link)

Similar for strikethrough: https://draftjs.org/docs/advanced-topics-inline-styles/

Hopefully this is helpful!