Reader breaks when post contains an image

[aerugo]

See this topic:
https://bbu.world/t/beautiful-eyes/942

Rendered here:
https://read.babelbetween.us/#/t/942

[jims]

This seems like a bit of a more hairy bug to fix. How would you prioritize it? I did some initial investigation and there is something with the html in that post that trips up the html parser. I haven't yet found a minimal repro case but have narrowed it down a bit.

[aerugo]

That the threads don't load at all is unfortunate, since that means we would have to prohibit the writers from including images, which would be a shame.

I made an example thread here for us and assigned you the top post so you can edit it: https://bbu.world/t/you-are-very-high-up/57

Maybe if you can get a print-out of the incoming HTML as the parser sees (in case there is pre-processing) it and we can try to debug together?

[aerugo]

I think the solution is to remove all lightbox-wrapper elements from the DOM. At least, that solved a related problem in a Javascript app that also eats Discourse posts. Not sure if that's applicable here.

   processCookedPost(post) {
      var div = document.createElement('div');
      div.innerHTML = post;
      var lightboxes = div.getElementsByClassName('lightbox-wrapper');
      while (lightboxes[0])
         lightboxes[0].parentNode.removeChild(lightboxes[0])
      var images = div.getElementsByTagName('img');
      while (images[0])
         images[0].parentNode.removeChild(images[0])
      var repl = div.innerHTML;
      return repl
    }

[aerugo]

Just to note, code above also removes images. Ideally, they would be jerked out of the lightbox div but still displayed. However, not displaying them at all is better than breaking the display.