react-draft-wysiwyg icon indicating copy to clipboard operation
react-draft-wysiwyg copied to clipboard

Does not retain multiple line breaks

Open nivibhat opened this issue 8 years ago • 12 comments

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

nivibhat avatar Sep 27 '17 15:09 nivibhat

Hello @nivibhat : thanks a lot for reporting this. I will check this issue by this weekend.

jpuri avatar Sep 27 '17 17:09 jpuri

Sounds good .Thanks

nivibhat avatar Sep 28 '17 14:09 nivibhat

Could you please let me know if this issue is been addressed? or when would be the new timeline.

Thanks.

nivibhat avatar Oct 03 '17 18:10 nivibhat

Sorry for the delay, hopefully this weekend :)

jpuri avatar Oct 06 '17 18:10 jpuri

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.

jpuri avatar Oct 08 '17 11:10 jpuri

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.

nivibhat avatar Oct 09 '17 15:10 nivibhat

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

jdoud avatar Jun 18 '18 23:06 jdoud

Facing same issue

rahul-vs avatar Oct 28 '19 16:10 rahul-vs

Is there any solutions? :(

pinionhermanluna avatar Nov 29 '19 04:11 pinionhermanluna

if you are using markdown-draft-js, add at initialization the property preserveNewlines: markdownToDraft(value, { preserveNewlines: true }) or draftToMarkdown(value, { preserveNewlines: true })

Momomash avatar Feb 16 '21 13:02 Momomash

just a workaround replace empty <p></p> tag with <br/> tag

export function replaceEmptyPTagWithBrTa(htmlString: string) {
  return htmlString.replace(/<p><\/p>/gi, "<br/>");
}

byteab avatar Mar 03 '23 10:03 byteab

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);

darrylmabini avatar Oct 15 '24 00:10 darrylmabini