diff options
Diffstat (limited to 'spring-front')
-rw-r--r-- | spring-front/src/components/Left.js | 43 | ||||
-rw-r--r-- | spring-front/src/index.css | 50 |
2 files changed, 49 insertions, 44 deletions
diff --git a/spring-front/src/components/Left.js b/spring-front/src/components/Left.js index 20b6258..af4def7 100644 --- a/spring-front/src/components/Left.js +++ b/spring-front/src/components/Left.js @@ -10,7 +10,16 @@ hljs.registerLanguage("markdown", markdown); class Code extends React.Component { constructor(props) { super(props); - this.updateCodeSyntaxHighlighting.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() { @@ -24,15 +33,20 @@ class Code extends React.Component { updateCodeSyntaxHighlighting() { document.querySelectorAll("pre code").forEach((block) => { console.log("block:", block); - console.log("blockt text:", block.innerHTML); + console.log("blockt text:", block.textContent); hljs.highlightElement(block); }); } render() { return ( - <pre id="highlight" aria-hidden="true"> - <code id="highlight-content" class="language-markdown"></code> + <pre id="highlight" aria-hidden="true" direction="rtl"> + <code + id="highlight-content" + onChange={this.handleChange.bind(this)} + class="language-markdown" + direction="rtl" + ></code> </pre> ); } @@ -53,16 +67,14 @@ class Editor extends React.Component { } handleInput(event) { - let text = this.state; - console.log(text); - let result_element = document.querySelector("#highlight-content"); - if (text[text.length - 1] == "\n") { - text += " "; - } - result_element.innerHTML = text - .toString() - .replace(new RegExp("&", "g"), "&") - .replace(new RegExp("<", "g"), "<"); + 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"), "<"); let result_element_2 = document.querySelector("#highlight"); result_element_2.scrollTop = event.currentTarget.scrollTop; result_element_2.scrollLeft = event.currentTarget.scrollLeft; @@ -76,7 +88,7 @@ class Editor extends React.Component { handleKeyDown(event) { let element = event.currentTarget; - let code = this.state; + let code = this.state.value; if (event.key == "Tab") { event.preventDefault(); let before_tab = code.slice(0, element.selectionStart); @@ -101,6 +113,7 @@ class Editor extends React.Component { onInput={this.handleInput.bind(this)} onScroll={this.handleScroll.bind(this)} onKeyDown={this.handleKeyDown.bind(this)} + direction="rtl" ></textarea> ); } diff --git a/spring-front/src/index.css b/spring-front/src/index.css index aace5c0..1577812 100644 --- a/spring-front/src/index.css +++ b/spring-front/src/index.css @@ -1,32 +1,31 @@ body { - /* color: #005f87; */ - /* background: #000000; */ font-family: "DejaVuSansMono NF", Helvetica, monospace; height: 95vh; width: 95vw; } +pre,textarea,code { + direction: rtl; + overflow-wrap: break-word; + caret-color: green; + white-space: pre-wrap; +} + .editor { background: #000000; color: #ffffff; - width: 95%; - max-width: 95%; + width: 50%; + max-width: 50%; height: 95%; - max-height: 95%; -} - -div.code { - white-space: pre; + max-height: 50%; } .split { height: 100%; width: 50%; position: fixed; - z-index: 1; + z-index: 0; top: 0; - overflow-x: hidden; - padding-top: 20px; } .left { @@ -34,32 +33,28 @@ div.code { background-color: #000000; color: #ffffff; } + .right { right: 0; background-color: #000000; color: #ffffff; } -/* #editor, #highlighting { */ -/* margin: 10px; */ -/* padding: 10px; */ -/* border: 0; */ -/* width: calc(100% - 32px); */ -/* height: 150px; */ -/* } */ - -#editor, #highlight, #highlight * { - font-size: 15pt; +#editor, #highight, #highlight * { + font-size: 13pt; font-family: monospace; - line-height: 20pt; + line-height: 15pt; + tab-size: 2; } #editor, #highlight { position: absolute; top: 0; left: 0; - overflow: auto; - white-space: nowrap; + width: 50%; + max-width: 50%; + height: 100%; + max-height: 100%; } #editor { @@ -71,9 +66,6 @@ div.code { } #highlight { + background: #000000; z-index: 0; } - -#editor, #highlight, #highlight * { - tab-size: 2; -} |