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.js.swpbin12288 -> 12288 bytes
-rw-r--r--spring-front/src/components/.Right.js.swpbin12288 -> 12288 bytes
-rw-r--r--spring-front/src/components/Left.js47
-rw-r--r--spring-front/src/components/Right.js2
4 files changed, 43 insertions, 6 deletions
diff --git a/spring-front/src/components/.Left.js.swp b/spring-front/src/components/.Left.js.swp
index 64301a2..6197d7f 100644
--- a/spring-front/src/components/.Left.js.swp
+++ b/spring-front/src/components/.Left.js.swp
Binary files differ
diff --git a/spring-front/src/components/.Right.js.swp b/spring-front/src/components/.Right.js.swp
index 8f6b495..560bc83 100644
--- a/spring-front/src/components/.Right.js.swp
+++ b/spring-front/src/components/.Right.js.swp
Binary files differ
diff --git a/spring-front/src/components/Left.js b/spring-front/src/components/Left.js
index 7abeed4..d55945d 100644
--- a/spring-front/src/components/Left.js
+++ b/spring-front/src/components/Left.js
@@ -6,14 +6,51 @@ 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("#highlight-content");
- result_element.innerText = text;
- return hljs.highlight(text, { language: "markdown" }).value;
+ let result_element = document.querySelector("#highlighting-content");
+ if (text[text.length - 1] == "\n") {
+ text += " ";
+ }
+ 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;
+}
+
+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);
+ }
}
function CreateTextArea() {
- return <textarea name="editor" className="editor" id="editor"></textarea>;
+ 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>
+ );
}
function CreatePreCode() {
@@ -26,7 +63,7 @@ function CreatePreCode() {
export default function Left() {
return (
- <div>
+ <div class="split left">
<CreateTextArea />
<CreatePreCode />
</div>
diff --git a/spring-front/src/components/Right.js b/spring-front/src/components/Right.js
index 7206ae9..9a3a9ae 100644
--- a/spring-front/src/components/Right.js
+++ b/spring-front/src/components/Right.js
@@ -2,5 +2,5 @@ import React from "react";
import "../index.css";
export default function Right() {
- return <div>Parsed Markdown goes here!!!</div>;
+ return <div class="split right">Parsed Markdown goes here!!!</div>;
}