From cdf8e036ff56281e9052fff7a688c6f32121428f Mon Sep 17 00:00:00 2001 From: jackyzha0 Date: Fri, 22 May 2020 23:39:35 -0700 Subject: add preview panel --- frontend/package.json | 2 +- 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 ++++++ frontend/src/css/index.css | 14 +---- 9 files changed, 92 insertions(+), 94 deletions(-) delete mode 100644 frontend/src/components/renderers/Dispatch.js 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 ( - - ); -} - function App() { return ( @@ -68,9 +58,6 @@ function App() {
- } - /> } /> 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 = + + const preview = + + if (this.state.preview) { + return ( + + + {pasteInput} + + + {preview} + + + ); + } else { + return ( + pasteInput + ); + } + } + render() { return (
- - + {this.renderPreview()} + ); 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) => { 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 ( - 
-                {this.state.content}
-
- ); - } - - 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 ( + + {this.props.content} + + ); + } +} + +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 { -- cgit v1.2.3