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

…2539)

composables/shikiji.ts

@@ -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)
 

composables/tiptap/shikiji-parser.ts

@@ -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)

package.json

@@ -86,7 +86,7 @@
     "page-lifecycle": "^0.1.2",
     "pinia": "^2.1.4",
     "postcss-nested": "^6.0.1",
-    "prosemirror-highlight": "^0.3.3",
+    "prosemirror-highlight": "^0.4.0",
     "rollup-plugin-node-polyfills": "^0.2.1",
     "shikiji": "^0.9.9",
     "simple-git": "^3.19.1",