Yet another approach #2
Description
You could implement this as a contentEditable document and apply regex string replacements to innerHTML to create real HTML <input type=checkbox> checkboxes.
Example:
<body id=t contenteditable=true oninput="localStorage.t=t.innerHTML=t.innerHTML.replace(/\[ ?\]/g,'<input type=checkbox onchange=this.removeAttribute(\'checked\');if(this.checked)this.setAttribute(\'checked\',\'\');localStorage.t=t.innerHTML>')"onload=t.innerHTML=localStorage.t||''>Issues:
- You must copy the
checkedproperty of each checkbox into itscheckedattribute so that persistence of the document'sinnerHTMLcaptures the checkbox states. - Modifying
innerHTMLresets the cursor position. I haven't fixed this, so for the example you must move the cursor to the end every time you enter text.