add 'markdown-it-task-checkbox' dependency to render checkboxes

nextcloud · Dec 5, 2021 · 6bada74 · 6bada74
1 parent 816717c
commit 6bada74
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 4 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -23,6 +23,7 @@
 		"diff": "^5.0.0",
 		"easymde": "^2.15.0",
 		"markdown-it": "^12.2.0",
+		"markdown-it-task-checkbox": "^1.0.6",
 		"vue": "^2.6.14",
 		"vue-fragment": "1.5.1",
 		"vue-material-design-icons": "^4.13.0",

diff --git a/src/components/EditorMarkdownIt.vue b/src/components/EditorMarkdownIt.vue
@@ -17,11 +17,19 @@ export default {
 	},
 
 	data() {
+
+		const md = new MarkdownIt({
+			linkify: true,
+		})
+
+		md.use(require('markdown-it-task-checkbox'), {
+			disabled: true,
+			liClass: 'task-list-item',
+		})
+
 		return {
 			html: '',
-			md: new MarkdownIt({
-				linkify: true,
-			}),
+			md,
 		}
 	},
 
@@ -127,5 +135,15 @@ export default {
 	& table td:empty::after {
 		content: '\00a0';
 	}
+
+	.task-list-item {
+		list-style-type: none;
+		input {
+			min-height: initial !important;
+		}
+		label {
+			cursor: default;
+		}
+	}
 }
 </style>