From 59a3af0ac9e90396123e6a40c154962cc80ddb6a Mon Sep 17 00:00:00 2001
From: Ian Mah <ian.mah@hootsuite.com>
Date: Thu, 28 May 2020 17:54:48 -0700
Subject: Add markdown preview

---
 frontend/src/components/NewPaste.js           |  8 ++++++++
 frontend/src/components/renderers/Markdown.js | 14 ++++++++++++++
 2 files changed, 22 insertions(+)
 create mode 100644 frontend/src/components/renderers/Markdown.js

(limited to 'frontend/src/components')

diff --git a/frontend/src/components/NewPaste.js b/frontend/src/components/NewPaste.js
index f332be0..adb5240 100644
--- a/frontend/src/components/NewPaste.js
+++ b/frontend/src/components/NewPaste.js
@@ -8,6 +8,7 @@ import { LANGS } from './renderers/Code'
 import styled from 'styled-components'
 import CodeRenderer from './renderers/Code'
 import Latex from './renderers/Latex'
+import Markdown from './renderers/Markdown'
 
 const Button = styled.button`
     margin-right: 0 !important;
@@ -126,6 +127,13 @@ class NewPaste extends React.Component {
                             content={this.state.content} />
                     </LatexWrapper>
                 break
+            case 'markdown':
+                preview = 
+                    <LatexWrapper>
+                        <Markdown
+                            content={this.state.content} />
+                    </LatexWrapper>
+                break
             default:
                 preview = 
                     <CodeRenderer
diff --git a/frontend/src/components/renderers/Markdown.js b/frontend/src/components/renderers/Markdown.js
new file mode 100644
index 0000000..cbc8dad
--- /dev/null
+++ b/frontend/src/components/renderers/Markdown.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import marked from 'marked';
+
+const getHtml = (markdown) => {
+    const rawMarkup = marked(markdown, {sanitize: true})
+    return {__html: rawMarkup}
+}
+
+const Markdown = (props) => {
+    const dangerousHtml = getHtml(props.content)
+    return <div dangerouslySetInnerHTML={dangerousHtml} />;
+}
+
+export default Markdown
\ No newline at end of file
-- 
cgit v1.2.3


From be21c0db5b869d5626ba8f9f32757aa593fb7f01 Mon Sep 17 00:00:00 2001
From: Ian Mah <ian.mah@hootsuite.com>
Date: Thu, 28 May 2020 18:09:28 -0700
Subject: Add markdown to view paste

---
 frontend/src/components/NewPaste.js                 | 10 +++++-----
 frontend/src/components/PasteInfo.js                |  2 +-
 frontend/src/components/renderers/RenderDispatch.js | 17 ++++++++++++-----
 3 files changed, 18 insertions(+), 11 deletions(-)

(limited to 'frontend/src/components')

diff --git a/frontend/src/components/NewPaste.js b/frontend/src/components/NewPaste.js
index adb5240..afe1fc3 100644
--- a/frontend/src/components/NewPaste.js
+++ b/frontend/src/components/NewPaste.js
@@ -31,7 +31,7 @@ const FlexRight = styled.div`
     margin-left: 2em;
 `
 
-const LatexWrapper = styled.div`
+const PreviewWrapper = styled.div`
     margin: 2em;
 `
 
