4 files changed, 43 insertions, 6 deletions
diff --git a/spring-front/src/components/.Left.js.swp b/spring-front/src/components/.Left.js.swp
index 64301a2..6197d7f 100644
--- a/spring-front/src/components/.Left.js.swp
+++ b/spring-front/src/components/.Left.js.swp
diff --git a/spring-front/src/components/.Right.js.swp b/spring-front/src/components/.Right.js.swp
index 8f6b495..560bc83 100644
--- a/spring-front/src/components/.Right.js.swp
+++ b/spring-front/src/components/.Right.js.swp
diff --git a/spring-front/src/components/Left.js b/spring-front/src/components/Left.js
index 7abeed4..d55945d 100644
--- a/spring-front/src/components/Left.js
+++ b/spring-front/src/components/Left.js
@@ -6,14 +6,51 @@ import "../index.css";
 
 hljs.registerLanguage("markdown", markdown);
 
+// https://css-tricks.com/creating-an-editable-textarea-that-supports-syntax-highlighted-code/
 function update(text) {
-  let result_element = document.querySelector("#highlight-content");
-  result_element.innerText = text;
-  return hljs.highlight(text, { language: "markdown" }).value;
+  let result_element = document.querySelector("#highlighting-content");
+  if (text[text.length - 1] == "\n") {
+    text += " ";
+  }
+  result_element.innerHTML = text
+    .replace(new RegExp("&", "g"), "&")
+    .replace(new RegExp("<", "g"), "<");
+  // Prism.highlightElement(result_element);
+  // return result_element;
+}
+
+function sync_scroll(element) {
+  let result_element = document.querySelector("#highlighting");
+  result_element.scrollTop = element.scrollTop;
+  result_element.scrollLeft = element.scrollLeft;
+}
+
+function check_tab(element, event) {
+  let code = element.value;
+  if (event.key == "Tab") {
+    event.preventDefault();
+    let before_tab = code.slice(0, element.selectionStart);
+    let after_tab = code.slice(element.selectionEnd, element.value.length);
+    let cursor_pos = element.selectionEnd + 1;
+    element.value = before_tab + "\t" + after_tab;
+    element.selectionStart = cursor_pos;
+    element.selectionEnd = cursor_pos;
+    update(element.value);
+  }
 }
 
 function CreateTextArea() {
-  return <textarea name="editor" className="editor" id="editor"></textarea>;
+  return (
+    <textarea
+      spellcheck="false"
+      name="editor"
+      className="editor"
+      id="editor"
+      onInput={(this.update, this.sync_scroll)}
+      onScroll={this.sync_scroll}
+      onKeyDown={this.check_tab}
+    ></textarea>
+  );
 }
 
 function CreatePreCode() {
@@ -26,7 +63,7 @@ function CreatePreCode() {
 
 export default function Left() {
   return (
-    <div>
+    <div class="split left">
       <CreateTextArea />
       <CreatePreCode />
     </div>
diff --git a/spring-front/src/components/Right.js b/spring-front/src/components/Right.js
index 7206ae9..9a3a9ae 100644
--- a/spring-front/src/components/Right.js
+++ b/spring-front/src/components/Right.js
@@ -2,5 +2,5 @@ import React from "react";
 import "../index.css";
 
 export default function Right() {
-  return <div>Parsed Markdown goes here!!!</div>;
+  return <div class="split right">Parsed Markdown goes here!!!</div>;
 }