From 439880b1e0ff11a88fc04ca1d5389497f914c0d4 Mon Sep 17 00:00:00 2001
From: yangxingyuan <yangxingyuan@bytedance.com>
Date: Fri, 19 May 2023 16:52:34 +0800
Subject: [PATCH 1/2] feat: add medium zoom

---
 .changeset/tidy-eagles-cover.md               |  5 ++
 packages/cli/doc-core/package.json            |  2 +-
 packages/cli/doc-core/src/node/build.ts       |  4 +-
 packages/cli/doc-core/src/node/dev.ts         |  4 +-
 packages/cli/doc-core/src/node/hooks.ts       | 50 +++++++++---
 .../src/node/runtimeModule/globalStyles.ts    |  6 +-
 .../node/runtimeModule/globalUIComponents.ts  |  8 +-
 .../cli/doc-core/src/shared/types/index.ts    |  8 ++
 .../theme-default/layout/DocLayout/index.tsx  | 12 +--
 .../src/theme-default/styles/base.css         |  6 --
 .../cli/doc-plugin-medium-zoom/.eslintrc.cjs  | 11 +++
 .../cli/doc-plugin-medium-zoom/.gitignore     | 41 ++++++++++
 .../cli/doc-plugin-medium-zoom/.npmignore     | 37 +++++++++
 packages/cli/doc-plugin-medium-zoom/.npmrc    |  1 +
 .../cli/doc-plugin-medium-zoom/.prettierrc    |  5 ++
 .../cli/doc-plugin-medium-zoom/CHANGELOG.md   |  1 +
 packages/cli/doc-plugin-medium-zoom/LICENSE   | 21 +++++
 packages/cli/doc-plugin-medium-zoom/README.md | 26 +++++++
 .../doc-plugin-medium-zoom/modern.config.ts   | 12 +++
 .../cli/doc-plugin-medium-zoom/package.json   | 76 +++++++++++++++++++
 .../doc-plugin-medium-zoom/src/.eslintrc.cjs  | 10 +++
 .../src/components/MediumZoom.css             |  5 ++
 .../src/components/MediumZoom.tsx             | 21 +++++
 .../cli/doc-plugin-medium-zoom/src/index.ts   | 16 ++++
 .../src/modern-app-env.d.ts                   |  2 +
 .../tests/.eslintrc.cjs                       |  9 +++
 .../tests/tsconfig.json                       |  7 ++
 .../cli/doc-plugin-medium-zoom/tsconfig.json  | 21 +++++
 .../doc-plugin-medium-zoom/vitest.config.ts   | 10 +++
 .../docs/en/api/config-basic.mdx              | 27 +++++++
 .../docs/zh/api/config-basic.mdx              | 27 +++++++
 pnpm-lock.yaml                                | 39 +++++++++-
 32 files changed, 491 insertions(+), 39 deletions(-)
 create mode 100644 .changeset/tidy-eagles-cover.md
 create mode 100644 packages/cli/doc-plugin-medium-zoom/.eslintrc.cjs
 create mode 100644 packages/cli/doc-plugin-medium-zoom/.gitignore
 create mode 100644 packages/cli/doc-plugin-medium-zoom/.npmignore
 create mode 100644 packages/cli/doc-plugin-medium-zoom/.npmrc
 create mode 100644 packages/cli/doc-plugin-medium-zoom/.prettierrc
 create mode 100644 packages/cli/doc-plugin-medium-zoom/CHANGELOG.md
 create mode 100644 packages/cli/doc-plugin-medium-zoom/LICENSE
 create mode 100644 packages/cli/doc-plugin-medium-zoom/README.md
 create mode 100644 packages/cli/doc-plugin-medium-zoom/modern.config.ts
 create mode 100644 packages/cli/doc-plugin-medium-zoom/package.json
 create mode 100644 packages/cli/doc-plugin-medium-zoom/src/.eslintrc.cjs
 create mode 100644 packages/cli/doc-plugin-medium-zoom/src/components/MediumZoom.css
 create mode 100644 packages/cli/doc-plugin-medium-zoom/src/components/MediumZoom.tsx
 create mode 100644 packages/cli/doc-plugin-medium-zoom/src/index.ts
 create mode 100644 packages/cli/doc-plugin-medium-zoom/src/modern-app-env.d.ts
 create mode 100644 packages/cli/doc-plugin-medium-zoom/tests/.eslintrc.cjs
 create mode 100644 packages/cli/doc-plugin-medium-zoom/tests/tsconfig.json
 create mode 100644 packages/cli/doc-plugin-medium-zoom/tsconfig.json
 create mode 100644 packages/cli/doc-plugin-medium-zoom/vitest.config.ts

diff --git a/.changeset/tidy-eagles-cover.md b/.changeset/tidy-eagles-cover.md
new file mode 100644
index 000000000000..043a1da45b5d
--- /dev/null
+++ b/.changeset/tidy-eagles-cover.md
@@ -0,0 +1,5 @@
+---
+'@modern-js/doc-core': patch
+---
+
+feat: add doc medium-zoom plugin
diff --git a/packages/cli/doc-core/package.json b/packages/cli/doc-core/package.json
index b89a44b5d365..cca6785cafc8 100644
--- a/packages/cli/doc-core/package.json
+++ b/packages/cli/doc-core/package.json
@@ -61,6 +61,7 @@
     "@modern-js/builder-rspack-provider": "workspace:*",
     "@modern-js/mdx-rs-binding": "^0.1.8",
     "@modern-js/remark-container": "workspace:*",
+    "@modern-js/doc-plugin-medium-zoom": "workspace:*",
     "@modern-js/utils": "workspace:*",
     "@types/compression": "^1.7.2",
     "@types/polka": "^0.5.4",
