|
|
|
|
@ -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;
|
|
|
|
|
|
Ro
3 years ago