|
|
@ -1,28 +1,28 @@
|
|
|
|
import * as DataEvent from '../events/DataEvent';
|
|
|
|
import * as DataEvent from "../events/DataEvent";
|
|
|
|
import { position } from 'caret-pos';
|
|
|
|
import { position } from "caret-pos";
|
|
|
|
import EventEmitter from '../events/EventEmitter';
|
|
|
|
import EventEmitter from "../events/EventEmitter";
|
|
|
|
import * as EditorEvent from '../events/EditorEvent';
|
|
|
|
import * as EditorEvent from "../events/EditorEvent";
|
|
|
|
class TextEditor extends EventEmitter {
|
|
|
|
class TextEditor extends EventEmitter {
|
|
|
|
/**
|
|
|
|
/**
|
|
|
|
* Text Editor UI Component
|
|
|
|
* Text Editor UI Component
|
|
|
|
* @constructor
|
|
|
|
* @constructor
|
|
|
|
* @param {object} textEditor - Text area that will edit text
|
|
|
|
* @param {object} textEditor - Text area that will edit text
|
|
|
|
* @param {number} scrollLimit - YPos where editor position will become fixed
|
|
|
|
* @param {number} scrollLimit - YPos where editor position will become fixed
|
|
|
|
*/
|
|
|
|
*/
|
|
|
|
//--------------------------
|
|
|
|
//--------------------------
|
|
|
|
// constructor
|
|
|
|
// constructor
|
|
|
|
//--------------------------
|
|
|
|
//--------------------------
|
|
|
|
constructor(textEditor, scrollLimit) {
|
|
|
|
constructor(textEditor, scrollLimit) {
|
|
|
|
super();
|
|
|
|
super();
|
|
|
|
//hljs.initHighlightingOnLoad();
|
|
|
|
//hljs.initHighlightingOnLoad();
|
|
|
|
this.textEditor = textEditor;
|
|
|
|
this.textEditor = textEditor;
|
|
|
|
this.fixLimit = scrollLimit;
|
|
|
|
this.fixLimit = scrollLimit;
|
|
|
|
this.caretPos = null;
|
|
|
|
this.caretPos = null;
|
|
|
|
this.url = '';
|
|
|
|
this.url = "";
|
|
|
|
this.setInputs();
|
|
|
|
this.setInputs();
|
|
|
|
window.addEventListener('scroll', () => {
|
|
|
|
window.addEventListener("scroll", () => {
|
|
|
|
//var fixLimit = this.fixLimit;
|
|
|
|
//var fixLimit = this.fixLimit;
|
|
|
|
/**
|
|
|
|
/**
|
|
|
|
* edit scroller needs work
|
|
|
|
* edit scroller needs work
|
|
|
|
if (window.pageYOffset >= fixLimit) {
|
|
|
|
if (window.pageYOffset >= fixLimit) {
|
|
|
|
document.getElementById('edit-control').style.position = 'fixed';
|
|
|
|
document.getElementById('edit-control').style.position = 'fixed';
|
|
|
@ -30,129 +30,143 @@ class TextEditor extends EventEmitter {
|
|
|
|
document.getElementById('edit-control').style.position = 'relative';
|
|
|
|
document.getElementById('edit-control').style.position = 'relative';
|
|
|
|
}
|
|
|
|
}
|
|
|
|
*/
|
|
|
|
*/
|
|
|
|
});
|
|
|
|
});
|
|
|
|
this.refresh();
|
|
|
|
this.refresh();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
//--------------------------
|
|
|
|
//--------------------------
|
|
|
|
// methods
|
|
|
|
// methods
|
|
|
|
//--------------------------
|
|
|
|
//--------------------------
|
|
|
|
setInputs() {
|
|
|
|
setInputs() {
|
|
|
|
let self = this;
|
|
|
|
let self = this;
|
|
|
|
var editorButtons = document.querySelectorAll('.editor-button');
|
|
|
|
var editorButtons = document.querySelectorAll(".editor-button");
|
|
|
|
for (var i = 0, length = editorButtons.length; i < length; i++) {
|
|
|
|
for (var i = 0, length = editorButtons.length; i < length; i++) {
|
|
|
|
editorButtons[i].addEventListener('click', e => this.handleEditorOption(e), false);
|
|
|
|
editorButtons[i].addEventListener(
|
|
|
|
}
|
|
|
|
"click",
|
|
|
|
|
|
|
|
(e) => this.handleEditorOption(e),
|
|
|
|
|
|
|
|
false
|
|
|
|
|
|
|
|
);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
this.textEditor.addEventListener('input', e => {
|
|
|
|
this.textEditor.addEventListener("input", (e) => {
|
|
|
|
let htmlTagRe = /<[a-z][\s\S]*>/g;
|
|
|
|
let htmlTagRe = /<[a-z][\s\S]*>/g;
|
|
|
|
let text = this.textEditor.innerText;
|
|
|
|
let text = this.textEditor.innerText;
|
|
|
|
if (e.inputType == 'insertParagraph') return; //cursor setting gets weird on return, so just back out
|
|
|
|
if (e.inputType == "insertParagraph") return; //cursor setting gets weird on return, so just back out
|
|
|
|
|
|
|
|
|
|
|
|
if (text.search(htmlTagRe) > -1) {
|
|
|
|
if (text.search(htmlTagRe) > -1) {
|
|
|
|
let caret = position(this.textEditor).pos;
|
|
|
|
let caret = position(this.textEditor).pos;
|
|
|
|
self.refresh();
|
|
|
|
self.refresh();
|
|
|
|
position(this.textEditor, caret);
|
|
|
|
position(this.textEditor, caret);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
refresh() {
|
|
|
|
refresh() {
|
|
|
|
//var spiffed = hljs.highlight('markdown', this.textEditor.innerText).value;
|
|
|
|
//var spiffed = hljs.highlight('markdown', this.textEditor.innerText).value;
|
|
|
|
var spiffed = this.textEditor.innerText;
|
|
|
|
var spiffed = this.textEditor.innerText;
|
|
|
|
spiffed = spiffed.replace(new RegExp('\r?\n', 'g'), '<br>');
|
|
|
|
spiffed = spiffed.replace(new RegExp("\r?\n", "g"), "<br>");
|
|
|
|
var temp = document.createElement('div');
|
|
|
|
var temp = document.createElement("div");
|
|
|
|
temp.innerText = spiffed;
|
|
|
|
temp.innerText = spiffed;
|
|
|
|
this.textEditor.innerHTML = temp.innerText;
|
|
|
|
this.textEditor.innerHTML = temp.innerText;
|
|
|
|
this.textEditor.style.maxWidth = '900px';
|
|
|
|
this.textEditor.style.maxWidth = "900px";
|
|
|
|
}
|
|
|
|
}
|
|
|
|
notify(type, data) {
|
|
|
|
notify(type, data) {
|
|
|
|
switch (type) {
|
|
|
|
switch (type) {
|
|
|
|
case DataEvent.POST_UPDATED:
|
|
|
|
case DataEvent.PAGE_UPDATED:
|
|
|
|
document.getElementById('submit-update').classList.add('icon-hide');
|
|
|
|
document.getElementById("submit-update").classList.add("icon-hide");
|
|
|
|
document.getElementById('submit-good').classList.remove('icon-hide');
|
|
|
|
document.getElementById("submit-good").classList.remove("icon-hide");
|
|
|
|
document.getElementById('edit-update').classList.remove('submit-start');
|
|
|
|
document.getElementById("edit-update").classList.remove("submit-start");
|
|
|
|
document.getElementById('edit-update').classList.add('submit-cool');
|
|
|
|
document.getElementById("edit-update").classList.add("submit-cool");
|
|
|
|
setTimeout(() => {
|
|
|
|
setTimeout(() => {
|
|
|
|
document.getElementById('submit-update').classList.remove('icon-hide');
|
|
|
|
document
|
|
|
|
document.getElementById('submit-good').classList.add('icon-hide');
|
|
|
|
.getElementById("submit-update")
|
|
|
|
document.getElementById('edit-update').classList.add('submit-start');
|
|
|
|
.classList.remove("icon-hide");
|
|
|
|
document.getElementById('edit-update').classList.remove('submit-cool');
|
|
|
|
document.getElementById("submit-good").classList.add("icon-hide");
|
|
|
|
}, 2000);
|
|
|
|
document.getElementById("edit-update").classList.add("submit-start");
|
|
|
|
break;
|
|
|
|
document
|
|
|
|
case DataEvent.POST_ADDED:
|
|
|
|
.getElementById("edit-update")
|
|
|
|
// do nothing
|
|
|
|
.classList.remove("submit-cool");
|
|
|
|
break;
|
|
|
|
}, 2000);
|
|
|
|
case EditorEvent.EDITOR_UPLOAD_POST_IMAGE:
|
|
|
|
break;
|
|
|
|
position(this.textEditor, this.caretPos);
|
|
|
|
case DataEvent.PAGE_ADDED:
|
|
|
|
var sel, range;
|
|
|
|
// do nothing
|
|
|
|
//var pulled;
|
|
|
|
break;
|
|
|
|
sel = window.getSelection(); //console.log(sel)
|
|
|
|
case EditorEvent.EDITOR_UPLOAD_POST_IMAGE:
|
|
|
|
//console.log(note.message)
|
|
|
|
position(this.textEditor, this.caretPos);
|
|
|
|
if (sel.rangeCount) {
|
|
|
|
var sel, range;
|
|
|
|
range = sel.getRangeAt(0);
|
|
|
|
//var pulled;
|
|
|
|
//pulled = sel.getRangeAt(0).toString();
|
|
|
|
sel = window.getSelection(); //console.log(sel)
|
|
|
|
range.deleteContents();
|
|
|
|
//console.log(note.message)
|
|
|
|
range.insertNode(
|
|
|
|
if (sel.rangeCount) {
|
|
|
|
document.createTextNode('![image alt text](' + data + " 'image title')")
|
|
|
|
range = sel.getRangeAt(0);
|
|
|
|
);
|
|
|
|
//pulled = sel.getRangeAt(0).toString();
|
|
|
|
}
|
|
|
|
range.deleteContents();
|
|
|
|
this.refresh();
|
|
|
|
range.insertNode(
|
|
|
|
break;
|
|
|
|
document.createTextNode(
|
|
|
|
}
|
|
|
|
"![image alt text](" + data + " 'image title')"
|
|
|
|
}
|
|
|
|
)
|
|
|
|
//--------------------------
|
|
|
|
);
|
|
|
|
// event handlers
|
|
|
|
}
|
|
|
|
//--------------------------
|
|
|
|
this.refresh();
|
|
|
|
handleEditorOption(e) {
|
|
|
|
break;
|
|
|
|
e.preventDefault();
|
|
|
|
}
|
|
|
|
var sel, range, pulled;
|
|
|
|
}
|
|
|
|
sel = window.getSelection(); //console.log(sel)
|
|
|
|
//--------------------------
|
|
|
|
if (sel.rangeCount) {
|
|
|
|
// event handlers
|
|
|
|
range = sel.getRangeAt(0);
|
|
|
|
//--------------------------
|
|
|
|
pulled = sel.getRangeAt(0).toString();
|
|
|
|
handleEditorOption(e) {
|
|
|
|
range.deleteContents();
|
|
|
|
e.preventDefault();
|
|
|
|
switch (e.target.id) {
|
|
|
|
var sel, range, pulled;
|
|
|
|
case 'edit-bold':
|
|
|
|
sel = window.getSelection(); //console.log(sel)
|
|
|
|
range.insertNode(document.createTextNode('**' + pulled + '**'));
|
|
|
|
if (sel.rangeCount) {
|
|
|
|
break;
|
|
|
|
range = sel.getRangeAt(0);
|
|
|
|
case 'edit-italic':
|
|
|
|
pulled = sel.getRangeAt(0).toString();
|
|
|
|
range.insertNode(document.createTextNode('*' + pulled + '*'));
|
|
|
|
range.deleteContents();
|
|
|
|
break;
|
|
|
|
switch (e.target.id) {
|
|
|
|
case 'edit-strikethrough':
|
|
|
|
case "edit-bold":
|
|
|
|
range.insertNode(document.createTextNode('<del>' + pulled + '</del>'));
|
|
|
|
range.insertNode(document.createTextNode("**" + pulled + "**"));
|
|
|
|
break;
|
|
|
|
break;
|
|
|
|
case 'edit-header1':
|
|
|
|
case "edit-italic":
|
|
|
|
range.insertNode(document.createTextNode('# ' + pulled));
|
|
|
|
range.insertNode(document.createTextNode("*" + pulled + "*"));
|
|
|
|
break;
|
|
|
|
break;
|
|
|
|
case 'edit-header2':
|
|
|
|
case "edit-strikethrough":
|
|
|
|
range.insertNode(document.createTextNode('## ' + pulled));
|
|
|
|
range.insertNode(
|
|
|
|
break;
|
|
|
|
document.createTextNode("<del>" + pulled + "</del>")
|
|
|
|
case 'edit-header3':
|
|
|
|
);
|
|
|
|
range.insertNode(document.createTextNode('### ' + pulled));
|
|
|
|
break;
|
|
|
|
break;
|
|
|
|
case "edit-header1":
|
|
|
|
case 'edit-image':
|
|
|
|
range.insertNode(document.createTextNode("# " + pulled));
|
|
|
|
this.caretPos = position(this.textEditor).pos;
|
|
|
|
break;
|
|
|
|
this.emitEvent(EditorEvent.EDITOR_UPLOAD_POST_IMAGE);
|
|
|
|
case "edit-header2":
|
|
|
|
break;
|
|
|
|
range.insertNode(document.createTextNode("## " + pulled));
|
|
|
|
case 'submit-save':
|
|
|
|
break;
|
|
|
|
case 'edit-save':
|
|
|
|
case "edit-header3":
|
|
|
|
this.emitEvent(EditorEvent.EDITOR_SAVE);
|
|
|
|
range.insertNode(document.createTextNode("### " + pulled));
|
|
|
|
break;
|
|
|
|
break;
|
|
|
|
case 'submit-update':
|
|
|
|
case "edit-image":
|
|
|
|
case 'edit-update':
|
|
|
|
this.caretPos = position(this.textEditor).pos;
|
|
|
|
this.emitEvent(EditorEvent.EDITOR_UPDATE);
|
|
|
|
this.emitEvent(EditorEvent.EDITOR_UPLOAD_POST_IMAGE);
|
|
|
|
break;
|
|
|
|
break;
|
|
|
|
case 'edit-link':
|
|
|
|
case "submit-save":
|
|
|
|
range.insertNode(document.createTextNode('[' + pulled + '](PASTE URL HERE)'));
|
|
|
|
case "edit-save":
|
|
|
|
break;
|
|
|
|
this.emitEvent(EditorEvent.EDITOR_SAVE);
|
|
|
|
case 'edit-delete':
|
|
|
|
break;
|
|
|
|
this.emitEvent(EditorEvent.EDITOR_DELETE);
|
|
|
|
case "submit-update":
|
|
|
|
break;
|
|
|
|
case "edit-update":
|
|
|
|
default:
|
|
|
|
this.emitEvent(EditorEvent.EDITOR_UPDATE);
|
|
|
|
//range.insertNode(document.createTextNode("[" + self.url + "](PASTE URL HERE)"));
|
|
|
|
break;
|
|
|
|
break;
|
|
|
|
case "edit-link":
|
|
|
|
}
|
|
|
|
range.insertNode(
|
|
|
|
}
|
|
|
|
document.createTextNode("[" + pulled + "](PASTE URL HERE)")
|
|
|
|
this.refresh();
|
|
|
|
);
|
|
|
|
}
|
|
|
|
break;
|
|
|
|
|
|
|
|
case "edit-delete":
|
|
|
|
|
|
|
|
this.emitEvent(EditorEvent.EDITOR_DELETE);
|
|
|
|
|
|
|
|
break;
|
|
|
|
|
|
|
|
default:
|
|
|
|
|
|
|
|
//range.insertNode(document.createTextNode("[" + self.url + "](PASTE URL HERE)"));
|
|
|
|
|
|
|
|
break;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
this.refresh();
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
export default TextEditor;
|
|
|
|
export default TextEditor;
|
|
|
|