feat: support checkbox (closes #646) (#799)

* feat: support checkbox

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>

* chore: apply review from jacky

---------

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>
This commit is contained in:
Aaron Pham 2024-02-05 01:19:25 -05:00 committed by GitHub
parent 90725688a7
commit e58c217de1
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 53 additions and 0 deletions

View file

@ -0,0 +1,23 @@
import { getFullSlug } from "../../util/path"
const checkboxId = (index: number) => `${getFullSlug(window)}-checkbox-${index}`
document.addEventListener("nav", () => {
const checkboxes = document.querySelectorAll(
"input.checkbox-toggle",
) as NodeListOf<HTMLInputElement>
checkboxes.forEach((el, index) => {
const elId = checkboxId(index)
const switchState = (e: Event) => {
const newCheckboxState = (e.target as HTMLInputElement)?.checked ? "true" : "false"
localStorage.setItem(elId, newCheckboxState)
}
el.addEventListener("change", switchState)
window.addCleanup(() => el.removeEventListener("change", switchState))
if (localStorage.getItem(elId) === "true") {
el.checked = true
}
})
})

View file

@ -9,6 +9,8 @@ import path from "path"
import { JSResource } from "../../util/resources" import { JSResource } from "../../util/resources"
// @ts-ignore // @ts-ignore
import calloutScript from "../../components/scripts/callout.inline.ts" import calloutScript from "../../components/scripts/callout.inline.ts"
// @ts-ignore
import checkboxScript from "../../components/scripts/checkbox.inline.ts"
import { FilePath, pathToRoot, slugTag, slugifyFilePath } from "../../util/path" import { FilePath, pathToRoot, slugTag, slugifyFilePath } from "../../util/path"
import { toHast } from "mdast-util-to-hast" import { toHast } from "mdast-util-to-hast"
import { toHtml } from "hast-util-to-html" import { toHtml } from "hast-util-to-html"
@ -28,6 +30,7 @@ export interface Options {
enableInHtmlEmbed: boolean enableInHtmlEmbed: boolean
enableYouTubeEmbed: boolean enableYouTubeEmbed: boolean
enableVideoEmbed: boolean enableVideoEmbed: boolean
enableCheckbox: boolean
} }
const defaultOptions: Options = { const defaultOptions: Options = {
@ -42,6 +45,7 @@ const defaultOptions: Options = {
enableInHtmlEmbed: false, enableInHtmlEmbed: false,
enableYouTubeEmbed: true, enableYouTubeEmbed: true,
enableVideoEmbed: true, enableVideoEmbed: true,
enableCheckbox: false,
} }
const calloutMapping = { const calloutMapping = {
@ -554,11 +558,37 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>
}) })
} }
if (opts.enableCheckbox) {
plugins.push(() => {
return (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 plugins return plugins
}, },
externalResources() { externalResources() {
const js: JSResource[] = [] const js: JSResource[] = []
if (opts.enableCheckbox) {
js.push({
script: checkboxScript,
loadTime: "afterDOMReady",
contentType: "inline",
})
}
if (opts.callouts) { if (opts.callouts) {
js.push({ js.push({
script: calloutScript, script: calloutScript,