fipamo/brain/tools/ui/TextEditor.js

182 lines
6.7 KiB
JavaScript
Raw Normal View History

2018-10-31 17:00:31 +01:00
import * as DataEvent from '../events/DataEvent';
import DateUtils from '../utilities/DateUtils';
2018-11-14 17:32:35 +01:00
import
{
2018-10-31 17:00:31 +01:00
position,
offset
2018-11-14 17:32:35 +01:00
}
from 'caret-pos';
import EventEmitter from '../events/EventEmitter';
import * as EditorEvent from '../events/EditorEvent';
2018-11-14 17:32:35 +01:00
class TextEditor extends EventEmitter
{
/**
* Text Editor UI Component
* @constructor
* @param {object} textEditor - Text area that will edit text
* @param {number} scrollLimit - YPos where editor position will become fixed
*/
2018-10-31 17:00:31 +01:00
//--------------------------
// constructor
//--------------------------
2018-11-14 17:32:35 +01:00
constructor(textEditor, scrollLimit)
{
super();
2018-10-31 17:00:31 +01:00
hljs.initHighlightingOnLoad();
this.dateUtils = new DateUtils();
this.textEditor = textEditor;
this.fixLimit = scrollLimit;
this.caretPos = null;
2018-10-31 17:00:31 +01:00
this.url = '';
let self = this;
this.setInputs();
2018-11-14 17:32:35 +01:00
window.addEventListener("scroll", f =>
{
var fixLimit = this.fixLimit;
2018-11-14 17:32:35 +01:00
if (window.pageYOffset >= fixLimit)
{
2018-10-31 17:00:31 +01:00
document.getElementById('edit-control').style.position = "fixed"
2018-11-14 17:32:35 +01:00
}
else
{
2018-10-31 17:00:31 +01:00
document.getElementById('edit-control').style.position = "relative"
}
});
this.refresh();
}
//--------------------------
// methods
//--------------------------
2018-11-14 17:32:35 +01:00
setInputs()
{
2018-10-31 17:00:31 +01:00
let self = this;
var editorButtons = document.querySelectorAll('.editor-button');
2018-11-14 17:32:35 +01:00
for (var i = 0, length = editorButtons.length; i < length; i++)
{
2018-10-31 17:00:31 +01:00
editorButtons[i].addEventListener('click', e => this.handleEditorOption(e), false);
}
2018-11-14 17:32:35 +01:00
this.textEditor.addEventListener('input', f =>
{
if (f.inputType == "insertParagraph")
{
2018-11-14 17:32:35 +01:00
var caret = position(self.textEditor).pos + 1;
var spiffed = hljs.highlight('markdown', self.textEditor.innerText).value;
var temp = document.createElement("div");
temp.innerText = spiffed;
self.textEditor.innerHTML = temp.innerText;
position(self.textEditor, caret)
2018-11-14 17:32:35 +01:00
}
else
{
self.refresh()
}
2018-10-31 17:00:31 +01:00
})
}
2018-11-14 17:32:35 +01:00
refresh()
{
var caret = position(this.textEditor).pos;
var spiffed = hljs.highlight('markdown', this.textEditor.innerText).value;
spiffed = spiffed.replace(new RegExp('\r?\n','g'), '<br>');
2018-10-31 17:00:31 +01:00
var temp = document.createElement("div");
temp.innerText = spiffed;
this.textEditor.innerHTML = temp.innerText;
position(this.textEditor, caret)
this.textEditor.style.maxWidth = '900px';
2018-10-31 17:00:31 +01:00
}
2018-11-14 17:32:35 +01:00
notify(type, data)
{
switch (type)
{
case DataEvent.POST_UPDATED:
document.getElementById('submit-update').classList.add('icon-hide');
document.getElementById('submit-good').classList.remove('icon-hide');
document.getElementById('edit-update').classList.remove('submit-start');
document.getElementById('edit-update').classList.add('submit-cool');
2018-11-14 17:32:35 +01:00
setTimeout(f =>
{
document.getElementById('submit-update').classList.remove('icon-hide');
document.getElementById('submit-good').classList.add('icon-hide');
document.getElementById('edit-update').classList.add('submit-start');
document.getElementById('edit-update').classList.remove('submit-cool');
}, 2000);
break;
case DataEvent.POST_ADDED:
// do nothing
break;
case EditorEvent.EDITOR_UPLOAD_POST_IMAGE:
position(this.textEditor, this.caretPos);
var sel, range, pulled;
sel = window.getSelection(); //console.log(sel)
//console.log(note.message)
2018-11-14 17:32:35 +01:00
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();
break;
}
}
2018-10-31 17:00:31 +01:00
//--------------------------
// event handlers
//--------------------------
2018-11-14 17:32:35 +01:00
handleEditorOption(e)
{
2018-10-31 17:00:31 +01:00
e.preventDefault();
var self = this;
var sel, range, pulled;
sel = window.getSelection(); //console.log(sel)
2018-11-14 17:32:35 +01:00
if (sel.rangeCount)
{
2018-10-31 17:00:31 +01:00
range = sel.getRangeAt(0);
pulled = sel.getRangeAt(0).toString();
range.deleteContents();
2018-11-14 17:32:35 +01:00
switch (e.target.id)
{
case "edit-bold":
2018-10-31 17:00:31 +01:00
range.insertNode(document.createTextNode("**" + pulled + "**"));
break;
case "edit-italic":
2018-10-31 17:00:31 +01:00
range.insertNode(document.createTextNode("*" + pulled + "*"));
break;
case "edit-strikethrough":
2018-10-31 17:00:31 +01:00
range.insertNode(document.createTextNode("<del>" + pulled + "</del>"));
break;
case "edit-header1":
2018-10-31 17:00:31 +01:00
range.insertNode(document.createTextNode("# " + pulled));
break;
case "edit-header2":
2018-10-31 17:00:31 +01:00
range.insertNode(document.createTextNode("## " + pulled));
break;
case "edit-header3":
2018-10-31 17:00:31 +01:00
range.insertNode(document.createTextNode("### " + pulled));
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);
2018-11-14 17:32:35 +01:00
break
case "edit-link":
2018-10-31 17:00:31 +01:00
range.insertNode(document.createTextNode("[" + pulled + "](PASTE URL HERE)"));
break;
case "edit-delete":
this.emitEvent(EditorEvent.EDITOR_DELETE);
2018-10-31 17:00:31 +01:00
break
default:
//range.insertNode(document.createTextNode("[" + self.url + "](PASTE URL HERE)"));
break;
}
}
this.refresh()
}
}
export default TextEditor