create ImageZoom component

apps/app/package.json

@@ -125,6 +125,7 @@
     "lucene-query-parser": "^1.2.0",
     "markdown-table": "^1.1.1",
     "md5": "^2.2.1",
+    "medium-zoom": "^1.0.8",
     "mermaid": "^10.1.0",
     "method-override": "^3.0.0",
     "migrate-mongo": "^8.2.3",

apps/app/src/components/Page/ImageZoom.tsx

@@ -0,0 +1,32 @@
+import { ComponentProps, useRef } from 'react';
+
+import mediumZoom, { Zoom, ZoomOptions } from 'medium-zoom';
+
+type ImageZoomProps = ComponentProps<'img'> & {
+  options?: ZoomOptions
+}
+
+export function ImageZoom({ options, ...props }: ImageZoomProps) {
+  const zoomRef = useRef<Zoom | null>(null);
+
+  function getZoom() {
+    if (zoomRef.current === null) {
+      zoomRef.current = mediumZoom(options);
+    }
+
+    return zoomRef.current;
+  }
+
+  function attachZoom(image: HTMLImageElement | null) {
+    const zoom = getZoom();
+
+    if (image) {
+      zoom.attach(image);
+    }
+    else {
+      zoom.detach();
+    }
+  }
+
+  return <img {...props} ref={attachZoom} />;
+}

apps/app/src/components/Page/RevisionRenderer.tsx

@@ -1,11 +1,14 @@
 import React from 'react';
 
+// import mediumZoom from 'medium-zoom';
+
 import { ErrorBoundary, FallbackProps } from 'react-error-boundary';
 import ReactMarkdown from 'react-markdown';
 
 import type { RendererOptions } from '~/interfaces/renderer-options';
 import loggerFactory from '~/utils/logger';
 
+import { ImageZoom } from './ImageZoom';
 import 'katex/dist/katex.min.css';
 
 
@@ -34,11 +37,28 @@ const RevisionRenderer = React.memo((props: Props): JSX.Element => {
     rendererOptions, markdown, additionalClassName,
   } = props;
 
+  const className = `wiki ${additionalClassName ?? ''}`;
+  const classOfImage = `.${className} img`;
+
+  // ここにimgタグに適用するコンポーネントを書く
+  const Image = ({ node, ...props }) => {
+    return (
+      <ImageZoom
+        src={props.src}
+        alt={props.alt}
+        options={{ background: 'black' }}
+      />
+    );
+  };
+
   return (
     <ErrorBoundary FallbackComponent={ErrorFallback}>
       <ReactMarkdown
         {...rendererOptions}
-        className={`wiki ${additionalClassName ?? ''}`}
+        className={className}
+        components={{
+          img: Image,
+        }}
       >
         {markdown}
       </ReactMarkdown>

yarn.lock

@@ -11761,6 +11761,11 @@ media-typer@0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
 
+medium-zoom@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/medium-zoom/-/medium-zoom-1.0.8.tgz#2bd1fbcf2961fa7b0e318fe284462aa9b8608ed2"
+  integrity sha512-CjFVuFq/IfrdqesAXfg+hzlDKu6A2n80ZIq0Kl9kWjoHh9j1N9Uvk5X0/MmN0hOfm5F9YBswlClhcwnmtwz7gA==
+
 mem@^4.0.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/mem/-/mem-4.1.0.tgz#aeb9be2d21f47e78af29e4ac5978e8afa2ca5b8a"