mermaid loading improved

src/components/blog/PostBodyClient.tsx

@@ -1,4 +1,4 @@
-import { createEffect, createSignal, onMount, lazy } from "solid-js";
+import { createEffect, createSignal, onMount, lazy, Show } from "solid-js";
 import type { HLJSApi } from "highlight.js";
 
 const MermaidRenderer = lazy(() => import("./MermaidRenderer"));
@@ -6,6 +6,7 @@ const MermaidRenderer = lazy(() => import("./MermaidRenderer"));
 export interface PostBodyClientProps {
   body: string;
   hasCodeBlock: boolean;
+  hasMermaid: boolean;
 }
 
 async function loadHighlightJS(): Promise<HLJSApi> {
@@ -402,7 +403,9 @@ export default function PostBodyClient(props: PostBodyClientProps) {
         class="text-text prose dark:prose-invert max-w-none"
         innerHTML={props.body}
       />
+      <Show when={props.hasMermaid}>
         <MermaidRenderer />
+      </Show>
     </div>
   );
 }

src/components/blog/PostForm.tsx

@@ -1,9 +1,9 @@
-import { Show, createSignal, createEffect, onCleanup } from "solid-js";
+import { Show, createSignal, createEffect, onCleanup, lazy } from "solid-js";
 import { useNavigate } from "@solidjs/router";
 import { api } from "~/lib/api";
 import { debounce } from "es-toolkit";
 import Dropzone from "~/components/blog/Dropzone";
-import TextEditor from "~/components/blog/TextEditor";
+const TextEditor = lazy(() => import("~/components/blog/TextEditor"));
 import TagMaker from "~/components/blog/TagMaker";
 import AddAttachmentSection from "~/components/blog/AddAttachmentSection";
 import XCircle from "~/components/icons/XCircle";

src/routes/blog/[title]/index.tsx

@@ -292,6 +292,10 @@ export default function PostPage() {
     return str.includes("<code") && str.includes("</code>");
   };
 
+  const hasMermaid = (str: string): boolean => {
+    return str.includes('data-type="mermaid"');
+  };
+
   return (
     <Show
       when={data()}
@@ -454,6 +458,7 @@ export default function PostPage() {
                         <PostBodyClient
                           body={p().body}
                           hasCodeBlock={hasCodeBlock(p().body)}
+                          hasMermaid={hasMermaid(p().body)}
                         />
 
                         <div