From b6e927fe3f46baf01bbbe0c42d26151e343204fa Mon Sep 17 00:00:00 2001 From: terminaldweller Date: Thu, 31 Mar 2022 00:41:57 +0430 Subject: wip --- spring-front/nginx.conf | 2 +- spring-front/src/components/Left.js | 24 +++++++++++++++++++++--- 2 files changed, 22 insertions(+), 4 deletions(-) diff --git a/spring-front/nginx.conf b/spring-front/nginx.conf index db1eea9..84f1937 100644 --- a/spring-front/nginx.conf +++ b/spring-front/nginx.conf @@ -22,9 +22,9 @@ http { add_header X-Content-Type-Options "nosniff" always; add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always; add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' unpkg.com; style-src 'self' 'unsafe-inline' unpkg.com"; - add_header Feature-Policy "geolocation none;midi none;notifications none;push none;sync-xhr none;microphone none;camera none;magnetometer none;gyroscope none;speaker none;vibrate none;fullscreen self;payment none;"; add_header X-Frame-Options SAMEORIGIN always; add_header X-XSS-Protection "1; mode=block" always; + add_header Permissions-Policy "geolocation=(self),midi=(self),sync-xhr=(self),microphone=(self),camera=(self),magnetometer=(self),gyroscope=(self),fullscreen=(self),payment=(self),usb=(self)"; fastcgi_hide_header X-Powered-By; resolver 9.9.9.9 208.67.222.222; ssl_stapling on; 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