Block starting with HTML tag interpreted as one JSX component

[danburzo]

Subject of the issue

I stumbled opon this bug recently: A block starting with a HTML tag, like in the example below, is interpreted as one JSX component.

<sup>1</sup> A footnote

Output from ASTExplorer (using mdxhast-0.20.2):

{
  "type": "root",
  "children": [
    {
      "type": "jsx",
      "value": "<sup>1</sup> A footnote",
      "position": {
        "start": {
          "line": 1,
          "column": 1,
          "offset": 0
        },
        "end": {
          "line": 1,
          "column": 24,
          "offset": 23
        },
        "indent": []
      }
    }
  ],
  "position": {
    "start": {
      "line": 1,
      "column": 1,
      "offset": 0
    },
    "end": {
      "line": 1,
      "column": 24,
      "offset": 23
    }
  }
}

Your environment

macOS Mojave. npm ls | grep "mdx":

├─┬ @mdx-js/loader@1.0.21
│ ├─┬ @mdx-js/mdx@1.0.21
│ │ ├─┬ remark-mdx@1.0.21
│ ├── @mdx-js/react@1.0.21
├── @next/mdx@8.1.0

Expected behaviour

A JSX element for the <sup> tag, followed by plain text.

Actual behaviour

Text becomes part of the JSX element.

[johno]

This is a bit of a tricky one. Right now block-level JSX is defined as any line that begins with a tag.

One option is to detect for inline HTML elements and instead parse that as an inline JSX block (which is what remark core does). However, that wouldn't address React components since we can't detect whether they render inline or block level HTML elements. I'm not sure if the difference between inline HTML elements and JSX would be expected or not. 🤔🤔🤔

It's also interesting to note that remark does bundle up all block-level elements into a single node (which is what MDX parsing is currently doing for all tags).

Input Markdown

<h1>hi</h1> hi there

Output AST

{
  "type": "root",
  "children": [
    {
      "type": "html",
      "value": "<h1>hi</h1> hi there",
      "position": {
        "start": {
          "line": 1,
          "column": 1,
          "offset": 0
        },
        "end": {
          "line": 1,
          "column": 21,
          "offset": 20
        },
        "indent": []
      }
    }
  ],
  "position": {
    "start": {
      "line": 1,
      "column": 1,
      "offset": 0
    },
    "end": {
      "line": 1,
      "column": 21,
      "offset": 20
    }
  }
}

[wooorm]

We’re working on rewriting the parser to solve amongst other things, this problem, in 2.0.0. Out relatively soon!

We’re updating block v. inline as: it’s a block if the opening tag is the first thing, and closing tag the last thing. In this case, theres a phrase after the closing (“a footnote”), so it will be seen as inline.

[wooorm]

Hi all! I’m going to close this as it landed on the main, the (now default) branch we’re using to gear up to the MDX@2 release.

The reason is so that it’s more clear which issues still need to be solved already and don’t require further work.

Expect another next release soonish, which might include it, or maybe it’s already released as a beta!

For more info, see #1041.