Enable full-screen viewing of images upon click (#1587)

Co-authored-by: Kris Stern <[email protected]>

plugins/plugin-site/src/components/PluginWikiContent.jsx

@@ -1,9 +1,46 @@
-import React from 'react';
+import React, {useState} from 'react';
 import PropTypes from 'prop-types';
+import {lightbox} from './PluginWikiContent.module.css';
 
 const PluginWikiContent = ({wiki}) => {
+    const [lightboxImage, setLightboxImage] = useState(null);
+
+    const handleClick = (event) => {
+        // Find the parent <a> tag with target="_blank"
+        let parentNode = event.target.parentNode;
+
+        while (parentNode && parentNode.tagName !== 'A') {
+            parentNode = parentNode.parentNode;
+        }
+
+        if (
+            parentNode &&
+            parentNode.tagName === 'A' &&
+            parentNode.getAttribute('target') === '_blank'
+        ) {
+            // Prevent the default behavior of the anchor tag from redirecting to the GitHub page
+            event.preventDefault();
+            const imgSrc = parentNode.querySelector('img').getAttribute('src');
+            setLightboxImage(imgSrc);
+        }
+    };
+
+    const closeLightbox = () => {
+        setLightboxImage(null);
+    };
+
     if (wiki?.childHtmlRehype) {
-        return <div className="content" dangerouslySetInnerHTML={{__html: wiki.childHtmlRehype.html}} />;
+        const html = wiki.childHtmlRehype.html;
+        return (
+            <div className="content" onClick={handleClick}>
+                <div dangerouslySetInnerHTML={{__html: html}} />
+                {lightboxImage && (
+                    <div className={lightbox} onClick={closeLightbox}>
+                        <img src={lightboxImage} alt="Lightbox" />
+                    </div>
+                )}
+            </div>
+        );
     }
     if (!wiki) {
         return (<div className="content">No documentation available</div>);

plugins/plugin-site/src/components/PluginWikiContent.module.css

@@ -0,0 +1,22 @@
+.lightbox {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 9999;
+}
+
+.lightbox img {
+    max-width: 90%;
+    max-height: 90%;
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
+}
+
+.lightbox img:hover {
+    cursor: pointer;
+}