Wrong import of html tag "blockquote"

[sineveel]

Function convertFromHTML() don't correctly work with content of tag "blockquote"

[benbriggs]

Can you elaborate? I'm able to generate a block of type blockquote with the correct text when running convertFromHTML on input <blockquote>test</blockquote>.

[sineveel]

@benbriggs

[sineveel]

@benbriggs

[benbriggs]

@sineveel Thanks for the example! I see what you're saying now. It looks like there are a couple things that cause this to not work:

1. When converting from HTML to ContentState, the elements inside of the blockquote are parsed as block-level elements, and draft-convert splits them out into separate ContentBlocks while using the interpreted block type of the child element. This is intentionally different from Draft's convertHTMLToContentBlocks in an effort to take messy HTML and make the resulting ContentState match the visual editing experience as much as possible. Each of those paragraphs within the blockquote are on different lines, so it makes sense to have them as separate ContentBlocks in state. The good news is there's an easy fix here - a simple addition of a case to the htmlToBlock option that looks like this:

htmlToBlock: (nodeName, node, lastList, inBlock) => {
  if (inBlock === 'blockquote' && nodeName === 'p') {
    return 'blockquote';
  }
}

This will cause convertFromHTML to identify each inner block as a block with type blockquote (pending a small change to draft-convert that I can make).

1. There's still a problem of output, though. Given the above change works, you still get output of:

<blockquote>1</blockquote><blockquote>2</blockquote>...

since each block is treated separately in output. A possible solution here is adding a combineAdjacentBlocks option to the blockToHTML that could be used to merge together adjacent blockquote tags.

[sineveel]

@benbriggs Thank You for answer. I try to use this solution, but result is still wrong. Is I correct use?

DraftConvert.convertToHTML(DraftConvert.convertFromHTML({
  htmlToBlock: (function (nodeName, node, lastList, inBlock) {
    if (inBlock === 'blockquote' && nodeName === 'p') {
      return 'blockquote';
    }
  })
})("<blockquote><p>111</p><p>222</p></blockquote><p>333</p>"))

[benbriggs]

Like I said I need to make a small change to draft-convert before that'll work. I'll try to publish it today

[benbriggs]

@sineveel Reopening because the first part is now fixed in #8 but not sure this fully solves your use case. The code you pasted above will now output

<blockquote>111</blockquote><blockquote>222</blockquote><blockquote>333</blockquote>

[sineveel]

@benbriggs Thank You very much)