Merge pull request #8673 from weseek/imprv/render-lightbox-over-sidebar

imprv: Render lightbox above the sidebar

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

@@ -1,19 +1,34 @@
-import React, { useState } from 'react';
+import type { DetailedHTMLProps, ImgHTMLAttributes } from 'react';
+import React, { useMemo, useState } from 'react';
 
 import FsLightbox from 'fslightbox-react';
+import { createPortal } from 'react-dom';
 
-export const LightBox = (props) => {
+type Props = DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>
+
+export const LightBox = (props: Props): JSX.Element => {
   const [toggler, setToggler] = useState(false);
-  const { node, ...rest } = props;
+  const { alt, ...rest } = props;
 
-  return (
-    <>
-      <img {...rest} onClick={() => setToggler(!toggler)} />
+  const lightboxPortal = useMemo(() => {
+    return createPortal(
       <FsLightbox
         toggler={toggler}
         sources={[props.src]}
+        alt={alt}
         type="image"
-      />
+        exitFullscreenOnClose
+      />,
+      document.body,
+    );
+  }, [alt, props.src, toggler]);
+
+  return (
+    <>
+      {/* eslint-disable-next-line @next/next/no-img-element */}
+      <img alt={alt} {...rest} onClick={() => setToggler(!toggler)} />
+
+      {lightboxPortal}
     </>
   );
 };