mobile margin removed

Author: 정호석

Diff for: package-lock.json

@@ -9,13 +9,15 @@
     "@material-ui/core": "^3.9.3",
     "@material-ui/icons": "^3.0.2",
     "apexcharts": "^3.6.6",
+    "classnames": "^2.2.6",
     "dompurify": "^1.0.10",
     "insert-text-at-cursor": "^0.1.2",
     "katex": "^0.10.1",
     "markdown-it": "^8.4.2",
     "markdown-it-anchor": "^5.0.2",
-    "markdown-it-apexcharts": "^0.1.3",
+    "markdown-it-apexcharts": "^0.2.1",
     "markdown-it-footnote": "^3.0.1",
+    "mdi-material-ui": "^5.11.0",
     "react": "^16.8.6",
     "react-app-polyfill": "^1.0.0",
     "react-dom": "^16.8.6",

Diff for: package.json

@@ -1,31 +1,41 @@
-import React, {useEffect} from 'react';
+import React, { useEffect } from 'react';
 import MarkdownIt from 'markdown-it';
 import MarkdownItKatex from '@liradb2000/markdown-it-katex';
 import MarkdownItAnchor from 'markdown-it-anchor';
 import MarkdownItToc from '@liradb2000/markdown-it-toc-done-right';
 import uslug from 'uslug';
-import MarkdownItApexCharts , {ApexRender} from 'markdown-it-apexcharts';
+import MarkdownItApexCharts, { ApexRender } from 'markdown-it-apexcharts';
 import MarkdownItMermaid from '@liradb2000/markdown-it-mermaid';
 import '../css/MarkDown.css';
 import DOMPurify from 'dompurify';
 import MarkdownItFootnote from 'markdown-it-footnote';
 
-
+import { withStyles } from '@material-ui/core/styles';
+import classNames from 'classnames'
 
 
 const uslugify = s => uslug(s);
 
+const styles = theme => ({
+    preview: {
+        margin: "50px 100px",
+        [theme.breakpoints.down('xs')]: {
+            margin: "0px 0px",
+        },
+    },
+});
+
 const renderMarkdown = (text) => {
 
-    
+
     var md = MarkdownIt({
         html: false,
         linkify: true,
         typographer: true,
         breaks: true,
         xhtmlOut: false,
     });
-    md.use(MarkdownItKatex).use(MarkdownItAnchor,{
+    md.use(MarkdownItKatex).use(MarkdownItAnchor, {
         level: [1, 2, 3],
         slugify: uslugify,
         permalink: true,
@@ -34,26 +44,27 @@ const renderMarkdown = (text) => {
         permalinkSymbol: 'link',
         permalinkBefore: false,
     }).use(MarkdownItToc, {
-        level: [1,2],
+        level: [1, 2],
         slugify: uslugify,
     }).use(MarkdownItMermaid).use(MarkdownItFootnote).use(MarkdownItApexCharts)
     //.use(MarkdownItApex).use(MarkdownItMarkvis);
     //return md.render(text? (text): "", {d3})
-   
-    return md.render(text? (text): "")
+
+    return md.render(text ? (text) : "")
 }
 
 const PreviewArea = props => {
-
-    useEffect(()=>{
-         ApexRender();
+    const { classes } = props;
+ 
+    useEffect(() => {
+        ApexRender();
     })
 
 
     return (
-        <div className="markdown-body" dangerouslySetInnerHTML={{__html:DOMPurify.sanitize(renderMarkdown(props.text))}}></div> 
+        <div className={classNames("markdown-body", classes.preview)} dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(renderMarkdown(props.text)) }}></div>
         // <div className="markdown-body" dangerouslySetInnerHTML={{__html:renderMarkdown(props.text)}}></div> 
     )
 }
 
-export default PreviewArea;
+export default withStyles(styles)(PreviewArea);

Diff for: src/component/PreviewArea.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import TextField from '@material-ui/core/TextField';
-import Resizable from 're-resizable';
+
 import { withStyles } from '@material-ui/core/styles';
 
 const SouthEastArrow = () => (

Diff for: src/component/TextArea.js

@@ -35,6 +35,7 @@
     font-size: 16px;
     line-height: 1.5;
     word-wrap: break-word;
+    /* for mobile support , below code is moved to component style ... */
     margin: 50px 100px;
   }