aboutsummaryrefslogtreecommitdiffstats
path: root/spring-front
diff options
context:
space:
mode:
Diffstat (limited to 'spring-front')
-rw-r--r--spring-front/src/components/Left.js43
-rw-r--r--spring-front/src/index.css50
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;
-}