Update node content when toggling checkboxes

static/js/page_node.mjs

@@ -64,6 +64,7 @@ export class N2PageNodeUI extends CustomHTMLElement {
 
 		_mbus.subscribe('MARKDOWN_TOGGLE', () => this.showMarkdown(!this.showMarkdown()))
 		_mbus.subscribe('MARKDOWN_EDIT', ({ detail }) => this.editMarkdown(detail.data))
+		_mbus.subscribe('MARKDOWN_CHANGE_CHECKBOX', ({ detail }) => this.checkboxUpdated(detail.data))
 
 		this.elName.addEventListener('click', async () => this.renameNode())
 		this.elNodeContent.addEventListener('input', event => this.contentChanged(event))
@@ -288,6 +289,30 @@ export class N2PageNodeUI extends CustomHTMLElement {
 
 		return lines
 	}// }}}
+	// "marked" sends a messagebus event when checking/unchecking a checkbox.
+	// Updates node and content textarea.
+	checkboxUpdated(eventData) {// {{{
+		const checkbox = eventData.checkbox
+		const pos = eventData.position
+		const content = this.node.content()
+
+		// Basic validation to verify that Marked does what is known and expected at this writing.
+		const mdCheckboxStr = content.slice(pos.start, pos.end)
+		if (!mdCheckboxStr.match(/^\[[ xX]\] $/)) {
+			alert(`Checkbox string didn't pass validation: '${mdCheckboxStr}'`)
+			console.error(`Checkbox string didn't pass validation: '${mdCheckboxStr}'`)
+		}
+
+		// Node is modified with the new value. User has to save manually, otherwise other changes could be saved
+		// when a save wasn't expected.
+		const newValue =`[${checkbox.checked ? 'x' : ' '}] `
+		const modifiedContent = this.node.content().slice(0, pos.start) + newValue + this.node.content().slice(pos.end)
+		this.node.setContent(modifiedContent)
+
+		// Also update the textarea since the node model doesn't know about it.
+		this.elNodeContent.setRangeText(newValue, pos.start, pos.end, 'select')
+
+	}// }}}
 }
 customElements.define('n2-nodeui', N2PageNodeUI)