Table inside div is not compiling correctly due to indent

[hahnbeelee]

I have a remarkGfm-formatted table embedded inside a div, but unfortunately it doesn't compile properly. I run my mdx through a pre-parsing step that I have replicated in this sandbox. If you see the before and after, you can see that the code inside the div got indented after the parsing step. Is there any way to prevent this? I discovered that removing the indent displays the table properly.

With indent:

Without indent:

[wooorm]

What do you mean it doesn’t compile correctly?
The indent is intended: in MDX you can indent things.
Perhaps the place you screenshot from doesn’t support MDX?

[hahnbeelee]

I think we're on MDX 2. Maybe I'll try bumping packages just in case.

[ghoshnirmalya]

The issue happens when there is more than a one-level indentation for tables.

In this CodeSandbox, you can notice that the first table renders fine with the expected HTML. However, the second table contains a two-level indentation and it renders as a string.

The markdown code for the above is:

<div>

  Required parameters for integration:

  | Parameter | Description                    |
  | --------- | ------------------------------ |
  | Domain    | domain description             |
  | Api Key   | Secret API Access Key.         |

  <div>

    | Parameter | Description                    |
    | --------- | ------------------------------ |
    | Domain    | domain description             |
    | Api Key   | Secret API Access Key.         |

  </div>
</div>

The HTML that the above markdown generates is as follows:

<div><p>Required parameters for integration:</p><table>
<thead>
<tr>
<th>Parameter</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>Domain</td>
<td>domain description</td>
</tr>
<tr>
<td>Api Key</td>
<td>Secret API Access Key.</td>
</tr>
</tbody>
</table><div><p>| Parameter | Description                    |
| --------- | ------------------------------ |
| Domain    | domain description             |
| Api Key   | Secret API Access Key.         |</p></div></div>

[hahnbeelee]

hey @wooorm I think this is a bug in the parser, but would love your insight.

[wooorm]

definitely possible! might also already be fixed in https://github.com/micromark/micromark-extension-gfm-table/releases/tag/1.0.6, have you deleted node_modules and tried reinstalling? Otherwise, that’s the project where the bug goes.
There’s a related test here: https://github.com/micromark/micromark-extension-gfm-table/blob/f5e8ac19d01ee5c6ad1113c3fec1f44e205450bf/test/index.js#L367-L378

[ghoshnirmalya]

@wooorm The above solution worked for us. Thanks.

Note that the dependencies are updated in the remark-gfm repository. I'm happy to do that.

[wooorm]

Which solution? Removing node_modules?
Nothing needs to update in remark-gfm AFAIK, it uses semver to pull in bug fixes: if the bug fixes were not pulled in for you, that’s because you explicitly choose not to get bug fixes.

[ghoshnirmalya]

What I meant is that in remark-gfm, the version of micromark-extension-gfm is ^2.0.0 whereas the latest version of micromark-extension-gfm is 3.0.0.

[wooorm]

That version does not include fixes/changes to the algorithm, just more generic updates on how it can be used (https://github.com/micromark/micromark-extension-gfm/releases/tag/3.0.0). It takes a while to update all packages in the unified ecosystem. Will get to it soon.
But it won’t affect this issue!