contexted link styling

This commit is contained in:
2023-04-30 14:57:43 +02:00
parent 787b5a4cb8
commit 2ff849219b
5 changed files with 83 additions and 33 deletions

View File

@@ -1,39 +1,16 @@
import { marked } from 'marked'
import DOMPurify from 'dompurify'
export function mdToHtml(
mdText: string,
contextedPrefix: string,
getNoteById: (id: string) => Note | undefined
) {
export function mdToHtml(mdText: string) {
const renderer = new marked.Renderer()
renderer.link = (href, _, text) => {
const isContextedLink = href?.startsWith(contextedPrefix)
if (isContextedLink) {
const re = new RegExp(`${contextedPrefix}([^]+)`)
const match = re.exec(href || '')
const contextedLinkOptions = match ? match[1].split(';') : []
const noteId = contextedLinkOptions[0] || ''
const note = getNoteById(noteId)
const contextedHref = ''
const contextedLink = `<a data-contexted-link="${noteId}" title="${note?.title}"${contextedHref}>${text}</a>`
return note?.title ? contextedLink : text
} else {
return `<a target="_blank" href="${href}">${text}</a>`
}
}
const html = DOMPurify.sanitize(marked.parse(mdText, { renderer }))
const re = /(\[\[)(.*?)(\]\])/g
const doc = new DOMParser().parseFromString(html, 'text/html')
doc.querySelectorAll('p, b, u, i, li, h1, h2, h3').forEach((element) => {
// if (element.childElementCount === 0) {
element.innerHTML = element.innerHTML.replace(re, (_, p1, p2, p3) => {
// const { id: noteId } = getters.getNoteByTitle(p2) || {}
return `${p1}<a data-contexted-link="true">${p2}</a>${p3}`
})
// }
})
return doc.body.innerHTML
}