component applying method modifying

apps/app/src/client/services/renderer/renderer.tsx

@@ -16,6 +16,7 @@ import type { Pluggable } from 'unified';
 
 import { DrawioViewerWithEditButton } from '~/components/ReactMarkdownComponents/DrawioViewerWithEditButton';
 import { Header } from '~/components/ReactMarkdownComponents/Header';
+import { LightBox } from '~/components/ReactMarkdownComponents/LightBox';
 import { RichAttachment } from '~/components/ReactMarkdownComponents/RichAttachment';
 import { TableWithEditButton } from '~/components/ReactMarkdownComponents/TableWithEditButton';
 import * as mermaid from '~/features/mermaid';
@@ -113,6 +114,7 @@ export const generateViewOptions = (
     components.table = TableWithEditButton;
     components.mermaid = mermaid.MermaidViewer;
     components.attachment = RichAttachment;
+    components.img = LightBox;
   }
 
   if (config.isEnabledXssPrevention) {

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

@@ -6,7 +6,6 @@ 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');
@@ -34,16 +33,11 @@ const RevisionRenderer = React.memo((props: Props): JSX.Element => {
     rendererOptions, markdown, additionalClassName,
   } = props;
 
-  const className = `wiki ${additionalClassName ?? ''}`;
-
   return (
     <ErrorBoundary FallbackComponent={ErrorFallback}>
       <ReactMarkdown
         {...rendererOptions}
-        className={className}
-        components={{
-          img: LightBox,
-        }}
+        className={`wiki ${additionalClassName ?? ''}`}
       >
         {markdown}
       </ReactMarkdown>

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

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 
 import FsLightbox from 'fslightbox-react';
 
-export const LightBox = ({ node, ...props }) => {
+export const LightBox = (props) => {
   const [toggler, setToggler] = useState(false);
   return (
     <>

apps/app/src/services/renderer/renderer.tsx

@@ -20,6 +20,7 @@ import type { RendererOptions } from '~/interfaces/renderer-options';
 import type { RendererConfig } from '~/interfaces/services/renderer';
 import loggerFactory from '~/utils/logger';
 
+
 import * as addClass from './rehype-plugins/add-class';
 import { relativeLinks } from './rehype-plugins/relative-links';
 import { relativeLinksByPukiwikiLikeLinker } from './rehype-plugins/relative-links-by-pukiwiki-like-linker';
@@ -156,7 +157,6 @@ export const generateSSRViewOptions = (
     katex,
   );
 
-  // add components
   // if (components != null) {
   // }