cleand up text editor layout, tweaked editor colors, re-activated editor options
This commit is contained in:
Ro
parent
682406515d
commit
0742e06c45
11 changed files with 212 additions and 152 deletions
|
|
@ -32,7 +32,7 @@
|
|||
{% endblock %}
|
||||
|
||||
{% block stylesheets %}
|
||||
<link rel="stylesheet" type="text/css" href="/assets/css/dash.css?=dfdfd">
|
||||
<link rel="stylesheet" type="text/css" href="/assets/css/dash.css?=dfeef">
|
||||
{% endblock %}
|
||||
|
||||
{% block mainContent %}
|
||||
|
|
@ -106,7 +106,12 @@
|
|||
{{ include("dash/partials/editor.twig") }}
|
||||
{% endapply %}
|
||||
<div id="edit-post-wrapper">
|
||||
<pre><code spellcheck="false" id="edit-post-text" contenteditable="true" class="language-markdown"> {{- content -}}</code></pre>
|
||||
<textarea id="edit" spellcheck="false">{{- content -}}</textarea>
|
||||
<pre id="highlight">
|
||||
<code id="highlight-content" class="language-md">
|
||||
|
||||
</code>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
4
package-lock.json
generated
4
package-lock.json
generated
|
|
@ -1,12 +1,12 @@
|
|||
{
|
||||
"name": "fipamo-dash",
|
||||
"version": "1.2.4",
|
||||
"version": "2.5.0",
|
||||
"lockfileVersion": 2,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "fipamo-dash",
|
||||
"version": "1.2.4",
|
||||
"version": "2.5.0",
|
||||
"license": "UNLICENSED",
|
||||
"dependencies": {
|
||||
"@babel/core": "^7.16.5",
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@
|
|||
"version": "1.0.0",
|
||||
"description": "The most chill API for the most chill blog framework"
|
||||
},
|
||||
|
||||
"devDependencies": {
|
||||
"@babel/preset-env": "^7.16.5",
|
||||
"babel-cli": "^6.26.0",
|
||||
|
|
|
|||
|
|
@ -1712,7 +1712,6 @@ strong {
|
|||
font-weight: bolder;
|
||||
}
|
||||
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: monospace, monospace;
|
||||
|
|
@ -3192,33 +3191,44 @@ select {
|
|||
margin: 0 auto;
|
||||
}
|
||||
#post-edit-index #post-edit-index-wrapper #edit-post #edit-post-wrapper {
|
||||
width: 100%;
|
||||
max-width: 900px;
|
||||
border-radius: 5px;
|
||||
margin: 40px 0 40px 0;
|
||||
overflow: hidden;
|
||||
margin: 10px 0 50px 0;
|
||||
position: relative;
|
||||
}
|
||||
#post-edit-index #post-edit-index-wrapper #edit-post #edit-post-wrapper pre {
|
||||
margin: 0;
|
||||
}
|
||||
#post-edit-index #post-edit-index-wrapper #edit-post #edit-post-wrapper pre code {
|
||||
font-family: "Lucida Console", Monaco, monospace;
|
||||
padding: 5px;
|
||||
border-radius: 5px;
|
||||
line-height: 1.6em;
|
||||
font-size: 1.25em;
|
||||
color: #fde3a7;
|
||||
#post-edit-index #post-edit-index-wrapper #edit-post #edit-post-wrapper #edit, #post-edit-index #post-edit-index-wrapper #edit-post #edit-post-wrapper #highlight {
|
||||
/* Both elements need the same text and space styling so they are directly on top of each other */
|
||||
border: 0;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
overflow: auto;
|
||||
word-wrap: normal;
|
||||
white-space: pre-wrap;
|
||||
line-break: normal;
|
||||
-webkit-line-break: normal;
|
||||
-o-line-break: normal;
|
||||
-moz-line-break: normal;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
max-width: 900px;
|
||||
min-height: 200px;
|
||||
}
|
||||
#post-edit-index #post-edit-index-wrapper #edit-post #edit-post-wrapper #highlight-content {
|
||||
word-wrap: normal;
|
||||
white-space: pre-wrap;
|
||||
line-break: normal;
|
||||
}
|
||||
#post-edit-index #post-edit-index-wrapper #edit-post #edit-post-wrapper #edit, #post-edit-index #post-edit-index-wrapper #edit-post #edit-post-wrapper #highlight, #post-edit-index #post-edit-index-wrapper #edit-post #edit-post-wrapper #hightlight * {
|
||||
font-size: 1.2em;
|
||||
font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
|
||||
line-height: 22pt;
|
||||
}
|
||||
#post-edit-index #post-edit-index-wrapper #edit-post #edit-post-wrapper #edit {
|
||||
z-index: 1;
|
||||
color: transparent;
|
||||
background: transparent;
|
||||
caret-color: #fc6399;
|
||||
}
|
||||
#post-edit-index #post-edit-index-wrapper #edit-post #edit-post-wrapper #highlight {
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 800px) {
|
||||
#post-edit-index #post-edit-index-wrapper #post-header #post-title #post-date {
|
||||
|
|
@ -3680,7 +3690,7 @@ select {
|
|||
|
||||
code[class*=language-],
|
||||
pre[class*=language-] {
|
||||
color: #f8f8f2;
|
||||
color: #fde3a7;
|
||||
background: none;
|
||||
text-shadow: 0 1px rgba(0, 0, 0, 0.3);
|
||||
font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
|
||||
|
|
@ -3701,8 +3711,7 @@ pre[class*=language-] {
|
|||
}
|
||||
|
||||
pre[class*=language-] {
|
||||
padding: 1em;
|
||||
margin: 0.5em 0;
|
||||
margin: 0.1em 0;
|
||||
overflow: auto;
|
||||
border-radius: 0.3em;
|
||||
}
|
||||
|
|
@ -3726,7 +3735,7 @@ pre[class*=language-] {
|
|||
}
|
||||
|
||||
.token.punctuation {
|
||||
color: #ffa07a;
|
||||
color: #e7903c;
|
||||
}
|
||||
.token.namespace {
|
||||
opacity: 0.7;
|
||||
|
|
@ -3741,7 +3750,7 @@ pre[class*=language-] {
|
|||
cursor: help;
|
||||
}
|
||||
.token.content {
|
||||
color: #89c4f4;
|
||||
color: #6bb9f0;
|
||||
}
|
||||
|
||||
.token.property,
|
||||
|
|
@ -3749,7 +3758,7 @@ pre[class*=language-] {
|
|||
.token.constant,
|
||||
.token.symbol,
|
||||
.token.deleted {
|
||||
color: #f92672;
|
||||
color: #e73c4e;
|
||||
}
|
||||
|
||||
.token.boolean,
|
||||
|
|
@ -3772,7 +3781,7 @@ pre[class*=language-] {
|
|||
.language-css .token.string,
|
||||
.style .token.string,
|
||||
.token.variable {
|
||||
color: #f8f8f2;
|
||||
color: #dcc6e0;
|
||||
}
|
||||
|
||||
.token.atrule,
|
||||
|
|
@ -3784,7 +3793,7 @@ pre[class*=language-] {
|
|||
|
||||
.token.regex,
|
||||
.token.important {
|
||||
color: #fd971f;
|
||||
color: #e7903c;
|
||||
}
|
||||
|
||||
.token.important,
|
||||
|
|
|
|||
|
|
@ -11,9 +11,9 @@ export default class PostActions {
|
|||
return new Promise((resolve, reject) => {
|
||||
let pageInfo = new FormData();
|
||||
let txt = document.createElement("textarea");
|
||||
txt.innerHTML = document.getElementById("edit-post-text").innerHTML;
|
||||
txt.innerHTML = document.getElementById("highlight-content").innerHTML;
|
||||
let html = txt.value;
|
||||
html = html.replace(/<\/?span[^>]*>/g, ''); //removes prism styling
|
||||
html = html.replace(/<\/?span[^>]*>/g, ""); //removes prism styling
|
||||
html = html.replace(/<\/?br[^>]*>/g, "\n"); //convert back to encoded line break for storage
|
||||
pageInfo.append(
|
||||
"id",
|
||||
|
|
|
|||
|
|
@ -37,9 +37,9 @@ export default class PostEditor {
|
|||
.getElementById("post-edit-index")
|
||||
.getAttribute("data-layout");
|
||||
}
|
||||
if (document.getElementById("edit-post-text")) {
|
||||
if (document.getElementById("edit")) {
|
||||
this.editor = new TextEditor(
|
||||
document.getElementById("edit-post-text"),
|
||||
document.getElementById("edit"),
|
||||
document.getElementById("header").offsetHeight +
|
||||
document.getElementById("post-header").offsetHeight +
|
||||
document.getElementById("post-feature").offsetHeight
|
||||
|
|
|
|||
|
|
@ -15,11 +15,30 @@ class TextEditor extends EventEmitter {
|
|||
//--------------------------
|
||||
constructor(textEditor, scrollLimit) {
|
||||
super();
|
||||
//hljs.initHighlightingOnLoad();
|
||||
this.textEditor = textEditor;
|
||||
this.fixLimit = scrollLimit;
|
||||
this.caretPos = null;
|
||||
this.url = "";
|
||||
|
||||
document.getElementById("edit").addEventListener("input", (e) => {
|
||||
let result_element = document.querySelector("#highlight-content");
|
||||
this.textEditor = textEditor;
|
||||
// Update code
|
||||
let text = e.target.value;
|
||||
result_element.innerHTML = text
|
||||
.replace(new RegExp("&", "g"), "&")
|
||||
.replace(new RegExp("<", "g"), "<");
|
||||
let editorHeight = document.getElementById("highlight").offsetHeight;
|
||||
document.getElementById("edit-post-wrapper").style.height =
|
||||
editorHeight + "px";
|
||||
e.target.style.height = editorHeight + "px";
|
||||
// Syntax Highlight
|
||||
Prism.highlightElement(result_element);
|
||||
});
|
||||
document.getElementById("edit").addEventListener("scroll", (e) => {
|
||||
/* Scroll result to scroll coords of event - sync with textarea */
|
||||
let result_element = document.querySelector("#highlight");
|
||||
// Get and set x and y
|
||||
result_element.scrollTop = e.scrollTop;
|
||||
result_element.scrollLeft = e.scrollLeft;
|
||||
});
|
||||
document.getElementById("edit").dispatchEvent(new Event("input"));
|
||||
this.setInputs();
|
||||
window.addEventListener("scroll", () => {
|
||||
//var fixLimit = this.fixLimit;
|
||||
|
|
@ -32,7 +51,7 @@ class TextEditor extends EventEmitter {
|
|||
}
|
||||
*/
|
||||
});
|
||||
this.refresh();
|
||||
//this.refresh();
|
||||
}
|
||||
//--------------------------
|
||||
// methods
|
||||
|
|
@ -47,32 +66,6 @@ class TextEditor extends EventEmitter {
|
|||
false
|
||||
);
|
||||
}
|
||||
|
||||
this.textEditor.addEventListener("input", (e) => {
|
||||
let htmlTagRe = /<[a-z][\s\S]*>/g;
|
||||
let text = this.textEditor.innerText;
|
||||
if (e.inputType == "insertParagraph") return; //cursor setting gets weird on return, so just back out
|
||||
|
||||
if (text.search(htmlTagRe) > -1) {
|
||||
let caret = position(this.textEditor).pos;
|
||||
self.refresh();
|
||||
position(this.textEditor, caret);
|
||||
}
|
||||
});
|
||||
}
|
||||
refresh() {
|
||||
|
||||
var spiffed = Prism.highlight(
|
||||
this.textEditor.innerText,
|
||||
Prism.languages.md,
|
||||
"md"
|
||||
);
|
||||
//var spiffed = this.textEditor.innerText;
|
||||
spiffed = spiffed.replace(new RegExp("\r?\n", "g"), "<br>");
|
||||
var temp = document.createElement("div");
|
||||
temp.innerText = spiffed;
|
||||
this.textEditor.innerHTML = temp.innerText;
|
||||
this.textEditor.style.maxWidth = "900px";
|
||||
}
|
||||
notify(type, data) {
|
||||
switch (type) {
|
||||
|
|
@ -96,22 +89,16 @@ class TextEditor extends EventEmitter {
|
|||
// do nothing
|
||||
break;
|
||||
case EditorEvent.EDITOR_UPLOAD_POST_IMAGE:
|
||||
position(this.textEditor, this.caretPos);
|
||||
var sel, range;
|
||||
//var pulled;
|
||||
sel = window.getSelection(); //console.log(sel)
|
||||
//console.log(note.message)
|
||||
if (sel.rangeCount) {
|
||||
range = sel.getRangeAt(0);
|
||||
//pulled = sel.getRangeAt(0).toString();
|
||||
range.deleteContents();
|
||||
range.insertNode(
|
||||
document.createTextNode(
|
||||
"![image alt text](" + data + " 'image title')"
|
||||
)
|
||||
);
|
||||
}
|
||||
this.refresh();
|
||||
let len = this.textEditor.value.length;
|
||||
let start = this.textEditor.selectionStart;
|
||||
let end = this.textEditor.selectionEnd;
|
||||
let insert = "![image alt text](" + data + " 'image title')";
|
||||
|
||||
this.textEditor.value =
|
||||
this.textEditor.value.substring(0, start) +
|
||||
insert +
|
||||
this.textEditor.value.substring(end, len);
|
||||
document.getElementById("edit").dispatchEvent(new Event("input"));
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
|
@ -120,59 +107,86 @@ class TextEditor extends EventEmitter {
|
|||
//--------------------------
|
||||
handleEditorOption(e) {
|
||||
e.preventDefault();
|
||||
var sel, range, pulled;
|
||||
sel = window.getSelection(); //console.log(sel)
|
||||
if (sel.rangeCount) {
|
||||
range = sel.getRangeAt(0);
|
||||
pulled = sel.getRangeAt(0).toString();
|
||||
range.deleteContents();
|
||||
switch (e.target.id) {
|
||||
case "edit-bold":
|
||||
range.insertNode(document.createTextNode("**" + pulled + "**"));
|
||||
break;
|
||||
case "edit-italic":
|
||||
range.insertNode(document.createTextNode("*" + pulled + "*"));
|
||||
break;
|
||||
case "edit-strikethrough":
|
||||
range.insertNode(
|
||||
document.createTextNode("<del>" + pulled + "</del>")
|
||||
);
|
||||
break;
|
||||
case "edit-header1":
|
||||
range.insertNode(document.createTextNode("# " + pulled + "\n"));
|
||||
break;
|
||||
case "edit-header2":
|
||||
range.insertNode(document.createTextNode("## " + pulled + "\n"));
|
||||
break;
|
||||
case "edit-header3":
|
||||
range.insertNode(document.createTextNode("### " + pulled + "\n"));
|
||||
break;
|
||||
case "edit-image":
|
||||
this.caretPos = position(this.textEditor).pos;
|
||||
this.emitEvent(EditorEvent.EDITOR_UPLOAD_POST_IMAGE);
|
||||
break;
|
||||
case "submit-save":
|
||||
case "edit-save":
|
||||
this.emitEvent(EditorEvent.EDITOR_SAVE);
|
||||
break;
|
||||
case "submit-update":
|
||||
case "edit-update":
|
||||
this.emitEvent(EditorEvent.EDITOR_UPDATE);
|
||||
break;
|
||||
case "edit-link":
|
||||
range.insertNode(
|
||||
document.createTextNode("[" + pulled + "](PASTE URL HERE)")
|
||||
);
|
||||
break;
|
||||
case "edit-delete":
|
||||
this.emitEvent(EditorEvent.EDITOR_DELETE);
|
||||
break;
|
||||
default:
|
||||
//range.insertNode(document.createTextNode("[" + self.url + "](PASTE URL HERE)"));
|
||||
break;
|
||||
}
|
||||
let len = this.textEditor.value.length;
|
||||
let start = this.textEditor.selectionStart;
|
||||
let end = this.textEditor.selectionEnd;
|
||||
|
||||
let selectedText = this.textEditor.value.substring(start, end);
|
||||
let insert = "";
|
||||
switch (e.target.id) {
|
||||
case "edit-bold":
|
||||
insert = "**" + selectedText + "**";
|
||||
this.textEditor.value =
|
||||
this.textEditor.value.substring(0, start) +
|
||||
insert +
|
||||
this.textEditor.value.substring(end, len);
|
||||
|
||||
break;
|
||||
case "edit-italic":
|
||||
insert = "*" + selectedText + "*";
|
||||
//console.log(this.textEditor);
|
||||
this.textEditor.value =
|
||||
this.textEditor.value.substring(0, start) +
|
||||
insert +
|
||||
this.textEditor.value.substring(end, len);
|
||||
break;
|
||||
case "edit-strikethrough":
|
||||
insert = "~~" + selectedText + "~~";
|
||||
this.textEditor.value =
|
||||
this.textEditor.value.substring(0, start) +
|
||||
insert +
|
||||
this.textEditor.value.substring(end, len);
|
||||
break;
|
||||
case "edit-header1":
|
||||
insert = "# " + selectedText + "\n";
|
||||
this.textEditor.value =
|
||||
this.textEditor.value.substring(0, start) +
|
||||
insert +
|
||||
this.textEditor.value.substring(end, len);
|
||||
break;
|
||||
case "edit-header2":
|
||||
insert = "## " + selectedText + "\n";
|
||||
this.textEditor.value =
|
||||
this.textEditor.value.substring(0, start) +
|
||||
insert +
|
||||
this.textEditor.value.substring(end, len);
|
||||
break;
|
||||
case "edit-header3":
|
||||
insert = "### " + selectedText + "\n";
|
||||
this.textEditor.value =
|
||||
this.textEditor.value.substring(0, start) +
|
||||
insert +
|
||||
this.textEditor.value.substring(end, len);
|
||||
break;
|
||||
case "edit-link":
|
||||
let url = prompt("Let's get that url, boss");
|
||||
let link = url.toLowerCase();
|
||||
insert = "[" + selectedText + "](" + link + ")";
|
||||
this.textEditor.value =
|
||||
this.textEditor.value.substring(0, start) +
|
||||
insert +
|
||||
this.textEditor.value.substring(end, len);
|
||||
break;
|
||||
case "edit-image":
|
||||
this.caretPos = position(this.textEditor).pos;
|
||||
this.emitEvent(EditorEvent.EDITOR_UPLOAD_POST_IMAGE);
|
||||
break;
|
||||
case "submit-save":
|
||||
case "edit-save":
|
||||
this.emitEvent(EditorEvent.EDITOR_SAVE);
|
||||
break;
|
||||
case "submit-update":
|
||||
case "edit-update":
|
||||
this.emitEvent(EditorEvent.EDITOR_UPDATE);
|
||||
break;
|
||||
case "edit-delete":
|
||||
this.emitEvent(EditorEvent.EDITOR_DELETE);
|
||||
break;
|
||||
default:
|
||||
//do stuff
|
||||
break;
|
||||
}
|
||||
this.refresh();
|
||||
document.getElementById("edit").dispatchEvent(new Event("input"));
|
||||
}
|
||||
}
|
||||
export default TextEditor;
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ $eventCool: #32cd32
|
|||
$eventLame: #F64747
|
||||
|
||||
$editorPrimary: #fde3a7
|
||||
$editorSecondary: #ffa07a
|
||||
$editorTertiary: #89c4f4
|
||||
$editorString: #f6dd74
|
||||
$editorSecondary: #e7903c
|
||||
$editorTertiary: #6bb9f0
|
||||
$editorString: #dcc6e0
|
||||
$editorTag: #e73c4e
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
code[class*="language-"],
|
||||
pre[class*="language-"]
|
||||
color: #f8f8f2
|
||||
color: $editorPrimary
|
||||
background: none
|
||||
text-shadow: 0 1px rgba(0, 0, 0, 0.3)
|
||||
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace
|
||||
|
|
@ -19,8 +19,8 @@ pre[class*="language-"]
|
|||
-ms-hyphens: none
|
||||
hyphens: none
|
||||
pre[class*="language-"]
|
||||
padding: 1em
|
||||
margin: .5em 0
|
||||
//padding: 1em
|
||||
margin: .1em 0
|
||||
overflow: auto
|
||||
border-radius: 0.3em
|
||||
:not(pre) > code[class*="language-"],
|
||||
|
|
@ -54,7 +54,7 @@ pre[class*="language-"]
|
|||
.token.constant,
|
||||
.token.symbol,
|
||||
.token.deleted
|
||||
color: #f92672
|
||||
color: $editorTag
|
||||
.token.boolean,
|
||||
.token.number
|
||||
color: #ae81ff
|
||||
|
|
@ -71,7 +71,7 @@ pre[class*="language-"]
|
|||
.language-css .token.string,
|
||||
.style .token.string,
|
||||
.token.variable
|
||||
color: #f8f8f2
|
||||
color: $editorString
|
||||
.token.atrule,
|
||||
.token.attr-value,
|
||||
.token.function,
|
||||
|
|
@ -79,7 +79,7 @@ pre[class*="language-"]
|
|||
color: #e6db74
|
||||
.token.regex,
|
||||
.token.important
|
||||
color: #fd971f
|
||||
color: $editorSecondary
|
||||
.token.important,
|
||||
.token.bold
|
||||
font-weight: bold
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@ strong
|
|||
font-weight: inherit
|
||||
font-weight: bolder
|
||||
|
||||
code,
|
||||
//code,
|
||||
kbd,
|
||||
samp
|
||||
font-family: monospace, monospace
|
||||
|
|
|
|||
|
|
@ -159,7 +159,6 @@
|
|||
|
||||
#post-edit-index-wrapper
|
||||
width: 100%
|
||||
|
||||
#post-header
|
||||
// width 100%
|
||||
|
||||
|
|
@ -301,14 +300,47 @@
|
|||
margin: 0 auto
|
||||
|
||||
#edit-post-wrapper
|
||||
//width 98.7%
|
||||
width: 100%
|
||||
max-width: 900px
|
||||
border-radius: 5px
|
||||
//background $primary - 10%
|
||||
margin: 40px 0 40px 0
|
||||
overflow: hidden
|
||||
margin: 10px 0 50px 0
|
||||
position: relative
|
||||
|
||||
#edit, #highlight
|
||||
/* Both elements need the same text and space styling so they are directly on top of each other */
|
||||
//margin: 10px
|
||||
//padding: 10px
|
||||
border: 0
|
||||
width: 100%
|
||||
height: auto
|
||||
position: absolute
|
||||
top: 0
|
||||
left: 0
|
||||
overflow: auto
|
||||
word-wrap: normal
|
||||
white-space: pre-wrap
|
||||
line-break: normal
|
||||
#highlight-content
|
||||
word-wrap: normal
|
||||
white-space: pre-wrap
|
||||
line-break: normal
|
||||
|
||||
#edit, #highlight, #hightlight *
|
||||
font-size: 1.2em
|
||||
font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace
|
||||
line-height: 22pt
|
||||
|
||||
#edit
|
||||
z-index: 1
|
||||
color: transparent
|
||||
background: transparent
|
||||
caret-color: $highlight
|
||||
#highlight
|
||||
z-index: 0
|
||||
|
||||
|
||||
pre
|
||||
//pre
|
||||
margin: 0
|
||||
code
|
||||
font-family: $monoType
|
||||
|
|
|
|||
Loading…
Reference in a new issue