Fipamo/brain/tools/ui/TextEditor.js

import * as DataEvent from '../events/DataEvent';
import DateUtils from '../utilities/DateUtils';
import
{
    position,
    offset
}
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 = '';
        let self = this;
        this.setInputs();
        window.addEventListener("scroll", f =>
        {
            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();
        window.scroll(0,0);
    }
    //--------------------------
    // 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', f =>
        {
            if (f.inputType == "insertParagraph")
            {
                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)
            }
            else
            {
                self.refresh()
            }
        })
    }
    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>');
        var temp = document.createElement("div");
        temp.innerText = spiffed;
        this.textEditor.innerHTML = temp.innerText;
        position(this.textEditor, caret)
        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(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)
                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 self = this;
        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