markdown

client/src/components/Markdown/MermaidCodeBlock.tsx → client/src/components/Markdown/img/MermaidCodeBlock.tsx

@@ -2,9 +2,7 @@ import React, { useEffect, useRef, memo, useCallback, useState, useMemo } from '
 import { Box } from '@chakra-ui/react';
 import { Box } from '@chakra-ui/react';
 // @ts-ignore
 // @ts-ignore
 import mermaid from 'mermaid';
 import mermaid from 'mermaid';
-import MyIcon from '../Icon';
-
-import styles from './index.module.scss';
+import MyIcon from '../../Icon';
 
 
 const mermaidAPI = mermaid.mermaidAPI;
 const mermaidAPI = mermaid.mermaidAPI;
 mermaidAPI.initialize({
 mermaidAPI.initialize({
@@ -110,8 +108,8 @@ const MermaidBlock = ({ code }: { code: string }) => {
       }}
       }}
     >
     >
       <Box
       <Box
+        overflowX={'auto'}
         ref={ref}
         ref={ref}
-        className={`${styles.mermaid}`}
         minW={'100px'}
         minW={'100px'}
         minH={'50px'}
         minH={'50px'}
         py={4}
         py={4}

client/src/components/Markdown/index.tsx

@@ -10,8 +10,8 @@ import styles from './index.module.scss';
 
 
 import Link from './Link';
 import Link from './Link';
 import CodeLight from './CodeLight';
 import CodeLight from './CodeLight';
-import MermaidCodeBlock from './MermaidCodeBlock';
-import MdImage from './Image';
+import MermaidCodeBlock from './img/MermaidCodeBlock';
+import MdImage from './img/Image';
 
 
 function Code({ inline, className, children }: any) {
 function Code({ inline, className, children }: any) {
   const match = /language-(\w+)/.exec(className || '');
   const match = /language-(\w+)/.exec(className || '');