@@ -122,17 +122,17 @@ class NewPaste extends React.Component {
         switch (this.state.language) {
             case 'latex':
                 preview = 
-                    <LatexWrapper>
+                    <PreviewWrapper>
                         <Latex
                             content={this.state.content} />
-                    </LatexWrapper>
+                    </PreviewWrapper>
                 break
             case 'markdown':
                 preview = 
-                    <LatexWrapper>
+                    <PreviewWrapper>
                         <Markdown
                             content={this.state.content} />
-                    </LatexWrapper>
+                    </PreviewWrapper>
                 break
             default:
                 preview = 
diff --git a/frontend/src/components/PasteInfo.js b/frontend/src/components/PasteInfo.js
index 76d8859..8669b20 100644
--- a/frontend/src/components/PasteInfo.js
+++ b/frontend/src/components/PasteInfo.js
@@ -39,7 +39,7 @@ const PasteInfo = (props) => {
 
     const renderable = () => {
         const buttonTxt = props.isRenderMode ? 'text' : 'render'
-        if (props.lang === 'latex') {
+        if (props.lang === 'latex' || props.lang === 'markdown') {
             return (
                 <Button
                     className="lt-shadow lt-hover"
diff --git a/frontend/src/components/renderers/RenderDispatch.js b/frontend/src/components/renderers/RenderDispatch.js
index 892c649..4daef07 100644
--- a/frontend/src/components/renderers/RenderDispatch.js
+++ b/frontend/src/components/renderers/RenderDispatch.js
@@ -1,21 +1,28 @@
 import React from 'react';
 import styled from 'styled-components'
 import Latex from './Latex'
+import Markdown from './Markdown'
 import CodeRenderer from './Code'
 
-const LatexWrapper = styled.div`
+const RenderWrapper = styled.div`
     padding: 2em;
 `
 
 const RenderDispatch = React.forwardRef((props, ref) => {
+    console.log(props)
     switch (props.language) {
         case 'latex':
             return (
-                <LatexWrapper ref={ref}>
-                    <Latex
-                        content={props.content} />
-                </LatexWrapper>)
+                <RenderWrapper ref={ref}>
+                    <Latex content={props.content} />
+                </RenderWrapper>)
+        case 'markdown':
+            return (
+                <RenderWrapper>
+                    <Markdown content={props.content} />
+                </RenderWrapper>)
         default:
+            console.log('nooo')
             return (
                 <CodeRenderer
                     content={props.content}
-- 
cgit v1.2.3


From 64d6bd6e4e6d4dbd9a96682caebd6a53206ebf0a Mon Sep 17 00:00:00 2001
From: Ian Mah <ian.mah@hootsuite.com>
Date: Thu, 28 May 2020 18:21:26 -0700
Subject: Restrict width to preview pane

---
 frontend/src/components/renderers/Markdown.js | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

(limited to 'frontend/src/components')

diff --git a/frontend/src/components/renderers/Markdown.js b/frontend/src/components/renderers/Markdown.js
index cbc8dad..81ffa67 100644
--- a/frontend/src/components/renderers/Markdown.js
+++ b/frontend/src/components/renderers/Markdown.js
@@ -1,14 +1,24 @@
 import React from 'react';
 import marked from 'marked';
+import styled from 'styled-components'
+
+const Content = styled.div`
+    max-width: 100%;
+    overflow-wrap: anywhere;
+    img {
+        max-width: 100%;
+    }
+`
 
 const getHtml = (markdown) => {
-    const rawMarkup = marked(markdown, {sanitize: true})
+    const rawMarkup = marked(markdown)
+    console.log(rawMarkup)
     return {__html: rawMarkup}
 }
 
 const Markdown = (props) => {
     const dangerousHtml = getHtml(props.content)
-    return <div dangerouslySetInnerHTML={dangerousHtml} />;
+    return <Content dangerouslySetInnerHTML={dangerousHtml} />;
 }
 
 export default Markdown
\ No newline at end of file
-- 
cgit v1.2.3


From 328d96a08eb4d8fb4797b1145b100ea82e18df79 Mon Sep 17 00:00:00 2001
From: Ian Mah <ian.mah@hootsuite.com>
Date: Thu, 28 May 2020 18:33:20 -0700
Subject: Remove console log

---
 frontend/src/components/renderers/RenderDispatch.js | 2 --
 1 file changed, 2 deletions(-)

(limited to 'frontend/src/components')

diff --git a/frontend/src/components/renderers/RenderDispatch.js b/frontend/src/components/renderers/RenderDispatch.js
index 4daef07..35fdc54 100644
--- a/frontend/src/components/renderers/RenderDispatch.js
+++ b/frontend/src/components/renderers/RenderDispatch.js
@@ -9,7 +9,6 @@ const RenderWrapper = styled.div`
 `
 
 const RenderDispatch = React.forwardRef((props, ref) => {
-    console.log(props)
     switch (props.language) {
         case 'latex':
             return (
@@ -22,7 +21,6 @@ const RenderDispatch = React.forwardRef((props, ref) => {
                     <Markdown content={props.content} />
                 </RenderWrapper>)
         default:
-            console.log('nooo')
             return (
                 <CodeRenderer
                     content={props.content}
-- 
cgit v1.2.3


From 598b72c9d529e3debdabd0206cc75bc212543048 Mon Sep 17 00:00:00 2001
From: Ian Mah <ian.mah@hootsuite.com>
Date: Thu, 28 May 2020 18:33:50 -0700
Subject: Remove more console log

---
 frontend/src/components/renderers/Markdown.js | 1 -
 1 file changed, 1 deletion(-)

(limited to 'frontend/src/components')

diff --git a/frontend/src/components/renderers/Markdown.js b/frontend/src/components/renderers/Markdown.js
index 81ffa67..1d47596 100644
--- a/frontend/src/components/renderers/Markdown.js
+++ b/frontend/src/components/renderers/Markdown.js
@@ -12,7 +12,6 @@ const Content = styled.div`
 
 const getHtml = (markdown) => {
     const rawMarkup = marked(markdown)
-    console.log(rawMarkup)
     return {__html: rawMarkup}
 }
 
-- 
cgit v1.2.3


From 44d9deaac1ce31b3ad2c60c686faf93bf7a8c680 Mon Sep 17 00:00:00 2001
From: Ian Mah <ian.mah@hootsuite.com>
Date: Thu, 28 May 2020 18:35:23 -0700
Subject: y helper function when no helper function do

---
 frontend/src/components/renderers/Markdown.js | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

(limited to 'frontend/src/components')

diff --git a/frontend/src/components/renderers/Markdown.js b/frontend/src/components/renderers/Markdown.js
index 1d47596..b1d7905 100644
--- a/frontend/src/components/renderers/Markdown.js
+++ b/frontend/src/components/renderers/Markdown.js
@@ -9,14 +9,10 @@ const Content = styled.div`
         max-width: 100%;
     }
 `
-
-const getHtml = (markdown) => {
-    const rawMarkup = marked(markdown)
-    return {__html: rawMarkup}
-}
-
 const Markdown = (props) => {
-    const dangerousHtml = getHtml(props.content)
+    const dangerousHtml = {
+        __html: marked(props.content)
+    }
     return <Content dangerouslySetInnerHTML={dangerousHtml} />;
 }
 
-- 
cgit v1.2.3