JSFiddle - React, Tailwind, and code Playground

by ryanttb

HTML

<label>
    <input id="no-edits" type="checkbox" name="edits" value="no" />Hide edits</label>
<label>
    <input id="linebreak-emily" type="checkbox" name="linebreak" value="emily" />Emily's line breaks</label>
<section id="loved">
     <h1>If those I loved were lost</h1>

</section>
<section id="sister">
     <h1>One Sister have I in the house</h1>
</section>

<section id="safe">
    <h1>Safe in their Alabaster Chambers</h1>
</section>

CSS

.line {
    display: block;
}
br {
    display: none;
}
ins:before {
    content:"(";
    font-weight: bold;
}
ins:after {
    content:")";
    font-weight: bold;
}
rt {
    font-size: 12px;
}
.no-edits ins, .no-edits del, .no-edits rt {
    display: none;
}
.linebreak-emily span, .linebreak-emily br.emily {
    display: inline;
}

span.emily-br {
    display: none;
}

.linebreak-emily span.author-br {
    display: none;
}
.linebreak-emily span.emily-br, .linebreak-emily span.emily-br br {
    display: inline;
}

JavaScript

String.prototype.splice = function (idx, rem, s) {
    return (this.slice(0, idx) + s + this.slice(idx + Math.abs(rem)));
};


var loved = [{
    id: 7,
    stanza: 23,
    number: 1,
    type: "line",
    text: "If those I loved were lost,",
    edits: [{
        id: 8,
        start_edit_id: 7,
        start_offset: 16,
        type: "app",
        subtype: "division"
    },{
        id: 21,
        start_edit_id: 7,
        start_offset: 27,
        type: "app",
        subtype: "nodivision"
    }]
}, {
    id: 11,
    stanza: 23,
    number: 2,
    type: "line",
    text: "the crier voice would tell me -",
    edits: [{
        id: 12,
        number: 1,
        start_edit_id: 11,
        start_offset: 9,
        type: "add",
        subtype: "reading",
        text: "'s"
    }, {
        id: 12,
        number: 2,
        start_edit_id: 11,
        start_offset: 9,
        type: "app",
        subtype: "division"
    }, {
        id: 13,
        number: 1,
        start_edit_id: 11,
        start_offset: 10,
        type: "del",
        subtype: "canceled",
        text: "would"
    },{
        id: 14,
        number: 12,
        start_edit_id: 11,
        start_offset: 10,
        type: "add",
        subtype: "alternate",
        original_text: "voice",
        text: "note"
    },{
        id: 15,
        start_edit_id: 11,
        start_offset: 15,
        type: "app",
        subtype: "division"
    }]
}, {
    id: 16,
    stanza: 23,
    number: 3,
    type: "line",
    text: "If those I loved were found,",
    edits: [{
        id: 17,
        start_edit_id: 16,
        start_offset: 16,
        type: "app",
        subtype: "division"
    },{
        id: 22,
        start_edit_id: 16,
        start_offset: 28,
        type: "app",
        subtype: "nodivision"
    }]
}, {
    id: 18,
    stanza: 23,
    number: 4,
    type: "line",
    text: "the bells of Ghent would ring,",
    edits: [{
        id: 19,
        start_edit_id: 18,
       ...