make checkboxes work in markdown

Author: zippy

.eslintrc

@@ -25,6 +25,7 @@
     "prefer-template": "off",
     "no-await-in-loop": "off",
     "no-empty": "off",
-    "no-nested-ternary": "off"
+    "no-nested-ternary": "off",
+    "prefer-arrow-callback": "off"
   }
 }

ui/src/elements/markdown-note.ts

@@ -1,7 +1,8 @@
 import { EntryRecord } from "@holochain-open-dev/utils";
 import { consume } from "@lit/context";
-import { css, html, LitElement } from "lit";
+import { css, html, LitElement, PropertyValueMap } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
+
 import {
   Workspace,
   DocumentStore,
@@ -142,7 +143,7 @@ export class MarkdownNote extends LitElement {
     if (this._renderDrawer && this.drawer) {
       this.drawer.show()
     }
- }
+  }
 
   @state()
   _workspaceName: string = "main";

ui/src/utils.ts

@@ -96,9 +96,21 @@ Marked.setOptions
   smartypants: false
 });
 
+Marked.setBlockRule(/\[([x ]*)\](.*)/, function x (execArr) {
+
+  // Don't use arrow function for this callback
+  // if you need Renderer's context, for example to `this.options`.
+  if (execArr) {
+    const checked = execArr[1];
+    const text = execArr[2];
+    return `<input type="checkbox" ${checked === "x" ?"checked":""}>${text}</input>`
+  }
+
+  return `<input type="checkbox"></input>`
+});
+
 export function sortByDescendantTimestamp(
   notes: EntryRecord<Document>[]
 ): Array<EntryRecord<Document>> {
   return notes.sort((a, b) => b.action.timestamp - a.action.timestamp);
 }
-