diff options
Diffstat (limited to 'spring-front/src/components/Editor.js')
-rw-r--r-- | spring-front/src/components/Editor.js | 28 |
1 files changed, 22 insertions, 6 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> ); } |