JSFiddle - React, Tailwind, and code Playground

by oroce

HTML

<div id="holder">
    <p>[Video] Lekérdezés 2.</p>

    <p>[Video] Lekérdezés 3.</p>

    <h2>Gyakorló feladat</h2>

    <p>Petra ír vmit</p>
</div>

JavaScript

var cb = function( e ){
    var selection = window.getSelection 
                                 ? window.getSelection() 
                                 : document.selection.createRange(); // FF : IE
            
            
    var newNode = $( "<span>" ).addClass( "pin-selection" );
    
    if( selection.getRangeAt ){ // thats for FF
        console.log( "selectionStartNode", selection.anchorNode, "selectionEndNode", selection.focusNode,"isTheSameNode", selection.anchorNode === selection.focusNode, "wholeObj", selection);
        if( selection.anchorNode === selection.focusNode ){ // the same node
            var range = selection.getRangeAt( 0 );
            if( range.startOffset === range.endOffset ){
                return;
            }
            newNode.data( "range", range );
            range.surroundContents( newNode[ 0 ] );
        }
        else{ // different nodes 
        
        }
    } 
    else { //and thats for IE7
        selection.pasteHTML( 
            $( "<div>" ).html( nodeNode.text( selection.htmlText ) ).html() 
        );
    }
};

$( "#holder" ).on( "mouseup", cb )