Feature/858/checkboxtoggle

src/components/EditorMarkdownIt.vue

@@ -29,7 +29,7 @@ export default {
 		})
 
 		md.use(require('markdown-it-task-checkbox'), {
-			disabled: true,
+			disabled: false,
 			liClass: 'task-list-item',
 		})
 
@@ -41,6 +41,7 @@ export default {
 
 	watch: {
 		value: 'onUpdate',
+		html: 'onChange',
 	},
 
 	created() {
@@ -52,6 +53,40 @@ export default {
 		onUpdate() {
 			this.html = this.md.render(this.value)
 		},
+
+		onChange() {
+			const markdown = this.value
+			const updateFunction = this.updateMarkdown
+			const items = document.getElementsByClassName('task-list-item')
+			for (let i = 0; i < items.length; ++i) {
+				items[i].addEventListener('click', function() {
+					const wasChecked = !this.children[0].checked
+
+					let idOfCheckbox = 0
+					const markdownLines = markdown.split('\n')
+					markdownLines.forEach((line, i) => {
+						if (line.trim().startsWith('- [x]') || line.trim().startsWith('- [ ]')) {
+							if ('cbx_' + idOfCheckbox === this.children[0].id) {
+								if (wasChecked) {
+									markdownLines[i] = markdownLines[i].replace('[x]', '[ ]')
+									markdownLines[i] = markdownLines[i].replace('[X]', '[ ]')
+								} else {
+									markdownLines[i] = markdownLines[i].replace('[ ]', '[x]')
+								}
+							}
+							idOfCheckbox++
+						}
+					})
+					updateFunction(markdownLines.join('\n'))
+				})
+			}
+		},
+
+		updateMarkdown(newMarkdown) {
+			this.$emit('input', newMarkdown)
+			this.onUpdate()
+		},
+
 		setImageRule(id) {
 			// https://github.com/markdown-it/markdown-it/blob/master/docs/architecture.md#renderer
 			// Remember old renderer, if overridden, or proxy to default renderer

src/components/Note.vue

@@ -30,7 +30,11 @@
 				<div v-show="!note.content" class="placeholder">
 					{{ preview ? t('notes', 'Empty note') : t('notes', 'Write …') }}
 				</div>
-				<ThePreview v-if="preview" :value="note.content" :noteid="noteId" />
+				<ThePreview v-if="preview"
+					:value="note.content"
+					:noteid="noteId"
+					@input="onEdit"
+				/>
 				<TheEditor v-else
 					:value="note.content"
 					:noteid="noteId"