@rspress/plugin-medium-zoom 1.42.1-canary-20240226 → 1.42.1

package/dist/index.js

@@ -23,7 +23,7 @@ function pluginMediumZoom(options = {}) {
         name: '@rspress/plugin-medium-zoom',
         globalUIComponents: [
             [
-                __WEBPACK_EXTERNAL_MODULE_node_path_c5b9b54f__["default"].posix.join(__dirname, '../src/components/MediumZoom.tsx'),
+                __WEBPACK_EXTERNAL_MODULE_node_path_c5b9b54f__["default"].join(__dirname, '../static/MediumZoom.tsx'),
                 options
             ]
         ]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rspress/plugin-medium-zoom",
-  "version": "1.42.1-canary-20240226",
+  "version": "1.42.1",
   "description": "A plugin for rspress to zoom images in docs.",
   "bugs": "https://github.com/web-infra-dev/rspress/issues",
   "repository": {
@@ -20,7 +20,8 @@
   "module": "./dist/node/index.js",
   "types": "./dist/index.d.ts",
   "files": [
-    "dist"
+    "dist",
+    "static"
   ],
   "dependencies": {
     "medium-zoom": "1.1.0"
@@ -33,11 +34,11 @@
     "@types/react-dom": "^18.3.5",
     "react": "^18.3.1",
     "typescript": "^5.5.3",
-    "@rspress/shared": "1.42.1-canary-20240226",
-    "@rspress/config": "1.0.0"
+    "@rspress/config": "1.0.0",
+    "@rspress/shared": "1.42.1"
   },
   "peerDependencies": {
-    "@rspress/runtime": "^1.42.0"
+    "@rspress/runtime": "^1.42.1"
   },
   "engines": {
     "node": ">=14.17.6"

package/static/MediumZoom.css

@@ -0,0 +1,5 @@
+/* https://github.com/francoischalifour/medium-zoom#debugging */
+.medium-zoom-overlay,
+.medium-zoom-image--opened {
+  z-index: 999;
+}

package/static/MediumZoom.tsx

@@ -0,0 +1,29 @@
+import { useLocation } from '@rspress/runtime';
+import mediumZoom, { type Zoom, type ZoomOptions } from 'medium-zoom';
+import { useEffect } from 'react';
+import './MediumZoom.css';
+
+interface Props {
+  selector?: string;
+  options?: ZoomOptions;
+}
+
+export default function MediumZoom(props: Props) {
+  const { pathname } = useLocation();
+  const { selector = '.rspress-doc img', options = {} } = props;
+
+  useEffect(() => {
+    let zoom: Zoom | undefined;
+    const timeout = setTimeout(() => {
+      const images = document.querySelectorAll(selector);
+      zoom = mediumZoom(images, { ...options, background: 'var(--rp-c-bg)' });
+    }, 100);
+    return () => {
+      clearTimeout(timeout);
+      zoom?.detach();
+      zoom?.close();
+    };
+  }, [pathname]);
+
+  return null;
+}