`convertFromHTML` merged <p> tags into one <p> tag

I’m having some problems with the convertFromHTML, it doesn’t render the right data as I expected.

For example, html: <p>Paragraph 1</p>, <p>Paragraph 2</p>, <p>Paragraph 3</p>

editorState: EditorState.createWithContent(ContentState.createFromBlockArray(convertFromHTML(_html_)), Decorator)

The html at this stage render correctly as expected.

Paragraph 1 Paragraph 2 Paragraph 3

However, when I save data and refresh the page, it displays as below (all in one line)

Paragraph 1 Paragraph 2 Paragraph 3

Then, I clicked on the editor and suddenly the html turned into <p>Paragraph 1 Paragraph 2 Paragraph 3</p>

Does anyone has similar problem like this? Thanks.

[tomconroy]

This worked for me:

import { 
  DefaultDraftBlockRenderMap, 
  ContentState, 
  convertFromHTML,
  getSafeBodyFromHTML
} from 'draft-js';
const blockRenderMap = DefaultDraftBlockRenderMap.set('p', { element: 'p' });
const blocksFromHTML = convertFromHTML(html, getSafeBodyFromHTML, blockRenderMap)
  .map(block => (block.get('type') === 'p' ? block.set('type', 'unstyled') : block));
const contentState = ContentState.createFromBlockArray(blocksFromHTML);

edited to show imports

[N1kto]

OK. Seems <p> tags wont work in DraftJS. Maybe I was doing smth wrong, but it looks DraftJS wraps any text contents into div -> span and then wraps this into whatever element you provide in your blockRenderMap. Since <p> element supports only Phrasing content children it throws violation error since <div> cannot be a child of <p>.

@jbrozena22 I tried same approach, but it only worked in case all blocks were <p />. If there was at least some known block right after <p />, say <h2 /> it combined all <p />'s into one <div /> with text being concatenated. My use case was copy/pasting content from other editor (Medium).

My ‘workaround’ was to replace all <p> tags with <section>ones (since I have access to input HTML string). And then add section to blockRenderMap