5 files changed, 101 insertions, 24 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>;
 }
diff --git a/spring-front/src/index.css b/spring-front/src/index.css
index 388f1ca..3423aee 100644
--- a/spring-front/src/index.css
+++ b/spring-front/src/index.css
@@ -6,32 +6,72 @@ body {
   width: 95vw;
 }
 
-a {
-  color: #005f87;
-  text-decoration: none;
+.editor {
+  background: #000000;
+  color: #ffffff;
+  width: 95%;
+  max-width: 95%;
+  height: 95%;
+  max-height: 95%;
 }
 
-p {
-  color: #005f87;
+div.code {
+  white-space: pre;
 }
 
-.left-footer {
-  float: left;
+.split {
+  height: 100%;
+  width: 50%;
+  position: fixed;
+  z-index: 1;
+  top: 0;
+  overflow-x: hidden;
+  padding-top: 20px;
 }
 
-.right-footer {
-  float: right;
+.left {
+  left: 0;
+  background-color: #000000;
+}
+.right {
+  right: 0;
+  background-color: #000000;
 }
 
-.editor {
-  background: #000000;
-  color: #ffffff;
-  width: 40%;
-  max-width: 40%;
-  height: 90%;
-  max-height: 90%;
+#editing, #highlighting {
+  margin: 10px;
+  padding: 10px;
+  border: 0;
+  width: calc(100% - 32px);
+  height: 150px;
 }
 
-div.code {
-  white-space: pre;
+#editing, #highlighting, #highlighting * {
+  font-size: 15pt;
+  font-family: monospace;
+  line-height: 20pt;
+}
+
+#editing, #highlighting {
+  position: absolute;
+  top: 0;
+  left: 0;
+  overflow: auto;
+  white-space: nowrap;
+}
+
+#editing {
+  z-index: 1;
+  color: transparent;
+  background: transparent;
+  caret-color: green;
+  resize: none;
+}
+
+#highlighting {
+  z-index: 0;
+}
+
+#editing, #highlighting, #highlighting * {
+  tab-size: 2;
 }