JSFiddle - React, Tailwind, and code Playground

by jakie8

HTML

<div id="editor"></div>

CSS

#editor {
    border: 1px solid #999;
    width: 300px;
    margin: 0 auto;
    padding: 10px;
    min-height: 300px;
}
.October-editor *{
    min-height: 1px;
    outline: none;
}
.October-editor p{
    display: block;
}

JavaScript

var October = October || (function (w, d) {

    var settings = {
        debug: true,
        element: null,
        modifier: 'ctrl',
        keys: {
            66: 'bold',
            73: 'italicize',
            85: 'underline'
        },
        tags: {
            inline: ['a', 'b', 'u', 'i'],
            selfClosing: ['hr','img'],
            block: ['pre','blockquote']
        }
    },
    cache = {
        cmd: false,
        focusedElement: null
    },
    _log = function (w) {
        if (settings.debug) {
            console.log(w);
        }
    },
    utils = {
        findNodes: function(element) {
            var nodeNames = {};
            while (element.parentNode) {
                nodeNames[element.nodeName] = true;
                element = element.parentNode;
                if (element.nodeName === 'A') {
                    nodeNames.url = element.href;
                }
            }

            return nodeNames;
        },
        isCommand: function(e, fnTrue, fnFalse){
            if((settings.modifier==='ctrl' && e.ctrlKey ) || 
               (settings.modifier==='cmd' && e.metaKey ) || 
               (settings.modifier==='auto' && (e.ctrlKey || e.metaKey) )
            ){
                return fnTrue.call();
            } else {
                return fnFalse.call();
            }
        },
        isModifier: function(e, fn){
            var w = e.which,
                cmd = settings.keys[w];
            if(cmd){
                return fn.call(null, cmd);
            }
        },
        deepExtend: function (destination, source) {
            for (var property in source) {
                if (source[property] && source[property].constructor && source[property].constructor === Object) {
                    destination[property] = destination[property] || {};
                    utils.deepExtend(destination[property], source[property]);
                } else {
                    destination[property] = source[property];
    ...