From 5ea295f857952d80d2423be78618e5e3841fdec7 Mon Sep 17 00:00:00 2001
From: jackyzha0 <j.zhao2k19@gmail.com>
Date: Fri, 22 May 2020 20:27:45 -0700
Subject: styling fixes

---
 frontend/src/components/NewPaste.js          | 34 ++++++++++++++++------------
 frontend/src/components/modals/PasteModal.js |  3 ++-
 frontend/src/components/renderers/Code.js    | 22 +++++++++++++++---
 3 files changed, 40 insertions(+), 19 deletions(-)

(limited to 'frontend/src/components')

diff --git a/frontend/src/components/NewPaste.js b/frontend/src/components/NewPaste.js
index 6e1b507..e13e7df 100644
--- a/frontend/src/components/NewPaste.js
+++ b/frontend/src/components/NewPaste.js
@@ -43,22 +43,26 @@ class NewPaste extends React.Component {
 
     handleSubmit(event) {
         event.preventDefault();
-        PostNewPaste(this.state)
-            .then((response) => {
-                // on success, redir
-                this.setState({ hash: response.data.hash })
-            }).catch((error) => {
-                const resp = error.response
 
-                // some weird err
-                if (resp !== undefined) {
-                    const errTxt = `${resp.statusText}: ${resp.data}`
-                    this.ErrorLabel.current.showMessage(errTxt)
-                } else {
-                    // some weird err (e.g. network)
-                    this.ErrorLabel.current.showMessage(error)
-                }
-            });
+        // prevent resubmission
+        if (!this.state.hash) {
+            PostNewPaste(this.state)
+                .then((response) => {
+                    // on success, redir
+                    this.setState({ hash: response.data.hash })
+                }).catch((error) => {
+                    const resp = error.response
+    
+                    // some weird err
+                    if (resp !== undefined) {
+                        const errTxt = `${resp.statusText}: ${resp.data}`
+                        this.ErrorLabel.current.showMessage(errTxt)
+                    } else {
+                        // some weird err (e.g. network)
+                        this.ErrorLabel.current.showMessage(error)
+                    }
+                });
+        }
     }
 
     render() {
diff --git a/frontend/src/components/modals/PasteModal.js b/frontend/src/components/modals/PasteModal.js
index 75c28a8..48ea372 100644
--- a/frontend/src/components/modals/PasteModal.js
+++ b/frontend/src/components/modals/PasteModal.js
@@ -22,7 +22,8 @@ const PasteModal = (props) => {
     const clipboard = useClipboard({ copiedTimeout: 3000 });
     Modal.setAppElement('body');
 
-    const redir = () => {
+    const redir = (e) => {
+        e.preventDefault();
         const redirUrl = `/${props.hash}`
         history.push(redirUrl);
     }
diff --git a/frontend/src/components/renderers/Code.js b/frontend/src/components/renderers/Code.js
index 02c1cc6..0c601b3 100644
--- a/frontend/src/components/renderers/Code.js
+++ b/frontend/src/components/renderers/Code.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { atomOneLight, ascetic, atomOneDark, dracula, ocean } from 'react-syntax-highlighter/dist/esm/styles/hljs';
+import styled from 'styled-components'
 
 export const THEMES = Object.freeze({
     'atom': atomOneLight,
@@ -34,16 +35,31 @@ export const LANGS = Object.freeze({
     'yaml': 'yaml'
 })
 
+const StyledPre = styled.pre`
+  padding: 0 !important;
+  margin: 0;
+`
+
+const CodeBlock = styled.div`
+  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;
+`
+
 const CodeRenderer = React.forwardRef((props, ref) => {
 
     const Pre = (props) => {
         return (
-            <pre {...props} ref={ref} />
+            <StyledPre {...props} ref={ref} />
         );
     }
 
     return (
-        <div className="lt-shadow codeBlock">
+        <CodeBlock className="lt-shadow">
             <SyntaxHighlighter
                 ref={ref}
                 language={props.lang}
@@ -52,7 +68,7 @@ const CodeRenderer = React.forwardRef((props, ref) => {
                 PreTag={Pre}>
                 {props.content}
             </SyntaxHighlighter>
-        </div>
+        </CodeBlock>
     );
 });
 
-- 
cgit v1.2.3


From b09ce50ac2289a8b45fb98494042e2b8202fbcd3 Mon Sep 17 00:00:00 2001
From: jackyzha0 <j.zhao2k19@gmail.com>
Date: Fri, 22 May 2020 20:46:21 -0700
Subject: switch to styled components for raw renderer

---
 frontend/src/components/App.js                | 13 +++++++
 frontend/src/components/renderers/Dispatch.js | 56 +++++++++++++++++++++++++++
 frontend/src/components/renderers/Latex.js    |  0
 frontend/src/components/renderers/Raw.js      | 21 +++++-----
 4 files changed, 80 insertions(+), 10 deletions(-)
 create mode 100644 frontend/src/components/renderers/Dispatch.js
 create mode 100644 frontend/src/components/renderers/Latex.js

(limited to 'frontend/src/components')

diff --git a/frontend/src/components/App.js b/frontend/src/components/App.js
index ae95dcb..eb63ed9 100644
--- a/frontend/src/components/App.js
+++ b/frontend/src/components/App.js
@@ -11,6 +11,7 @@ import {
   useParams
 } from "react-router-dom";
 import Raw from './renderers/Raw'
+import Dispatch from './renderers/Raw'
 
 const SpacedTitle = styled.div`
     margin-top: 10vh
@@ -38,6 +39,15 @@ const GetRawWithParam = () => {
   );
 }
 
+const RenderWithParam = () => {
+  let { hash } = useParams();
+  console.log(hash)
+
+  return (
+    <Dispatch hash={hash} />
+  );
+}
+
 function App() {
   return (
     <Router>
@@ -58,6 +68,9 @@ function App() {
 
           <main id="appElement">
             <Switch>
+              <Route path="/render/:hash"
+                children={<RenderWithParam />}
+              />
               <Route path="/:hash"
                 children={<GetPasteWithParam />}
               />
diff --git a/frontend/src/components/renderers/Dispatch.js b/frontend/src/components/renderers/Dispatch.js
new file mode 100644
index 0000000..fc80a47
--- /dev/null
+++ b/frontend/src/components/renderers/Dispatch.js
@@ -0,0 +1,56 @@
+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
new file mode 100644
index 0000000..e69de29
diff --git a/frontend/src/components/renderers/Raw.js b/frontend/src/components/renderers/Raw.js
index a8d0e31..7f8e7c1 100644
--- a/frontend/src/components/renderers/Raw.js
+++ b/frontend/src/components/renderers/Raw.js
@@ -1,6 +1,15 @@
 import React from 'react';
+import styled from 'styled-components'
 import { FetchPaste } from '../../helpers/httpHelper'
 
+const RawText = styled.pre`
+    word-wrap: break-word;
+    white-space: pre-wrap;
+    line-height: initial;
+    font-size: 0.8em;
+    padding: 0 1em;
+`
+
 class Raw extends React.Component {
 
     constructor(props) {
@@ -11,18 +20,10 @@ class Raw extends React.Component {
     }
 
     render() {
-        const styles = {
-            wordWrap: "break-word",
-            whiteSpace: "pre-wrap",
-            lineHeight: "initial", 
-            fontSize: "0.8em",
-            padding: "0 1em"
-        }
-
         return (
-            <pre style={styles}>
+            <RawText>
                 {this.state.content}
-            </pre>
+            </RawText>
         );
     }
 
-- 
cgit v1.2.3


From cdf8e036ff56281e9052fff7a688c6f32121428f Mon Sep 17 00:00:00 2001
From: jackyzha0 <j.zhao2k19@gmail.com>
Date: Fri, 22 May 2020 23:39:35 -0700
Subject: add preview panel

---
 frontend/src/components/App.js                | 13 -----
 frontend/src/components/Inputs.js             |  1 +
 frontend/src/components/NewPaste.js           | 75 ++++++++++++++++++++++++---
 frontend/src/components/PasteInfo.js          |  6 +--
 frontend/src/components/renderers/Code.js     |  4 +-
 frontend/src/components/renderers/Dispatch.js | 56 --------------------
 frontend/src/components/renderers/Latex.js    | 15 ++++++
 7 files changed, 89 insertions(+), 81 deletions(-)
 delete mode 100644 frontend/src/components/renderers/Dispatch.js

(limited to 'frontend/src/components')

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
-- 
cgit v1.2.3


From 418fbb8817dc22c6235811d256137139c70023b6 Mon Sep 17 00:00:00 2001
From: jackyzha0 <j.zhao2k19@gmail.com>
Date: Fri, 22 May 2020 23:53:55 -0700
Subject: latex live preview

---
 frontend/src/components/NewPaste.js | 26 ++++++++++++++++++++++----
 1 file changed, 22 insertions(+), 4 deletions(-)

(limited to 'frontend/src/components')

diff --git a/frontend/src/components/NewPaste.js b/frontend/src/components/NewPaste.js
index e1075c4..615dc2a 100644
--- a/frontend/src/components/NewPaste.js
+++ b/frontend/src/components/NewPaste.js
@@ -7,6 +7,7 @@ import PasteModal from './modals/PasteModal'
 import { LANGS } from './renderers/Code'
 import styled from 'styled-components'
 import CodeRenderer from './renderers/Code'
+import Latex from './renderers/Latex'
 
 const Button = styled.button`
     margin-right: 0 !important;
@@ -29,6 +30,11 @@ const FlexRight = styled.div`
     margin-left: 2em;
 `
 
+const LatexWrapper = styled.div`
+    margin-top: 2em;
+    margin-bottom: 2em;
+`
+
 class NewPaste extends React.Component {
     constructor(props) {
         super(props);
@@ -103,10 +109,22 @@ class NewPaste extends React.Component {
             maxLength="100000"
             id="pasteInput" />
 
-        const preview = <CodeRenderer
-            lang={this.state.language}
-            theme='atom'
-            content={this.state.content} />
+        var preview
+        switch (this.state.language) {
+            case 'latex':
+                preview = 
+                    <LatexWrapper>
+                        <Latex
+                            content={this.state.content} />
+                    </LatexWrapper>
+                break
+            default:
+                preview = 
+                    <CodeRenderer
+                        lang={this.state.language}
+                        theme='atom'
+                        content={this.state.content} />
+        }
 
         if (this.state.preview) {
             return (
-- 
cgit v1.2.3


From ff10e4ad18854bc675a58621e069ca13726e951b Mon Sep 17 00:00:00 2001
From: jackyzha0 <j.zhao2k19@gmail.com>
Date: Sat, 23 May 2020 00:39:56 -0700
Subject: inline splitting

---
 frontend/src/components/NewPaste.js        |  3 +--
 frontend/src/components/renderers/Latex.js | 35 +++++++++++++++++++++++++-----
 2 files changed, 30 insertions(+), 8 deletions(-)

(limited to 'frontend/src/components')

diff --git a/frontend/src/components/NewPaste.js b/frontend/src/components/NewPaste.js
index 615dc2a..8012b99 100644
--- a/frontend/src/components/NewPaste.js
+++ b/frontend/src/components/NewPaste.js
@@ -31,8 +31,7 @@ const FlexRight = styled.div`
 `
 
 const LatexWrapper = styled.div`
-    margin-top: 2em;
-    margin-bottom: 2em;
+    margin: 2em;
 `
 
 class NewPaste extends React.Component {
diff --git a/frontend/src/components/renderers/Latex.js b/frontend/src/components/renderers/Latex.js
index 299432e..c5dd57c 100644
--- a/frontend/src/components/renderers/Latex.js
+++ b/frontend/src/components/renderers/Latex.js
@@ -1,14 +1,37 @@
 import React from 'react';
-import { BlockMath } from 'react-katex';
+import { BlockMath, InlineMath } from 'react-katex';
 import 'katex/dist/katex.min.css';
+import styled from 'styled-components'
+
+const StyledInlineLatex = styled.div`
+    display: block;
+    margin-bottom: 0.5em;
+`
 
 class Latex extends React.Component {
     render() {
-        return (
-            <BlockMath>
-                {this.props.content}
-            </BlockMath>
-        );
+        // split by line break chars (\\, \newline, \break)
+        const els = this.props.content.split(/\\\\|\\newline|\\break/)
+
+        // if <=1 lines, just render block
+        if (els.length <= 1) {
+            return (
+                <BlockMath>
+                    {this.props.content}
+                </BlockMath>
+            );
+        } else {
+            // new inline block for every line
+            const blocks = els.map(line => 
+                <StyledInlineLatex>
+                    <InlineMath>
+                        {line}
+                    </InlineMath>
+                </StyledInlineLatex>
+            )
+
+            return blocks;
+        }
     }
 }
 
-- 
cgit v1.2.3


From 08c634da6c324d21cf4edcab0611e29e053501ca Mon Sep 17 00:00:00 2001
From: jackyzha0 <j.zhao2k19@gmail.com>
Date: Sat, 23 May 2020 00:56:48 -0700
Subject: fix weird padding

---
 frontend/src/components/renderers/Code.js | 1 +
 1 file changed, 1 insertion(+)

(limited to 'frontend/src/components')

diff --git a/frontend/src/components/renderers/Code.js b/frontend/src/components/renderers/Code.js
index 7c32c39..9e7521b 100644
--- a/frontend/src/components/renderers/Code.js
+++ b/frontend/src/components/renderers/Code.js
@@ -48,6 +48,7 @@ const CodeBlock = styled.div`
   border: 1px solid #565656;
   outline: none;
   margin: 1.7em 0;
+  padding-right: calc(1.6em - 2px);
 `
 
 const CodeRenderer = React.forwardRef((props, ref) => {
-- 
cgit v1.2.3