Prosemirror: Unhandled error when pasting a specific HTML

[kepta]

Issue details

Steps to reproduce

• Visit https://news.ycombinator.com/item?id=22104366
• Select the text as shown in screenshot below
• 
  
• Press ctrl-c to copy
• Visit prosemirror homepage https://prosemirror.net/
• Paste ctrl-v your clipboard data in the editor.

Expect an error like this in your browser console:

prosemirror.js:1 Uncaught TypeError: Cannot read property 'firstChild' of null
    at lt.addAll (prosemirror.js:1)
    at rt.parseSlice (prosemirror.js:1)
    at dr (prosemirror.js:1)
    at Hr (prosemirror.js:1)
    at Tr.paste (prosemirror.js:1)
    at HTMLDivElement.t.dom.addEventListener.t.eventHandlers.<computed> (prosemirror.js:1)

ProseMirror version

Latest

Affected platforms

I think it should affect every platform.

[kepta]

From what I can tell the readHTML method is returning undefined for the troubling html:

<meta charset='utf-8'><tr class="athing" id="22104366" style="color: rgb(130, 130, 130); font-family: Verdana, Geneva, sans-serif; font-size: medium; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(246, 246, 239); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><td class="title" style="font-family: Verdana, Geneva, sans-serif; font-size: 10pt; color: rgb(130, 130, 130); overflow: hidden;"><a href="https://www.nateliason.com/blog/roam" class="storylink" style="color: rgb(0, 0, 0); text-decoration: none;"><br class="Apple-interchange-newline">Roam: Why I Love It and How I Use It</a><span class="sitebit comhead" style="font-family: Verdana, Geneva, sans-serif; font-size: 8pt; color: rgb(130, 130, 130);"><span> </span>(<a href="https://news.ycombinator.com/from?site=nateliason.com" style="color: rgb(130, 130, 130); text-decoration: none;"><span class="sitestr">nateliason.com</span></a>)</span></td></tr><tr style="color: rgb(130, 130, 130); font-family: Verdana, Geneva, sans-serif; font-size: medium; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(246, 246, 239); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><td colspan="2" style="font-family: Verdana, Geneva, sans-serif; font-size: 10pt; color: rgb(130, 130, 130);"></td><td class="subtext" style="font-family: Verdana, Geneva, sans-serif; font-size: 7pt; color: rgb(130, 130, 130);"><span class="score" id="score_22104366">288 points</span><span> </span>by<span> </span><a href="https://news.ycombinator.com/user?id=yarapavan" class="hnuser" style="color: rgb(130, 130, 130); text-decoration: none;">yarapavan</a><span> </span><span class="age"><a href="https://news.ycombinator.com/item?id=22104366" style="color: rgb(130, 130, 130); text-decoration: none;">on Jan 21, 2020</a></span><span> </span><span id="unv_22104366"></span>|<span> </span><a href="https://news.ycombinator.com/hide?id=22104366&amp;goto=item%3Fid%3D22104366" style="color: rgb(130, 130, 130); text-decoration: none;">hide</a><span> </span>|<span> </span><a href="https://hn.algolia.com/?query=Roam%3A%20Why%20I%20Love%20It%20and%20How%20I%20Use%20It&amp;type=story&amp;dateRange=all&amp;sort=byDate&amp;storyText=false&amp;prefix&amp;page=0" class="hnpast" style="color: rgb(130, 130, 130); text-decoration: none;">past</a><span> </span>|<span> </span><a href="https://news.ycombinator.com/fave?id=22104366&amp;auth=30dc00ada4512bf4dc89b319d650725be4f455cb" style="color: rgb(130, 130, 130); text-decoration: none;">favorite</a><span> </span>|<span> </span><a href="https://news.ycombinator.com/item?id=22104366" style="color: rgb(130, 130, 130); text-decoration: none;">169 comments</a></td></tr><br class="Apple-interchange-newline">

Running devugger, this HTML gets parsed by this method into something like this:

and this line of code, grabs the br element as the first child which leads to errors.

[marijnh]

Thanks for including the HTML — copying from HN didn't actually trigger this on my system. It appears than when the browser parses <table><tbody><tr><td></td></tr><br></tbody></table>, it moves the <br> _in front of_ the table in the resulting DOM. My code did not expect that. It should be more robust with attached patch.

[marijnh]

Also good grief HN is still doing table layouts.

[walterdavis]

This is something I bang on about every time I see it. Browsers reorganize "illegal" HTML to make it conform, then they try to parse and render it. This reorganization process is up to the individual browser developer to implement, and no two agree completely on how to do this. So it's always best to start with legal, standards-conforming HTML whenever you can. TBODY may only contain TRs. No other tag will fit there. TR may only contain TD or TH.

Walter