add preview panel

9 files changed, 92 insertions, 94 deletions

diff --git a/frontend/package.json b/frontend/package.json
index 4139f4b..383fecc 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -9,12 +9,12 @@
     "axios": "^0.19.2",
     "d3-scale": "^3.2.1",
     "file-saver": "^2.0.2",
-    "html-to-image": "^0.1.1",
     "rc-slider": "^9.2.4",
     "react": "^16.13.1",
     "react-component-export-image": "^0.1.4",
     "react-dom": "^16.13.1",
     "react-dropdown": "^1.7.0",
+    "react-katex": "^2.0.2",
     "react-modal": "^3.11.2",
     "react-render-html": "^0.6.0",
     "react-router-dom": "^5.2.0",
diff --git a/frontend/src/components/App.js b/frontend/src/components/App.js
index eb63ed9..ae95dcb 100644
--- a/frontend/src/components/App.js
+++ b/frontend/src/components/App.js
@@ -11,7 +11,6 @@ import {
   useParams
 } from "react-router-dom";
 import Raw from './renderers/Raw'
-import Dispatch from './renderers/Raw'
 
 const SpacedTitle = styled.div`
     margin-top: 10vh
@@ -39,15 +38,6 @@ const GetRawWithParam = () => {
   );
 }
 
-const RenderWithParam = () => {
-  let { hash } = useParams();
-  console.log(hash)
-
-  return (
-    <Dispatch hash={hash} />
-  );
-}
-
 function App() {
   return (
     <Router>
@@ -68,9 +58,6 @@ function App() {
 
           <main id="appElement">
             <Switch>
-              <Route path="/render/:hash"
-                children={<RenderWithParam />}
-              />
               <Route path="/:hash"
                 children={<GetPasteWithParam />}
               />
diff --git a/frontend/src/components/Inputs.js b/frontend/src/components/Inputs.js
index b96ceb0..872afd7 100644
--- a/frontend/src/components/Inputs.js
+++ b/frontend/src/components/Inputs.js
@@ -7,6 +7,7 @@ import { LANGS, THEMES } from './renderers/Code';
 
 const RelPositioning = styled.div`
     position: relative; 
+    height: calc(100% - 4em);
 `
 
 const FlexChild = styled.div`
diff --git a/frontend/src/components/NewPaste.js b/frontend/src/components/NewPaste.js
index e13e7df..e1075c4 100644
--- a/frontend/src/components/NewPaste.js
+++ b/frontend/src/components/NewPaste.js
@@ -5,6 +5,29 @@ import Error from './Err'
 import { PostNewPaste } from '../helpers/httpHelper'
 import PasteModal from './modals/PasteModal'
 import { LANGS } from './renderers/Code'
+import styled from 'styled-components'
+import CodeRenderer from './renderers/Code'
+
+const Button = styled.button`
+    margin-right: 0 !important;
+    margin-left: 2em !important;
+    height: calc(16px + 1.6em + 2px);
+`
+
+const Flex = styled.div`
+    display: flex;
+    flex-direction: row;
+`
+
+const FlexLeft = styled.div`
+    flex: 0 0 50%;
+`
+
+const FlexRight = styled.div`
+    flex: 0 0 50%;
+    max-width: calc(50% - 1em + 2px);
+    margin-left: 2em;
+`
 
 class NewPaste extends React.Component {
     constructor(props) {
@@ -17,10 +40,13 @@ class NewPaste extends React.Component {
             expiry: '',
             hash: '',
             error: '',
+            preview: false,
         };
 
         this.handleChange = this.handleChange.bind(this);
         this.handleSubmit = this.handleSubmit.bind(this);
+        this.togglePreview = this.togglePreview.bind(this);
+        this.renderPreview = this.renderPreview.bind(this);
         this.ErrorLabel = React.createRef();
     }
 
@@ -41,6 +67,11 @@ class NewPaste extends React.Component {
         });
     }
 
+    togglePreview() {
+        const state = this.state.preview
+        this.setState({ preview: !state })
+    }
+
     handleSubmit(event) {
         event.preventDefault();
 
@@ -65,26 +96,58 @@ class NewPaste extends React.Component {
         }
     }
 
