remark-caption's code block captions are not working

[adwinying]

What version of astro are you using?

2.4.1

Are you using an SSR adapter? If so, which one?

None

What package manager are you using?

npm/pnpm

What operating system are you using?

Linux

What browser are you using?

Chrome

Describe the Bug

Upgrading from astro v1 to v2, I've noticed that my markdown code blocks are no longer rendered.

For example, a markdown code snippet such as this:

// ```js
// const hello = 'world'
// ```
// Code: Sample code

Does not render anything but an empty <figure> tag.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-ocigyn?file=src%2Fpages%2Ftest.md

Participation

• I am willing to submit a pull request for this issue.

[bluwy]

This seems to be a bug in remark-caption, and also related to how mdast-util-to-hast works (which was the lib that removes the code block when converting to hast. To explain the issue, here's the initial mdast after remark-caption does it's thing:

    {
      "type": "figure",
      "lang": "js",
      "meta": null,
      "value": "const hello = 'world'",
      "position": {
        "start": {
          "line": 13,
          "column": 1,
          "offset": 228
        },
        "end": {
          "line": 15,
          "column": 4,
          "offset": 259
        }
      },
      "children": [
        {
          "type": "html",
          "lang": "js",
          "meta": null,
          "value": "<pre is:raw class=\"astro-code github-dark\" style=\"background-color: #24292e; overflow-x: auto;\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #F97583\">const</span><span style=\"color: #E1E4E8\"> </span><span style=\"color: #79B8FF\">hello</span><span style=\"color: #E1E4E8\"> </span><span style=\"color: #F97583\">=</span><span style=\"color: #E1E4E8\"> </span><span style=\"color: #9ECBFF\">&#39;world&#39;</span></span></code></pre>",
          "position": {
            "start": {
              "line": 13,
              "column": 1,
              "offset": 228
            },
            "end": {
              "line": 15,
              "column": 4,
              "offset": 259
            }
          },
          "children": []
        },
        {
          "type": "figcaption",
          "children": [
            {
              "type": "text",
              "value": "this is a sample code"
            }
          ],
          "data": {
            "hName": "figcaption"
          }
        }
      ],
      "data": {
        "hName": "figure"
      }
    }

And here's the converted hast:

    {
      "type": "element",
      "tagName": "figure",
      "properties": {},
      "children": []
    }

The reason it gets removed for the code block, but not the table, is because of how remark-caption generates the "type": "figure" node. It naively copies over the information from the code block node, including the "value" prop, which mdast-util-to-hast uses it as fallback: https://github.com/syntax-tree/mdast-util-to-hast/blob/c87cd606731c88a27dbce4bfeaab913a9589bf83/lib/state.js#L531-L540. Leading to generating the wrong hast node.

A quick way to fix this is to write a custom remark plugin to patch this to remove the "type": "figure" node's "value" prop. But the correct fix is to have remark-caption not generate invalid mdast nodes instead. I don't think "type": "figure" and "type": "figcaption" nodes are valid mdast nodes?

Overall I think Astro is doing the right thing here, so closing as expected behaviour.