wip

2 files changed, 33 insertions, 17 deletions

diff --git a/spring-front/src/components/Editor.js b/spring-front/src/components/Editor.js
index 932cc06..81ee58e 100644
--- a/spring-front/src/components/Editor.js
+++ b/spring-front/src/components/Editor.js
@@ -1,6 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom";
 import hljs from "highlight.js/lib/core";
+// const hljs = window.hljs;
 import "highlight.js/styles/devibeans.css";
 import markdown from "highlight.js/lib/languages/markdown.js";
 import "../index.css";
@@ -35,13 +36,14 @@ export default class Editor extends React.Component {
     this.state = { value: "" };
   }
 
-  // TODO-we should highlight through a web worker
+  // TODO-use web worker instead
   updateCodeSyntaxHighlighting() {
     document.querySelectorAll("pre code").forEach((block) => {
       hljs.highlightElement(block);
     });
   }
 
+  // TODO-use web worker instead
   parseMarkdown() {
     let element = document.getElementById("markdown-placeholder");
     let md = new mit();
diff --git a/spring-front/src/index.css b/spring-front/src/index.css
index c35738f..9715148 100644
--- a/spring-front/src/index.css
+++ b/spring-front/src/index.css
@@ -2,23 +2,20 @@ body {
   font-family: "DejaVuSansMono NF", Helvetica, monospace;
   height: 95vh;
   width: 95vw;
+  background-color: #000000;
+  color: #ffffff;
 }
 
 pre,textarea,code {
   direction: rtl;
   overflow-wrap: break-word;
   caret-color: green;
+  caret-shapre: block;
   white-space: pre-wrap;
   tab-size: 2;
-}
-
-.editor {
-  background: #000000;
-  color: #ffffff;
-  width: 50%;
-  max-width: 50%;
-  height: 95%;
-  max-height: 50%;
+  font-size: 13pt;
+  font-family: monospace;
+  line-height: 15pt;
 }
 
 .split {
@@ -41,27 +38,36 @@ pre,textarea,code {
   color: #ffffff;
 }
 
-#editor, #highight, #highlight * {
-  font-size: 13pt;
-  font-family: monospace;
-  line-height: 15pt;
+#highlight-content {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  max-width: 100%;
+  height: 100%;
+  max-height: 100%;
+  margin: 0px;
+  border: 0px;
+  padding: 0px;
 }
 
 #editor, #highlight {
   position: absolute;
   top: 0;
   left: 0;
-  width: 50%;
-  max-width: 50%;
+  width: 47%;
+  max-width: 47%;
   height: 100%;
   max-height: 100%;
+  margin: 0px;
+  border: 0px;
+  padding: 0px;
 }
 
 #editor {
   z-index: 1;
   color: transparent;
   background: transparent;
-  caret-color: green;
   resize: none;
 }
 
@@ -69,3 +75,11 @@ pre,textarea,code {
   background: #000000;
   z-index: 0;
 }
+
+#markdown-placeholder {
+  width: 95%;
+  max-width: 95%;
+  direction: rtl;
+  overflow-wrap: break-word;
+  white-space: pre-wrap;
+}