feat(markdown-renderer): add antd.Button external render

SJMC-Dev · May 9, 2024 · a913434 · a913434
1 parent d3b12b6
commit a913434
Showing 1 changed file with 21 additions and 0 deletions.
diff --git a/frontend/src/components/markdown-renderer.tsx b/frontend/src/components/markdown-renderer.tsx
@@ -1,4 +1,5 @@
 import React, {useContext} from 'react';
+import { Button } from 'antd';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import remarkHtml from 'remark-html';
@@ -9,13 +10,33 @@ const MarkdownRenderer = ({content} : any) =>{
 
     const themeCtx = useContext(ThemeContext);
 
+    const externalRender = {
+        // replace html button to antd.Button
+        button({node, antd_type, className, children, ...props}) {
+            return (
+                <Button 
+                    className={className} type={antd_type} 
+                    style={{padding: '0 10px'}}
+                    {...props}
+                >
+                    {children}
+                </Button>
+            )
+        },
+    }
+
+    const renderers = {
+        ...externalRender,
+    };
+
     return(
         <div style={{ wordWrap: 'break-word', overflowWrap: 'break-word'}} className={themeCtx.userTheme}>
         <ReactMarkdown
             className={'markdown-body-' + (themeCtx.userTheme === 'dark' ? 'dark' : 'light')}
             remarkPlugins={[remarkGfm, remarkHtml]}
             rehypePlugins={[rehypeRaw]}
             skipHtml={false}
+            components={renderers}
         >
             {content}
         </ReactMarkdown>