wip

4 files changed, 53 insertions, 79 deletions

diff --git a/spring-front/src/App.js b/spring-front/src/App.js
index 2393152..492930e 100644
--- a/spring-front/src/App.js
+++ b/spring-front/src/App.js
@@ -2,11 +2,17 @@ import React from "react";
 import Left from "./components/Left.js";
 import Right from "./components/Right.js";
 
-export default function App() {
-  return (
-    <div>
-      <Left />
-      <Right />
-    </div>
-  );
+export default class App extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <div>
+        <Left />
+        <Right />
+      </div>
+    );
+  }
 }
diff --git a/spring-front/src/components/Left.js b/spring-front/src/components/Left.js
index af4def7..dc1bbd5 100644
--- a/spring-front/src/components/Left.js
+++ b/spring-front/src/components/Left.js
@@ -7,29 +7,18 @@ import "../index.css";
 
 hljs.registerLanguage("markdown", markdown);
 
-class Code extends React.Component {
+export default 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.updateCodeSyntaxHighlighting =
       this.updateCodeSyntaxHighlighting.bind(this);
     this.handleChange = this.handleChange.bind(this);
     this.state = { value: "" };
   }
 
-  handleChange(event) {
-    this.setState({ value: event.target.value });
-    this.updateCodeSyntaxHighlighting();
-    console.log(this.state.value);
-  }
-
-  componentDidMount() {
-    this.updateCodeSyntaxHighlighting();
-  }
-
-  componentDidUpdate() {
-    this.updateCodeSyntaxHighlighting();
-  }
-
   updateCodeSyntaxHighlighting() {
     document.querySelectorAll("pre code").forEach((block) => {
       console.log("block:", block);
@@ -38,30 +27,6 @@ class Code extends React.Component {
     });
   }
 
-  render() {
-    return (
-      <pre id="highlight" aria-hidden="true" direction="rtl">
-        <code
-          id="highlight-content"
-          onChange={this.handleChange.bind(this)}
-          class="language-markdown"
-          direction="rtl"
-        ></code>
-      </pre>
-    );
-  }
-}
-
-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 });
   }
@@ -69,12 +34,8 @@ class Editor extends React.Component {
   handleInput(event) {
     let text = this.state.value;
     let result_element = document.getElementById("highlight-content");
-    // if (text[text.length - 1] == "\n") {
-    //   text += " ";
-    // }
     result_element.textContent = text;
-    // .replace(new RegExp("&", "g"), "&")
-    // .replace(new RegExp("<", "g"), "<");
+    this.updateCodeSyntaxHighlighting();
     let result_element_2 = document.querySelector("#highlight");
     result_element_2.scrollTop = event.currentTarget.scrollTop;
     result_element_2.scrollLeft = event.currentTarget.scrollLeft;
@@ -103,27 +64,27 @@ class Editor extends React.Component {
 
   render() {
     return (
-      <textarea
-        spellcheck="false"
-        name="editor"
-        className="editor"
-        id="editor"
-        value={this.state.value}
-        onChange={this.handleChange.bind(this)}
-        onInput={this.handleInput.bind(this)}
-        onScroll={this.handleScroll.bind(this)}
-        onKeyDown={this.handleKeyDown.bind(this)}
-        direction="rtl"
-      ></textarea>
+      <div>
+        <pre id="highlight" aria-hidden="true" direction="rtl">
+          <code
+            id="highlight-content"
+            class="language-markdown"
+            direction="rtl"
+          ></code>
+        </pre>
+        <textarea
+          spellcheck="false"
+          name="editor"
+          className="editor"
+          id="editor"
+          value={this.state.value}
+          onChange={this.handleChange.bind(this)}
+          onInput={this.handleInput.bind(this)}
+          onScroll={this.handleScroll.bind(this)}
+          onKeyDown={this.handleKeyDown.bind(this)}
+          direction="rtl"
+        ></textarea>
+      </div>
     );
   }
 }
-
-export default function Left() {
-  return (
-    <div>
-      <Editor />
-      <Code />
-    </div>
-  );
-}
diff --git a/spring-front/src/components/Right.js b/spring-front/src/components/Right.js
index 94227f7..4bfe073 100644
--- a/spring-front/src/components/Right.js
+++ b/spring-front/src/components/Right.js
@@ -1,10 +1,17 @@
 import React from "react";
 import "../index.css";
 
-export default function Right() {
-  return (
-    <div class="split right">
-      <p class="markdown-placeholder">Parsed Markdown goes here!!!</p>
-    </div>
-  );
+export default class Right extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { value: "" };
+  }
+
+  render() {
+    return (
+      <div class="split right">
+        <p class="markdown-placeholder">Parsed Markdown goes here!!!</p>
+      </div>
+    );
+  }
 }
diff --git a/spring-front/src/index.css b/spring-front/src/index.css
index 1577812..c35738f 100644
--- a/spring-front/src/index.css
+++ b/spring-front/src/index.css
@@ -9,6 +9,7 @@ pre,textarea,code {
   overflow-wrap: break-word;
   caret-color: green;
   white-space: pre-wrap;
+  tab-size: 2;
 }
 
 .editor {
@@ -44,7 +45,6 @@ pre,textarea,code {
   font-size: 13pt;
   font-family: monospace;
   line-height: 15pt;
-  tab-size: 2;
 }
 
 #editor, #highlight {