component segmentation

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

@@ -1,12 +1,12 @@
-import React, { useState } from 'react';
+import React from 'react';
 
-import FsLightbox from 'fslightbox-react';
 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 { LightBox } from '../ReactMarkdownComponents/LightBox';
 import 'katex/dist/katex.min.css';
 
 const logger = loggerFactory('components:Page:RevisionRenderer');
@@ -36,26 +36,13 @@ const RevisionRenderer = React.memo((props: Props): JSX.Element => {
 
   const className = `wiki ${additionalClassName ?? ''}`;
 
-  const LightBoxImage = ({ node, ...props }) => {
-    const [toggler, setToggler] = useState(false);
-    return (
-      <>
-        <img src={props.src} alt={props.alt} onClick={() => setToggler(!toggler)}/>
-        <FsLightbox
-          toggler={toggler}
-          sources={[props.src]}
-        />
-      </>
-    );
-  };
-
   return (
     <ErrorBoundary FallbackComponent={ErrorFallback}>
       <ReactMarkdown
         {...rendererOptions}
         className={className}
         components={{
-          img: LightBoxImage,
+          img: LightBox,
         }}
       >
         {markdown}

apps/app/src/components/ReactMarkdownComponents/LightBox.tsx

@@ -0,0 +1,16 @@
+import React, { useState } from 'react';
+
+import FsLightbox from 'fslightbox-react';
+
+export const LightBox = ({ node, ...props }) => {
+  const [toggler, setToggler] = useState(false);
+  return (
+    <>
+      <img src={props.src} alt={props.alt} onClick={() => setToggler(!toggler)}/>
+      <FsLightbox
+        toggler={toggler}
+        sources={[props.src]}
+      />
+    </>
+  );
+};

yarn.lock

@@ -11766,11 +11766,6 @@ 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"
@@ -14244,11 +14239,6 @@ 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"