Merge branch 'master' of https://github.com/velopert/velog-client

Author: velopert

src/components/common/MarkdownRender.tsx

@@ -154,23 +154,23 @@ const MarkdownRender: React.FC<MarkdownRenderProps> = ({
   onConvertFinish,
   editing,
 }) => {
-  const initialHtml = ssrEnabled
-    ? remark()
-        .use(breaks)
-        .use(prismPlugin)
-        .use(htmlPlugin, {
-          sanitize: true,
-        })
-        .use(embedPlugin)
-        .use(slug)
-        .processSync(markdown)
-        .toString()
-    : '';
-
-  const [element, setElement] = useState<RenderedElement>(
-    ssrEnabled ? parse(filter(initialHtml)) : null,
+  const [html, setHtml] = useState(
+    ssrEnabled
+      ? remark()
+          .use(breaks)
+          .use(prismPlugin)
+          .use(htmlPlugin, {
+            sanitize: true,
+          })
+          .use(embedPlugin)
+          .use(slug)
+          .processSync(markdown)
+          .toString()
+      : '',
   );
 
+  const [element, setElement] = useState<RenderedElement>(null);
+
   const applyElement = React.useMemo(() => {
     return throttle(250, (el: any) => {
       setElement(el);
@@ -195,6 +195,12 @@ const MarkdownRender: React.FC<MarkdownRenderProps> = ({
           // if (window && (window as any).twttr) return;
           loadScript('https://platform.twitter.com/widgets.js');
         }
+
+        if (!editing) {
+          setHtml(html);
+          return;
+        }
+
         const el = parse(editing ? html : filter(html));
 
         applyElement(el);
@@ -203,7 +209,13 @@ const MarkdownRender: React.FC<MarkdownRenderProps> = ({
 
   return (
     <Typography>
-      <MarkdownRenderBlock className={codeTheme}>{element}</MarkdownRenderBlock>
+      {editing ? (
+        <MarkdownRenderBlock className={codeTheme}>
+          {element}
+        </MarkdownRenderBlock>
+      ) : (
+        <MarkdownRenderBlock dangerouslySetInnerHTML={{ __html: html }} />
+      )}
     </Typography>
   );
 };