How to apply rounded borders to highlight/selection

http://stackoverflow.com/questions/24985529/how-to-apply-rounded-borders-to-highlight-selection

by Eduardo GarcĂ­a Sanz

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/rangy/1.2.3/rangy-core.js"></script>
<div id="editor">
var sum = function (a, b) {
    
    return a + b;
};
 
var total = sum(3664545765767676, 6575676767657657);
var popal = sum(3664545765767676, 6575676767657657);
 
alert(total);
</div>

CSS

::selection {
   background-color: transparent;
}

pre {
    margin: 0;
    font-size: 14px;
}

span {
    display: inline-block;
    line-height: 20px;
}

span.highlight {
    background: #ADD6FF;
}

span.begin {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

span.end {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

pre.merge-end > span:last-child {
    border-bottom-right-radius: 0;
}

pre.merge-end + pre > span:last-child {
    border-top-right-radius: 0;
}

pre.merge-begin > span:first-child {
    border-bottom-left-radius: 0;
}

pre.merge-begin + pre > span:first-child {
    border-top-left-radius: 0;
}

JavaScript

rangy.init();

var editor = $('#editor');

var format = function () {
    
    var before = -1;
    var html = $.trim(editor.text())
    .split("\n")
    .reverse()
    .map(function (line) {
        
        var a = line.length === before ? 'merge-end' : '';
        before = line.length;
        
        return '<pre class="' + a + '"><span>' + line.split('').join('</span><span>') + '</span></pre>';
    })
    .reverse()
    .join('');
    
    editor.html(html);
};

var getSelectedNodes = function () {
    
    var i;
    var nodes = [];
    var selection = rangy.getSelection();
    
    for (i = 0; i < selection.rangeCount; ++i) {
        
        selection
        .getRangeAt(i)
        .getNodes()
        .forEach(function (node) {
        
            if ($(node).is('span')) {
                
                nodes.push(node);
            }
        });
    }
    
    return nodes;
};

var highlight = function (nodes, beforeNode) {

    var currentNode = $(nodes.shift()).addClass('highlight');
    var currentParent = currentNode.parent();
    
    if (beforeNode) {
        
        var beforeParent = beforeNode.parent();
        
        if (currentParent.get(0) !== beforeParent.get(0)) {
        
            currentNode.addClass('begin');
            beforeNode.addClass('end');
            beforeParent.addClass('merge-begin');
        }
        
    } else {
        
        currentNode.addClass('begin');
    }
    
    if (nodes.length) {
        
        highlight(nodes, currentNode);
        
    } else {
        
        currentNode.addClass('end');
    }
};

format();

$(document).on('mouseup', function () {

    $('.highlight').removeClass('highlight begin end');
    highlight(getSelectedNodes());
});