| 1 |
import { useEffect, useState } from '@wordpress/element'; |
| 2 |
import { applyFilters } from '@wordpress/hooks'; |
| 3 |
import { getHighlighter, setCDN, setWasm, type Theme } from 'shiki'; |
| 4 |
import useSWRImmutable from 'swr/immutable'; |
| 5 |
import defaultThemes from '../defaultThemes.json'; |
| 6 |
import type { Lang, ThemeOption } from '../types'; |
| 7 |
import { getEditorLanguage } from '../util/languages'; |
| 8 |
|
| 9 |
type Params = { |
| 10 |
theme: Theme; |
| 11 |
lang: Lang | 'ansi'; |
| 12 |
ready?: boolean; |
| 13 |
}; |
| 14 |
|
| 15 |
const fetcher = ({ theme, lang, ready }: Params) => { |
| 16 |
if (!ready) throw new Error(); |
| 17 |
const themeFiltered = applyFilters( |
| 18 |
'blocks.codeBlockPro.theme', |
| 19 |
theme, |
| 20 |
) as Theme; |
| 21 |
// If the theme has an alias, use that instead |
| 22 |
// i.e. it was renamed upstream |
| 23 |
const themeAlias = ( |
| 24 |
defaultThemes as Record< |
| 25 |
string, |
| 26 |
{ name: string; priority?: boolean; alias?: string } |
| 27 |
> |
| 28 |
)?.[themeFiltered]?.alias as Theme; |
| 29 |
|
| 30 |
return getHighlighter({ |
| 31 |
langs: lang === 'plaintext' ? [] : [getEditorLanguage(lang)], |
| 32 |
theme: themeAlias ?? themeFiltered, |
| 33 |
}); |
| 34 |
}; |
| 35 |
let once = false; |
| 36 |
|
| 37 |
export const useTheme = ({ theme, lang, ready = true }: Params) => { |
| 38 |
const [wasmLoaded, setWasmFileLoaded] = useState(false); |
| 39 |
const themes = applyFilters( |
| 40 |
'blocks.codeBlockPro.themes', |
| 41 |
defaultThemes, |
| 42 |
) as ThemeOption; |
| 43 |
if (!once) { |
| 44 |
once = true; |
| 45 |
const assetDir = `${window.codeBlockPro?.pluginUrl}build/shiki/`; |
| 46 |
setCDN(applyFilters('blocks.codeBlockPro.assetDir', assetDir) as string); |
| 47 |
} |
| 48 |
if (themes[theme]?.custom) theme = 'css-variables'; |
| 49 |
const { data: highlighter, error } = useSWRImmutable( |
| 50 |
{ theme, lang, ready: ready && wasmLoaded }, |
| 51 |
fetcher, |
| 52 |
); |
| 53 |
useEffect(() => { |
| 54 |
const assetDir = `${window.codeBlockPro?.pluginUrl}build/shiki/`; |
| 55 |
fetch(`${assetDir}dist/onig.wasm`) |
| 56 |
.then((res) => res.arrayBuffer()) |
| 57 |
.then((wasmBuffer) => { |
| 58 |
setWasm(wasmBuffer); |
| 59 |
setWasmFileLoaded(true); |
| 60 |
}); |
| 61 |
}, []); |
| 62 |
|
| 63 |
return { |
| 64 |
highlighter, |
| 65 |
error, |
| 66 |
loading: (!highlighter && !error) || !wasmLoaded, |
| 67 |
}; |
| 68 |
}; |
| 69 |
|