@@ -79,7 +80,6 @@
     "html-to-text": "^9.0.3",
     "lodash-es": "^4.17.21",
     "mdast-util-mdxjs-esm": "^1.3.0",
-    "medium-zoom": "1.0.8",
     "node-fetch": "3.3.0",
     "nprogress": "^0.2.0",
     "ora": "5.4.1",
diff --git a/packages/cli/doc-core/src/node/build.ts b/packages/cli/doc-core/src/node/build.ts
index 500d35ea0c6d..bc22b625e994 100644
--- a/packages/cli/doc-core/src/node/build.ts
+++ b/packages/cli/doc-core/src/node/build.ts
@@ -12,7 +12,7 @@ import {
 } from './constants';
 import { createModernBuilder } from './createBuilder';
 import { writeSearchIndex } from './searchIndex';
-import { modifyConfig, beforeBuild, afterBuild } from './hooks';
+import { modifyConfig, beforeBuild, afterBuild, loadPlugins } from './hooks';
 import { logger } from './utils';
 import { APPEARANCE_KEY, normalizeSlash } from '@/shared/utils';
 import type { Route } from '@/node/route/RouteService';
@@ -137,6 +137,8 @@ export async function renderPages(config: UserConfig) {
 
 export async function build(rootDir: string, config: UserConfig) {
   const isProd = true;
+  await loadPlugins(config);
+
   const modifiedConfig = await modifyConfig({
     config,
   });
diff --git a/packages/cli/doc-core/src/node/dev.ts b/packages/cli/doc-core/src/node/dev.ts
index c3647f4ebfdb..d9abac6a1549 100644
--- a/packages/cli/doc-core/src/node/dev.ts
+++ b/packages/cli/doc-core/src/node/dev.ts
@@ -2,7 +2,7 @@ import { UserConfig } from 'shared/types';
 import { removeLeadingSlash } from '../shared/utils';
 import { createModernBuilder } from './createBuilder';
 import { writeSearchIndex } from './searchIndex';
-import { modifyConfig, beforeBuild, afterBuild } from './hooks';
+import { modifyConfig, beforeBuild, afterBuild, loadPlugins } from './hooks';
 
 interface ServerInstance {
   close: () => Promise<void>;
@@ -14,7 +14,7 @@ export async function dev(
 ): Promise<ServerInstance> {
   const base = config.doc?.base ?? '';
   const isProd = false;
-
+  await loadPlugins(config);
   try {
     const modifiedConfig = await modifyConfig({
       config,
diff --git a/packages/cli/doc-core/src/node/hooks.ts b/packages/cli/doc-core/src/node/hooks.ts
index 664412591c6d..7c5ced8aeab8 100644
--- a/packages/cli/doc-core/src/node/hooks.ts
+++ b/packages/cli/doc-core/src/node/hooks.ts
@@ -1,5 +1,4 @@
 import { UserConfig, PageIndexInfo, DocPlugin } from 'shared/types';
-import { pluginLastUpdated } from './plugins/lastUpdated';
 import { AdditionalPage } from '@/shared/types/Plugin';
 
 type HookOptions = {
@@ -8,20 +7,35 @@ type HookOptions = {
   pageData?: PageIndexInfo;
 };
 
-function getPlugins(config: UserConfig) {
-  const plugins: DocPlugin[] = config.doc?.plugins || [];
+let docPlugins: DocPlugin[] = [];
+
+// The init function is used to initialize the doc plugins and will execute before the build process.
+export async function loadPlugins(config: UserConfig) {
+  // Clear docPlugins first, for the watch mode
+  docPlugins = [];
   const enableLastUpdated =
     config.doc.themeConfig?.lastUpdated ||
     config.doc.themeConfig?.locales?.some(locale => locale.lastUpdated);
+  const mediumZoomConfig = config.doc.mediumZoom ?? true;
   if (enableLastUpdated) {
-    plugins.push(pluginLastUpdated());
+    const { pluginLastUpdated } = await import('./plugins/lastUpdated');
+    docPlugins.push(pluginLastUpdated());
+  }
+  if (mediumZoomConfig) {
+    const { pluginMediumZoom } = await import(
+      '@modern-js/doc-plugin-medium-zoom'
+    );
+    docPlugins.push(
+      pluginMediumZoom(
+        typeof mediumZoomConfig === 'object' ? mediumZoomConfig : undefined,
+      ),
+    );
   }
-  return plugins;
+  docPlugins.push(...(config.doc.plugins || []));
 }
 
 export async function modifyConfig(hookOptions: HookOptions) {
   const { config } = hookOptions;
-  const docPlugins = getPlugins(config);
 
   // config hooks
   for (const plugin of docPlugins) {
@@ -35,7 +49,6 @@ export async function modifyConfig(hookOptions: HookOptions) {
 
 export async function beforeBuild(hookOptions: HookOptions) {
   const { config, isProd = true } = hookOptions;
-  const docPlugins = getPlugins(config);
 
   // beforeBuild hooks
   return await Promise.all(
@@ -49,7 +62,6 @@ export async function beforeBuild(hookOptions: HookOptions) {
 
 export async function afterBuild(hookOptions: HookOptions) {
   const { config, isProd = true } = hookOptions;
-  const docPlugins = getPlugins(config);
 
   // afterBuild hooks
   return await Promise.all(
@@ -63,7 +75,6 @@ export async function afterBuild(hookOptions: HookOptions) {
 
 export async function extendPageData(hookOptions: HookOptions): Promise<void> {
   const { pageData } = hookOptions;
-  const docPlugins = getPlugins(hookOptions.config);
   // extendPageData hooks
   await Promise.all(
     docPlugins
@@ -78,7 +89,6 @@ export async function addPages(
   hookOptions: HookOptions,
 ): Promise<AdditionalPage[]> {
   const { config } = hookOptions;
-  const docPlugins = getPlugins(config);
 
   // addPages hooks
   const result = await Promise.all(
@@ -91,3 +101,23 @@ export async function addPages(
 
   return result.flat();
 }
+
+export async function globalUIComponents(): Promise<string[]> {
+  // globalUIComponents hooks
+  const result = docPlugins.map(plugin => {
+    return plugin.globalUIComponents || [];
+  });
+
+  return result.flat();
+}
+
+export async function globalStyles(): Promise<string[]> {
+  // globalStyles hooks
+  const result = docPlugins
+    .filter(plugin => typeof plugin.globalStyles === 'string')
+    .map(plugin => {
+      return plugin.globalStyles;
+    });
+
+  return result;
+}
diff --git a/packages/cli/doc-core/src/node/runtimeModule/globalStyles.ts b/packages/cli/doc-core/src/node/runtimeModule/globalStyles.ts
index f2d70dda0e89..d7c4c844f6af 100644
--- a/packages/cli/doc-core/src/node/runtimeModule/globalStyles.ts
+++ b/packages/cli/doc-core/src/node/runtimeModule/globalStyles.ts
@@ -1,18 +1,20 @@
 import { join } from 'path';
+import { globalStyles } from '../hooks';
 import RuntimeModulesPlugin from './RuntimeModulePlugin';
 import { RuntimeModuleID } from '.';
 import { UserConfig } from '@/shared/types';
 
-export function globalStylesVMPlugin(
+export async function globalStylesVMPlugin(
   _scanDir: string,
   config: UserConfig,
   _isSSR: boolean,
   runtimeTempDir: string,
 ) {
   const modulePath = join(runtimeTempDir, `${RuntimeModuleID.GlobalStyles}.js`);
+  const globalStylesByPlugins = await globalStyles();
   const moduleContent = [
     config.doc?.globalStyles || '',
-    ...(config.doc?.plugins || []).map(plugin => plugin.globalStyles || ''),
+    ...globalStylesByPlugins,
   ]
     .filter(source => source.length > 0)
     .map(source => `import '${source}';`)
diff --git a/packages/cli/doc-core/src/node/runtimeModule/globalUIComponents.ts b/packages/cli/doc-core/src/node/runtimeModule/globalUIComponents.ts
index 9542398a4a03..1d8f374cf438 100644
--- a/packages/cli/doc-core/src/node/runtimeModule/globalUIComponents.ts
+++ b/packages/cli/doc-core/src/node/runtimeModule/globalUIComponents.ts
@@ -1,9 +1,10 @@
 import { join } from 'path';
+import { globalUIComponents } from '../hooks';
 import RuntimeModulesPlugin from './RuntimeModulePlugin';
 import { RuntimeModuleID } from '.';
 import { UserConfig } from '@/shared/types';
 
-export function globalUIComponentsVMPlugin(
+export async function globalUIComponentsVMPlugin(
   _scanDir: string,
   config: UserConfig,
   _isSSR: boolean,
@@ -14,11 +15,10 @@ export function globalUIComponentsVMPlugin(
     runtimeTempDir,
     `${RuntimeModuleID.GlobalComponents}.js`,
   );
+  const globalUIComponentsByPlugins = await globalUIComponents();
   const moduleContent = [
     ...(config.doc?.globalUIComponents || []),
-    ...(config.doc?.plugins || [])
-      .map(plugin => plugin.globalUIComponents || [])
-      .flat(),
+    ...globalUIComponentsByPlugins,
   ]
     .map(source => `import Comp_${index++} from '${source}';`)
     .concat(
diff --git a/packages/cli/doc-core/src/shared/types/index.ts b/packages/cli/doc-core/src/shared/types/index.ts
index 88071ae0661b..0f34d905e0ec 100644
--- a/packages/cli/doc-core/src/shared/types/index.ts
+++ b/packages/cli/doc-core/src/shared/types/index.ts
@@ -119,6 +119,14 @@ export interface DocConfig<ThemeConfig = DefaultThemeConfig> {
    * Search options
    */
   search?: SearchOptions;
+  /**
+   * Whether to enable medium-zoom, default is true
+   */
+  mediumZoom?:
+    | boolean
+    | {
+        selector?: string;
+      };
 }
 
 export type BaseRuntimePageInfo = Omit<
diff --git a/packages/cli/doc-core/src/theme-default/layout/DocLayout/index.tsx b/packages/cli/doc-core/src/theme-default/layout/DocLayout/index.tsx
index c07f02a5833c..432677a5da4d 100644
--- a/packages/cli/doc-core/src/theme-default/layout/DocLayout/index.tsx
+++ b/packages/cli/doc-core/src/theme-default/layout/DocLayout/index.tsx
@@ -1,7 +1,6 @@
 import { useLocation } from 'react-router-dom';
 import { useEffect, useState } from 'react';
 import { MDXProvider } from '@mdx-js/react';
-import mediumZoom from 'medium-zoom';
 import { Aside } from '../../components/Aside';
 import { DocFooter } from '../../components/DocFooter';
 import { useLocaleSiteData, useSidebarData } from '../../logic';
@@ -20,15 +19,6 @@ export interface DocLayoutProps {
   afterOutline?: React.ReactNode;
 }
 
-function DocContent() {
-  const { pathname } = useLocation();
-  useEffect(() => {
-    const images = document.querySelectorAll('.modern-doc img');
-    mediumZoom(images);
-  }, [pathname]);
-  return <Content />;
-}
-
 export function DocLayout(props: DocLayoutProps) {
   const { beforeDocFooter, beforeDoc, afterDoc, beforeOutline, afterOutline } =
     props;
@@ -86,7 +76,7 @@ export function DocLayout(props: DocLayoutProps) {
             <div className="modern-doc">
               <TabDataContext.Provider value={{ tabData, setTabData }}>
                 <MDXProvider components={getCustomMDXComponent()}>
-                  <DocContent />
+                  <Content />
                 </MDXProvider>
               </TabDataContext.Provider>
               <div>
diff --git a/packages/cli/doc-core/src/theme-default/styles/base.css b/packages/cli/doc-core/src/theme-default/styles/base.css
index 0efff1eeba6e..e06521810c76 100644
--- a/packages/cli/doc-core/src/theme-default/styles/base.css
+++ b/packages/cli/doc-core/src/theme-default/styles/base.css
@@ -60,12 +60,6 @@ button:focus-visible {
   height: 2px;
 }
 
-/* https://github.com/francoischalifour/medium-zoom#debugging */
-.medium-zoom-overlay,
-.medium-zoom-image--opened {
-  z-index: 999;
-}
-
 :root {
   --code-color-text: #414141;
   --code-color-background: transparent;
diff --git a/packages/cli/doc-plugin-medium-zoom/.eslintrc.cjs b/packages/cli/doc-plugin-medium-zoom/.eslintrc.cjs
new file mode 100644
index 000000000000..56471abf58dc
--- /dev/null
+++ b/packages/cli/doc-plugin-medium-zoom/.eslintrc.cjs
@@ -0,0 +1,11 @@
+module.exports = {
+  root: true,
+  extends: ['@modern-js'],
+  ignorePatterns: ['index.d.ts', 'MediumZoom.tsx'],
+  rules: {
+    '@typescript-eslint/no-non-null-assertion': 'off',
+  },
+  parserOptions: {
+    project: require.resolve('./tsconfig.json'),
+  },
+};
diff --git a/packages/cli/doc-plugin-medium-zoom/.gitignore b/packages/cli/doc-plugin-medium-zoom/.gitignore
new file mode 100644
index 000000000000..ac5a6b16c5f0
--- /dev/null
+++ b/packages/cli/doc-plugin-medium-zoom/.gitignore
@@ -0,0 +1,41 @@
+.DS_Store
+
+.pnp
+.pnp.js
+.env.local
+.env.*.local
+.history
+.rts*
+*.log*
+*.pid
+*.pid.*
+*.report
+*.lcov
+lib-cov
+
+node_modules/
+.npm
+.lock-wscript
+.yarn-integrity
+.node_repl_history
+.nyc_output
+*.tsbuildinfo
+.eslintcache
+.sonarlint
+
+dist/
+coverage/
+release/
+output/
+output_resource/
+
+.vscode/**/*
+!.vscode/settings.json
+!.vscode/extensions.json
+.idea/
+
+**/*/typings/auto-generated
+
+.changeset/pre.json
+
+.pnpm-store/
diff --git a/packages/cli/doc-plugin-medium-zoom/.npmignore b/packages/cli/doc-plugin-medium-zoom/.npmignore
new file mode 100644
index 000000000000..cd1639a925df
--- /dev/null
+++ b/packages/cli/doc-plugin-medium-zoom/.npmignore
@@ -0,0 +1,37 @@
+.DS_Store
+
+.pnp
+.pnp.js
+.env.local
+.env.*.local
+.history
+.rts*
+*.log*
+*.pid
+*.pid.*
+*.report
+*.lcov
+lib-cov
+
+node_modules/
+.npm
+.lock-wscript
+.yarn-integrity
+.node_repl_history
+.nyc_output
+*.tsbuildinfo
+.eslintcache
+.sonarlint
+
+coverage/
+release/
+output/
+output_resource/
+tests/
+
+.vscode/**/*
+!.vscode/settings.json
+!.vscode/extensions.json
+.idea/
+
+**/*/api/typings/auto-generated
diff --git a/packages/cli/doc-plugin-medium-zoom/.npmrc b/packages/cli/doc-plugin-medium-zoom/.npmrc
new file mode 100644
index 000000000000..319e41e69dc9
--- /dev/null
+++ b/packages/cli/doc-plugin-medium-zoom/.npmrc
@@ -0,0 +1 @@
+strict-peer-dependencies=false
diff --git a/packages/cli/doc-plugin-medium-zoom/.prettierrc b/packages/cli/doc-plugin-medium-zoom/.prettierrc
new file mode 100644
index 000000000000..5393aaf2da6e
--- /dev/null
+++ b/packages/cli/doc-plugin-medium-zoom/.prettierrc
@@ -0,0 +1,5 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all",
+  "arrowParens": "avoid"
+}
diff --git a/packages/cli/doc-plugin-medium-zoom/CHANGELOG.md b/packages/cli/doc-plugin-medium-zoom/CHANGELOG.md
new file mode 100644
index 000000000000..20a3485485e7
--- /dev/null
+++ b/packages/cli/doc-plugin-medium-zoom/CHANGELOG.md
@@ -0,0 +1 @@
+# @modern-js/doc-plugin-medium-zoom
diff --git a/packages/cli/doc-plugin-medium-zoom/LICENSE b/packages/cli/doc-plugin-medium-zoom/LICENSE
new file mode 100644
index 000000000000..a33f52674491
--- /dev/null
+++ b/packages/cli/doc-plugin-medium-zoom/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Modern.js
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/packages/cli/doc-plugin-medium-zoom/README.md b/packages/cli/doc-plugin-medium-zoom/README.md
new file mode 100644
index 000000000000..52ee1471c47a
--- /dev/null
+++ b/packages/cli/doc-plugin-medium-zoom/README.md
@@ -0,0 +1,26 @@
+<p align="center">
+  <a href="https://modernjs.dev" target="blank"><img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ylaelkeh7nuhfnuhf/modernjs-cover.png" width="300" alt="Modern.js Logo" /></a>
+</p>
+
+<h1 align="center">Modern.js Doc</h1>
+
+<p align="center">
+ The Documentation Framework of Modern.js.
+</p>
+
+## Getting Started
+
+Please follow [Quick Start](https://modernjs.dev/doc-tools/guide/getting-started.html) to get started with Modern.js Doc.
+
+## Documentation
+
+- [English Documentation](https://modernjs.dev/doc-tools/)
+- [中文文档](https://modernjs.dev/doc-tools/zh/)
+
+## Contributing
+
+Please read the [Contributing Guide](https://github.com/web-infra-dev/modern.js/blob/main/CONTRIBUTING.md).
+
+## License
+
+Modern.js is [MIT licensed](https://github.com/web-infra-dev/modern.js/blob/main/LICENSE).
diff --git a/packages/cli/doc-plugin-medium-zoom/modern.config.ts b/packages/cli/doc-plugin-medium-zoom/modern.config.ts
new file mode 100644
index 000000000000..0f0c463a6236
--- /dev/null
+++ b/packages/cli/doc-plugin-medium-zoom/modern.config.ts
@@ -0,0 +1,12 @@
+// https://modernjs.dev/module-tools/en/api
+// TODO: Add `defineConfig` after @modern-js/module-tools restore the function
+export default {
+  testing: {
+    transformer: 'ts-jest',
+  },
+  buildConfig: {
+    buildType: 'bundle',
+    format: 'esm',
+    sourceMap: true,
+  },
+};
diff --git a/packages/cli/doc-plugin-medium-zoom/package.json b/packages/cli/doc-plugin-medium-zoom/package.json
new file mode 100644
index 000000000000..885dec9d0394
--- /dev/null
+++ b/packages/cli/doc-plugin-medium-zoom/package.json
@@ -0,0 +1,76 @@
+{
+  "name": "@modern-js/doc-plugin-medium-zoom",
+  "version": "2.20.0",
+  "description": "The Documentation Framework of Modern.js.",
+  "homepage": "https://modernjs.dev/doc-tools/",
+  "bugs": "https://github.com/web-infra-dev/modern.js/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/web-infra-dev/modern.js",
+    "directory": "packages/cli/doc-plugin-medium-zoom"
+  },
+  "license": "MIT",
+  "type": "module",
+  "jsnext:source": "./src/index.ts",
+  "types": "./dist/index.d.ts",
+  "main": "./dist/index.js",
+  "module": "./dist/node/index.js",
+  "scripts": {
+    "dev": "modern-lib dev",
+    "build": "modern-lib build",
+    "reset": "rimraf ./**/node_modules",
+    "lint": "modern-lib lint",
+    "change": "modern-lib change",
+    "bump": "modern-lib bump",
+    "pre": "modern-lib pre",
+    "change-status": "modern-lib change-status",
+    "gen-release-note": "modern-lib gen-release-note",
+    "release": "modern-lib release",
+    "new": "modern-lib new",
+    "test": "vitest run --passWithNoTests",
+    "upgrade": "modern-lib upgrade"
+  },
+  "engines": {
+    "node": ">=14.17.6"
+  },
+  "eslintIgnore": [
+    "node_modules/",
+    "dist/"
+  ],
+  "peerDependencies": {
+    "@modern-js/doc-tools": "workspace:^2.20.0",
+    "react": ">=17"
+  },
+  "devDependencies": {
+    "@modern-js/module-tools": "workspace:*",
+    "@modern-js/tsconfig": "workspace:*",
+    "@scripts/build": "workspace:*",
+    "@types/node": "^18.11.17",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "@types/yaml-front-matter": "^4.1.0",
+    "husky": "^8",
+    "lint-staged": "~13.1.0",
+    "prettier": "^2.6.2",
+    "typescript": "^4.8.4",
+    "vitest": "0.21.1",
+    "yaml-front-matter": "^4.1.1"
+  },
+  "sideEffects": [
+    "*.css",
+    "*.less",
+    "*.sass",
+    "*.scss"
+  ],
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "dependencies": {
+    "@modern-js/utils": "workspace:*",
+    "medium-zoom": "1.0.8"
+  }
+}
diff --git a/packages/cli/doc-plugin-medium-zoom/src/.eslintrc.cjs b/packages/cli/doc-plugin-medium-zoom/src/.eslintrc.cjs
new file mode 100644
index 000000000000..0cd5d26c6252
--- /dev/null
+++ b/packages/cli/doc-plugin-medium-zoom/src/.eslintrc.cjs
@@ -0,0 +1,10 @@
+// eslint-disable-next-line import/no-commonjs
+module.exports = {
+  root: true,
+  extends: ['@modern-js-app'],
+  ignorePatterns: ['components/MediumZoom.tsx'],
+  parserOptions: {
+    tsconfigRootDir: __dirname,
+    project: ['../tsconfig.json'],
+  },
+};
diff --git a/packages/cli/doc-plugin-medium-zoom/src/components/MediumZoom.css b/packages/cli/doc-plugin-medium-zoom/src/components/MediumZoom.css
new file mode 100644
index 000000000000..6d2090317d2c
--- /dev/null
+++ b/packages/cli/doc-plugin-medium-zoom/src/components/MediumZoom.css
@@ -0,0 +1,5 @@
+/* https://github.com/francoischalifour/medium-zoom#debugging */
+.medium-zoom-overlay,
+.medium-zoom-image--opened {
+  z-index: 999;
+}
diff --git a/packages/cli/doc-plugin-medium-zoom/src/components/MediumZoom.tsx b/packages/cli/doc-plugin-medium-zoom/src/components/MediumZoom.tsx
new file mode 100644
index 000000000000..616e57d77f1b
--- /dev/null
+++ b/packages/cli/doc-plugin-medium-zoom/src/components/MediumZoom.tsx
@@ -0,0 +1,21 @@
+// @ts-ignore avoid circular dependency because the `doc-core` packgage will also import `doc-plugin-medium-zoom`
+// the `@modern-js/doc-core` will be aliased to `doc-core` package
+import { useLocation } from '@modern-js/doc-core/runtime';
+import mediumZoom from 'medium-zoom';
+import { useEffect } from 'react';
+import './MediumZoom.css';
+
+interface Props {
+  selector?: string;
+}
+
+export default function MediumZoom(props: Props) {
+  const { pathname } = useLocation();
+  const { selector = '.modern-doc img' } = props;
+
+  useEffect(() => {
+    const images = document.querySelectorAll(selector);
+    mediumZoom(images);
+  }, [pathname]);
+  return null;
+}
diff --git a/packages/cli/doc-plugin-medium-zoom/src/index.ts b/packages/cli/doc-plugin-medium-zoom/src/index.ts
new file mode 100644
index 000000000000..23204c2f0d54
--- /dev/null
+++ b/packages/cli/doc-plugin-medium-zoom/src/index.ts
@@ -0,0 +1,16 @@
+import path from 'path';
+import { fileURLToPath } from 'url';
+import type { DocPlugin } from '../../doc-core';
+
+/**
+ * The plugin is used to add medium-zoom to the doc site.
+ */
+export function pluginMediumZoom(): DocPlugin {
+  const __dirname = path.dirname(fileURLToPath(import.meta.url));
+  return {
+    name: '@modern-js/doc-plugin-medium-zoom',
+    globalUIComponents: [
+      path.join(__dirname, '../src/components/MediumZoom.tsx'),
+    ],
+  };
+}
diff --git a/packages/cli/doc-plugin-medium-zoom/src/modern-app-env.d.ts b/packages/cli/doc-plugin-medium-zoom/src/modern-app-env.d.ts
new file mode 100644
index 000000000000..32a72a0b11b3
--- /dev/null
+++ b/packages/cli/doc-plugin-medium-zoom/src/modern-app-env.d.ts
@@ -0,0 +1,2 @@
+/// <reference types='@modern-js/module-tools/types' />
+/// <reference types='@modern-js/plugin-testing/types' />
diff --git a/packages/cli/doc-plugin-medium-zoom/tests/.eslintrc.cjs b/packages/cli/doc-plugin-medium-zoom/tests/.eslintrc.cjs
new file mode 100644
index 000000000000..2136c691080e
--- /dev/null
+++ b/packages/cli/doc-plugin-medium-zoom/tests/.eslintrc.cjs
@@ -0,0 +1,9 @@
+// eslint-disable-next-line import/no-commonjs
+module.exports = {
+  root: true,
+  extends: '@modern-js-app',
+  parserOptions: {
+    tsconfigRootDir: __dirname,
+    project: require.resolve('./tsconfig.json'),
+  },
+};
diff --git a/packages/cli/doc-plugin-medium-zoom/tests/tsconfig.json b/packages/cli/doc-plugin-medium-zoom/tests/tsconfig.json
new file mode 100644
index 000000000000..dcc2a879d078
--- /dev/null
+++ b/packages/cli/doc-plugin-medium-zoom/tests/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": "../"
+  },
+  "include": ["**/*", "../src"]
+}
diff --git a/packages/cli/doc-plugin-medium-zoom/tsconfig.json b/packages/cli/doc-plugin-medium-zoom/tsconfig.json
new file mode 100644
index 000000000000..ff7d65703bed
--- /dev/null
+++ b/packages/cli/doc-plugin-medium-zoom/tsconfig.json
@@ -0,0 +1,21 @@
+{
+  "extends": "@modern-js/tsconfig/base",
+  "compilerOptions": {
+    "declaration": false,
+    "module": "ESNext",
+    "target": "ESNext",
+    "jsx": "react-jsx",
+    "baseUrl": "src",
+    "rootDir": ".",
+    "lib": ["ESNext", "DOM"],
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "paths": {
+      "@/*": ["./*"],
+      "@style/*": ["./styles/*"],
+      "@theme": ["./theme-default/index.ts"]
+    }
+  },
+  "include": ["src", "vitest.config.ts", "index.d.ts", "modern.config.ts"],
+  "exclude": ["node_modules", "dist"]
+}
diff --git a/packages/cli/doc-plugin-medium-zoom/vitest.config.ts b/packages/cli/doc-plugin-medium-zoom/vitest.config.ts
new file mode 100644
index 000000000000..5251a6a8ec57
--- /dev/null
+++ b/packages/cli/doc-plugin-medium-zoom/vitest.config.ts
@@ -0,0 +1,10 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    environment: 'node',
+    passWithNoTests: true,
+    exclude: ['**/node_modules/**', '**/dist/**', '**/e2e/**'],
+    threads: true,
+  },
+});
diff --git a/packages/document/doc-tools-doc/docs/en/api/config-basic.mdx b/packages/document/doc-tools-doc/docs/en/api/config-basic.mdx
index 45c6e232b109..2e516a30cdc7 100644
--- a/packages/document/doc-tools-doc/docs/en/api/config-basic.mdx
+++ b/packages/document/doc-tools-doc/docs/en/api/config-basic.mdx
@@ -166,3 +166,30 @@ export default defineConfig({
   plugins: [docTools()],
 });
 ```
+
+## mediumZoom
+
+- Type: `boolean` | `{ selector?: string }`
+- Default: `true`
+
+Whether to enable the image zoom function. It is enabled by default, you can disable it by setting `mediumZoom` to `false`.
+
+> The bottom layer is implemented using the [medium-zoom](https://github.com/francoischalifour/medium-zoom) library.
+
+Example usage:
+
+```ts title="modern.config.ts"
+import docTools, { defineConfig } from '@modern-js/doc-tools';
+
+export default defineConfig({
+  doc: {
+    // Turn off image zoom
+    mediumZoom: false,
+    // Configure the CSS selector to customize the picture to be zoomed, the default is '.modern-doc img'
+    mediumZoom: {
+      selector: '.modern-doc img',
+    },
+  },
+  plugins: [docTools()],
+});
+```
diff --git a/packages/document/doc-tools-doc/docs/zh/api/config-basic.mdx b/packages/document/doc-tools-doc/docs/zh/api/config-basic.mdx
index 2fe34933fcb3..f0c78a9a373d 100644
--- a/packages/document/doc-tools-doc/docs/zh/api/config-basic.mdx
+++ b/packages/document/doc-tools-doc/docs/zh/api/config-basic.mdx
@@ -166,3 +166,30 @@ export default defineConfig({
   plugins: [docTools()],
 });
 ```
+
+## mediumZoom
+
+- Type: `boolean` | `{ selector?: string }`
+- Default: `true`
+
+是否开启图片放大功能。默认开启，你可以通过设置 `mediumZoom` 为 `false` 来关闭。
+
+> 底层使用的是 [medium-zoom](https://github.com/francoischalifour/medium-zoom) 库来实现的。
+
+使用示例：
+
+```ts title="modern.config.ts"
+import docTools, { defineConfig } from '@modern-js/doc-tools';
+
+export default defineConfig({
+  doc: {
+    // 关闭图片放大功能
+    mediumZoom: false,
+    // 配置 CSS 选择器，自定义要放大的图片，默认为 '.modern-doc img'
+    mediumZoom: {
+      selector: '.modern-doc img',
+    },
+  },
+  plugins: [docTools()],
+});
+```
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 841cd5519ffb..dfcdd9fa396b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -556,6 +556,7 @@ importers:
       '@modern-js/builder': workspace:*
       '@modern-js/builder-rspack-provider': workspace:*
       '@modern-js/core': workspace:*
+      '@modern-js/doc-plugin-medium-zoom': workspace:*
       '@modern-js/mdx-rs-binding': ^0.1.8
       '@modern-js/plugin-tailwindcss': workspace:*
       '@modern-js/plugin-testing': workspace:*
@@ -595,7 +596,6 @@ importers:
       lint-staged: ~13.1.0
       lodash-es: ^4.17.21
       mdast-util-mdxjs-esm: ^1.3.0
-      medium-zoom: 1.0.8
       node-fetch: 3.3.0
       nprogress: ^0.2.0
       ora: 5.4.1
@@ -640,6 +640,7 @@ importers:
       '@mdx-js/react': 2.2.1_react@18.2.0
       '@modern-js/builder': link:../../builder/builder
       '@modern-js/builder-rspack-provider': link:../../builder/builder-rspack-provider
+      '@modern-js/doc-plugin-medium-zoom': link:../doc-plugin-medium-zoom
       '@modern-js/mdx-rs-binding': 0.1.8
       '@modern-js/remark-container': link:../../toolkit/remark-container
       '@modern-js/utils': link:../../toolkit/utils
@@ -660,7 +661,6 @@ importers:
       html-to-text: 9.0.3
       lodash-es: 4.17.21
       mdast-util-mdxjs-esm: 1.3.0
-      medium-zoom: 1.0.8
       node-fetch: 3.3.0
       nprogress: 0.2.0
       ora: 5.4.1
@@ -752,6 +752,41 @@ importers:
       vitest: 0.21.1
       yaml-front-matter: 4.1.1
 
+  packages/cli/doc-plugin-medium-zoom:
+    specifiers:
+      '@modern-js/module-tools': workspace:*
+      '@modern-js/tsconfig': workspace:*
+      '@modern-js/utils': workspace:*
+      '@scripts/build': workspace:*
+      '@types/node': ^18.11.17
+      '@types/react': ^18
+      '@types/react-dom': ^18
+      '@types/yaml-front-matter': ^4.1.0
+      husky: ^8
+      lint-staged: ~13.1.0
+      medium-zoom: 1.0.8
+      prettier: ^2.6.2
+      typescript: ^4.8.4
+      vitest: 0.21.1
+      yaml-front-matter: ^4.1.1
+    dependencies:
+      '@modern-js/utils': link:../../toolkit/utils
+      medium-zoom: 1.0.8
+    devDependencies:
+      '@modern-js/module-tools': link:../../solutions/module-tools
+      '@modern-js/tsconfig': link:../../review/tsconfig
+      '@scripts/build': link:../../../scripts/build
+      '@types/node': 18.11.17
+      '@types/react': 18.0.21
+      '@types/react-dom': 18.0.6
+      '@types/yaml-front-matter': 4.1.0
+      husky: 8.0.1
+      lint-staged: 13.1.4
+      prettier: 2.8.7
+      typescript: 4.9.5
+      vitest: 0.21.1
+      yaml-front-matter: 4.1.1
+
   packages/cli/plugin-bff:
     specifiers:
       '@babel/core': ^7.18.0

From b12399b4f674fd7b26699cf3cd17412924e020a2 Mon Sep 17 00:00:00 2001
From: yangxingyuan <yangxingyuan@bytedance.com>
Date: Fri, 19 May 2023 19:16:22 +0800
Subject: [PATCH 2/2] fix: unit test

---
 .../__snapshots__/AutoSetRootFontSizePlugin.test.ts.snap      | 2 +-
 .../plugin-testing/tests/bff/__snapshots__/index.test.ts.snap | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/builder/builder-shared/tests/plugins/__snapshots__/AutoSetRootFontSizePlugin.test.ts.snap b/packages/builder/builder-shared/tests/plugins/__snapshots__/AutoSetRootFontSizePlugin.test.ts.snap
index 9e88fff1653b..0f2d1f737655 100644
--- a/packages/builder/builder-shared/tests/plugins/__snapshots__/AutoSetRootFontSizePlugin.test.ts.snap
+++ b/packages/builder/builder-shared/tests/plugins/__snapshots__/AutoSetRootFontSizePlugin.test.ts.snap
@@ -57,7 +57,7 @@ exports[`test getRootPixelCode > should getRootPixelCode with custom options 1`]
 typeof window !== 'undefined' && setRootPixel();"
 `;
 
-exports[`test getRootPixelCode > should getRootPixelCode with custom options 2`] = `"function setRootPixel(){function n(n){return(new RegExp(\\"[?&]\\"+n+\\"=([^&#\\\\b]+)\\").exec(location.search||\\"\\")||[])[1]}function e(){var e,i=\\"widthKey\\",t=document.documentElement;if(i&&+n(i))e=+n(i);else if(e=window.innerWidth&&t.clientWidth?Math.min(window.innerWidth,t.clientWidth):window.innerWidth||t.clientWidth||document.body&&document.body.clientWidth||750,(screen.orientation&&screen.orientation.angle||window.orientation)/90%2){var o=window.innerHeight&&t.clientHeight?Math.min(window.innerHeight,t.clientHeight):window.innerHeight||t.clientHeight||document.body&&document.body.clientHeight||750;e=Math.max(o,350)}var d=5*e/750;d=d<64?d:5,window.ROOT_FONT_SIZE=d,t.style.fontSize=d+\\"px\\"}function i(n){n?e():setTimeout(e,30)}i(!0),window.addEventListener(\\"resize\\",i,!1),\\"onorientationchange\\"in window&&window.addEventListener(\\"orientationchange\\",i,!1)}\\"undefined\\"!=typeof window&&setRootPixel();"`;
+exports[`test getRootPixelCode > should getRootPixelCode with custom options 2`] = `"function setRootPixel(){function n(n){return(new RegExp(\\"[?&]\\"+n+\\"=([^&#\\\\b]+)\\").exec(location.search||\\"\\")||[])[1]}function e(){var e,i=\\"widthKey\\",t=document.documentElement;if(+n(i))e=+n(i);else if(e=window.innerWidth&&t.clientWidth?Math.min(window.innerWidth,t.clientWidth):window.innerWidth||t.clientWidth||document.body&&document.body.clientWidth||750,(screen.orientation&&screen.orientation.angle||window.orientation)/90%2){var o=window.innerHeight&&t.clientHeight?Math.min(window.innerHeight,t.clientHeight):window.innerHeight||t.clientHeight||document.body&&document.body.clientHeight||750;e=Math.max(o,350)}var d=5*e/750;d=d<64?d:5,window.ROOT_FONT_SIZE=d,t.style.fontSize=d+\\"px\\"}function i(n){n?e():setTimeout(e,30)}i(!0),window.addEventListener(\\"resize\\",i,!1),\\"onorientationchange\\"in window&&window.addEventListener(\\"orientationchange\\",i,!1)}\\"undefined\\"!=typeof window&&setRootPixel();"`;
 
 exports[`test getRootPixelCode > should getRootPixelCode with default options 1`] = `
 "function setRootPixel() {
diff --git a/packages/runtime/plugin-testing/tests/bff/__snapshots__/index.test.ts.snap b/packages/runtime/plugin-testing/tests/bff/__snapshots__/index.test.ts.snap
index a3d83247552c..9572f68b42bb 100644
--- a/packages/runtime/plugin-testing/tests/bff/__snapshots__/index.test.ts.snap
+++ b/packages/runtime/plugin-testing/tests/bff/__snapshots__/index.test.ts.snap
@@ -24,7 +24,7 @@ exports[`testing-plugin-bff setJestConfigForBFF 1`] = `
       ],
       "transform": {
         "\\.[jt]sx?$": [
-          "/node_modules/.pnpm/ts-jest@29.0.5_xpknouqsu45fvs7xqhzolsis6i/node_modules/ts-jest/dist/index.js",
+          "/node_modules/.pnpm/ts-jest@29.0.5_52zzqauzrd55rzw5cwo4tswy3m/node_modules/ts-jest/dist/index.js",
           {
             "diagnostics": {
               "warnOnly": true,
@@ -61,7 +61,7 @@ exports[`testing-plugin-bff testTimeout should not set in projects 1`] = `
       ],
       "transform": {
         "\\.[jt]sx?$": [
-          "/node_modules/.pnpm/ts-jest@29.0.5_xpknouqsu45fvs7xqhzolsis6i/node_modules/ts-jest/dist/index.js",
+          "/node_modules/.pnpm/ts-jest@29.0.5_52zzqauzrd55rzw5cwo4tswy3m/node_modules/ts-jest/dist/index.js",
           {
             "diagnostics": {
               "warnOnly": true,