aboutsummaryrefslogtreecommitdiffstats
path: root/spring-front/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'spring-front/src/components')
-rw-r--r--spring-front/src/components/Left.js91
-rw-r--r--spring-front/src/components/Right.js19
2 files changed, 39 insertions, 71 deletions
diff --git a/spring-front/src/components/Left.js b/spring-front/src/components/Left.js
index af4def7..dc1bbd5 100644
--- a/spring-front/src/components/Left.js
+++ b/spring-front/src/components/Left.js
@@ -7,29 +7,18 @@ import "../index.css";
hljs.registerLanguage("markdown", markdown);
-class Code extends React.Component {
+export default class Editor extends React.Component {
constructor(props) {
super(props);
+ this.handleInput = this.handleInput.bind(this);
+ this.handleScroll = this.handleScroll.bind(this);
+ this.handleKeyDown = this.handleKeyDown.bind(this);
this.updateCodeSyntaxHighlighting =
this.updateCodeSyntaxHighlighting.bind(this);
this.handleChange = this.handleChange.bind(this);
this.state = { value: "" };
}
- handleChange(event) {
- this.setState({ value: event.target.value });
- this.updateCodeSyntaxHighlighting();
- console.log(this.state.value);
- }
-
- componentDidMount() {
- this.updateCodeSyntaxHighlighting();
- }
-
- componentDidUpdate() {
- this.updateCodeSyntaxHighlighting();
- }
-
updateCodeSyntaxHighlighting() {
document.querySelectorAll("pre code").forEach((block) => {
console.log("block:", block);
@@ -38,30 +27,6 @@ class Code extends React.Component {
});
}
- render() {
- return (
- <pre id="highlight" aria-hidden="true" direction="rtl">
- <code
- id="highlight-content"
- onChange={this.handleChange.bind(this)}
- class="language-markdown"
- direction="rtl"
- ></code>
- </pre>
- );
- }
-}
-
-class Editor extends React.Component {
- constructor(props) {
- super(props);
- this.handleInput = this.handleInput.bind(this);
- this.handleScroll = this.handleScroll.bind(this);
- this.handleKeyDown = this.handleKeyDown.bind(this);
- this.handleChange = this.handleChange.bind(this);
- this.state = { value: "" };
- }
-
handleChange(event) {
this.setState({ value: event.target.value });
}
@@ -69,12 +34,8 @@ class Editor extends React.Component {
handleInput(event) {
let text = this.state.value;
let result_element = document.getElementById("highlight-content");
- // if (text[text.length - 1] == "\n") {
- // text += " ";
- // }
result_element.textContent = text;
- // .replace(new RegExp("&", "g"), "&")
- // .replace(new RegExp("<", "g"), "<");
+ this.updateCodeSyntaxHighlighting();
let result_element_2 = document.querySelector("#highlight");
result_element_2.scrollTop = event.currentTarget.scrollTop;
result_element_2.scrollLeft = event.currentTarget.scrollLeft;
@@ -103,27 +64,27 @@ class Editor extends React.Component {
render() {
return (
- <textarea
- spellcheck="false"
- 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)}
- direction="rtl"
- ></textarea>
+ <div>
+ <pre id="highlight" aria-hidden="true" direction="rtl">
+ <code
+ id="highlight-content"
+ class="language-markdown"
+ direction="rtl"
+ ></code>
+ </pre>
+ <textarea
+ spellcheck="false"
+ 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)}
+ direction="rtl"
+ ></textarea>
+ </div>
);
}
}
-
-export default function Left() {
- return (
- <div>
- <Editor />
- <Code />
- </div>
- );
-}
diff --git a/spring-front/src/components/Right.js b/spring-front/src/components/Right.js
index 94227f7..4bfe073 100644
--- a/spring-front/src/components/Right.js
+++ b/spring-front/src/components/Right.js
@@ -1,10 +1,17 @@
import React from "react";
import "../index.css";
-export default function Right() {
- return (
- <div class="split right">
- <p class="markdown-placeholder">Parsed Markdown goes here!!!</p>
- </div>
- );
+export default class Right extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = { value: "" };
+ }
+
+ render() {
+ return (
+ <div class="split right">
+ <p class="markdown-placeholder">Parsed Markdown goes here!!!</p>
+ </div>
+ );
+ }
}