From a7e9b8260bc8fa65f75256f07a4216ab38ec6441 Mon Sep 17 00:00:00 2001 From: MadDogOwner Date: Mon, 5 May 2025 08:14:07 +0800 Subject: [PATCH 1/4] revert: "feat: markdown mermaid support (#214)" --- src/components/Markdown.tsx | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/src/components/Markdown.tsx b/src/components/Markdown.tsx index 892f76b03e..d955976218 100644 --- a/src/components/Markdown.tsx +++ b/src/components/Markdown.tsx @@ -160,13 +160,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 @@ -231,14 +224,9 @@ export function Markdown(props: { setRemarkPlugins([...remarkPlugins(), reMarkMath]) setRehypePlugins([...rehypePlugins(), rehypeKatex]) } - insertMermaidJS() setTimeout(() => { setShow(true) hljs.highlightAll() - window.mermaid && - window.mermaid.run({ - querySelector: ".language-mermaid", - }) window.onMDRender && window.onMDRender() }) }), From 6f3fe1571b645eefea4c8981c5e02cd6ca453f98 Mon Sep 17 00:00:00 2001 From: MadDogOwner Date: Mon, 5 May 2025 08:53:28 +0800 Subject: [PATCH 2/4] perf(markdown): add large file handling and user notifications --- src/components/Markdown.tsx | 44 ++++++++++++++++++++++++++++++++++--- src/lang/en/home.json | 5 ++++- 2 files changed, 45 insertions(+), 4 deletions(-) diff --git a/src/components/Markdown.tsx b/src/components/Markdown.tsx index d955976218..eb6c0249db 100644 --- a/src/components/Markdown.tsx +++ b/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" @@ -170,6 +180,7 @@ export function Markdown(props: { const [encoding, setEncoding] = createSignal("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 @@ -213,6 +224,33 @@ export function Markdown(props: { const [rehypePlugins, setRehypePlugins] = createSignal([ rehypeRaw, ]) + let runHighlight = true + let fileLength = text().length + // disable markdown rendering if file is too large + if (fileLength > 2 * 1024 * 1024) { + return ( + + + + {t("home.preview.large_file")} + + {t("home.preview.large_file_desc")} + + ) + } + // 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 () => { setShow(false) @@ -226,7 +264,7 @@ export function Markdown(props: { } setTimeout(() => { setShow(true) - hljs.highlightAll() + runHighlight && hljs.highlightAll() window.onMDRender && window.onMDRender() }) }), diff --git a/src/lang/en/home.json b/src/lang/en/home.json index 70fb6c3f9d..0ad80d2e46 100644 --- a/src/lang/en/home.json +++ b/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", From 431a634bae7a26d8164f03a9255256f66f287f99 Mon Sep 17 00:00:00 2001 From: MadDogOwner Date: Mon, 5 May 2025 08:54:36 +0800 Subject: [PATCH 3/4] perf(markdown): optimize to call md() fewer times --- src/components/Markdown.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Markdown.tsx b/src/components/Markdown.tsx index eb6c0249db..d0e7a4001d 100644 --- a/src/components/Markdown.tsx +++ b/src/components/Markdown.tsx @@ -252,10 +252,10 @@ export function Markdown(props: { 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() From 7b02866f285df8de9e63f88e4e42d619e6bdf5f5 Mon Sep 17 00:00:00 2001 From: MadDogOwner Date: Mon, 5 May 2025 08:54:47 +0800 Subject: [PATCH 4/4] feat(markdown): pass content to onMDRender callback --- src/components/Markdown.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Markdown.tsx b/src/components/Markdown.tsx index d0e7a4001d..7087dbe120 100644 --- a/src/components/Markdown.tsx +++ b/src/components/Markdown.tsx @@ -265,7 +265,7 @@ export function Markdown(props: { setTimeout(() => { setShow(true) runHighlight && hljs.highlightAll() - window.onMDRender && window.onMDRender() + window.onMDRender && window.onMDRender(content) }) }), )