Interpolating unsafe elements into a document via JSX can change surrounding HTML structure #292

cemerick · 2021-10-10T00:54:59Z

I'm currently using Unsafe.data to bring known-good HTML fragments (produced by a reasonable markdown->HTML generator) into the tyxml world. AIUI, that should be okay, but perhaps the current issue demonstrates that it is not.

When Unsafe.data-produced content that contains a self-closed tag (e.g. <div/>) is interpolated into a JSX template, the structure surrounding that interpolation is changed. For example, interpolating the poison element as shown here yields an HTML document where the div containing "2" is pulled into its predecessor, so that both "1" and "2" are surrounded by a red border:

let greet = () => {
  let poison = Tyxml.Html.Unsafe.data("<div/>");
  <html>
    <head><title>"Home"</title></head>
    <body>
      <div style="border:solid red 1px">
        "1" poison
      </div>
      <div> "2" </div>
    </body>
  </html>
  }

A Dream playground example is available with this code already populated, demonstrating the problem: http://dream.as/XYZ68EQPDKVt

A quick side test of this using only tyxml (i.e. no jsx) yields the expected behaviour, so it seems the interpolation into jsx is the culprit somehow.

The text was updated successfully, but these errors were encountered:

Drup · 2021-10-10T12:59:40Z

In general, it's better to debug these kind of things by looking at the emitted HTML before the browser result.

In this case, the emited HTML is:

<html><head><title>Home</title></head>
<body>
  <div style="border:solid red 1px">
    1
    <div/>
  </div>
  <div>2</div>
</body>
</html>

Which is what you wanted ... but also completely invalid HTML, and triggers the error recovery mode in the browser's HTML parsing, resulting in the wrong result you see. <div/> is not a thing in valid HTML. If you replace by <div></div>, you get what you want.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Interpolating unsafe elements into a document via JSX can change surrounding HTML structure #292

Interpolating unsafe elements into a document via JSX can change surrounding HTML structure #292

cemerick commented Oct 10, 2021

Drup commented Oct 10, 2021 •

edited

Interpolating unsafe elements into a document via JSX can change surrounding HTML structure #292

Interpolating unsafe elements into a document via JSX can change surrounding HTML structure #292

Comments

cemerick commented Oct 10, 2021

Drup commented Oct 10, 2021 • edited

Drup commented Oct 10, 2021 •

edited