SO-33594736

by InnovativeDave

HTML

<div id="styles">
        <label>Font-size: <select data-property="font-size">
            <option disabled>
                Select font-size:
            </option>
            <option>
                smaller
            </option>
            <option>
                10px
            </option>
            <option>
                12px
            </option>
            <option>
                14px
            </option>
            <option>
                16px
            </option>
            <option>
                18px
            </option>
            <option>
                20px
            </option>
            <option>
                larger
            </option>
        </select></label>
    </div>
    <div>
        <h3>Paste text in the field below to divide text into paragraphs..</h3>
        <textarea id="textarea1" placeholder=
        "Type text here, then press the button below." rows="5">
</textarea><br>
        <br>
        <button id="go">Divide Text into Paragraphs</button>
    </div>
    <div>
        <h3 align="right">Divided Text Will Appear Below:</h3>
        <hr>
        <div id="content"></div>
    </div>

CSS

#text_land {
    border: 1px solid #ccc;
    padding: 25px;
    margin-bottom: 30px;
}

textarea {
    width: 95%;
}

label {
    display: block;
    width: 50%;
    clear: both;
    margin: 0 0 .5em;
}

label select {
    width: 50%;
    float: right;
}

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body {
    font-family: monospace;
    font-size: 1em;
}

h3 {
    margin: 1.2em 0;
}

div {
    margin: 1.2em;
}

textarea {
    width: 100%;
}

button {
    padding: .5em;
}

p {
    padding: 1.2em .5em;
    margin: 1.4em 0;
    border: 1px dashed #aaa;
}

JavaScript

$(function() {
    $('select').on('change', function() {
        var targets = $('p'),
            property = this.dataset.property;
        targets.css(property, this.value);
    }).prop('selectedIndex', 0);
});
var btn = document.getElementById('go'),
    textarea = document.getElementById('textarea1'),
    content = document.getElementById('content'),
    chunkSize = 100;
btn.addEventListener('click', initialDistribute);
content.addEventListener('keyup', handleKey);
content.addEventListener('paste', handlePaste);

function initialDistribute() {
    var text = textarea.value;
    while (content.hasChildNodes()) {
        content.removeChild(content.lastChild);
    }
    rearrange(text);
}

function rearrange(text) {
    var chunks = splitText(text, false);
    chunks.forEach(function(str, idx) {
        para = document.createElement('P');
        para.setAttribute('contenteditable', true);
        para.textContent = str;
        content.appendChild(para);
    });
}

function handleKey(e) {
    var para = e.target,
        position,
        key, fragment, overflow, remainingText;
    key = e.which || e.keyCode || 0;
    if (para.tagName != 'P') {
        return;
    }
    if (key != 13 && key != 8) {
        redistributeAuto(para);
        return;
    }
    position = window.getSelection().getRangeAt(0).startOffset;
    if (key == 13) {
        fragment = para.lastChild;
        overflow = fragment.textContent;
        fragment.parentNode.removeChild(fragment);
        remainingText = overflow + removeSiblings(para, false);
        rearrange(remainingText);
    }
    if (key == 8 && para.previousElementSibling && position == 0) {
        fragment = para.previousElementSibling;
        remainingText = removeSiblings(fragment, true);
        rearrange(remainingText);
    }
}

function handlePaste(e) {
    if (e.target.tagName != 'P') {
        return;
    }
    overflow = e.target.textContent + removeSiblings(fragment, true);
   ...