wip

2 files changed, 93 insertions, 64 deletions

diff --git a/spring-front/src/components/Left.js b/spring-front/src/components/Left.js
index d55945d..3ab24e3 100644
--- a/spring-front/src/components/Left.js
+++ b/spring-front/src/components/Left.js
@@ -1,71 +1,98 @@
 import React from "react";
+import ReactDOM from "react-dom";
 import hljs from "highlight.js/lib/core";
-import markdown from "highlight.js/lib/languages/markdown";
 import "highlight.js/styles/devibeans.css";
+import markdown from "highlight.js/lib/languages/markdown.js";
 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("#highlighting-content");
-  if (text[text.length - 1] == "\n") {
-    text += " ";
+class Code extends React.Component {
+  constructor(props) {
+    super(props);
   }
-  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;
+  render() {
+    return (
+      <pre id="highlight" aria-hidden="true">
+        <code id="highlight-content" class="language-markdown"></code>
+      </pre>
+    );
+  }
 }
 
-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);
+class Editor extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleInput = this.handleInput.bind(this);
+    this.handleScroll = this.handleScroll.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+    this.handleChange = this.handleChange.bind(this);
+    this.state = { value: "" };
+  }
+  handleChange(event) {
+    this.setState({ value: event.target.value });
   }
-}
 
-function CreateTextArea() {
-  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>
-  );
-}
+  handleInput(event) {
+    let text = this.state;
+    let result_element = document.querySelector("#highlight-content");
+    if (text[text.length - 1] == "\n") {
+      text += " ";
+    }
+    result_element.innerHTML = text
+      .toString()
+      .replace(new RegExp("&", "g"), "&")
+      .replace(new RegExp("<", "g"), "<");
+    let pretty = hljs.highlight(this.state, { languages: "markdown" });
+    console.log("ugly:", this.state);
+    console.log("pretty:", pretty);
+    let result_element_2 = document.querySelector("#highlight");
+    result_element_2.scrollTop = event.currentTarget.scrollTop;
+    result_element_2.scrollLeft = event.currentTarget.scrollLeft;
+  }
 
-function CreatePreCode() {
-  return (
-    <pre id="highlight" aria-hidden="true">
-      <code className="language-markdown" id="highlight-content"></code>
-    </pre>
-  );
+  handleScroll(event) {
+    let result_element = document.querySelector("#highlight");
+    result_element.scrollTop = event.currentTarget.scrollTop;
+    result_element.scrollLeft = event.currentTarget.scrollLeft;
+  }
+
+  handleKeyDown(event) {
+    let element = event.currentTarget;
+    let code = this.state;
+    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;
+      this.handleInput(element.value, element);
+    }
+  }
+
+  render() {
+    return (
+      <textarea
+        spellcheck="false"
+        name="editor"
+        className="editor"
+        id="editor"
+        onInput={this.handleInput.bind(this)}
+        onScroll={this.handleScroll.bind(this)}
+        onKeyDown={this.handleKeyDown.bind(this)}
+      ></textarea>
+    );
+  }
 }
 
 export default function Left() {
   return (
-    <div class="split left">
-      <CreateTextArea />
-      <CreatePreCode />
+    <div>
+      <Editor />
+      <Code />
     </div>
   );
 }
diff --git a/spring-front/src/index.css b/spring-front/src/index.css
index 3423aee..aace5c0 100644
--- a/spring-front/src/index.css
+++ b/spring-front/src/index.css
@@ -1,6 +1,6 @@
 body {
-  color: #005f87;
-  background: #000000;
+  /* color: #005f87; */
+  /* background: #000000; */
   font-family: "DejaVuSansMono NF", Helvetica, monospace;
   height: 95vh;
   width: 95vw;
@@ -32,27 +32,29 @@ div.code {
 .left {
   left: 0;
   background-color: #000000;
+  color: #ffffff;
 }
 .right {
   right: 0;
   background-color: #000000;
+  color: #ffffff;
 }
 
-#editing, #highlighting {
-  margin: 10px;
-  padding: 10px;
-  border: 0;
-  width: calc(100% - 32px);
-  height: 150px;
-}
+/* #editor, #highlighting { */
+/*   margin: 10px; */
+/*   padding: 10px; */
+/*   border: 0; */
+/*   width: calc(100% - 32px); */
+/*   height: 150px; */
+/* } */
 
-#editing, #highlighting, #highlighting * {
+#editor, #highlight, #highlight * {
   font-size: 15pt;
   font-family: monospace;
   line-height: 20pt;
 }
 
-#editing, #highlighting {
+#editor, #highlight {
   position: absolute;
   top: 0;
   left: 0;
@@ -60,7 +62,7 @@ div.code {
   white-space: nowrap;
 }
 
-#editing {
+#editor {
   z-index: 1;
   color: transparent;
   background: transparent;
@@ -68,10 +70,10 @@ div.code {
   resize: none;
 }
 
-#highlighting {
+#highlight {
   z-index: 0;
 }
 
-#editing, #highlighting, #highlighting * {
+#editor, #highlight, #highlight * {
   tab-size: 2;
 }