refactor: more TS code

src/common/component/MarkdownRender.tsx

@@ -1,14 +1,8 @@
-import { useEffect, useState, useRef, FC, MouseEvent } from "react";
+import { useEffect, useState, useRef, FC } from "react";
 import "prismjs/themes/prism.css";
 import "@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight.css";
 import codeSyntaxHighlight from "@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight-all.js";
 
-// import "prismjs/themes/prism.css";
-// import "@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight.css";
-// import codeSyntaxHighlight from "@toast-ui/editor-plugin-code-syntax-highlight";
-// Import prismjs
-// import Prism from "prismjs";
-
 import { Viewer } from "@toast-ui/react-editor";
 import styled from "styled-components";
 import ImagePreviewModal, { PreviewImageData } from "./ImagePreviewModal";
@@ -24,37 +18,37 @@ const Styled = styled.div`
   }
 `;
 
-interface Props {
+interface IProps {
   content: string;
 }
-
-const MarkdownRender: FC<Props> = ({ content }) => {
-  const mdContainer = useRef<HTMLDivElement>(null);
+const MarkdownRender: FC<IProps> = ({ content }) => {
+  const mdContainer = useRef<HTMLDivElement>();
   const [previewImage, setPreviewImage] = useState<PreviewImageData | null>(null);
 
   useEffect(() => {
     const container = mdContainer?.current;
-    if (container) {
-      // 点击查看大图
-      container.addEventListener(
-        "click",
-        (evt) => {
-          console.log(evt);
-          evt.stopPropagation();
-          const { target } = evt;
-          // 图片
-          if (target.nodeName == "IMG") {
-            const urlObj = new URL(target.src);
-            const originUrl = `${urlObj.origin}${
-              urlObj.pathname
-            }?file_path=${urlObj.searchParams.get("file_path")}`;
-            const data = { originUrl };
-            setPreviewImage(data);
-          }
-        },
-        true
-      );
-    }
+    if (!container) return;
+    // 点击查看大图
+    // todo: 事件代理
+    container.addEventListener(
+      "click",
+      (evt) => {
+        console.log(evt);
+        evt.stopPropagation();
+        const target = evt.target as HTMLImageElement;
+        if (!target) return;
+        // 图片
+        if (target.nodeName == "IMG") {
+          const urlObj = new URL(target.src);
+          const originUrl = `${urlObj.origin}${urlObj.pathname}?file_path=${urlObj.searchParams.get(
+            "file_path"
+          )}`;
+          const data = { originUrl };
+          setPreviewImage(data);
+        }
+      },
+      true
+    );
   }, []);
 
   const closePreviewModal = () => {