Fix todo checkboxes

editor/src/editor.js

@@ -219,6 +219,7 @@ function Editor(holder, input) {
         if (text === undefined) {
             return;
         }
+
         if (!scope) {
             scope = editor.scope || {}
         }
@@ -264,9 +265,10 @@ function Editor(holder, input) {
     holder.$listEditor = editor
     editor.scope = {}
 
-    $(holder).find('.content input[type="checkbox"]').on('click', function (event) {
+    $(holder).on('click', '.content input[type="checkbox"]', function (event) {
         let that = this
-        let id = $(this).closest('.list-item').data('id')
+        let li = $(this).parents('.list-item');
+        let id = li.attr('data-id')
         editor.update(id, function (item, prev, next) {
             if (that.checked) {
                 item.text = item.text.replace('#[[TODO]]', '#[[DONE]]')
@@ -275,8 +277,7 @@ function Editor(holder, input) {
             }
             return item
         });
-        event.stopPropagation()
-        return false
+        return true
     })
 
     editor.on('change', function () {
@@ -491,7 +492,6 @@ function Editor(holder, input) {
     })
 }
 
-let timeout = null;
 let searchInput = document.getElementById('search-input');
 search(searchInput).then(searcher => {
     let showSearch = _.debounce(function (searcher) {

list-editor/index.js

@@ -52,7 +52,7 @@ function editor(root, inputData, options) {
 
     function copy(element, opt) {
         let item = $(element).parents('.list-item')
-        let id = item.data('id')
+        let id = item.attr('data-id')
 
         if (opt.recursive) {
             return saveTree(id)
@@ -65,7 +65,7 @@ function editor(root, inputData, options) {
 
     function zoomin(element, opt) {
         let item = $(element).parents('.list-item')
-        let id = item.data('id')
+        let id = item.attr('data-id')
         return new Promise(function (resolve, reject) {
             resolve(id);
         });
@@ -134,7 +134,7 @@ function editor(root, inputData, options) {
 
     function newItem(value) {
         let el = $('<div class="list-item">')
-            .data('id', value.id)
+            .attr('data-id', value.id)
             .data('indented', value.indented)
             .css('margin-left', (value.indented * 32) + 'px')
         let line = $('<div class="line">')
@@ -177,7 +177,8 @@ function editor(root, inputData, options) {
                 hasChildren = next && (value.indented < next.indented)
             }
 
-            let $li = $(li).data('id', value.id)
+            let $li = $(li)
+                .attr('data-id', value.id)
                 .toggleClass('selected', cursor.atPosition(index))
                 .toggleClass('selection-first', selection.isSelectedFirst(index))
                 .toggleClass('selection-last', selection.isSelectedLast(index))
@@ -185,10 +186,10 @@ function editor(root, inputData, options) {
                 .toggleClass('hidden', value.indented >= hideLevel)
                 .toggleClass('border', value.indented >= 1)
                 .css('margin-left', (value.indented * 32) + 'px')
-                .find('.content')
+
             value.hidden = value.indented >= hideLevel
 
-            options.transform(value.text, $li, value.id, EDITOR)
+            options.transform(value.text, $li.find('.content'), value.id, EDITOR)
 
             if (value.indented < hideLevel) {
                 if (value.fold !== 'open') {
@@ -202,7 +203,7 @@ function editor(root, inputData, options) {
                 .toggleClass('open', value.fold === 'open')
                 .toggleClass('no-children', !hasChildren)
 
-            $(li).toggleClass('no-children', !hasChildren)
+            $li.toggleClass('no-children', !hasChildren)
                 .toggleClass('open', value.fold === 'open')
         });
 
@@ -262,12 +263,12 @@ function editor(root, inputData, options) {
         let startID = null;
 
         drake.on('drag', function (el, source) {
-            startID = $(el).data('id')
+            startID = $(el).attr('data-id')
         })
 
 
         drake.on('drop', function (el, target, source, sibling) {
-            let stopID = $(sibling).data('id')
+            let stopID = $(sibling).attr('data-id')
             if (startID === stopID) {
                 return
             }
@@ -293,7 +294,7 @@ function editor(root, inputData, options) {
 
         let text = element.val()
         $(element).closest('.list-item').removeClass('editor');
-        store.update(element.data('id'), (value) => {
+        store.update(element.attr('data-id'), (value) => {
             return _.merge(value, {
                 text: text
             })
@@ -305,7 +306,7 @@ function editor(root, inputData, options) {
         }
 
         let $span = $('<div class="content">');
-        options.transform(text, $span, element.data('id'), EDITOR)
+        options.transform(text, $span, element.attr('data-id'), EDITOR)
         element.replaceWith($span);
         trigger('stop-editing', currentEditor[0])
         editing = false
@@ -479,6 +480,8 @@ function editor(root, inputData, options) {
     })
 
     $(root).on('click', '.content', function (event) {
+        if ($(event.target).hasClass('checkbox')) return true;
+
         let currentIndex = $(root).children('div.list-item').index($(this).parents('.list-item')[0])
         if (cursor.atPosition(currentIndex) && currentEditor !== null && currentEditor.closest('.list-item')[0] === this) {
             return true
@@ -506,7 +509,7 @@ function editor(root, inputData, options) {
         let item = $(this).parents('.list-item')
         let elements = $(root).children('div.list-item');
         let index = elements.index(item)
-        store.update(item.data('id'), function (item) {
+        store.update(item.attr('data-id'), function (item) {
             item.fold = open ? 'open' : 'closed'
             return item
         })