diff options
Diffstat (limited to 'frontend/src')
| -rw-r--r-- | frontend/src/components/Form/Input.js | 2 | ||||
| -rw-r--r-- | frontend/src/components/Form/mixins.js | 14 | ||||
| -rw-r--r-- | frontend/src/components/Inputs/Code.js | 14 | ||||
| -rw-r--r-- | frontend/src/components/decorators/CharLimit.js | 2 | ||||
| -rw-r--r-- | frontend/src/components/renderers/Code.js | 38 |
5 files changed, 37 insertions, 33 deletions
diff --git a/frontend/src/components/Form/Input.js b/frontend/src/components/Form/Input.js index 7c9e413..e000cfb 100644 --- a/frontend/src/components/Form/Input.js +++ b/frontend/src/components/Form/Input.js @@ -1,5 +1,5 @@ import styled from 'styled-components' -import {Border, DropShadow, InputLike, Rounded, Transition} from "./mixins"; +import {Border, DropShadow, InputLike, Rounded} from "./mixins"; export const Input = styled.input` ${Border} diff --git a/frontend/src/components/Form/mixins.js b/frontend/src/components/Form/mixins.js index 64b7cc0..600a861 100644 --- a/frontend/src/components/Form/mixins.js +++ b/frontend/src/components/Form/mixins.js @@ -8,7 +8,12 @@ export const Hover = css` opacity: 0.5; transition: all 0.5s cubic-bezier(.25,.8,.25,1); - &:focus, &:hover, &:focus span { + & ~ pre { + transition: all 0.5s cubic-bezier(.25,.8,.25,1); + opacity: 0.5; + } + + &:focus, &:hover, &:focus span, &:focus ~ pre { opacity: 1; } ` @@ -31,6 +36,13 @@ export const InputLike = css` margin: 1.7em 0; ` +export const CodeLike = css` + font-family: JetBrains Mono !important; + font-size: 14px !important; + line-height: 1.2em !important; + white-space: pre-wrap; +` + export const ButtonLike = css` font-family: 'JetBrains Mono', serif; font-weight: 700; diff --git a/frontend/src/components/Inputs/Code.js b/frontend/src/components/Inputs/Code.js index 5b8e06a..d5e063a 100644 --- a/frontend/src/components/Inputs/Code.js +++ b/frontend/src/components/Inputs/Code.js @@ -3,6 +3,7 @@ import styled from 'styled-components' import CharLimit from "../decorators/CharLimit"; import Editor from 'react-simple-code-editor'; import {Highlighter} from "../renderers/Code"; +import {CodeLike, Hover} from "../Form/mixins"; const EditorWrapper = styled(Editor)` overflow: visible !important; @@ -13,30 +14,25 @@ const EditorWrapper = styled(Editor)` } & pre, & code, & > textarea { - font-family: JetBrains Mono !important; - font-size: 14px !important; - line-height: 1.2em !important; + ${CodeLike} min-height: 40vh; } & > textarea { - padding: 0.8em !important; + ${Hover} + padding: 0.6em !important; z-index: 1; - border: none !important; - background-color: transparent !important; outline: none !important; } ` -const DefaultText = `Paste your text here` - export const Code = ({content, id, readOnly, setContentCallback, ...props}) => { return ( <div> <EditorWrapper name="content" readOnly={readOnly} - placeholder={DefaultText} + placeholder="Paste your text here" value={content} id={id} required diff --git a/frontend/src/components/decorators/CharLimit.js b/frontend/src/components/decorators/CharLimit.js index 5201377..fcf14d0 100644 --- a/frontend/src/components/decorators/CharLimit.js +++ b/frontend/src/components/decorators/CharLimit.js @@ -1,5 +1,5 @@ import React from 'react'; -import styled, { css } from 'styled-components' +import styled from 'styled-components' // show char limit if length > half of max const Chars = styled.p` diff --git a/frontend/src/components/renderers/Code.js b/frontend/src/components/renderers/Code.js index 9243532..d110f79 100644 --- a/frontend/src/components/renderers/Code.js +++ b/frontend/src/components/renderers/Code.js @@ -1,8 +1,9 @@ import React from 'react'; import SyntaxHighlighter from 'react-syntax-highlighter'; +import virtualizedRenderer from 'react-syntax-highlighter-virtualized-renderer'; import { atomOneLight, ascetic, atomOneDark, dracula, ocean } from 'react-syntax-highlighter/dist/esm/styles/hljs'; import styled from 'styled-components' -import {Rounded} from "../Form/mixins"; +import {Border, CodeLike, DropShadow, Hover, Rounded} from "../Form/mixins"; export const THEMES = Object.freeze({ 'atom': atomOneLight, @@ -19,19 +20,17 @@ export const LANGS = Object.freeze({ }) export const StyledPre = styled.pre` - width: 100%; - font-size: 14px; - line-height: 1.2em; - padding: calc(0.8em - 1px) !important; + ${Rounded}; + ${Border}; + ${DropShadow}; + width: calc(100%); + padding: calc(0.6em - 1px) !important; margin: 1.7em 0; - background: none !important; position: relative; - ${Rounded} outline: none; - border: 1px solid #565656 !important; & code { - font-family: JetBrains Mono !important; + ${CodeLike} } & code:first-child:not(:only-of-type) { @@ -51,18 +50,15 @@ export const Highlighter = ({language, lineNumbers, theme, pre = StyledPre, chil const CodeRenderer = React.forwardRef((props, ref) => { const Pre = (props) => <StyledPre {...props} ref={ref} /> - return ( - <div className="lt-shadow"> - <Highlighter - lineNumbers={true} - language={props.lang} - theme={props.theme} - pre={Pre} - > - {props.content} - </Highlighter> - </div> - ); + return (<Highlighter + lineNumbers={true} + language={props.lang} + theme={props.theme} + renderer={virtualizedRenderer()} + pre={Pre} + > + {props.content} + </Highlighter>) }); export default CodeRenderer
\ No newline at end of file |