diff options
Diffstat (limited to 'spring-front')
-rw-r--r-- | spring-front/src/App.js | 20 | ||||
-rw-r--r-- | spring-front/src/components/Left.js | 91 | ||||
-rw-r--r-- | spring-front/src/components/Right.js | 19 | ||||
-rw-r--r-- | spring-front/src/index.css | 2 |
4 files changed, 53 insertions, 79 deletions
diff --git a/spring-front/src/App.js b/spring-front/src/App.js index 2393152..492930e 100644 --- a/spring-front/src/App.js +++ b/spring-front/src/App.js @@ -2,11 +2,17 @@ import React from "react"; import Left from "./components/Left.js"; import Right from "./components/Right.js"; -export default function App() { - return ( - <div> - <Left /> - <Right /> - </div> - ); +export default class App extends React.Component { + constructor(props) { + super(props); + } + + render() { + return ( + <div> + <Left /> + <Right /> + </div> + ); + } } 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> + ); + } } diff --git a/spring-front/src/index.css b/spring-front/src/index.css index 1577812..c35738f 100644 --- a/spring-front/src/index.css +++ b/spring-front/src/index.css @@ -9,6 +9,7 @@ pre,textarea,code { overflow-wrap: break-word; caret-color: green; white-space: pre-wrap; + tab-size: 2; } .editor { @@ -44,7 +45,6 @@ pre,textarea,code { font-size: 13pt; font-family: monospace; line-height: 15pt; - tab-size: 2; } #editor, #highlight { |