aboutsummaryrefslogtreecommitdiffstats
path: root/spring-front/src
diff options
context:
space:
mode:
authorterminaldweller <thabogre@gmail.com>2022-03-24 12:36:31 +0000
committerterminaldweller <thabogre@gmail.com>2022-03-24 12:36:31 +0000
commit7679fce6563bccd9d3c77038477671ba950d1481 (patch)
tree5c22115becbb37293e98eeb1fb32115e951d33fb /spring-front/src
parentwip (diff)
downloadmdrtl-7679fce6563bccd9d3c77038477671ba950d1481.tar.gz
mdrtl-7679fce6563bccd9d3c77038477671ba950d1481.zip
wip
Diffstat (limited to 'spring-front/src')
-rw-r--r--spring-front/src/components/Left.js127
-rw-r--r--spring-front/src/index.css30
2 files changed, 93 insertions, 64 deletions
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;
}