Fix Markdown Component May Output Blank Content (#15)

apps/admin-vite/src/components/ArticlePreviewModal/container.tsx

@@ -1,4 +1,4 @@
-import {useCallback, useEffect, useState} from 'react';
+import {useCallback, useState} from 'react';
 
 import {
   ArticlePreviewModalView,
@@ -7,16 +7,15 @@ import {
 
 type Props = Omit<
   ArticlePreviewModalViewProps,
-  'loading' | 'onMarkdownRenderFinish'
+  'loading' | 'onMarkdownRenderStart' | 'onMarkdownRenderFinish'
 >;
 
 export function ArticlePreviewModal(props: Props) {
   const [isMarkdownRendering, setIsMarkdownRendering] = useState(true);
-  const {contentMarkdown} = props;
 
-  useEffect(() => {
+  const onMarkdownRenderStart = useCallback(() => {
     setIsMarkdownRendering(true);
-  }, [contentMarkdown]);
+  }, []);
 
   const onMarkdownRenderFinish = useCallback(() => {
     setIsMarkdownRendering(false);
@@ -26,6 +25,7 @@ export function ArticlePreviewModal(props: Props) {
     <ArticlePreviewModalView
       {...props}
       loading={isMarkdownRendering}
+      onMarkdownRenderStart={onMarkdownRenderStart}
       onMarkdownRenderFinish={onMarkdownRenderFinish}
     />
   );

apps/admin-vite/src/components/ArticlePreviewModal/view.tsx

@@ -10,6 +10,7 @@ export interface ArticlePreviewModalViewProps {
   onCancel: ModalProps['onCancel'];
   loading: boolean;
   onMarkdownRenderFinish: () => unknown;
+  onMarkdownRenderStart: () => unknown;
   contentMarkdown: string;
 }
 
@@ -21,6 +22,7 @@ export function ArticlePreviewModalView(props: ArticlePreviewModalViewProps) {
     onOk,
     onCancel,
     contentMarkdown,
+    onMarkdownRenderStart,
     onMarkdownRenderFinish,
   } = props;
   return (
@@ -42,7 +44,10 @@ export function ArticlePreviewModalView(props: ArticlePreviewModalViewProps) {
           />
         )}
         <div className={loading ? styles.hide : ''}>
-          <Markdown onRenderFinish={onMarkdownRenderFinish}>
+          <Markdown
+            onRenderStart={onMarkdownRenderStart}
+            onRenderFinish={onMarkdownRenderFinish}
+          >
             {contentMarkdown}
           </Markdown>
         </div>

packages/react-components/src/csr/Markdown/container.tsx

@@ -1,27 +1,42 @@
-import {useHljs, useMdConverter, useTeXRenderer} from '@website/hooks';
-import {useEffect} from 'react';
+import {useCallback, useEffect, useState} from 'react';
 
 import {MarkdownView} from '../../shared-views/MarkdownView';
 
 interface IProps {
   children: string;
+  onRenderStart?: () => unknown;
   onRenderFinish?: () => unknown;
 }
 
 export function Markdown(props: IProps) {
-  const {children, onRenderFinish} = props;
-  const {loading: converterLoading, html} = useMdConverter(children);
-  const {loading: hljsLoading, highlightedHtml} = useHljs(html);
-  const {loading: texRendererLoading, renderedHtml} = useTeXRenderer(
-    highlightedHtml,
-    [],
-  );
+  const {children, onRenderStart, onRenderFinish} = props;
+  const [renderedHtml, setRenderedHtml] = useState('');
+
+  const renderChildrenToHtml = useCallback(async () => {
+    const [{highlightAll}, {converter}, {TeXRenderer}] = await Promise.all([
+      import('@website/hljs/csr'),
+      import('@website/md-converter'),
+      import('@website/tex-renderer/csr'),
+    ]);
+
+    const rawHtml = converter.makeHtml(children);
+    const codeHighlightedHtml = await highlightAll(rawHtml);
+    const texRenderedHtml =
+      await TeXRenderer.renderAllTexInHTML(codeHighlightedHtml);
+    return texRenderedHtml;
+  }, [children]);
 
   useEffect(() => {
-    if (!converterLoading && !hljsLoading && !texRendererLoading) {
-      if (onRenderFinish) onRenderFinish();
+    if (onRenderStart) {
+      onRenderStart();
     }
-  }, [converterLoading, hljsLoading, texRendererLoading, onRenderFinish]);
+    void renderChildrenToHtml().then((textRenderedHtml) => {
+      setRenderedHtml(textRenderedHtml);
+      if (onRenderFinish) {
+        onRenderFinish();
+      }
+    });
+  }, [onRenderFinish, onRenderStart, renderChildrenToHtml]);
 
   return <MarkdownView htmlContent={renderedHtml} />;
 }