+    renderPreview() {
+        const pasteInput = <PasteInput
+            onChange={this.handleChange}
+            content={this.state.content}
+            maxLength="100000"
+            id="pasteInput" />
+
+        const preview = <CodeRenderer
+            lang={this.state.language}
+            theme='atom'
+            content={this.state.content} />
+
+        if (this.state.preview) {
+            return (
+                <Flex>
+                    <FlexLeft>
+                        {pasteInput}
+                    </FlexLeft>
+                    <FlexRight className='preview' >
+                        {preview}
+                    </FlexRight>
+                </Flex>
+            );
+        } else {
+            return (
+                pasteInput
+            );
+        }
+    }
+
     render() {
         return (
             <form onSubmit={this.handleSubmit}>
                 <PasteModal hash={this.state.hash} />
-                <TitleInput 
+                <TitleInput
                     onChange={this.handleChange}
                     value={this.state.title}
                     maxLength="100"
                     id="titleInput" />
-                <PasteInput
-                    onChange={this.handleChange}
-                    content={this.state.content}
-                    maxLength="100000"
-                    id="pasteInput" />
+                {this.renderPreview()}
                 <OptionsContainer
                     pass={this.state.pass}
                     expiry={this.state.expiry}
                     lang={this.state.language}
                     onChange={this.handleChange} />
                 <input className="lt-button lt-shadow lt-hover" type="submit" value="new paste" />
+                <Button
+                    className="lt-shadow lt-hover"
+                    type="button"
+                    onClick={this.togglePreview} >
+                    preview
+                </Button>
                 <Error ref={this.ErrorLabel} />
             </form>
         );
diff --git a/frontend/src/components/PasteInfo.js b/frontend/src/components/PasteInfo.js
index 28141ac..9cf4da3 100644
--- a/frontend/src/components/PasteInfo.js
+++ b/frontend/src/components/PasteInfo.js
@@ -37,9 +37,7 @@ const PasteInfo = (props) => {
         history.push(redirUrl);
     }
 
-    const redirRender = () => {
-        const redirUrl = `/render/${props.hash}`
-        history.push(redirUrl);
+    const render = () => {
     }
 
     const renderable = () => {
@@ -48,7 +46,7 @@ const PasteInfo = (props) => {
                 <Button
                     className="lt-shadow lt-hover"
                     type="button"
-                    onClick={redirRender}
+                    onClick={render}
                 >
                     render
                 </Button>
diff --git a/frontend/src/components/renderers/Code.js b/frontend/src/components/renderers/Code.js
index 0c601b3..7c32c39 100644
--- a/frontend/src/components/renderers/Code.js
+++ b/frontend/src/components/renderers/Code.js
@@ -36,14 +36,14 @@ export const LANGS = Object.freeze({
 })
 
 const StyledPre = styled.pre`
-  padding: 0 !important;
+  padding: calc(0.8em - 1px) !important;
   margin: 0;
 `
 
 const CodeBlock = styled.div`
   width: 100%;
   font-size: 0.8em;
-  padding: calc(0.8em - 1px) !important;
+  min-height: 1.2em;
   border-radius: 3px;
   border: 1px solid #565656;
   outline: none;
diff --git a/frontend/src/components/renderers/Dispatch.js b/frontend/src/components/renderers/Dispatch.js
deleted file mode 100644
index fc80a47..0000000
--- a/frontend/src/components/renderers/Dispatch.js
+++ /dev/null
@@ -1,56 +0,0 @@
-import React from 'react';
-import { FetchPaste } from '../../helpers/httpHelper'
-
-class Raw extends React.Component {
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            content: '',
-        };
-    }
-
-    render() {
-        const styles = {
-            wordWrap: "break-word",
-            whiteSpace: "pre-wrap",
-            lineHeight: "initial",
-            fontSize: "0.8em",
-            padding: "0 1em"
-        }
-
-        return (
-            <pre style={styles}>
-                {this.state.content}
-            </pre>
-        );
-    }
-
-    componentDidMount() {
-        FetchPaste(this.props.hash)
-            .then((response) => {
-                const data = response.data
-                this.setState({ content: data.content })
-            }).catch((error) => {
-                const resp = error.response
-
-                // catch 401 unauth (password protected)
-                if (resp.status === 401) {
-                    this.setState({ content: 'err: password protected' })
-                    return
-                }
-
-                // some weird err
-                if (resp !== undefined) {
-                    const errTxt = `${resp.statusText}: ${resp.data}`
-                    this.setState({ content: errTxt })
-                    return
-                }
-
-                // some weird err (e.g. network)
-                this.setState({ content: error })
-            })
-    }
-}
-
-export default Raw
\ No newline at end of file
diff --git a/frontend/src/components/renderers/Latex.js b/frontend/src/components/renderers/Latex.js
index e69de29..299432e 100644
--- a/frontend/src/components/renderers/Latex.js
+++ b/frontend/src/components/renderers/Latex.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import { BlockMath } from 'react-katex';
+import 'katex/dist/katex.min.css';
+
+class Latex extends React.Component {
+    render() {
+        return (
+            <BlockMath>
+                {this.props.content}
+            </BlockMath>
+        );
+    }
+}
+
+export default Latex
\ No newline at end of file
diff --git a/frontend/src/css/index.css b/frontend/src/css/index.css
index c1b1813..9aa48e1 100644
--- a/frontend/src/css/index.css
+++ b/frontend/src/css/index.css
@@ -25,16 +25,6 @@ textarea, input[type=text], input[type=password], .Dropdown-root {
   margin: 1.7em 0;
 }
 
-.codeBlock {
-  width: 100%;
-  font-size: 0.8em;
-  padding: calc(0.8em - 1px) !important;
-  border-radius: 3px;
-  border: 1px solid #565656;
-  outline: none;
-  margin: 1.7em 0;
-}
-
 .codeBlock code:first-child {
   margin-right: 10px;
   border-radius: 0;
@@ -101,9 +91,9 @@ input[type=password] {
 }
 
 textarea {
-  height: 45vh;
+  height: max(45vh, 100%);
   resize: vertical;
-  min-height: 2em;
+  min-height: 45vh;
 }
 
 a {