react-draft-wysiwyg
react-draft-wysiwyg copied to clipboard
Does not retain multiple line breaks
When saving multiple line breaks in the WYSIWYG editor, they are not retained when refreshing the page.
The line breaks are being converted and saved to the database, but it appears that do not convert from markdown back to the draft format upon load.
Could you let me know the time frame for fixing this issue. Thanks!
Nivi
Hello @nivibhat : thanks a lot for reporting this. I will check this issue by this weekend.
Sounds good .Thanks
Could you please let me know if this issue is been addressed? or when would be the new timeline.
Thanks.
Sorry for the delay, hopefully this weekend :)
Hello @nivibhat : what are you using to convert markdown to draftjs editor state. Also if you are using markdown to just save content, may be you can try using plain draftjs editor state for that.
We are using markdowndraft.js library to convert between markdown to draftjs and visa versa. We are not saving the editor state object itself. We are saving the markdown content. Will I be able to save the draft editor state content as a simple markddown to save instead of editor state object and read the markdown from the database and convert the markdown content into to draftstate to display ? We couldn't find a way to do it. Thank you for your help.
Is there an update on this issue? I've run into the same problem. Multiple new lines are persisting in the database, but do not render in the wysiwyg editor on refresh
Facing same issue
Is there any solutions? :(
if you are using markdown-draft-js, add at initialization the property preserveNewlines:
markdownToDraft(value, { preserveNewlines: true })
or
draftToMarkdown(value, { preserveNewlines: true })
just a workaround
replace empty <p></p> tag with <br/> tag
export function replaceEmptyPTagWithBrTa(htmlString: string) {
return htmlString.replace(/<p><\/p>/gi, "<br/>");
}
Use html-to-draftjs
import { EditorState, ContentState } from 'draft-js'
import htmlToDraft from 'html-to-draftjs'
const html = '<p><strong>dear joe,</strong></p>\n<p></p>\n<p>lkjasdf kjsaflkj <em>asdlkfj</em> askldf </p>\n<p><strong>asdfasdfasd</strong> fasdf </p>\n<p><a href="sdfsdf" target="_self">ds</a> adf</p>\n<p></p>\n<p></p>\n<p>Kind regards,</p>\n<p>Darryl</p>';
const draftEntity = htmlToDraft(html);
const contentState = ContentState.createFromBlockArray(draftEntity.contentBlocks);
return EditorState.createWithContent(contentState);