[Feature]: integration with twoslash which display ts info in code blocks

[sanyuan0704]

What problem does this feature solve?

Dispaly the ts information in code blocks:

source: https://shikijs.github.io/twoslash/

See the details in https://github.com/shikijs/twoslash.

What does the proposed API look like?

Now we support shiki highlighter in rspress-plugin-shiki.And we can integrate https://github.com/shikijs/twoslash/tree/main/packages/shiki-twoslash in this plugin so that the ts compiler will be added in the code block.

[SoonIter]

In Rspress V2, we default to using shiki for syntax highlighting, so this issue can be resolved after enable twoslash plugin.

I have not tested its behavior yet. So pr welcome

[Karibash]

@shikijs/twoslash provides several renderers with different approaches to displaying type information.

• rendererClassic: a simple renderer that only displays type information.
• rendererRich: extends the output to include both type information and TSDoc comments.
• rendererFloatingVue: uses FloatingVue
  to show popups. It is implemented as a wrapper around rendererRich and is also the renderer used by @shikijs/vitepress-twoslash.

Compared to rendererFloatingVue, both rendererClassic and rendererRich provide a less sophisticated UI/UX since they rely only on CSS for popups. While these renderers do ship with CSS, the styles cannot be used directly in Rspress. To achieve a UI/UX similar to VitePress, you would likely need to create a plugin such as rspress-twoslash.

It is also worth noting that Twoslash builds HTML directly from its AST, which may make it difficult to integrate popup rendering smoothly with React. The rendererFloatingVue manages this by leveraging <template> tags for integration, but it is unclear whether a similar approach would work seamlessly in React.

Because of this, contributing in this area is quite challenging for external contributors. It requires knowledge of Twoslash and HTML AST, expertise in styling for proper integration with Rspress, and also the ability to evaluate and adopt a React library for popup rendering.

I attempted to address this by using FloatingUI to display popups.However, my solution forcefully manipulates the DOM tree managed by React, which is admittedly not a good implementation. Ideally, there would be a way to integrate with React as smoothly as FloatingVue does with <template>, but unfortunately, I didn’t know how to achieve that.

[Karibash]

I made some progress on this.
I refactored the code and managed to display popups using Web Components:
https://github.com/praha-inc/byethrow/blob/eaf534203cd1094434aaa2bc38e700b62eec32ad/website/plugins/twoslash/popup.tsx

You can see it in action here:
https://praha-inc.github.io/byethrow/guide/start/quick

This implementation works by cloning the popup outside of the React-managed DOM tree, which should be safer compared to my previous approach.

If this implementation approach looks reasonable to you, I would be happy to open a PR.

[SoonIter]

I made some progress on this. I refactored the code and managed to display popups using Web Components: praha-inc/byethrow@eaf5342/website/plugins/twoslash/popup.tsx

You can see it in action here: praha-inc.github.io/byethrow/guide/start/quick

This implementation works by cloning the popup outside of the React-managed DOM tree, which should be safer compared to my previous approach.

If this implementation approach looks reasonable to you, I would be happy to open a PR.

thanks sincerely❤, I'll take a look today

[Nsttt]

I did not see this issue until today. I also tried to implement this myself a couple of weeks ago to the Zephyr docs

Very much will appreciate if something like this lands !

[Karibash]

While testing the behavior, I noticed that when copying code, hidden pop-ups were also being copied along with it.
It may be necessary to make modifications so that hidden elements are not copied.

rspress/packages/theme-default/src/layout/DocLayout/docComponents/code/CopyCodeButton.tsx

Line 10 in 38413e9

function copyCode(

It seems that VitePress implements this by ignoring elements with specific classes.
https://github.com/vuejs/vitepress/blob/648db6b3d251361e9be20b8b578f2bea70c2e8f8/src/client/app/composables/copyCode.ts#L4

[ScriptedAlchemy]

Absolutely should have this as a official builtin. Surfacing type info in docs is a nightmare.

[SoonIter]

I made some progress on this. I refactored the code and managed to display popups using Web Components: praha-inc/byethrow@eaf5342/website/plugins/twoslash/popup.tsx

You can see it in action here: praha-inc.github.io/byethrow/guide/start/quick

This implementation works by cloning the popup outside of the React-managed DOM tree, which should be safer compared to my previous approach.

If this implementation approach looks reasonable to you, I would be happy to open a PR.

Nice job!! custom-element seems to be a good method to solve the problem, it does not require users to need an additional getMdxComponents interface to handle, just like a genius.

I tested in your code, but there seems to be a little problem.

After the investigation, my conclusion is that this maxHeight value can be negative, and I'm not very familiar with floating-ui.

https://github.com/praha-inc/byethrow/blob/f31c4c66dc5920afccb06e726de7224f8507ecde/website/plugins/twoslash/popup.tsx#L74

If you have time, you can submit a PR to create @rspress/plugin-twoslash, users can use it via "```ts twoslash"

I think it doesn't need any options?