2 files changed, 49 insertions, 44 deletions

diff --git a/spring-front/src/components/Left.js b/spring-front/src/components/Left.js
index 20b6258..af4def7 100644
--- a/spring-front/src/components/Left.js
+++ b/spring-front/src/components/Left.js
@@ -10,7 +10,16 @@ hljs.registerLanguage("markdown", markdown);
 class Code extends React.Component {
   constructor(props) {
     super(props);
-    this.updateCodeSyntaxHighlighting.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() {
@@ -24,15 +33,20 @@ class Code extends React.Component {
   updateCodeSyntaxHighlighting() {
     document.querySelectorAll("pre code").forEach((block) => {
       console.log("block:", block);
-      console.log("blockt text:", block.innerHTML);
+      console.log("blockt text:", block.textContent);
       hljs.highlightElement(block);
     });
   }
 
   render() {
     return (
-      <pre id="highlight" aria-hidden="true">
-        <code id="highlight-content" class="language-markdown"></code>
+      <pre id="highlight" aria-hidden="true" direction="rtl">
+        <code
+          id="highlight-content"
+          onChange={this.handleChange.bind(this)}
+          class="language-markdown"
+          direction="rtl"
+        ></code>
       </pre>
     );
   }
@@ -53,16 +67,14 @@ class Editor extends React.Component {
   }
 
   handleInput(event) {
-    let text = this.state;
-    console.log(text);
-    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 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"), "<");
     let result_element_2 = document.querySelector("#highlight");
     result_element_2.scrollTop = event.currentTarget.scrollTop;
     result_element_2.scrollLeft = event.currentTarget.scrollLeft;
@@ -76,7 +88,7 @@ class Editor extends React.Component {
 
   handleKeyDown(event) {
     let element = event.currentTarget;
-    let code = this.state;
+    let code = this.state.value;
     if (event.key == "Tab") {
       event.preventDefault();
       let before_tab = code.slice(0, element.selectionStart);
@@ -101,6 +113,7 @@ class Editor extends React.Component {
         onInput={this.handleInput.bind(this)}
         onScroll={this.handleScroll.bind(this)}
         onKeyDown={this.handleKeyDown.bind(this)}
+        direction="rtl"
       ></textarea>
     );
   }
diff --git a/spring-front/src/index.css b/spring-front/src/index.css
index aace5c0..1577812 100644
--- a/spring-front/src/index.css
+++ b/spring-front/src/index.css
@@ -1,32 +1,31 @@
 body {
-  /* color: #005f87; */
-  /* background: #000000; */
   font-family: "DejaVuSansMono NF", Helvetica, monospace;
   height: 95vh;
   width: 95vw;
 }
 
+pre,textarea,code {
+  direction: rtl;
+  overflow-wrap: break-word;
+  caret-color: green;
+  white-space: pre-wrap;
+}
+
 .editor {
   background: #000000;
   color: #ffffff;
-  width: 95%;
-  max-width: 95%;
+  width: 50%;
+  max-width: 50%;
   height: 95%;
-  max-height: 95%;
-}
-
-div.code {
-  white-space: pre;
+  max-height: 50%;
 }
 
 .split {
   height: 100%;
   width: 50%;
   position: fixed;
-  z-index: 1;
+  z-index: 0;
   top: 0;
-  overflow-x: hidden;
-  padding-top: 20px;
 }
 
 .left {
@@ -34,32 +33,28 @@ div.code {
   background-color: #000000;
   color: #ffffff;
 }
+
 .right {
   right: 0;
   background-color: #000000;
   color: #ffffff;
 }
 
-/* #editor, #highlighting { */
-/*   margin: 10px; */
-/*   padding: 10px; */
-/*   border: 0; */
-/*   width: calc(100% - 32px); */
-/*   height: 150px; */
-/* } */
-
-#editor, #highlight, #highlight * {
-  font-size: 15pt;
+#editor, #highight, #highlight * {
+  font-size: 13pt;
   font-family: monospace;
-  line-height: 20pt;
+  line-height: 15pt;
+  tab-size: 2;
 }
 
 #editor, #highlight {
   position: absolute;
   top: 0;
   left: 0;
-  overflow: auto;
-  white-space: nowrap;
+  width: 50%;
+  max-width: 50%;
+  height: 100%;
+  max-height: 100%;
 }
 
 #editor {
@@ -71,9 +66,6 @@ div.code {
 }
 
 #highlight {
+  background: #000000;
   z-index: 0;
 }
-
-#editor, #highlight, #highlight * {
-  tab-size: 2;
-}