zio/elk
2
0
Fork 0
Code Releases 2 Packages 1 Activity

fix: trigger code block highlighting when the highlighter is ready (#2539)

Browse source
This commit is contained in:
ocavue 2024-01-02 00:46:37 +08:00 • committed by GitHub
parent e43993770d
commit 77588c1890
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 45 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

14
composables/shikiji.ts
View file

@ -5,7 +5,7 @@ const highlighter = ref<Highlighter>()
const registeredLang = ref(new Map<string, boolean>())
let shikijiImport: Promise<void> | undefined
export function useHighlighter(lang: Lang) {
export function useHighlighter(lang: Lang): { promise?: Promise<void>; highlighter?: Highlighter } {
if (!shikijiImport) {
shikijiImport = import('shikiji')
.then(async ({ getHighlighter }) => {
@ -21,13 +21,15 @@ export function useHighlighter(lang: Lang) {
],
})
})
return { promise: shikijiImport }
}
if (!highlighter.value)
return undefined
return { promise: shikijiImport }
if (!registeredLang.value.get(lang)) {
highlighter.value.loadLanguage(lang)
const promise = highlighter.value.loadLanguage(lang)
.then(() => {
registeredLang.value.set(lang, true)
})
@ -37,10 +39,10 @@ export function useHighlighter(lang: Lang) {
registeredLang.value.set(fallbackLang, true)
})
})
return undefined
return { promise }
}
return highlighter.value
return { highlighter: highlighter.value }
}
function useShikijiTheme() {
@ -60,7 +62,7 @@ function escapeHtml(text: string) {
}
export function highlightCode(code: string, lang: Lang) {
const highlighter = useHighlighter(lang)
const { highlighter } = useHighlighter(lang)
if (!highlighter)
return escapeHtml(code)

8
composables/tiptap/shikiji-parser.ts
View file

@ -7,11 +7,13 @@ export const shikijiParser: Parser = (options) => {
const lang = options.language ?? 'text'
// Register the language if it's not yet registered
const highlighter = useHighlighter(lang as BuiltinLanguage)
const { highlighter, promise } = useHighlighter(lang as BuiltinLanguage)
// If the language is not loaded, we return an empty set of decorations
// If the highlighter or the language is not available, return a promise that
// will resolve when it's ready. When the promise resolves, the editor will
// re-parse the code block.
if (!highlighter)
return []
return promise ?? []
if (!parser)
parser = createParser(highlighter)