fix(mdxish): fix rendering issues with Code magic blocks

[maximilianfalco]

	Fix RM-14615

🧰 Changes

We were seeing cases where magic blocks that uses the code cases was wrapped in paragraph nodes which caused invalid HTML and values like props not being passed down correctly which resulting in errors and causing the page to not be renderable.

CodeTabs were also being split into two components like this:

Before	After

This PR fixes this by detecting when code-tabs nodes are inserted into paragraphs and lifting them out to the root level, preventing the paragraph wrapper and ensuring props are passed correctly.

Note

The fix only affects code tabs, so other block-level elements (like tables) are unchanged.

🧬 QA & Testing

Use the attached md file in the linear ticket. Paste it into raw mode and make sure no errors are thrown. Or use this raw md to test all magic block types in one go

[block:callout]
{"type":"info","body":"Hello"}
[/block]

[block:image]
{
  "images": [
    {
      "image": [
        "https://files.readme.io/fd21f977cfbb9f55b3a13ab0b827525e94ee1576f21bbe82945cdc22cc966d82-Screenshot_2024-09-12_at_3.47.05_PM.png",
        "",
        "Data Plane Setup"
      ],
      "align": "center",
      "caption": "Data Plane Setup",
      "border": true
    }
  ]
}
[/block]

[block:html]
{
  "html": "<h1>Hoo ha</h1>"
}
[/block]

[block:api-header]
{
  "title": "About CFO Control Control Tower"
}
[/block]

[block:parameters]
{
  "data": {
    "h-0": "Response",
    "0-0": "{'Message': 'There are **validation errors**', 'Errors': ['ConsumerDetails: <div>The ExternalId or CustomerID</div> must have a value.']}"
  },
  "cols": 2,
  "rows": 1,
  "align": [null, null]
}
[/block]

[block:embed]
{
  "url": "https://www.youtube.com/watch?v=FVikHLyW500&list=RD3-9V38W00CM&index=4",
  "provider": "youtube.com",
  "href": "https://www.youtube.com/watch?v=FVikHLyW500&list=RD3-9V38W00CM&index=4",
  "typeOfEmbed": "youtube"
}
[/block]

[block:code]
{
  "sidebar": true,
  "codes": [
    {
      "code": "const sidebar = 'deprecated'",
      "language": "javascript"
    }
  ]
}
[/block]

[block:code]
{
  "codes": [
    {
      "code": "hello",
      "language": "text",
      "name": "Pre-Modification Certificate"
    }
  ]
}
[/block]

• Broken on production.
• Working in this PR app.

[eaglethrost]

Will this not affect other magic blocks behaviour?

[maximilianfalco]

testing using the attached testing block in the description and the results are looking fine

[kevinports]

I linked this branch locally and QA'd with the snippet you provided in the PR description, and I'm seeing one of the code blocks getting dropped when rendering:

Screen.Cast.2026-01-16.at.10.23.56.AM.mp4

[kevinports]

Not blocking! Just a general question about this transformer for my understanding because I wasn't really involved in the initial setup of the mdxish engine.

Why didn't we re-use the magic block parser from the legacy rdmd engine instead of writing this new transformer plus the extraction/replacement stuff?
See this code from the v6 branch: https://github.com/readmeio/markdown/blob/v6/processor/parse/magic-block-parser.js

[eaglethrost]

Yes actually that transformer is based off from the legacy magic block parser! It's just we had to do quite a lot of adjustments such as providing types (since the legacy was in js) and because data processing flow is a bit different from legacy

[maximilianfalco]

@kevinports ah sorry about that, turns out there was a sidebar prop for magic blocks that we didnt knew about and it was causing some rendering issues. should all be fixed in ef99b8e

[kevinports]

Now working when I tested it. Just had a few more comments.

[rafegoldberg]

This PR was released!

🚀 Changes included in v12.0.0