JSFiddle - React, Tailwind, and code Playground

by Amanda Williamson

HTML

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

<button id='add'>add</button>
<button id='change'>change and remove</button>

<!--
<ul>
    <li>Number One</li>
    <li>Number <strong>Two</strong></li>
    <li><em>Number</em> Three</li>
</ul>
<br />
<div id='target'></div>
<br />
<button id='copy'>copy</button>
<div id='one' contenteditable='true'>Hello World</div>
<div id='two'></div>
-->

CSS

svg {
    border: solid 1px;
    width: 300px;
    height: 300px;
}

#text-box {
    border: solid 1px red;
    width: 100px;
    height: 100px;
    top: 120px;
    left: 100px;
    position: relative;
    z-index: 10;
}

text {
    fill: green;
}

JavaScript

var svg = d3.select('body').append('svg');

d3.select('#add').on('click', function(){ new add(); });

function add(){
    var g, fo, textbox, text, rect, m1, click = false;
    var focus = true;

    svg.on('click', function() {
        //console.log(click);
        if(!click){
            g = svg.append('g');
            fo = g.append('foreignObject').attr('id', 'foreign-object');
            textbox = fo.append('xhtml:div').html('Hello World')
                .attr({ 
                    id: 'text-box',
                    contenteditable: 'true',
                    autofocus: 'autofocus',
                    resize: 'none'
                });
            text = g.append('text').text('text').attr({ x: 100, y: 100, id: 'text' });
            var bbox = text.node().getBBox();
            console.log('bbox', bbox);
            rect = g.append("rect")
                .attr("x", bbox.x - 5)
                .attr("y", bbox.y - 5)
                .attr("width", bbox.width + 10)
                .attr("height", bbox.height + 10)
                .style("fill", "transparent")
                .style("stroke", "#666")
                .style("stroke-width", "1.5px");
               
        } else {
            console.log('else');
        }
        click = true;
    });
    
    $('#change').on('click', function() {
        $('#text').html($('#text-box').html());
        $('#foreign-object').remove();
        var bbox = text.node().getBBox();
        console.log('change', bbox);
        rect.attr("width", bbox.width + 10)
            .attr("height", bbox.height + 10);
    });
    
    $('#text-box').keypress(function() {
        console.log('keypress');    
    });
}

/*
$(document).ready(function() {
    $('li').click(function() {
        $('#target').html($(this).html()); // displays normally       
        //$('#target').text($(this).html()); // shows html tags
        //$('#target').html($(this).text()); // no bold or italic       
       ...