Obsidian Parser (Checkboxes)

quartz/plugins/parsers/custom/default.ts

@@ -29,7 +29,7 @@ export const CustomDefault: QuartzParserPlugin<Partial<Options>> = (userOpts) =>
       }
       return plug
     },
-    htmlPlugins(_ctx) {
+    htmlPlugins() {
       const plug: Pluggable = () => {}
       return plug
     },

quartz/plugins/parsers/obsidian/arrows.ts

@@ -58,7 +58,7 @@ export const ObsidianArrow: QuartzParserPlugin<Partial<Options>> = (userOpts) =>
       }
       return plug
     },
-    htmlPlugins(_ctx) {
+    htmlPlugins() {
       const plug: Pluggable = () => {}
       return plug
     },

quartz/plugins/parsers/obsidian/callouts.ts

@@ -187,7 +187,7 @@ export const ObsidianCallouts: QuartzParserPlugin<Partial<Options>> = (userOpts)
       }
       return plug
     },
-    htmlPlugins(_ctx) {
+    htmlPlugins() {
       const plug: Pluggable = () => {}
       return plug
     },

quartz/plugins/parsers/obsidian/checkboxes.ts

@@ -0,0 +1,67 @@
+import { QuartzParserPlugin } from "../../types"
+import { ReplaceFunction, findAndReplace as mdastFindReplace } from "mdast-util-find-and-replace"
+// @ts-ignore
+import checkboxScript from "../../components/scripts/checkbox.inline.ts"
+import { visit } from "unist-util-visit"
+import { JSResource } from "../../../util/resources"
+import { Element, Literal, Root as HtmlRoot } from "hast"
+import { Root } from "mdast"
+import { Pluggable } from "unified"
+
+interface Options {
+  enabled: Boolean
+}
+
+const defaultOptions: Options = {
+  enabled: true,
+}
+
+export const ObsidianCheckboxes: QuartzParserPlugin<Partial<Options>> = (userOpts) => {
+  const opts: Options = { ...defaultOptions, ...userOpts }
+  return {
+    name: "ObsidianCheckboxes",
+    textTransform(_ctx, src: string | Buffer) {
+      if (src instanceof Buffer) {
+        src = src.toString()
+      }
+      return src
+    },
+    markdownPlugins(_ctx) {
+      const plug: Pluggable = (tree: Root, _file) => {
+        const replacements: [RegExp, string | ReplaceFunction][] = []
+        mdastFindReplace(tree, replacements)
+      }
+      return plug
+    },
+    htmlPlugins() {
+      if (opts.enabled) {
+        const plug: Pluggable = (tree: HtmlRoot, _file) => {
+          visit(tree, "element", (node) => {
+            if (node.tagName === "input" && node.properties.type === "checkbox") {
+              const isChecked = node.properties?.checked ?? false
+              node.properties = {
+                type: "checkbox",
+                disabled: false,
+                checked: isChecked,
+                class: "checkbox-toggle",
+              }
+            }
+          })
+        }
+        return plug
+      }
+      return {} as Pluggable
+    },
+    externalResources() {
+      if (opts.enabled) {
+        const js: JSResource = {
+          script: checkboxScript,
+          loadTime: "afterDOMReady",
+          contentType: "inline",
+        }
+        return js
+      }
+      return {} as JSResource
+    },
+  }
+}

quartz/plugins/parsers/obsidian/highlights.ts

@@ -45,7 +45,7 @@ export const ObsidianHighlights: QuartzParserPlugin<Partial<Options>> = (userOpt
       }
       return plug
     },
-    htmlPlugins(_ctx) {
+    htmlPlugins() {
       const plug: Pluggable = () => {}
       return plug
     },

quartz/plugins/parsers/obsidian/index.ts

@@ -1,5 +1,6 @@
 export { ObsidianArrow } from "./arrows"
 export { ObsidianCallouts } from "./callouts"
+export { ObsidianCheckboxes } from "./checkboxes"
 export { ObsidianComments } from "./comments"
 export { ObsidianHighlights } from "./highlights"
 export { ObsidianMermaid } from "./mermaid"

quartz/plugins/parsers/obsidian/mermaid.ts

@@ -24,7 +24,7 @@ export const ObsidianMermaid: QuartzParserPlugin<Partial<Options>> = (userOpts)
       }
       return src
     },
-    markdownPlugins(_ctx) {
+    markdownPlugins() {
       const plug: Pluggable = (tree: Root, _file) => {
         if (opts.enabled) {
           visit(tree, "code", (node: Code) => {

quartz/plugins/parsers/obsidian/wikilinks.ts

@@ -156,7 +156,7 @@ export const ObsidianWikilinks: QuartzParserPlugin<Partial<Options>> = (userOpts
       }
       return plug
     },
-    htmlPlugins(_ctx) {
+    htmlPlugins() {
       const plug: Pluggable = () => {}
       return plug
     },

quartz/plugins/transformers/markdown.ts

@@ -38,6 +38,7 @@ import rehypeAutolinkHeadings from "rehype-autolink-headings"
 import {
   ObsidianArrow,
   ObsidianCallouts,
+  ObsidianCheckboxes,
   ObsidianComments,
   ObsidianHighlights,
   ObsidianMermaid,
@@ -214,13 +215,16 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<ObsidianO
     htmlPlugins() {
       const plugins: PluggableList = [rehypeRaw]
 
-      plugins.push(() => {})
+      plugins.push(ObsidianCheckboxes({ enabled: opts.enableCheckbox }).htmlPlugins())
 
       return plugins
     },
     externalResources() {
       const js: JSResource[] = []
 
+      js.push(
+        ObsidianCheckboxes({ enabled: opts.enableCheckbox }).externalResources() as JSResource,
+      )
       js.push(ObsidianCallouts({ enabled: opts.callouts }).externalResources() as JSResource)
       js.push(ObsidianMermaid({ enabled: opts.mermaid }).externalResources() as JSResource)
 

quartz/plugins/types.ts

@@ -54,6 +54,6 @@ export type QuartzParserPluginInstance = {
   name: string
   textTransform: (ctx: BuildCtx, src: string | Buffer) => string | Buffer
   markdownPlugins: (ctx: BuildCtx) => Pluggable
-  htmlPlugins: (ctx: BuildCtx) => Pluggable
+  htmlPlugins: () => Pluggable
   externalResources: () => JSResource | string
 }