fix(navigation): support anchor fragments in note links
Links like `path/to/note.md#heading` previously errored with "Note not found" because the full href (including `#hash`) was matched against file paths. Split the fragment off in the link handler, plumb it through the event bus, and scroll the matching heading into view once the target note is in place. Headings now get GitHub-style ids via markdown-it-anchor + github-slugger so the anchors actually exist. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -30,8 +30,13 @@ export const useLinks = (
|
||||
return
|
||||
}
|
||||
|
||||
const hashIndex = href.indexOf("#")
|
||||
const path = hashIndex === -1 ? href : href.slice(0, hashIndex)
|
||||
const hash = hashIndex === -1 ? undefined : href.slice(hashIndex + 1)
|
||||
|
||||
noteEventBus.emit({
|
||||
path: href,
|
||||
path,
|
||||
hash,
|
||||
currentNoteSHA: toValue(sha),
|
||||
user: store.user,
|
||||
repo: store.repo
|
||||
|
||||
@@ -1,7 +1,10 @@
|
||||
import { tab } from "@mdit/plugin-tab"
|
||||
import markdownItKatex from "@vscode/markdown-it-katex"
|
||||
import GithubSlugger from "github-slugger"
|
||||
import MarkdownIt, { Options } from "markdown-it"
|
||||
import Renderer, { type RenderRuleRecord } from "markdown-it/lib/renderer.mjs"
|
||||
import type Token from "markdown-it/lib/token.mjs"
|
||||
import markdownItAnchor from "markdown-it-anchor"
|
||||
import blockEmbedPlugin from "markdown-it-block-embed"
|
||||
import markdownItCheckbox from "markdown-it-checkbox"
|
||||
import MarkdownItGitHubAlerts from "markdown-it-github-alerts"
|
||||
@@ -45,6 +48,8 @@ const markdownItMermaidExtractor = (md: MarkdownIt) => {
|
||||
}
|
||||
}
|
||||
|
||||
const slugger = new GithubSlugger()
|
||||
|
||||
const md = new MarkdownIt({
|
||||
typographer: true,
|
||||
quotes: ["«\xA0", "\xA0»", "‹\xA0", "\xA0›"]
|
||||
@@ -64,6 +69,12 @@ const md = new MarkdownIt({
|
||||
})
|
||||
.use(MarkdownItGitHubAlerts)
|
||||
.use(markdownItTablerIcons)
|
||||
.use(tab, {
|
||||
name: "tabs"
|
||||
})
|
||||
.use(markdownItAnchor, {
|
||||
slugify: (s: string) => slugger.slug(s)
|
||||
})
|
||||
|
||||
let shikijiInitialized = false
|
||||
|
||||
@@ -123,11 +134,16 @@ const stripFrontmatter = (content: string): string => {
|
||||
return match ? content.slice(match[0].length) : content
|
||||
}
|
||||
|
||||
const renderMarkdown = (content: string, env?: Record<string, unknown>) => {
|
||||
slugger.reset()
|
||||
return env ? md.render(content, env) : md.render(content)
|
||||
}
|
||||
|
||||
export const markdownBuilder = (defaultPrefix?: Ref<string> | string) => {
|
||||
const getRawContent = (content: string) => decodeBase64ToUTF8(content)
|
||||
const renderFromUTF8 = (content: string, prefix?: string) => {
|
||||
return content
|
||||
? md.render(stripFrontmatter(content), {
|
||||
? renderMarkdown(stripFrontmatter(content), {
|
||||
docId: defaultPrefix ? toValue(defaultPrefix) : (prefix ?? "")
|
||||
})
|
||||
: ""
|
||||
@@ -135,7 +151,7 @@ export const markdownBuilder = (defaultPrefix?: Ref<string> | string) => {
|
||||
|
||||
return {
|
||||
toHTML: (content: string) =>
|
||||
content ? md.render(stripFrontmatter(content)) : "",
|
||||
content ? renderMarkdown(stripFrontmatter(content)) : "",
|
||||
render: (content: string, prefix?: string) =>
|
||||
renderFromUTF8(decodeBase64ToUTF8(content), prefix),
|
||||
renderFromUTF8,
|
||||
|
||||
@@ -25,7 +25,7 @@ export const useNoteView = () => {
|
||||
)
|
||||
|
||||
const unsubscribeLink = noteEventBus.addEventBusListener(
|
||||
({ path, currentNoteSHA }) => {
|
||||
({ path, hash, currentNoteSHA }) => {
|
||||
const currentFile = store.files.find(
|
||||
(file) => file.sha === currentNoteSHA
|
||||
)
|
||||
@@ -38,7 +38,7 @@ export const useNoteView = () => {
|
||||
return
|
||||
}
|
||||
|
||||
addStackedNote(currentNoteSHA ?? "", file.sha)
|
||||
addStackedNote(currentNoteSHA ?? "", file.sha, undefined, hash)
|
||||
}
|
||||
)
|
||||
|
||||
|
||||
@@ -20,9 +20,32 @@ export const useRouteQueryStackedNotes = () => {
|
||||
|
||||
const { scrollToNote, isMobile } = useOverlay(false)
|
||||
|
||||
const scrollToHashInNote = (
|
||||
cleanSha: string,
|
||||
hash: string,
|
||||
attempts = 30
|
||||
) => {
|
||||
if (attempts <= 0) {
|
||||
return
|
||||
}
|
||||
|
||||
const heading = document.querySelector(
|
||||
`.note-${cleanSha} #${CSS.escape(hash)}`
|
||||
)
|
||||
if (heading) {
|
||||
heading.scrollIntoView({ block: "start", inline: "nearest" })
|
||||
return
|
||||
}
|
||||
|
||||
requestAnimationFrame(() => {
|
||||
scrollToHashInNote(cleanSha, hash, attempts - 1)
|
||||
})
|
||||
}
|
||||
|
||||
const scrollToFocusedNote = (
|
||||
noteId: string | null = null,
|
||||
notes: string[] = stackedNotes.value
|
||||
notes: string[] = stackedNotes.value,
|
||||
hash?: string
|
||||
) => {
|
||||
nextTick(() => {
|
||||
const index = noteId ? notes.findIndex((nid) => nid === noteId) : 0
|
||||
@@ -47,16 +70,21 @@ export const useRouteQueryStackedNotes = () => {
|
||||
scrollToNote(0)
|
||||
}
|
||||
}
|
||||
|
||||
if (hash && noteId) {
|
||||
scrollToHashInNote(noteId.replaceAll(":", "-"), hash)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const addStackedNote = (
|
||||
currentSha: string,
|
||||
sha: string,
|
||||
selector?: string
|
||||
selector?: string,
|
||||
hash?: string
|
||||
) => {
|
||||
if (stackedNotes.value.includes(sha)) {
|
||||
scrollToFocusedNote(selector ?? sha)
|
||||
scrollToFocusedNote(selector ?? sha, stackedNotes.value, hash)
|
||||
return
|
||||
}
|
||||
|
||||
@@ -76,7 +104,7 @@ export const useRouteQueryStackedNotes = () => {
|
||||
stackedNotes.value = newStackedNotes
|
||||
}
|
||||
|
||||
scrollToFocusedNote(selector ?? sha, stackedNotes.value)
|
||||
scrollToFocusedNote(selector ?? sha, stackedNotes.value, hash)
|
||||
}
|
||||
|
||||
return {
|
||||
|
||||
Reference in New Issue
Block a user