aboutsummaryrefslogtreecommitdiffstats
path: root/spring-front
diff options
context:
space:
mode:
authorterminaldweller <thabogre@gmail.com>2022-03-31 19:53:29 +0000
committerterminaldweller <thabogre@gmail.com>2022-03-31 19:53:29 +0000
commitfb5715c3dd5dd4b8171fdaecf01b24efac20570e (patch)
treed4180fd30841807d4c0198cae7b3399dcfdcbc21 /spring-front
parentwip (diff)
downloadmdrtl-fb5715c3dd5dd4b8171fdaecf01b24efac20570e.tar.gz
mdrtl-fb5715c3dd5dd4b8171fdaecf01b24efac20570e.zip
wip
Diffstat (limited to 'spring-front')
-rw-r--r--spring-front/src/components/Editor.js4
-rw-r--r--spring-front/src/index.css46
2 files changed, 33 insertions, 17 deletions
diff --git a/spring-front/src/components/Editor.js b/spring-front/src/components/Editor.js
index 932cc06..81ee58e 100644
--- a/spring-front/src/components/Editor.js
+++ b/spring-front/src/components/Editor.js
@@ -1,6 +1,7 @@
import React from "react";
import ReactDOM from "react-dom";
import hljs from "highlight.js/lib/core";
+// const hljs = window.hljs;
import "highlight.js/styles/devibeans.css";
import markdown from "highlight.js/lib/languages/markdown.js";
import "../index.css";
@@ -35,13 +36,14 @@ export default class Editor extends React.Component {
this.state = { value: "" };
}
- // TODO-we should highlight through a web worker
+ // TODO-use web worker instead
updateCodeSyntaxHighlighting() {
document.querySelectorAll("pre code").forEach((block) => {
hljs.highlightElement(block);
});
}
+ // TODO-use web worker instead
parseMarkdown() {
let element = document.getElementById("markdown-placeholder");
let md = new mit();
diff --git a/spring-front/src/index.css b/spring-front/src/index.css
index c35738f..9715148 100644
--- a/spring-front/src/index.css
+++ b/spring-front/src/index.css
@@ -2,23 +2,20 @@ body {
font-family: "DejaVuSansMono NF", Helvetica, monospace;
height: 95vh;
width: 95vw;
+ background-color: #000000;
+ color: #ffffff;
}
pre,textarea,code {
direction: rtl;
overflow-wrap: break-word;
caret-color: green;
+ caret-shapre: block;
white-space: pre-wrap;
tab-size: 2;
-}
-
-.editor {
- background: #000000;
- color: #ffffff;
- width: 50%;
- max-width: 50%;
- height: 95%;
- max-height: 50%;
+ font-size: 13pt;
+ font-family: monospace;
+ line-height: 15pt;
}
.split {
@@ -41,27 +38,36 @@ pre,textarea,code {
color: #ffffff;
}
-#editor, #highight, #highlight * {
- font-size: 13pt;
- font-family: monospace;
- line-height: 15pt;
+#highlight-content {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ max-width: 100%;
+ height: 100%;
+ max-height: 100%;
+ margin: 0px;
+ border: 0px;
+ padding: 0px;
}
#editor, #highlight {
position: absolute;
top: 0;
left: 0;
- width: 50%;
- max-width: 50%;
+ width: 47%;
+ max-width: 47%;
height: 100%;
max-height: 100%;
+ margin: 0px;
+ border: 0px;
+ padding: 0px;
}
#editor {
z-index: 1;
color: transparent;
background: transparent;
- caret-color: green;
resize: none;
}
@@ -69,3 +75,11 @@ pre,textarea,code {
background: #000000;
z-index: 0;
}
+
+#markdown-placeholder {
+ width: 95%;
+ max-width: 95%;
+ direction: rtl;
+ overflow-wrap: break-word;
+ white-space: pre-wrap;
+}