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