Pop in testing && improvements

[NicoZweifel]

Changes

fixes https://github.com/mintlify/mint/issues/269 but hydration warnings for grouped code blocks that describe custom components will appear. tsx, jsx and possibly other language blocks will appear. The ones without language or bash work fine without errors/pop-in. Hydration errors are addressed in a different Issue.

Tests

Tested locally with a starter template and also the mintlify docs:

For example: http://localhost:3000/development in the mintlify docs is loading without any hydration errors or pop-in, even the code blocks, but if you add a language like 'tsx' instead of bash or sth else and a Component, to the code block like so:

<Accordion title="I am an Accordion.">
  You can put any content in here.
</Accordion>

the hydration will fail again. As far as I am aware this is the only Issue left regarding pop-in/hydration of the code blocks. So far I observerd that any code block, nested in p , grouped and highlighted works, except the ones with tsx or jsx as language. I will try to narrow it down more, could also be related to the kind of highlighting that is done on the code.

[NicoZweifel]

I left this as draft so we can futher investigate the hydration errors without having to use any hacks or refactoring on the code blocks first. If its okay with you, we can keep it open until we solve the remaining hydration errors.

[NicoZweifel]

I tried to reproduce it but could not manage to get this error. I was using yarn preconfigure ../docs Except for the hydration errors of highlighted code it was rendering fine:

[NicoZweifel]

Are you getting a usable call stack with the error?

[NicoZweifel]

I was going to review/fix in this PR some more but I'll create a new one 😄 There was one issue with multiple Tabs in the CodeGroups, I fixed it now on a new branch.

edit: https://github.com/mintlify/components/pull/48