BinaryDigit/quartz
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix(popover): automatically position anchored links properly (#1897)

Browse Source 
* fix(popover): automatically position heading links at heading

* Impement linking of blockreferences

* Popover fixes

* id mapping

* Remove excess regexes

* Updated blockref

* Remove linker element

* Restore the docs to their former glory

* Move the hash out of the loop

* Redundant

* Redundant

* Restore docs

* Remove log

* Let it const
This commit is contained in:
Emile Bangma 2025-04-05 19:31:17 +02:00 committed by GitHub
parent 685c06ce2e
commit d61fb266c7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 8 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
quartz/components/scripts/popover.inline.ts
View File

@ -82,8 +82,11 @@ async function mouseEnterHandler(
const contents = await response.text() const contents = await response.text()
const html = p.parseFromString(contents, "text/html") const html = p.parseFromString(contents, "text/html")
normalizeRelativeURLs(html, targetUrl) normalizeRelativeURLs(html, targetUrl)
// strip all IDs from elements to prevent duplicates // prepend all IDs inside popovers to prevent duplicates
html.querySelectorAll("[id]").forEach((el) => el.removeAttribute("id")) html.querySelectorAll("[id]").forEach((el) => {
const targetID = `popover-${el.id}`
el.id = targetID
})
const elts = [...html.getElementsByClassName("popover-hint")] const elts = [...html.getElementsByClassName("popover-hint")]
if (elts.length === 0) return if (elts.length === 0) return
@ -94,7 +97,8 @@ async function mouseEnterHandler(
link.appendChild(popoverElement) link.appendChild(popoverElement)
if (hash !== "") { if (hash !== "") {
const heading = popoverInner.querySelector(hash) as HTMLElement | null const targetAnchor = hash.startsWith("#popover") ? hash : `#popover-${hash.slice(1)}`
const heading = popoverInner.querySelector(targetAnchor) as HTMLElement | null
if (heading) { if (heading) {
// leave ~12px of buffer when scrolling to a heading // leave ~12px of buffer when scrolling to a heading
popoverInner.scroll({ top: heading.offsetTop - 12, behavior: "instant" }) popoverInner.scroll({ top: heading.offsetTop - 12, behavior: "instant" })

3
quartz/plugins/transformers/ofm.ts
View File

@ -191,8 +191,7 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>>
const [rawFp, rawHeader, rawAlias]: (string | undefined)[] = capture const [rawFp, rawHeader, rawAlias]: (string | undefined)[] = capture
const [fp, anchor] = splitAnchor(`${rawFp ?? ""}${rawHeader ?? ""}`) const [fp, anchor] = splitAnchor(`${rawFp ?? ""}${rawHeader ?? ""}`)
const blockRef = Boolean(rawHeader?.match(/^#?\^/)) ? "^" : "" const displayAnchor = anchor ? `#${anchor.trim().replace(/^#+/, "")}` : ""
const displayAnchor = anchor ? `#${blockRef}${anchor.trim().replace(/^#+/, "")}` : ""
const displayAlias = rawAlias ?? rawHeader?.replace("#", "|") ?? "" const displayAlias = rawAlias ?? rawHeader?.replace("#", "|") ?? ""
const embedDisplay = value.startsWith("!") ? "!" : "" const embedDisplay = value.startsWith("!") ? "!" : ""