test

Author: LadyBluenotes

src/components/Markdown.tsx

@@ -396,28 +396,41 @@ export function Markdown({
 }: MarkdownProps) {
   const { setHeadings } = useMarkdownHeadings()
 
-  React.useEffect(() => {
-    if (headingsOverride) {
-      setHeadings(headingsOverride)
-    } else {
-      const { headings } = renderMarkdown(htmlMarkup || rawContent || '')
-      setHeadings(headings)
+  const fallbackRender = React.useMemo(() => {
+    if (!rawContent) {
+      return null
     }
-  }, [headingsOverride, htmlMarkup, rawContent, setHeadings])
+
+    return renderMarkdown(rawContent)
+  }, [rawContent])
 
   const markup = React.useMemo(() => {
     if (htmlMarkup) {
       return htmlMarkup
     }
-    if (rawContent) {
-      return renderMarkdown(rawContent).markup
+
+    return fallbackRender?.markup ?? ''
+  }, [fallbackRender?.markup, htmlMarkup])
+
+  const headings = React.useMemo(() => {
+    if (headingsOverride) {
+      return headingsOverride
+    }
+
+    return fallbackRender?.headings ?? []
+  }, [fallbackRender?.headings, headingsOverride])
+
+  React.useEffect(() => {
+    setHeadings(headings)
+  }, [headings, setHeadings])
+
+  const parsed = React.useMemo(() => {
+    if (!markup) {
+      return null
     }
-    return ''
-  }, [htmlMarkup, rawContent])
 
-  if (!markup) {
-    return null
-  }
+    return parse(markup, options)
+  }, [markup])
 
-  return React.useMemo(() => parse(markup, options), [markup])
+  return parsed
 }

src/routes/_libraries/blog.$.tsx

@@ -171,7 +171,13 @@ ${content}`
                           'styled-markdown-content',
                         )}
                       >
-                        <Markdown rawContent={blogContent} />
+                        <React.Suspense fallback={null}>
+                          <Markdown
+                            htmlMarkup={blogPost.html?.markup ?? ''}
+                            headingsOverride={blogPost.html?.headings}
+                            rawContent={blogContent}
+                          />
+                        </React.Suspense>
                       </div>
                       <div className="h-12" />
                       <div className="w-full h-px bg-gray-500 opacity-30" />