fipamo/brain/utils/ui/TextEditor.js

import * as DataEvent from '../events/DataEvent';
import DateUtils from '../tools/DateUtils';
import { position } from 'caret-pos';
import EventEmitter from '../events/EventEmitter';
import * as EditorEvent from '../events/EditorEvent';
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
	 */
	//--------------------------
	// constructor
	//--------------------------
	constructor(textEditor, scrollLimit) {
		super();
		hljs.initHighlightingOnLoad();
		this.dateUtils = new DateUtils();
		this.textEditor = textEditor;
		this.fixLimit = scrollLimit;
		this.caretPos = null;
		this.url = '';
		this.setInputs();
		window.addEventListener('scroll', () => {
			var fixLimit = this.fixLimit;
			if (window.pageYOffset >= fixLimit) {
				document.getElementById('edit-control').style.position = 'fixed';
			} else {
				document.getElementById('edit-control').style.position = 'relative';
			}
		});
		this.refresh();
	}
	//--------------------------
	// methods
	//--------------------------
	setInputs() {
		let self = this;
		var editorButtons = document.querySelectorAll('.editor-button');
		for (var i = 0, length = editorButtons.length; i < length; i++) {
			editorButtons[i].addEventListener('click', e => this.handleEditorOption(e), 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 = hljs.highlight('markdown', this.textEditor.innerText).value;
		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) {
			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');
				setTimeout(() => {
					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;
				//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();
				break;
		}
	}
	//--------------------------
	// event handlers
	//--------------------------
	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));
					break;
				case 'edit-header2':
					range.insertNode(document.createTextNode('## ' + pulled));
					break;
				case 'edit-header3':
					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);
					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;
			}
		}
		this.refresh();
	}
}
export default TextEditor;