Added preview for image in EditorContent

src/components/EditorContent/ImagePreview.jsx

@@ -0,0 +1,37 @@
+import React, { useRef, useState } from "react";
+
+import { useOnClickOutside } from "neetocommons/react-utils";
+import { CloseCircle } from "neetoicons";
+import { Button, Spinner } from "neetoui";
+
+const ImagePreview = ({ imagePreviewUrl, setImagePreviewUrl }) => {
+  const [isLoading, setIsLoading] = useState(true);
+
+  const imagePreviewRef = useRef(null);
+
+  useOnClickOutside(imagePreviewRef, () => setImagePreviewUrl(null), {
+    enabled: true,
+  });
+
+  return (
+    <div className="image-preview-wrapper">
+      <div className="close-button">
+        <Button
+          icon={CloseCircle}
+          style="secondary"
+          onClick={() => setImagePreviewUrl(null)}
+        />
+      </div>
+      {isLoading && <Spinner className="spinner" />}
+      <img
+        alt="Image Preview"
+        className="image-preview"
+        ref={imagePreviewRef}
+        src={imagePreviewUrl}
+        onLoad={() => setIsLoading(false)}
+      />
+    </div>
+  );
+};
+
+export default ImagePreview;

src/components/EditorContent/index.jsx

@@ -1,11 +1,12 @@
-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useRef, useState } from "react";
 
 import classnames from "classnames";
 import DOMPurify from "dompurify";
 import CopyToClipboardButton from "neetomolecules/CopyToClipboardButton";
 import { createRoot } from "react-dom/client";
 
 import { EDITOR_CONTENT_CLASSNAME, SANITIZE_OPTIONS } from "./constants";
+import ImagePreview from "./ImagePreview";
 import { highlightCode, substituteVariables } from "./utils";
 
 const EditorContent = ({
@@ -14,6 +15,7 @@ const EditorContent = ({
   className,
   ...otherProps
 }) => {
+  const [imagePreviewUrl, setImagePreviewUrl] = useState(null);
   const editorContentRef = useRef(null);
 
   const htmlContent = substituteVariables(highlightCode(content), variables);
@@ -37,24 +39,39 @@ const EditorContent = ({
       );
       preTag.appendChild(button);
     });
+
+    const figureTags = editorContentRef.current?.querySelectorAll("figure");
+    figureTags.forEach(figureTag => {
+      const image = figureTag.querySelector("img");
+      if (!image) return;
+      figureTag.style.cursor = "pointer";
+      figureTag.addEventListener("click", () => {
+        setImagePreviewUrl(image.src);
+      });
+    });
   };
 
   useEffect(() => {
     injectCopyButtonToCodeBlocks();
   }, [content]);
 
   return (
-    <div
-      data-cy="neeto-editor-content"
-      ref={editorContentRef}
-      className={classnames(EDITOR_CONTENT_CLASSNAME, {
-        [className]: className,
-      })}
-      dangerouslySetInnerHTML={{
-        __html: sanitize(htmlContent, SANITIZE_OPTIONS),
-      }}
-      {...otherProps}
-    />
+    <>
+      <div
+        data-cy="neeto-editor-content"
+        ref={editorContentRef}
+        className={classnames(EDITOR_CONTENT_CLASSNAME, {
+          [className]: className,
+        })}
+        dangerouslySetInnerHTML={{
+          __html: sanitize(htmlContent, SANITIZE_OPTIONS),
+        }}
+        {...otherProps}
+      />
+      {imagePreviewUrl && (
+        <ImagePreview {...{ imagePreviewUrl, setImagePreviewUrl }} />
+      )}
+    </>
   );
 };
 

src/index.scss

@@ -7,6 +7,7 @@
 @import "./styles/editor/editor-content";
 @import "./styles/editor/menu";
 @import "./styles/editor/media-uploader";
+@import "./styles/editor/image-preview";
 @import "./styles/editor/emoji";
 @import "./styles/editor/table";
 @import "./styles/editor/link-popover";

src/styles/editor/_image-preview.scss

@@ -0,0 +1,29 @@
+.image-preview-wrapper {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 999999;
+
+  .close-button {
+    position: absolute;
+    top: 5%;
+    right: 5%;
+  }
+
+  .image-preview {
+    max-width: 70%;
+    max-height: 70%;
+  }
+
+  .spinner {
+    i {
+      background-color: rgb(var(--neeto-ui-gray-300));
+    }
+  }
+}