From a866d5a9fad78074fdf5c124d7900ab436e01958 Mon Sep 17 00:00:00 2001
From: jackyzha0 <j.zhao2k19@gmail.com>
Date: Sat, 6 Mar 2021 10:17:28 -0800
Subject: base editor comp

---
 frontend/src/components/Inputs/Code.js | 32 ++++++++++++++++----------------
 1 file changed, 16 insertions(+), 16 deletions(-)

(limited to 'frontend/src/components/Inputs/Code.js')

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