improved mention, checkbox without edit mode, documentation for html

src/components/Doc.js

@@ -404,6 +404,11 @@ class Doc extends React.Component {
       renderedNode = $(`<div>${html}</div>`)
     }
 
+    let checkboxes = renderedNode.find('input[type=checkbox]');
+    checkboxes.each((i, el) => {
+      el.replaceWith($(`<span contenteditable="false" idx="${i}">${el.outerHTML}</span>`)[0]);
+    })
+    renderedNode.find('input[type=checkbox]').attr('disabled', false);
     renderedNode.find('input[type=checkbox]').closest('li').addClass('m2-todo-list')
     renderedNode.find('input[checked]').closest('li').addClass('m2-todo-done')
 
@@ -514,8 +519,8 @@ class Doc extends React.Component {
         e.preventDefault()
       }
 
-      const s = sel.anchorNode.data && sel.anchorNode.data.substring(sel.anchorOffset - 50, sel.anchorOffset)
-      const autocompleteRegex = new RegExp("(?:^([#@:/][^\\s#@]+$))|(?:[\\s\u200B]([#@:/][^\\s#@]+$))")
+      const s = sel.anchorNode && sel.anchorNode.data && sel.anchorNode.data.substring(sel.anchorOffset - 50, sel.anchorOffset)
+      const autocompleteRegex = new RegExp("(?:^([#@:/][^\\s#@]*$))|(?:[\\s\u200B]([#@:/][^\\s#@]*$))")
       const slashCommands = ['/now', '/today', '/image'];
       if(autocompleteRegex.test(s)) {
         $('#m2-autocomplete').show();
@@ -743,13 +748,44 @@ class Doc extends React.Component {
           });
           this.oldSelectedBlock.replaceWith($(nodes.join('\n')));
 
+          bindCheckboxEvent(this, id);
+
         }
         this.setState({ doc }, () => {
           this.props.setDocData(this.state.allLines, this.state.doc);
         });
       }
     });
 
+    function bindCheckboxEvent(that, id) {
+      $(`#${id} input[type=checkbox]`).change(function() {
+        this.checked ? $(this).closest('li').addClass('m2-todo-done') : $(this).closest('li').removeClass('m2-todo-done');
+
+        const lines = [];
+        let idx = 0;
+        that.state.doc[id].split('\n')
+          .forEach(line => {
+            if(/-\s+\[[x\s]\]/.test(line)) {
+              if(idx == parseInt(this.parentElement.getAttribute('idx'))) {
+                if(this.checked) {
+                  line = line.replace(/-\s+\[\s\]/, '- [x]');
+                } else {
+                  line = line.replace(/-\s+\[x\]/, '- [ ]');
+                }
+              }
+              idx++;
+            }
+            lines.push(line);
+          })
+
+        that.state.doc[id] = lines.join('\n')
+
+        that.setState({ doc: that.state.doc }, () => {
+          that.props.setDocData(that.state.allLines, that.state.doc);
+        });
+      })
+    }
+
     $('#m2-doc').on('focusout', (e) => {
       const oldSelectedBlock = $('.m2-edit-mode');
       if(oldSelectedBlock[0]) {
@@ -777,6 +813,8 @@ class Doc extends React.Component {
           return renderedNode[0].outerHTML;
         });
         oldSelectedBlock.replaceWith($(nodes.join('\n')));
+
+        bindCheckboxEvent(this, id);
         this.setState({ doc }, () => {
           this.props.setDocData(this.state.allLines, this.state.doc);
         });

src/components/Doc.scss

@@ -49,6 +49,10 @@
     }
   }
 
+  input[type=checkbox] {
+    cursor: pointer;
+  }
+
   table.m2-edit-mode {
     font-family: monospace;
     font-size: 0.9rem;

src/components/MarkTwo.js

@@ -582,6 +582,16 @@ var success = "Text sandwiched by three backticks renders a code block";
 /image`}
 </pre>
 
+<h5>HTML</h5>
+<p>The markdown spec is not intended to completely replace HTML. If you'd like a particular tag or style, you can just include it as HTML and it will render.
+For example:
+</p>
+<pre>
+{`Render highlighted text with the mark tag like <mark>this</mark>
+And underlined text <u>like this</u>
+<center>This will be centered</center>`}
+</pre>
+
 <h5>Text Tricks</h5>
 <p>MarkTwo expands the strings <code>/today</code> and <code>/now</code> into the current date or date and time for your locale.
 Also, to make things easier to find later, <code>#hashtags</code> and <code>@mentions</code> autocomplete.

src/components/tryItNow.md

@@ -48,6 +48,10 @@ Supports standard markdown syntax to link to images. You can also upload new ima
 
 ![deception](/img/deception.jpg)
 
+#### Other HTML
+The markdown spec is not intended to completely replace HTML, which you can fall back to if you want a particular tag or style. For example you can highlight text with the `mark` tag <mark>like this</mark>, or underline with the `u` tag <u>like this</u>.
+<center><em>The center tag is also handy!</em></center>
+
 #### Advanced text entry
 - Automatic text expansion for `/now` and `/today`
 - Want to make sure you can find something later? #hashtags and @mentions autocomplete.