refactor: migrate from shikiji to shiki v1 (#2591)

composables/shiki.ts

@@ -1,13 +1,13 @@
-import { type Highlighter, type BuiltinLanguage as Lang } from 'shikiji'
+import type { Highlighter, BuiltinLanguage as Lang } from 'shiki'
 
 const highlighter = ref<Highlighter>()
 
 const registeredLang = ref(new Map<string, boolean>())
-let shikijiImport: Promise<void> | undefined
+let shikiImport: Promise<void> | undefined
 
 export function useHighlighter(lang: Lang): { promise?: Promise<void>; highlighter?: Highlighter } {
-  if (!shikijiImport) {
-    shikijiImport = import('shikiji')
+  if (!shikiImport) {
+    shikiImport = import('shiki')
       .then(async ({ getHighlighter }) => {
         highlighter.value = await getHighlighter({
           themes: [
@@ -22,11 +22,11 @@ export function useHighlighter(lang: Lang): { promise?: Promise<void>; highlight
         })
       })
 
-    return { promise: shikijiImport }
+    return { promise: shikiImport }
   }
 
   if (!highlighter.value)
-    return { promise: shikijiImport }
+    return { promise: shikiImport }
 
   if (!registeredLang.value.get(lang)) {
     const promise = highlighter.value.loadLanguage(lang)
@@ -45,7 +45,7 @@ export function useHighlighter(lang: Lang): { promise?: Promise<void>; highlight
   return { highlighter: highlighter.value }
 }
 
-function useShikijiTheme() {
+function useShikiTheme() {
   return useColorMode().value === 'dark' ? 'vitesse-dark' : 'vitesse-light'
 }
 
@@ -68,6 +68,6 @@ export function highlightCode(code: string, lang: Lang) {
 
   return highlighter.codeToHtml(code, {
     lang,
-    theme: useShikijiTheme(),
+    theme: useShikiTheme(),
   })
 }

composables/tiptap.ts

@@ -14,7 +14,7 @@ import { Plugin } from 'prosemirror-state'
 
 import type { Ref } from 'vue'
 import { TiptapEmojiSuggestion, TiptapHashtagSuggestion, TiptapMentionSuggestion } from './tiptap/suggestion'
-import { TiptapPluginCodeBlockShikiji } from './tiptap/shikiji'
+import { TiptapPluginCodeBlockShiki } from './tiptap/shiki'
 import { TiptapPluginCustomEmoji } from './tiptap/custom-emoji'
 import { TiptapPluginEmoji } from './tiptap/emoji'
 
@@ -70,7 +70,7 @@ export function useTiptap(options: UseTiptapOptions) {
       Placeholder.configure({
         placeholder: () => placeholder.value!,
       }),
-      TiptapPluginCodeBlockShikiji,
+      TiptapPluginCodeBlockShiki,
       History.configure({
         depth: 10,
       }),

composables/tiptap/shiki-parser.ts

@@ -1,9 +1,9 @@
-import { type Parser, createParser } from 'prosemirror-highlight/shikiji'
-import type { BuiltinLanguage } from 'shikiji/langs'
+import { type Parser, createParser } from 'prosemirror-highlight/shiki'
+import type { BuiltinLanguage } from 'shiki'
 
 let parser: Parser | undefined
 
-export const shikijiParser: Parser = (options) => {
+export const shikiParser: Parser = (options) => {
   const lang = options.language ?? 'text'
 
   // Register the language if it's not yet registered

composables/tiptap/shiki.ts

@@ -2,10 +2,10 @@ import CodeBlock from '@tiptap/extension-code-block'
 import { VueNodeViewRenderer } from '@tiptap/vue-3'
 
 import { createHighlightPlugin } from 'prosemirror-highlight'
-import { shikijiParser } from './shikiji-parser'
+import { shikiParser } from './shiki-parser'
 import TiptapCodeBlock from '~/components/tiptap/TiptapCodeBlock.vue'
 
-export const TiptapPluginCodeBlockShikiji = CodeBlock.extend({
+export const TiptapPluginCodeBlockShiki = CodeBlock.extend({
   addOptions() {
     return {
       ...this.parent?.(),
@@ -15,7 +15,7 @@ export const TiptapPluginCodeBlockShikiji = CodeBlock.extend({
 
   addProseMirrorPlugins() {
     return [
-      createHighlightPlugin({ parser: shikijiParser, nodeTypes: ['codeBlock'] }),
+      createHighlightPlugin({ parser: shikiParser, nodeTypes: ['codeBlock'] }),
     ]
   },