perf(markdown): optimize large file handling

src/components/Markdown.tsx

@@ -6,8 +6,18 @@ import rehypeRaw from "rehype-raw"
 import "./markdown.css"
 import { For, Show, createEffect, createMemo, createSignal, on } from "solid-js"
 import { clsx } from "clsx"
-import { Anchor, Box, List, ListItem } from "@hope-ui/solid"
-import { useParseText, useRouter } from "~/hooks"
+import {
+  Alert,
+  AlertDescription,
+  AlertIcon,
+  AlertTitle,
+  Anchor,
+  Box,
+  List,
+  ListItem,
+} from "@hope-ui/solid"
+import { useParseText, useRouter, useT } from "~/hooks"
+import { notify } from "~/utils"
 import { EncodingSelect } from "."
 import once from "just-once"
 import { pathDir, pathJoin, api, pathResolve } from "~/utils"
@@ -160,13 +170,6 @@ const insertKatexCSS = once(() => {
   document.head.appendChild(link)
 })
 
-const insertMermaidJS = once(() => {
-  const script = document.createElement("script")
-  script.src =
-    "https://registry.npmmirror.com/mermaid/11/files/dist/mermaid.min.js"
-  document.body.appendChild(script)
-})
-
 export function Markdown(props: {
   children?: string | ArrayBuffer
   class?: string
@@ -177,6 +180,7 @@ export function Markdown(props: {
   const [encoding, setEncoding] = createSignal<string>("utf-8")
   const [show, setShow] = createSignal(true)
   const { isString, text } = useParseText(props.children)
+  const t = useT()
   const convertToMd = (content: string) => {
     if (!props.ext || props.ext.toLocaleLowerCase() === "md") {
       return content
@@ -220,26 +224,48 @@ export function Markdown(props: {
   const [rehypePlugins, setRehypePlugins] = createSignal<Function[]>([
     rehypeRaw,
   ])
+  let runHighlight = true
+  let fileLength = text().length
+  // disable markdown rendering if file is too large
+  if (fileLength > 2 * 1024 * 1024) {
+    return (
+      <Alert
+        status="danger"
+        variant="subtle"
+        flexDirection="column"
+        justifyContent="center"
+        textAlign="center"
+        w="$full"
+        p="$8"
+      >
+        <AlertIcon boxSize="40px" mr="0" />
+        <AlertTitle mt="$4" mb="$1" fontSize="$lg">
+          {t("home.preview.large_file")}
+        </AlertTitle>
+        <AlertDescription>{t("home.preview.large_file_desc")}</AlertDescription>
+      </Alert>
+    )
+  }
+  // disable hljs if file is too large
+  if (fileLength > 256 * 1024) {
+    notify.warning(t("home.preview.large_file_hljs_disabled"))
+    runHighlight = false
+  }
   createEffect(
-    on(md, async () => {
+    on(md, async (content) => {
       setShow(false)
       // lazy for math rendering
-      if (/\$\$[\s\S]+?\$\$|\$[^$\n]+?\$/.test(md())) {
+      if (/\$\$[\s\S]+?\$\$|\$[^$\n]+?\$/.test(content)) {
         const { default: reMarkMath } = await import("remark-math")
         const { default: rehypeKatex } = await import("rehype-katex")
         insertKatexCSS()
         setRemarkPlugins([...remarkPlugins(), reMarkMath])
         setRehypePlugins([...rehypePlugins(), rehypeKatex])
       }
-      insertMermaidJS()
       setTimeout(() => {
         setShow(true)
-        hljs.highlightAll()
-        window.mermaid &&
-          window.mermaid.run({
-            querySelector: ".language-mermaid",
-          })
-        window.onMDRender && window.onMDRender()
+        runHighlight && hljs.highlightAll()
+        window.onMDRender && window.onMDRender(content)
       })
     }),
   )

src/lang/en/home.json

@@ -14,7 +14,10 @@
     "tr-install": "TrollStore",
     "tr-installing": "TrollStore Installing",
     "open_in_new_window": "Open in new window",
-    "auto_next": "Auto next"
+    "auto_next": "Auto next",
+    "large_file": "File is too large to preview.",
+    "large_file_desc": "This file may not be in text format and exceeds preview size limits. It's recommended to Download or use Text Editor.",
+    "large_file_hljs_disabled": "Highlighting is disabled for large content to optimize performance. Please use Text Editor instead."
   },
   "layouts": {
     "list": "List View",