Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: main
Choose a base branch
from

Conversation

Tsukistar
Copy link

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: #2325

Checklist

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

Copy link

netlify bot commented Jul 10, 2025

Deploy Preview for rspress-v2 ready!

Name Link
🔨 Latest commit 6b72fd4
🔍 Latest deploy log https://app.netlify.com/projects/rspress-v2/deploys/686fd746c2c0ad0008f8b51e
😎 Deploy Preview https://deploy-preview-2368--rspress-v2.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Copy link

netlify bot commented Jul 10, 2025

Deploy Preview for rspress ready!

Name Link
🔨 Latest commit 6b72fd4
🔍 Latest deploy log https://app.netlify.com/projects/rspress/deploys/686fd746852909000825de38
😎 Deploy Preview https://deploy-preview-2368--rspress.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
Lighthouse
Lighthouse
1 paths audited
Performance: 68 (🔴 down 28 from production)
Accessibility: 97 (no change from production)
Best Practices: 92 (🟢 up 9 from production)
SEO: 100 (no change from production)
PWA: -
View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify project configuration.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Refactor]: refactor mediumZoom to <Img /> in getCustomMDXComponent
1 participant