From b6e927fe3f46baf01bbbe0c42d26151e343204fa Mon Sep 17 00:00:00 2001
From: terminaldweller <thabogre@gmail.com>
Date: Thu, 31 Mar 2022 00:41:57 +0430
Subject: wip
---
spring-front/src/components/Left.js | 24 +++++++++++++++++++++---
1 file changed, 21 insertions(+), 3 deletions(-)
(limited to 'spring-front/src')
diff --git a/spring-front/src/components/Left.js b/spring-front/src/components/Left.js
index 3ab24e3..20b6258 100644
--- a/spring-front/src/components/Left.js
+++ b/spring-front/src/components/Left.js
@@ -10,6 +10,23 @@ hljs.registerLanguage("markdown", markdown);
class Code extends React.Component {
constructor(props) {
super(props);
+ this.updateCodeSyntaxHighlighting.bind(this);
+ }
+
+ componentDidMount() {
+ this.updateCodeSyntaxHighlighting();
+ }
+
+ componentDidUpdate() {
+ this.updateCodeSyntaxHighlighting();
+ }
+
+ updateCodeSyntaxHighlighting() {
+ document.querySelectorAll("pre code").forEach((block) => {
+ console.log("block:", block);
+ console.log("blockt text:", block.innerHTML);
+ hljs.highlightElement(block);
+ });
}
render() {
@@ -30,12 +47,14 @@ class Editor extends React.Component {
this.handleChange = this.handleChange.bind(this);
this.state = { value: "" };
}
+
handleChange(event) {
this.setState({ value: event.target.value });
}
handleInput(event) {
let text = this.state;
+ console.log(text);
let result_element = document.querySelector("#highlight-content");
if (text[text.length - 1] == "\n") {
text += " ";
@@ -44,9 +63,6 @@ class Editor extends React.Component {
.toString()
.replace(new RegExp("&", "g"), "&")
.replace(new RegExp("<", "g"), "<");
- let pretty = hljs.highlight(this.state, { languages: "markdown" });
- console.log("ugly:", this.state);
- console.log("pretty:", pretty);
let result_element_2 = document.querySelector("#highlight");
result_element_2.scrollTop = event.currentTarget.scrollTop;
result_element_2.scrollLeft = event.currentTarget.scrollLeft;
@@ -80,6 +96,8 @@ class Editor extends React.Component {
name="editor"
className="editor"
id="editor"
+ value={this.state.value}
+ onChange={this.handleChange.bind(this)}
onInput={this.handleInput.bind(this)}
onScroll={this.handleScroll.bind(this)}
onKeyDown={this.handleKeyDown.bind(this)}
--
cgit v1.2.3