Add markdown task list plugin (#400)

frontend/package.json

@@ -58,6 +58,7 @@
 		"markdown-it-incremental-dom": "^2.1.0",
 		"markdown-it-prism": "^2.3.0",
 		"markdown-it-sanitizer": "^0.4.3",
+		"markdown-it-task-checkbox": "^1.0.6",
 		"match-sorter": "^6.3.3",
 		"moment": "^2.30.1",
 		"notistack": "^3.0.1",

frontend/src/components/editor/Preview.tsx

@@ -9,12 +9,9 @@ import MarkdownIt from "markdown-it";
 import { toHtml } from "hast-util-to-html";
 import markdownItKatex from "@vscode/markdown-it-katex";
 import { refractor } from "refractor";
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
 import markdownItIncrementalDOM from "markdown-it-incremental-dom";
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
 import markdownItSanitizer from "markdown-it-sanitizer";
+import markdownItTaskCheckbox from "markdown-it-task-checkbox";
 import * as IncrementalDOM from "incremental-dom";
 import "./editor.css";
 import "./preview.css";
@@ -35,6 +32,7 @@ const md = new MarkdownIt({
 		}
 	},
 })
+	.use(markdownItTaskCheckbox)
 	.use(markdownItIncrementalDOM, IncrementalDOM, {
 		incrementalizeDefaultRules: false,
 	})

frontend/src/components/editor/preview.css

@@ -1033,13 +1033,11 @@ body[data-color-mode*="light"] {
 			display: none;
 		}
 	}
-	.task-list-item-checkbox,
-	.contains-task-list input[type="checkbox"] {
+	.task-list input[type="checkbox"] {
 		margin: 0 0.2em 0.25em -1.6em;
 		vertical-align: middle;
 	}
-	.contains-task-list:dir(rtl) .task-list-item-checkbox,
-	.contains-task-list:dir(rtl) input[type="checkbox"] {
+	.task-list:dir(rtl) input[type="checkbox"] {
 		margin: 0 -1.6em 0.25em 0.2em;
 	}
 }

frontend/src/global.d.ts

@@ -0,0 +1,3 @@
+declare module "markdown-it-incremental-dom";
+declare module "markdown-it-sanitizer";
+declare module "markdown-it-task-checkbox";