JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div contenteditable="true" >
    <div style="height:100px;">Write here..</div>
    <table contenteditable="true" style="-webkit-user-select:auto;-webkit-user-modify:read-write;" class="table table-bordered" id="tbl1">
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
    <table class="table table-bordered" id="tbl2">
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
</div>

JavaScript

$(document).ready(function(){
   $('#tbl1').selectable({
        filter: "td"
    }).on('click',function(){
        $(this).attr('contenteditable','true');
    });
});