JSFiddle - React, Tailwind, and code Playground

by enyojs

JavaScript

enyo.kind({
    name: "MySample",
    components: [
        {kind:"onyx.InputDecorator", style:"width:100px; overflow:hidden;", components: [
            {kind: "onyx.RichText", value:"foo", style:"white-space:nowrap;", onkeyup:"input", onfocus:"input", allowHtml:true}
        ]},
        {name:"debug", allowHtml:true}
    ],
    input: function(inSender, inEvent) {
        var r = window.getSelection().getRangeAt(0);
        inSender.setValue(inSender.node.textContent);
        var c = getCaretPosition(inSender.node)-1;
        var t = inSender.node.textContent;
        var s = t.substring(0,c) + "<span style='color:red;'>" + t.substring(c,c+1) + "</span>" + t.substring(c+1);
        inSender.setValue(s);
        window.getSelection().addRange(r);
        this.$.debug.setContent(c + "<br>" + t + "<br>" + s + "<br>" + r);
    }
});

function getCaretPosition(editableDiv) {
    var caretPos = 0, containerEl = null, sel, range;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.rangeCount) {
            range = sel.getRangeAt(0);
            if (range.commonAncestorContainer.parentNode == editableDiv) {
                caretPos = range.endOffset;
            }
        }
    } else if (document.selection && document.selection.createRange) {
        range = document.selection.createRange();
        if (range.parentElement() == editableDiv) {
            var tempEl = document.createElement("span");
            editableDiv.insertBefore(tempEl, editableDiv.firstChild);
            var tempRange = range.duplicate();
            tempRange.moveToElementText(tempEl);
            tempRange.setEndPoint("EndToEnd", range);
            caretPos = tempRange.text.length;
        }
    }
    return caretPos;
}


new MySample({fit:true}).write();