create image zoom function

apps/app/next.config.js

@@ -46,6 +46,7 @@ const getTranspilePackages = () => {
     'emoticon',
     'direction', // for hast-util-select
     'bcp-47-match', // for hast-util-select
+    'react-medium-image-zoom',
     ...listPrefixedPackages(['remark-', 'rehype-', 'hast-', 'mdast-', 'micromark-', 'unist-']),
   ];
 

apps/app/package.json

@@ -168,6 +168,7 @@
     "react-i18next": "^12.2.0",
     "react-image-crop": "^8.3.0",
     "react-markdown": "^8.0.7",
+    "react-medium-image-zoom": "^5.1.6",
     "react-multiline-clamp": "^2.0.0",
     "react-scroll": "^1.8.7",
     "react-syntax-highlighter": "^15.5.0",

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

@@ -1,7 +1,6 @@
 import React from 'react';
 
 // import mediumZoom from 'medium-zoom';
-
 import { ErrorBoundary, FallbackProps } from 'react-error-boundary';
 import ReactMarkdown from 'react-markdown';
 
@@ -11,7 +10,6 @@ import loggerFactory from '~/utils/logger';
 import { ImageZoom } from './ImageZoom';
 import 'katex/dist/katex.min.css';
 
-
 const logger = loggerFactory('components:Page:RevisionRenderer');
 
 type Props = {
@@ -38,7 +36,6 @@ const RevisionRenderer = React.memo((props: Props): JSX.Element => {
   } = props;
 
   const className = `wiki ${additionalClassName ?? ''}`;
-  const classOfImage = `.${className} img`;
 
   // ここにimgタグに適用するコンポーネントを書く
   const Image = ({ node, ...props }) => {
@@ -46,7 +43,10 @@ const RevisionRenderer = React.memo((props: Props): JSX.Element => {
       <ImageZoom
         src={props.src}
         alt={props.alt}
-        options={{ background: 'black' }}
+        options={{
+          background: 'black',
+          container: '#main',
+        }}
       />
     );
   };

yarn.lock

@@ -14239,6 +14239,11 @@ react-markdown@^8.0.7:
     unist-util-visit "^4.0.0"
     vfile "^5.0.0"
 
+react-medium-image-zoom@^5.1.6:
+  version "5.1.6"
+  resolved "https://registry.yarnpkg.com/react-medium-image-zoom/-/react-medium-image-zoom-5.1.6.tgz#1ec9dabbc88da664f3aacc03a93cf79cb1b70a23"
+  integrity sha512-0QolPce1vNJsF5HKrGkU1UT6kLNvY9EOnLBqz++LlVnBQduaHLkJlY73ayj3SxY09XWRrnxKDMTHPDkrQYdREw==
+
 react-multiline-clamp@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/react-multiline-clamp/-/react-multiline-clamp-2.0.0.tgz#913a2092368ef1b52c1c79364d506ba4af27e019"