From 4f8b298a691e98a6470e8b3bdf61c5d7b8b55001 Mon Sep 17 00:00:00 2001 From: terminaldweller Date: Thu, 14 Apr 2022 22:32:41 +0430 Subject: update --- spring-front/src/components/Editor.js | 28 ++++++++++++++++++++++------ spring-front/src/highlight_worker.js | 23 +++++++++++++++++++++++ spring-front/src/index.css | 22 ++++++++++++++-------- spring-front/src/parse_worker.js | 24 ++++++++++++++++++++++++ 4 files changed, 83 insertions(+), 14 deletions(-) create mode 100644 spring-front/src/highlight_worker.js create mode 100644 spring-front/src/parse_worker.js 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" > - - - +
+
+
); } 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 +); -- cgit v1.2.3