refactor: image zoom (#1054)

Author: Chasen-Zhang

docusaurus.config.ts

@@ -184,7 +184,6 @@ const config: Config = {
         },
       },
     ],
-    "plugin-image-zoom",
     [
       "docusaurus-plugin-devserver",
       {
@@ -250,9 +249,6 @@ const config: Config = {
     // Replace with your project's social card
     image: "img/logo/logo-no-text.png",
     algolia,
-    imageZoom: {
-      selector: "article :not(a) > img",
-    },
     mermaid: {
       theme: { dark: 'dark' }
     },

package.json

@@ -37,7 +37,6 @@
     "copyforjs": "^1.0.6",
     "docusaurus-plugin-devserver": "^1.0.6",
     "docusaurus-plugin-sass": "^0.2.5",
-    "plugin-image-zoom": "^1.2.0",
     "prism-react-renderer": "^2.3.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",

src/css/markdown.scss

@@ -72,7 +72,8 @@
     line-height: 1.25rem;
     border: unset;
     padding: 0.2rem 0.3rem;
-    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+      Liberation Mono, Courier New, monospace;
     background-color: hsl(var(--muted));
   }
   h1 {
@@ -93,6 +94,7 @@
     padding: 0.6rem;
     border: 1px solid hsl(var(--border));
     background-color: var(--color-bg-1);
+    cursor: zoom-in;
   }
   table {
     tr,
@@ -158,7 +160,8 @@
       border-bottom-left-radius: 0 !important;
       .token {
         color: var(--ifm-font-color-base) !important;
-        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
+        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+          Liberation Mono, Courier New, monospace;
         font-size: 0.9rem;
         line-height: 1.6rem;
         font-weight: 500;
@@ -246,9 +249,21 @@
   margin-top: 1.5rem !important;
   border-bottom: 1px solid var(--color-border);
   padding-bottom: 12px;
-  margin-bottom: calc(var(--ifm-h1-vertical-rhythm-bottom) * var(--ifm-leading));
+  margin-bottom: calc(
+    var(--ifm-h1-vertical-rhythm-bottom) * var(--ifm-leading)
+  );
 }
 
 .DOCITEM-PAGE-FUNCTION-DESCRIPTION-DOM {
   padding-bottom: 0 !important;
 }
+.ant-image-preview-close {
+  background-color: rgb(0, 96, 210);
+  &:hover {
+    background-color: rgba(0, 96, 210, 0.8);
+  }
+}
+
+.ant-image-preview-root .ant-image-preview-mask {
+  background-color: rgb(0, 0, 0, 0.89);
+}

src/theme/DocRoot/Layout/Main/index.tsx

@@ -1,29 +1,56 @@
-import React from 'react';
-import clsx from 'clsx';
-import {useDocsSidebar} from '@docusaurus/theme-common/internal';
-import type {Props} from '@theme/DocRoot/Layout/Main';
+import React, { MouseEvent, useState } from "react";
+import clsx from "clsx";
+import { useDocsSidebar } from "@docusaurus/theme-common/internal";
+import type { Props } from "@theme/DocRoot/Layout/Main";
 
-import styles from './styles.module.css';
+import styles from "./styles.module.css";
+import { Image } from "antd";
 
 export default function DocRootLayoutMain({
   hiddenSidebarContainer,
   children,
 }: Props): JSX.Element {
   const sidebar = useDocsSidebar();
+  const [previewImage, setPreviewImage] = useState(false);
+  const [previewImageSrc, setPreviewImageSrc] = useState("");
+
+  function getImgElement(e: MouseEvent<HTMLElement>) {
+    const target = e.target as HTMLImageElement;
+    const src = target?.currentSrc;
+    if (src) {
+      setPreviewImageSrc(src);
+      setPreviewImage(true);
+    }
+  }
   return (
     <main
       className={clsx(
         styles.docMainContainer,
-        (hiddenSidebarContainer || !sidebar) && styles.docMainContainerEnhanced,
-      )}>
+        (hiddenSidebarContainer || !sidebar) && styles.docMainContainerEnhanced
+      )}
+    >
       <div
+        onClick={getImgElement}
         className={clsx(
-          'container padding-top--md padding-bottom--lg',
+          "container padding-top--md padding-bottom--lg",
           styles.docItemWrapper,
-          hiddenSidebarContainer && styles.docItemWrapperEnhanced,
-        )}>
+          hiddenSidebarContainer && styles.docItemWrapperEnhanced
+        )}
+      >
         {children}
       </div>
+      <Image
+        width={200}
+        style={{ display: "none" }}
+        preview={{
+          scaleStep: 0.25,
+          visible: previewImage,
+          src: previewImageSrc,
+          onVisibleChange: (value) => {
+            setPreviewImage(value);
+          },
+        }}
+      />
     </main>
   );
 }

yarn.lock

@@ -6757,11 +6757,6 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
   integrity sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==
 
-medium-zoom@^1.0.4:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/medium-zoom/-/medium-zoom-1.1.0.tgz#6efb6bbda861a02064ee71a2617a8dc4381ecc71"
-  integrity sha512-ewyDsp7k4InCUp3jRmwHBRFGyjBimKps/AJLjRSox+2q/2H4p/PNpQf+pwONWlJiOudkBXtbdmVbFjqyybfTmQ==
-
 memfs@^3.1.2, memfs@^3.4.3:
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/memfs/-/memfs-3.6.0.tgz#d7a2110f86f79dd950a8b6df6d57bc984aa185f6"
@@ -7912,13 +7907,6 @@ pkg-up@^3.1.0:
   dependencies:
     find-up "^3.0.0"
 
-plugin-image-zoom@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/plugin-image-zoom/-/plugin-image-zoom-1.2.0.tgz#f2ab8a6a082e0c728b870dd8213078d449a67b6d"
-  integrity sha512-uVCjp4bXuli39gmBs+JQvXMtpfLL+5yWfRIKZyM41d3D9oxGBEHmRzDu9EgusIwmBrKJvF9QuOZENw/9s6G+Jw==
-  dependencies:
-    medium-zoom "^1.0.4"
-
 possible-typed-array-names@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz#89bb63c6fada2c3e90adc4a647beeeb39cc7bf8f"