Merge pull request #28 from jackyzha0/save-png

save as png

3 files changed, 69 insertions, 39 deletions

diff --git a/frontend/src/components/PasteInfo.js b/frontend/src/components/PasteInfo.js
index ea4981c..b63eedb 100644
--- a/frontend/src/components/PasteInfo.js
+++ b/frontend/src/components/PasteInfo.js
@@ -2,6 +2,7 @@ import React from 'react';
 import styled from 'styled-components'
 import { useHistory } from 'react-router-dom';
 import { ThemeInput } from './Inputs'
+import { exportComponentAsJPEG } from "react-component-export-image";
 
 const Bold = styled.span`
     font-weight: 700
@@ -9,14 +10,13 @@ const Bold = styled.span`
 
 const StyledDiv = styled.div`
     display: inline-block;
+    margin: 2em 0;
 `
 
 const Button = styled.button`
-    margin-left: 0 !important;
-`
-
-const ButtonRow = styled.div`
-    display: inline;
+    margin-right: 0 !important;
+    margin-left: 2em !important;
+    height: calc(16px + 1.6em + 2px);
 `
 
 const SpacedText = styled.span`
@@ -32,38 +32,63 @@ const Flex = styled.div`
 
 const PasteInfo = (props) => {
     const history = useHistory();
-    const redir = () => {
+    const redirRaw = () => {
         const redirUrl = `/raw/${props.hash}`
         history.push(redirUrl);
     }
 
+    const redirRender = () => {
+        const redirUrl = `/render/${props.hash}`
+        history.push(redirUrl);
+    }
+
+    const renderable = () => {
+        if (props.lang === 'latex') {
+            return (
+                <Button
+                    className="lt-shadow lt-hover"
+                    type="button"
+                    onClick={redirRender}
+                >
+                    render
+                </Button>
+            );
+        }
+    }
+
     return (
         <div>
             <Flex>
+                <Button
+                    className="lt-shadow lt-hover"
+                    type="button"
+                    onClick={redirRaw}
+                >
+                    view raw
+                </Button>
+                <Button
+                    className="lt-shadow lt-hover"
+                    type="button"
+                    onClick={() => exportComponentAsJPEG(props.compref, `paste-${props.hash}.png`)}
+                >
+                    save
+                </Button>
+                {renderable()}
                 <ThemeInput
                     value={props.theme}
                     onChange={props.onChange}
                     id="themeInput" />
             </Flex>
             <StyledDiv>
-                <ButtonRow>
-                    <Button 
-                        className="lt-shadow lt-hover" 
-                        type="button"
-                        onClick={redir}
-                        >
-                        view raw
-                    </Button>
-                    <SpacedText>
-                        <Bold>language:&nbsp;</Bold>{props.lang}
-                    </SpacedText>
-                    <SpacedText>
-                        <Bold>expires:&nbsp;</Bold>{props.expiry}
-                    </SpacedText>
-                    <SpacedText>
-                        {props.err}
-                    </SpacedText>
-                </ButtonRow>
+                <SpacedText>
+                    <Bold>language:&nbsp;</Bold>{props.lang}
+                </SpacedText>
+                <SpacedText>
+                    <Bold>expires:&nbsp;</Bold>{props.expiry}
+                </SpacedText>
+                <SpacedText>
+                    {props.err}
+                </SpacedText>
             </StyledDiv>
         </div>
     );
diff --git a/frontend/src/components/ViewPaste.js b/frontend/src/components/ViewPaste.js
index 81d78f3..914f94c 100644
--- a/frontend/src/components/ViewPaste.js
+++ b/frontend/src/components/ViewPaste.js
@@ -29,6 +29,7 @@ class ViewPaste extends React.Component {
         this.validatePass = this.validatePass.bind(this);
         this.ErrorLabel = React.createRef();
         this.PasswordModal = React.createRef();
+        this.componentRef = React.createRef();
     }
 
     handleChange(event) {
@@ -89,12 +90,14 @@ class ViewPaste extends React.Component {
                     content={this.state.content}
                     lang={this.state.language}
                     theme={this.state.theme}
+                    ref={this.componentRef}
                     id="pasteInput" />
                 <PasteInfo
                     hash={this.props.hash}
                     lang={this.state.language}
                     theme={this.state.theme}
                     onChange={this.handleChange}
+                    compref={this.componentRef}
                     err={<Error ref={this.ErrorLabel} />}
                     expiry={this.state.expiry} />
             </div>
diff --git a/frontend/src/components/renderers/Code.js b/frontend/src/components/renderers/Code.js
index a024bb7..3d84adb 100644
--- a/frontend/src/components/renderers/Code.js
+++ b/frontend/src/components/renderers/Code.js
@@ -1,5 +1,4 @@
 import React from 'react';
-import styled from 'styled-components'
 import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { atomOneLight, ascetic, atomOneDark, dracula, ocean } from 'react-syntax-highlighter/dist/esm/styles/hljs';
 
@@ -35,22 +34,25 @@ export const LANGS = Object.freeze({
     'yaml': 'yaml'
 })
 
-const RelPositioning = styled.div`
-    position: relative; 
-`
+const CodeRenderer = React.forwardRef((props, ref) => {
+
+    const Pre = (props) => {
+        return (
+            <pre {...props} ref={ref} />
+        );
+    }
 
-const CodeRenderer = (props) => {
     return (
-        <RelPositioning>
-            <SyntaxHighlighter
-                className="codeBlock lt-shadow"
-                language={props.lang}
-                style={THEMES[props.theme]}
-                showLineNumbers >
-                {props.content}
-            </SyntaxHighlighter>
-        </RelPositioning>
+        <SyntaxHighlighter
+            className="codeBlock lt-shadow"
+            ref={ref}
+            language={props.lang}
+            style={THEMES[props.theme]}
+            showLineNumbers
+            PreTag={Pre}>
+            {props.content}
+        </SyntaxHighlighter>
     );
-};
+});
 
 export default CodeRenderer
\ No newline at end of file