projects/fipamo
1
0
Fork 1
Code Issues 24 Pull requests Projects 1 Releases 22 Packages Wiki Activity

cleand up text editor layout, tweaked editor colors, re-activated editor options

Browse source
This commit is contained in:
Ro 2021-12-28 14:48:54 -08:00
parent 682406515d
commit 0742e06c45
11 changed files with 212 additions and 152 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
brain/views/dash/page-edit.twig
View file

@ -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
View file

@ -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",

1
package.json
View file

@ -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",

65
public/assets/css/dash.css
View file

@ -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,

4
src/com/actions/PageActions.js
View file

@ -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",

4
src/com/controllers/PageEditor.js
View file

@ -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

152
src/com/ui/TextEditor.js
View file

@ -15,11 +15,30 @@ class TextEditor extends EventEmitter {
//--------------------------
constructor(textEditor, scrollLimit) {
super();
//hljs.initHighlightingOnLoad();
document.getElementById("edit").addEventListener("input", (e) => {
let result_element = document.querySelector("#highlight-content");
this.textEditor = textEditor;
this.fixLimit = scrollLimit;
this.caretPos = null;
this.url = "";
// Update code
let text = e.target.value;
result_element.innerHTML = text
.replace(new RegExp("&", "g"), "&amp;")
.replace(new RegExp("<", "g"), "&lt;");
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,32 +107,65 @@ 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();
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":
range.insertNode(document.createTextNode("**" + pulled + "**"));
insert = "**" + selectedText + "**";
this.textEditor.value =
this.textEditor.value.substring(0, start) +
insert +
this.textEditor.value.substring(end, len);
break;
case "edit-italic":
range.insertNode(document.createTextNode("*" + pulled + "*"));
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":
range.insertNode(
document.createTextNode("<del>" + pulled + "</del>")
);
insert = "~~" + selectedText + "~~";
this.textEditor.value =
this.textEditor.value.substring(0, start) +
insert +
this.textEditor.value.substring(end, len);
break;
case "edit-header1":
range.insertNode(document.createTextNode("# " + pulled + "\n"));
insert = "# " + selectedText + "\n";
this.textEditor.value =
this.textEditor.value.substring(0, start) +
insert +
this.textEditor.value.substring(end, len);
break;
case "edit-header2":
range.insertNode(document.createTextNode("## " + pulled + "\n"));
insert = "## " + selectedText + "\n";
this.textEditor.value =
this.textEditor.value.substring(0, start) +
insert +
this.textEditor.value.substring(end, len);
break;
case "edit-header3":
range.insertNode(document.createTextNode("### " + pulled + "\n"));
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;
@ -159,20 +179,14 @@ class TextEditor extends EventEmitter {
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)"));
//do stuff
break;
}
}
this.refresh();
document.getElementById("edit").dispatchEvent(new Event("input"));
}
}
export default TextEditor;

7
src/styles/main/_colors.sass
View file

@ -12,6 +12,7 @@ $eventCool: #32cd32
$eventLame: #F64747
$editorPrimary: #fde3a7
$editorSecondary: #ffa07a
$editorTertiary: #89c4f4
$editorString: #f6dd74
$editorSecondary: #e7903c
$editorTertiary: #6bb9f0
$editorString: #dcc6e0
$editorTag: #e73c4e

12
src/styles/main/_editor-highlight.sass
View file

@ -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

2
src/styles/main/_normalize.sass
View file

@ -53,7 +53,7 @@ strong
font-weight: inherit
font-weight: bolder
code,
//code,
kbd,
samp
font-family: monospace, monospace

42
src/styles/main/_posts.sass
View file

@ -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
pre
#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
margin: 0
code
font-family: $monoType