base editor comp

4 files changed, 32 insertions, 30 deletions

diff --git a/frontend/package.json b/frontend/package.json
index f972a30..f92e8a4 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -10,7 +10,6 @@
     "d3-scale": "^3.2.1",
     "elliptic": "^6.5.3",
     "file-saver": "^2.0.2",
-    "indent-textarea": "^2.0.2",
     "rc-slider": "^9.2.4",
     "react": "^16.13.1",
     "react-component-export-image": "^0.1.4",
diff --git a/frontend/src/components/Inputs/Code.js b/frontend/src/components/Inputs/Code.js
index 67b3f76..e313152 100644
--- a/frontend/src/components/Inputs/Code.js
+++ b/frontend/src/components/Inputs/Code.js
@@ -1,30 +1,30 @@
-import React, {useEffect, useRef} from "react";
-import * as indentation from "indent-textarea";
+import React from "react";
 import CharLimit from "../decorators/CharLimit";
 import {Labelled} from "../decorators/Labelled";
+import Editor from 'react-simple-code-editor';
+import {Highlighter} from "../renderers/Code";
 
-export const Code = ({content, ...props}) => {
-  const textInput = useRef(null);
-
-  useEffect(() => {
-    indentation.watch(textInput.current);
-  }, [textInput])
-
+export const Code = ({content, id, readOnly, setContentCallback, ...props}) => {
   return (
     <Labelled
       label="content"
-      id={props.id}
+      id={id}
       value={content}>
-        <textarea
+        <Editor
           name="content"
-          readOnly={props.readOnly}
+          readOnly={readOnly}
           placeholder="Paste your text here"
           value={content}
-          id={props.id}
-          ref={textInput}
+          id={id}
           required
-          onChange={props.onChange}
-          className="lt-shadow" />
+          highlight={code => <Highlighter theme="atom">{code}</Highlighter> }
+          onValueChange={code => setContentCallback(code)}
+          padding={10}
+          style={{
+            fontFamily: '"JetBrains Mono", monospace',
+            fontSize: 12,
+          }}
+        />
         <CharLimit
           content={content}
           maxLength={props.maxLength} />
diff --git a/frontend/src/components/NewPaste.js b/frontend/src/components/NewPaste.js
index 419f39d..506d66c 100644
--- a/frontend/src/components/NewPaste.js
+++ b/frontend/src/components/NewPaste.js
@@ -74,7 +74,7 @@ const NewPaste = () =>  {
 
     function renderPreview() {
         const pasteInput = <Code
-            onChange={(e) => { setContent(e.target.value) }}
+            setContentCallback={setContent}
             content={content}
             maxLength="100000"
             id="pasteInput" />
diff --git a/frontend/src/components/renderers/Code.js b/frontend/src/components/renderers/Code.js
index 9238061..d9630fc 100644
--- a/frontend/src/components/renderers/Code.js
+++ b/frontend/src/components/renderers/Code.js
@@ -34,23 +34,26 @@ const StyledPre = styled.pre`
   }
 `
 
-const CodeRenderer = React.forwardRef((props, ref) => {
+export const Highlighter = ({language, theme, preTag, children}) => <SyntaxHighlighter
+  language={LANGS[language]}
+  style={THEMES[theme]}
+  showLineNumbers
+  PreTag={preTag}>
+    {children}
+</SyntaxHighlighter>
 
-    const Pre = (props) => {
-        return (
-            <StyledPre {...props} ref={ref} />
-        );
-    }
+const CodeRenderer = React.forwardRef((props, ref) => {
+    const Pre = (props) => <StyledPre {...props} ref={ref} />
 
     return (
         <div className="lt-shadow">
-            <SyntaxHighlighter
-                language={LANGS[props.lang]}
-                style={THEMES[props.theme]}
-                showLineNumbers
-                PreTag={Pre}>
+            <Highlighter
+                language={props.lang}
+                theme={props.theme}
+                preTag={Pre}
+            >
                 {props.content}
-            </SyntaxHighlighter>
+            </Highlighter>
         </div>
     );
 });