diff options
Diffstat (limited to 'spring-front')
| -rw-r--r-- | spring-front/public/index.html | 7 | ||||
| -rw-r--r-- | spring-front/src/components/Left.js | 127 | ||||
| -rw-r--r-- | spring-front/src/index.css | 30 |
3 files changed, 99 insertions, 65 deletions
diff --git a/spring-front/public/index.html b/spring-front/public/index.html index aa0134b..00b5bc5 100644 --- a/spring-front/public/index.html +++ b/spring-front/public/index.html @@ -11,11 +11,16 @@ ></script> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> + <meta charset="utf-8" /> <link rel="stylesheet" href="https://unpkg.com/@highlightjs/cdn-assets@11.5.0/styles/default.min.css" /> - <meta charset="utf-8" /> + <script type="module"> + import hljs from "https://unpkg.com/@highlightjs/cdn-assets@11.5.0/es/highlight.min.js"; + import markdown from "https://unpkg.com/@highlightjs/cdn-assets@11.5.0/es/languages/markdown.min.js"; + hljs.registerLanguage("markdown", markdown); + </script> <meta name="viewport" content="width=device-width" /> <title>RTLMD</title> </head> diff --git a/spring-front/src/components/Left.js b/spring-front/src/components/Left.js index d55945d..3ab24e3 100644 --- a/spring-front/src/components/Left.js +++ b/spring-front/src/components/Left.js @@ -1,71 +1,98 @@ import React from "react"; +import ReactDOM from "react-dom"; import hljs from "highlight.js/lib/core"; -import markdown from "highlight.js/lib/languages/markdown"; import "highlight.js/styles/devibeans.css"; +import markdown from "highlight.js/lib/languages/markdown.js"; import "../index.css"; hljs.registerLanguage("markdown", markdown); -// https://css-tricks.com/creating-an-editable-textarea-that-supports-syntax-highlighted-code/ -function update(text) { - let result_element = document.querySelector("#highlighting-content"); - if (text[text.length - 1] == "\n") { - text += " "; +class Code extends React.Component { + constructor(props) { + super(props); } - result_element.innerHTML = text - .replace(new RegExp("&", "g"), "&") - .replace(new RegExp("<", "g"), "<"); - // Prism.highlightElement(result_element); - // return result_element; -} -function sync_scroll(element) { - let result_element = document.querySelector("#highlighting"); - result_element.scrollTop = element.scrollTop; - result_element.scrollLeft = element.scrollLeft; + render() { + return ( + <pre id="highlight" aria-hidden="true"> + <code id="highlight-content" class="language-markdown"></code> + </pre> + ); + } } -function check_tab(element, event) { - let code = element.value; - if (event.key == "Tab") { - event.preventDefault(); - let before_tab = code.slice(0, element.selectionStart); - let after_tab = code.slice(element.selectionEnd, element.value.length); - let cursor_pos = element.selectionEnd + 1; - element.value = before_tab + "\t" + after_tab; - element.selectionStart = cursor_pos; - element.selectionEnd = cursor_pos; - update(element.value); +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 }); } -} -function CreateTextArea() { - return ( - <textarea - spellcheck="false" - name="editor" - className="editor" - id="editor" - onInput={(this.update, this.sync_scroll)} - onScroll={this.sync_scroll} - onKeyDown={this.check_tab} - ></textarea> - ); -} + handleInput(event) { + let text = this.state; + 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 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; + } -function CreatePreCode() { - return ( - <pre id="highlight" aria-hidden="true"> - <code className="language-markdown" id="highlight-content"></code> - </pre> - ); + handleScroll(event) { + let result_element = document.querySelector("#highlight"); + result_element.scrollTop = event.currentTarget.scrollTop; + result_element.scrollLeft = event.currentTarget.scrollLeft; + } + + handleKeyDown(event) { + let element = event.currentTarget; + let code = this.state; + if (event.key == "Tab") { + event.preventDefault(); + let before_tab = code.slice(0, element.selectionStart); + let after_tab = code.slice(element.selectionEnd, element.value.length); + let cursor_pos = element.selectionEnd + 1; + element.value = before_tab + "\t" + after_tab; + element.selectionStart = cursor_pos; + element.selectionEnd = cursor_pos; + this.handleInput(element.value, element); + } + } + + render() { + return ( + <textarea + spellcheck="false" + name="editor" + className="editor" + id="editor" + onInput={this.handleInput.bind(this)} + onScroll={this.handleScroll.bind(this)} + onKeyDown={this.handleKeyDown.bind(this)} + ></textarea> + ); + } } export default function Left() { return ( - <div class="split left"> - <CreateTextArea /> - <CreatePreCode /> + <div> + <Editor /> + <Code /> </div> ); } diff --git a/spring-front/src/index.css b/spring-front/src/index.css index 3423aee..aace5c0 100644 --- a/spring-front/src/index.css +++ b/spring-front/src/index.css @@ -1,6 +1,6 @@ body { - color: #005f87; - background: #000000; + /* color: #005f87; */ + /* background: #000000; */ font-family: "DejaVuSansMono NF", Helvetica, monospace; height: 95vh; width: 95vw; @@ -32,27 +32,29 @@ div.code { .left { left: 0; background-color: #000000; + color: #ffffff; } .right { right: 0; background-color: #000000; + color: #ffffff; } -#editing, #highlighting { - margin: 10px; - padding: 10px; - border: 0; - width: calc(100% - 32px); - height: 150px; -} +/* #editor, #highlighting { */ +/* margin: 10px; */ +/* padding: 10px; */ +/* border: 0; */ +/* width: calc(100% - 32px); */ +/* height: 150px; */ +/* } */ -#editing, #highlighting, #highlighting * { +#editor, #highlight, #highlight * { font-size: 15pt; font-family: monospace; line-height: 20pt; } -#editing, #highlighting { +#editor, #highlight { position: absolute; top: 0; left: 0; @@ -60,7 +62,7 @@ div.code { white-space: nowrap; } -#editing { +#editor { z-index: 1; color: transparent; background: transparent; @@ -68,10 +70,10 @@ div.code { resize: none; } -#highlighting { +#highlight { z-index: 0; } -#editing, #highlighting, #highlighting * { +#editor, #highlight, #highlight * { tab-size: 2; } |