JSFiddle - React, Tailwind, and code Playground

by the_archer

HTML

<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://backbonejs.org/backbone-min.js"></script>
<script src="https://rawgit.com/mozilla/localForage/master/dist/localforage.min.js"></script>
<script src="https://rawgit.com/mozilla/localForage-backbone/master/dist/localforage.backbone.min.js"></script>
<body>
 
<div class="dd" id="nestable3">
    <ol class="dd-list"></ol>
</div>
</body>

<script type="text/template" id="item-template">
    <div class="dd3-content"><%=content%></div>
</script>

JavaScript

$(document).ready(function () {
    localforage.setDriver('localStorageWrapper');
    var Item = Backbone.Model.extend({
        sync: Backbone.localforage.sync('Item'),
        
        defaults: {
            content: 'Test',
        },

        empty: function () {
            this.save({
                content: ''
            });
        }
    });

    var TodoList = Backbone.Collection.extend({
        model: Item,
        sync: Backbone.localforage.sync('ItemCollection')
    });
    
    var Todos = new TodoList();

    var TodoView = Backbone.View.extend({
        tagName: "li",
        template: _.template($('#item-template').html()),

        events: {
            "click > .dd3-content": "enableEdit",
            "blur > .dd3-content": "disableEdit",
            "keypress .dd3-content": "handleKeyboardShortcuts"
        },

        initialize: function () {
            this.listenTo(this.model, 'change', this.render);
            this.listenTo(this.model, 'destroy', this.remove);
        },

        render: function () {
            $(this.el).attr('data-id', this.model.get('id')).addClass('dd-item dd3-item');
            this.$el.html(this.template(this.model.toJSON()));
            return this;
        },

        // Toggle the `"done"` state of the model.
        enableEdit: function () {
            var editableArea = $(this.el).children('.dd3-content');
            editableArea.attr("contenteditable", "true");
            return editableArea;
        },

        disableEdit: function () {
            var editableArea = $(this.el).children('.dd3-content');
            editableArea.attr("contenteditable", "false");
            return editableArea;
        },

        focusEditor: function () {
            var editableArea = this.enableEdit();
            editableArea.focus();
            setEndOfContenteditable(editableArea.get(0));
        },

        handleKeyboardShortcuts: function (e) {
            console.log(this);
            if (e.keyCode ==...