refactor(theme-default): refactor mediumZoom as <ImgZoom /> in getCustomMDXComponent

[Tsukistar]

Summary

refactor the plugin-medium-zoom  to ImgZoom in getCustomMDXComponent with React 19 Compatibility. This PR refactors the image component implementation by:

1. Keeping the original component Img and add a new component ImgZoom to make the image zoomable.
2. Ensuring proper theme integration with CSS variables for background colors.
3. Maintaining full backward compatibility while improving component modularity

The ImgZoom component maintains all previous zoom functionality using medium-zoom library, with enhanced ref forwarding capabilities and proper cleanup logic to prevent memory leaks. Both components are properly exported and registered in the MDX component map for immediate use in documentation.

To add a click-to-zoom image in MDX, use the following: <ImgZoom src="./example.png" alt="An image that can be zoomed" />

Related Issue

close: https://github.com/web-infra-dev/rspress/issues/2325

Checklist

• [ ] Tests updated (or not required).
• [ ] Documentation updated (or not required).

[netlify[bot]]

❌ Deploy Preview for rspress-v2 failed. Why did it fail? →

Name	Link
🔨 Latest commit	5b5d6baa0fbba09eeaacbdded32dc287a37949d2
🔍 Latest deploy log	https://app.netlify.com/projects/rspress-v2/deploys/68764809774129000847946d

[netlify[bot]]

❌ Deploy Preview for rspress failed. Why did it fail? →

Name	Link
🔨 Latest commit	5b5d6baa0fbba09eeaacbdded32dc287a37949d2
🔍 Latest deploy log	https://app.netlify.com/projects/rspress/deploys/6876480907db120008450a91

[SoonIter]

https://github.com/web-infra-dev/rspress/issues/2165

There is an issue that is very similar to this PR, you can also try it out~

[Tsukistar]

I'll try it after I finish this PR, thank you!

[Tsukistar]

Hi @SoonIter,

I've completed this PR following your guidance. I've replaced the medium-zoom to react-medium-image-zoom and I've replaced options with UncontrolledProps in react-medium-image-zoom. This allows users to directly pass any UncontrolledProps in react-medium-image-zoom, as the way in the medium-zoom plugin's documentation (https://github.com/web-infra-dev/rspress/blame/0c109a3b54287ea6b44b04870b229d6953765f4a/packages/document/docs/en/plugin/official-plugins/medium-zoom.mdx#L30-L35C192)

I'm considering whether process.env.MEDIUM_ZOOM_OPTIONS is the most suitable method for conveying option information. What are your thoughts on this approach?

[SoonIter]

Sorry, I made a mistake

There are two image syntaxes in md, after this change, only images with the md syntax ![]() will take effect.

We also need to use remark-image to make the images in <img src=“” /> effective...

<img src="" />

![]()

So I might pending this PR, there are still some tasks.