Add clickable todos (#283)

src/components/markdown-renderer/replace-components/task-list/task-list-replacer.tsx

@@ -0,0 +1,33 @@
+import React, { ReactElement } from 'react'
+import { DomElement } from 'domhandler'
+import { ComponentReplacer, SubNodeConverter } from '../ComponentReplacer'
+
+export class TaskListReplacer implements ComponentReplacer {
+  content: string
+  onTaskCheckedChange: (lineInMarkdown: number, checked: boolean) => void
+
+  constructor (content: string, onTaskCheckedChange: (i: number, checked: boolean) => void) {
+    this.content = content
+    this.onTaskCheckedChange = onTaskCheckedChange
+  }
+
+  handleCheckboxChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
+    const lineNum = Number(event.currentTarget.dataset.line)
+    this.onTaskCheckedChange(lineNum, event.currentTarget.checked)
+  }
+
+  getReplacement (node: DomElement, index:number, subNodeConverter: SubNodeConverter): (ReactElement|undefined) {
+    if (node.attribs?.class === 'task-list-item-checkbox') {
+      return (
+        <input
+          className="task-list-item-checkbox"
+          type="checkbox"
+          checked={node.attribs.checked !== undefined}
+          onChange={this.handleCheckboxChange}
+          data-line={node.attribs['data-line']}
+          key={`task-list-item-checkbox${node.attribs['data-line']}`}
+        />
+      )
+    }
+  }
+}