4 files changed, 83 insertions, 14 deletions

diff --git a/spring-front/src/components/Editor.js b/spring-front/src/components/Editor.js
index 30a11ec..7a99f52 100644
--- a/spring-front/src/components/Editor.js
+++ b/spring-front/src/components/Editor.js
@@ -42,15 +42,19 @@ export default class Editor extends React.Component {
     this.handleChange = this.handleChange.bind(this);
     this.parseMarkdown = this.parseMarkdown.bind(this);
     this.state = { value: "" };
+    // this.hljs_worker = new Worker("../highlight_worker.js");
+    // this.md_worker = new Worker("../parse_worker.js");
   }
 
   // TODO-use web worker instead
   updateCodeSyntaxHighlighting() {
     document.querySelectorAll("pre code").forEach((block) => {
-      console.log(block);
       hljs.highlightElement(block);
     });
-    // hljs.highlightAll();
+    // this.hljs_worker.postMessage("message");
+    // this.hljs_worker.ouMessage = (event) => {
+    //   console.log("highlighed successfully");
+    // };
   }
 
   // TODO-use web worker instead
@@ -58,6 +62,10 @@ export default class Editor extends React.Component {
     let element = document.getElementById("markdown-placeholder");
     let htm = md.render(event.target.value);
     element.innerHTML = htm;
+    // this.md_worker.postMessage(event);
+    // this.md_worker.onMessage((htm) => {
+    //   element.innerHTML = htm;
+    // });
   }
 
   handleChange(event) {
@@ -69,16 +77,24 @@ export default class Editor extends React.Component {
     result_element.textContent = event.target.value;
     this.updateCodeSyntaxHighlighting();
     this.parseMarkdown(event);
+
+    result_element.scrollTop = event.currentTarget.scrollTop;
+    result_element.scrollLeft = event.currentTarget.scrollLeft;
     let result_element_2 = document.querySelector("#highlight");
     result_element_2.scrollTop = event.currentTarget.scrollTop;
     result_element_2.scrollLeft = event.currentTarget.scrollLeft;
+
     this.setState({ value: event.target.value });
   }
 
   handleScroll(event) {
-    let result_element = document.querySelector("#highlight");
+    let result_element = document.querySelector("#highlight-content");
     result_element.scrollTop = event.currentTarget.scrollTop;
     result_element.scrollLeft = event.currentTarget.scrollLeft;
+
+    let result_element_2 = document.querySelector("#highlight");
+    result_element_2.scrollTop = event.currentTarget.scrollTop;
+    result_element_2.scrollLeft = event.currentTarget.scrollLeft;
   }
 
   handleKeyDown(event) {
@@ -120,9 +136,9 @@ export default class Editor extends React.Component {
             direction="rtl"
           ></textarea>
         </div>
-        <a className="split right">
-          <a direction="rtl" id="markdown-placeholder"></a>
-        </a>
+        <div className="split right">
+          <div direction="rtl" id="markdown-placeholder"></div>
+        </div>
       </div>
     );
   }
diff --git a/spring-front/src/highlight_worker.js b/spring-front/src/highlight_worker.js
new file mode 100644
index 0000000..1458026
--- /dev/null
+++ b/spring-front/src/highlight_worker.js
@@ -0,0 +1,23 @@
+import hljs from "highlight.js/lib/core";
+import markdown from "highlight.js/lib/languages/markdown.js";
+import javascript from "highlight.js/lib/languages/javascript.js";
+import python from "highlight.js/lib/languages/python.js";
+import C from "highlight.js/lib/languages/c.js";
+import bash from "highlight.js/lib/languages/bash.js";
+
+hljs.registerLanguage("markdown", markdown);
+hljs.registerLanguage("javascript", javascript);
+hljs.registerLanguage("python", python);
+hljs.registerLanguage("c", C);
+hljs.registerLanguage("bash", bash);
+
+self.onmessage(
+  "message",
+  (e) => {
+    document.querySelectorAll("pre code").forEach((block) => {
+      hljs.highlightElement(block);
+      postMessage("highlight done");
+    });
+  },
+  false
+);
diff --git a/spring-front/src/index.css b/spring-front/src/index.css
index 732a794..b5206ae 100644
--- a/spring-front/src/index.css
+++ b/spring-front/src/index.css
@@ -6,11 +6,14 @@ body {
   color: #ffffff;
 }
 
-pre,textarea,code {
+pre,
+textarea,
+code {
   direction: rtl;
   overflow-wrap: break-word;
   caret-color: green;
-  caret-shapre: block;
+  caret-shape: block;
+  /* caret: currentcolor block; */
   white-space: pre-wrap;
   tab-size: 2;
   font-size: 13pt;
@@ -49,10 +52,11 @@ pre,textarea,code {
   margin: 0px;
   border: 0px;
   padding: 0px;
-  overflow-y: scroll;
+  overflow-y: auto;
 }
 
-#editor, #highlight {
+#editor,
+#highlight {
   position: absolute;
   top: 0;
   left: 0;
@@ -63,7 +67,7 @@ pre,textarea,code {
   margin: 0px;
   border: 0px;
   padding: 0px;
-  overflow-y: scroll;
+  overflow-y: auto;
 }
 
 #editor {
@@ -79,10 +83,12 @@ pre,textarea,code {
 }
 
 #markdown-placeholder {
-  width: 95%;
-  max-width: 95%;
+  width: 99%;
+  max-width: 99%;
+  height: 100%;
+  max-height: 100;
   direction: rtl;
   overflow-wrap: break-word;
   white-space: pre-wrap;
-  overflow-y: scroll;
+  overflow-y: auto;
 }
diff --git a/spring-front/src/parse_worker.js b/spring-front/src/parse_worker.js
new file mode 100644
index 0000000..8bcf0ad
--- /dev/null
+++ b/spring-front/src/parse_worker.js
@@ -0,0 +1,24 @@
+import mit from "markdown-it";
+import mithljs from "markdown-it-highlightjs";
+import mittexmath from "markdown-it-texmath";
+import mitmmdtable from "markdown-it-multimd-table";
+import katex from "katex";
+
+const md = new mit({ html: true })
+  .enable(["table"])
+  .use(mittexmath, {
+    engine: katex,
+    delimiters: "gitlab",
+    katexOptions: { macros: { "\\RR": "\\mathbb{R}" } },
+  })
+  .use(mitmmdtable)
+  .use(mithljs, { inline: true, auto: true, code: true, hljs: hljs });
+
+self.addEventListener(
+  "message",
+  (event) => {
+    let htm = md.render(event.target.value);
+    self.postMessage(htm);
+  },
+  false
+);