diff options
Diffstat (limited to 'frontend/src')
| -rw-r--r-- | frontend/src/components/NewPaste.js | 14 | ||||
| -rw-r--r-- | frontend/src/components/PasteInfo.js | 2 | ||||
| -rw-r--r-- | frontend/src/components/renderers/Markdown.js | 19 | ||||
| -rw-r--r-- | frontend/src/components/renderers/RenderDispatch.js | 15 |
4 files changed, 41 insertions, 9 deletions
diff --git a/frontend/src/components/NewPaste.js b/frontend/src/components/NewPaste.js index f332be0..afe1fc3 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; @@ -30,7 +31,7 @@ const FlexRight = styled.div` margin-left: 2em; ` -const LatexWrapper = styled.div` +const PreviewWrapper = styled.div` margin: 2em; ` @@ -121,10 +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 = + <PreviewWrapper> + <Markdown + content={this.state.content} /> + </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/Markdown.js b/frontend/src/components/renderers/Markdown.js new file mode 100644 index 0000000..b1d7905 --- /dev/null +++ b/frontend/src/components/renderers/Markdown.js @@ -0,0 +1,19 @@ +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 Markdown = (props) => { + const dangerousHtml = { + __html: marked(props.content) + } + return <Content dangerouslySetInnerHTML={dangerousHtml} />; +} + +export default Markdown
\ No newline at end of file diff --git a/frontend/src/components/renderers/RenderDispatch.js b/frontend/src/components/renderers/RenderDispatch.js index 892c649..35fdc54 100644 --- a/frontend/src/components/renderers/RenderDispatch.js +++ b/frontend/src/components/renderers/RenderDispatch.js @@ -1,9 +1,10 @@ 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; ` @@ -11,10 +12,14 @@ const RenderDispatch = React.forwardRef((props, ref) => { 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: return ( <CodeRenderer |