code renderer virtualization, better visuals

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