JSFiddle - React, Tailwind, and code Playground

HTML

<div id="editor"></div>
<hr>
Click into the whitespgace in between the red lines. It will console log body as the node. Type and you will see you're clearly in the span.

<div id="container"></div>

<button id="boldbtn">bold</button>
<button id="italicbtn">italic</button>
<button id="underlinebtn">underline</button>

JavaScript

YUI().use('editor-base', function(Y) {

    var editor = new Y.EditorBase({
        content: '<span style="color: #FF0000;">This is a long test of s<br />omething or other.</span><br /><br /> Dav makes my life easier. '
    });

    //Add the BiDi plugin
    editor.plug(Y.Plugin.EditorBidi);
    editor.plug(Y.Plugin.ExecCommand);

    //Focusing the Editor when the frame is ready..
    editor.on('frame:ready', function() {
        this.focus();
    });
    
    editor.after( 'nodeChange', function( e ) {  
      //alert('nodeChanged');              
    });
    
    Y.one('#boldbtn').on('mouseup', function(){
       editor.execCommand('bold'); 
    });

    Y.one('#italicbtn').on('mouseup', function(){
       editor.execCommand('italic'); 
    });    

    Y.one('#underlinebtn').on('mouseup', function(){
       editor.execCommand('underline'); 
    }); 
    
    //Rendering the Editor.
    editor.render('#editor');

});