SwitchUp SwitchUp Ranked Best Coding Bootcamps 2025

How to solve Draft.js convertFromHTML combining adjacent paragraphs <p> tags into one contentBlock

Altcademy Team wrote on 7 February 2018

I solved this by adding a custom DraftBlockRenderMap element for paragraph <p> tags for convertFromHTML because the default one doesn't contain it. Check out the default elements DefaultDraftBlockRenderMap. Then I will loop through the contentBlocks and change the type of 'p' into 'unstyled'.
export const CustomConvertFromHTML = (html) => { // Correctly seperates paragraphs into their own blocks const blockRenderMap = DefaultDraftBlockRenderMap.set('p', { element: 'p' }); const blocksFromHTML = convertFromHTML(html, getSafeBodyFromHTML, blockRenderMap); blocksFromHTML.contentBlocks = blocksFromHTML.contentBlocks.map(block => (block.get('type') === 'p' ? block.set('type', 'unstyled') : block)); return blocksFromHTML; };

Trusted by

Students and instructors from world-class organizations

Join the upcoming Cohort #111

Enroll for March 2nd, 2026