Mirrors/elk
1
0
Fork 1
mirror of https://github.com/elk-zone/elk.git synced 2024-07-03 04:56:48 +01:00
Code Issues Wiki 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
Show stats 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>()) const registeredLang = ref(new Map<string, boolean>())
let shikijiImport: Promise<void> | undefined let shikijiImport: Promise<void> | undefined
export function useHighlighter(lang: Lang) { export function useHighlighter(lang: Lang): { promise?: Promise<void>; highlighter?: Highlighter } {
if (!shikijiImport) { if (!shikijiImport) {
shikijiImport = import('shikiji') shikijiImport = import('shikiji')
.then(async ({ getHighlighter }) => { .then(async ({ getHighlighter }) => {
@ -21,13 +21,15 @@ export function useHighlighter(lang: Lang) {
], ],
}) })
}) })
return { promise: shikijiImport }
} }
if (!highlighter.value) if (!highlighter.value)
return undefined return { promise: shikijiImport }
if (!registeredLang.value.get(lang)) { if (!registeredLang.value.get(lang)) {
highlighter.value.loadLanguage(lang) const promise = highlighter.value.loadLanguage(lang)
.then(() => { .then(() => {
registeredLang.value.set(lang, true) registeredLang.value.set(lang, true)
}) })
@ -37,10 +39,10 @@ export function useHighlighter(lang: Lang) {
registeredLang.value.set(fallbackLang, true) registeredLang.value.set(fallbackLang, true)
}) })
}) })
return undefined return { promise }
} }
return highlighter.value return { highlighter: highlighter.value }
} }
function useShikijiTheme() { function useShikijiTheme() {
@ -60,7 +62,7 @@ function escapeHtml(text: string) {
} }
export function highlightCode(code: string, lang: Lang) { export function highlightCode(code: string, lang: Lang) {
const highlighter = useHighlighter(lang) const { highlighter } = useHighlighter(lang)
if (!highlighter) if (!highlighter)
return escapeHtml(code) 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' const lang = options.language ?? 'text'
// Register the language if it's not yet registered // 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) if (!highlighter)
return [] return promise ?? []
if (!parser) if (!parser)
parser = createParser(highlighter) parser = createParser(highlighter)

2
package.json
View file

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

62
pnpm-lock.yaml
View file

@ -180,8 +180,8 @@ importers:
specifier: ^6.0.1 specifier: ^6.0.1
version: 6.0.1(postcss@8.4.32) version: 6.0.1(postcss@8.4.32)
prosemirror-highlight: prosemirror-highlight:
specifier: ^0.3.3 specifier: ^0.4.0
version: 0.3.3(prosemirror-model@1.19.2)(prosemirror-state@1.4.3)(prosemirror-view@1.31.5)(shikiji@0.9.9) version: 0.4.0(prosemirror-model@1.19.4)(prosemirror-state@1.4.3)(prosemirror-view@1.32.7)(shikiji@0.9.9)
rollup-plugin-node-polyfills: rollup-plugin-node-polyfills:
specifier: ^0.2.1 specifier: ^0.2.1
version: 0.2.1 version: 0.2.1
@ -4403,14 +4403,14 @@ packages:
prosemirror-keymap: 1.2.2 prosemirror-keymap: 1.2.2
prosemirror-markdown: 1.11.1 prosemirror-markdown: 1.11.1
prosemirror-menu: 1.2.2 prosemirror-menu: 1.2.2
prosemirror-model: 1.19.2 prosemirror-model: 1.19.4
prosemirror-schema-basic: 1.2.2 prosemirror-schema-basic: 1.2.2
prosemirror-schema-list: 1.3.0 prosemirror-schema-list: 1.3.0
prosemirror-state: 1.4.3 prosemirror-state: 1.4.3
prosemirror-tables: 1.3.4 prosemirror-tables: 1.3.4
prosemirror-trailing-node: 2.0.4(prosemirror-model@1.19.2)(prosemirror-state@1.4.3)(prosemirror-view@1.31.5) prosemirror-trailing-node: 2.0.4(prosemirror-model@1.19.4)(prosemirror-state@1.4.3)(prosemirror-view@1.32.7)
prosemirror-transform: 1.7.3 prosemirror-transform: 1.7.3
prosemirror-view: 1.31.5 prosemirror-view: 1.32.7
transitivePeerDependencies: transitivePeerDependencies:
- supports-color - supports-color
dev: false dev: false
@ -12096,7 +12096,7 @@ packages:
/prosemirror-commands@1.5.2: /prosemirror-commands@1.5.2:
resolution: {integrity: sha512-hgLcPaakxH8tu6YvVAaILV2tXYsW3rAdDR8WNkeKGcgeMVQg3/TMhPdVoh7iAmfgVjZGtcOSjKiQaoeKjzd2mQ==} resolution: {integrity: sha512-hgLcPaakxH8tu6YvVAaILV2tXYsW3rAdDR8WNkeKGcgeMVQg3/TMhPdVoh7iAmfgVjZGtcOSjKiQaoeKjzd2mQ==}
dependencies: dependencies:
prosemirror-model: 1.19.2 prosemirror-model: 1.19.4
prosemirror-state: 1.4.3 prosemirror-state: 1.4.3
prosemirror-transform: 1.7.3 prosemirror-transform: 1.7.3
dev: false dev: false
@ -12106,20 +12106,20 @@ packages:
dependencies: dependencies:
prosemirror-state: 1.4.3 prosemirror-state: 1.4.3
prosemirror-transform: 1.7.3 prosemirror-transform: 1.7.3
prosemirror-view: 1.31.5 prosemirror-view: 1.32.7
dev: false dev: false
/prosemirror-gapcursor@1.3.2: /prosemirror-gapcursor@1.3.2:
resolution: {integrity: sha512-wtjswVBd2vaQRrnYZaBCbyDqr232Ed4p2QPtRIUK5FuqHYKGWkEwl08oQM4Tw7DOR0FsasARV5uJFvMZWxdNxQ==} resolution: {integrity: sha512-wtjswVBd2vaQRrnYZaBCbyDqr232Ed4p2QPtRIUK5FuqHYKGWkEwl08oQM4Tw7DOR0FsasARV5uJFvMZWxdNxQ==}
dependencies: dependencies:
prosemirror-keymap: 1.2.2 prosemirror-keymap: 1.2.2
prosemirror-model: 1.19.2 prosemirror-model: 1.19.4
prosemirror-state: 1.4.3 prosemirror-state: 1.4.3
prosemirror-view: 1.31.5 prosemirror-view: 1.32.7
dev: false dev: false
/prosemirror-highlight@0.3.3(prosemirror-model@1.19.2)(prosemirror-state@1.4.3)(prosemirror-view@1.31.5)(shikiji@0.9.9): /prosemirror-highlight@0.4.0(prosemirror-model@1.19.4)(prosemirror-state@1.4.3)(prosemirror-view@1.32.7)(shikiji@0.9.9):
resolution: {integrity: sha512-tOGyPvmRKZ49ubzKmFIwiwS7CNXlU9g/D4zZLaHGzXLVNVnBrmbDOajZ4eP0lylOAWPxZN+vrFZ9DwrtyikuoA==} resolution: {integrity: sha512-RHGi5QjcWnWgn6bMkjbC2+ehv9Piv3D5UN/dNJG2r738NCQCFye0dkFa6c1oURsvUuwpFiQREqp1YYGpGbZOuA==}
peerDependencies: peerDependencies:
'@types/hast': ^3.0.0 '@types/hast': ^3.0.0
highlight.js: ^11.9.0 highlight.js: ^11.9.0
@ -12129,7 +12129,7 @@ packages:
prosemirror-transform: ^1.8.0 prosemirror-transform: ^1.8.0
prosemirror-view: ^1.32.4 prosemirror-view: ^1.32.4
refractor: ^4.8.1 refractor: ^4.8.1
shiki: ^0.14.6 shiki: ^0.14.0
shikiji: ^0.8.0 || ^0.9.0 shikiji: ^0.8.0 || ^0.9.0
peerDependenciesMeta: peerDependenciesMeta:
'@types/hast': '@types/hast':
@ -12153,9 +12153,9 @@ packages:
shikiji: shikiji:
optional: true optional: true
dependencies: dependencies:
prosemirror-model: 1.19.2 prosemirror-model: 1.19.4
prosemirror-state: 1.4.3 prosemirror-state: 1.4.3
prosemirror-view: 1.31.5 prosemirror-view: 1.32.7
shikiji: 0.9.9 shikiji: 0.9.9
dev: false dev: false
@ -12164,7 +12164,7 @@ packages:
dependencies: dependencies:
prosemirror-state: 1.4.3 prosemirror-state: 1.4.3
prosemirror-transform: 1.7.3 prosemirror-transform: 1.7.3
prosemirror-view: 1.31.5 prosemirror-view: 1.32.7
rope-sequence: 1.3.4 rope-sequence: 1.3.4
dev: false dev: false
@ -12186,7 +12186,7 @@ packages:
resolution: {integrity: sha512-CLOieKoaSSEusKyYcXIj8v2qHGLW+tnuffci+8678Sen48NEFQE7M3o0Nx0gj9v63iVDj+yLibj2gCe8eb3jIw==} resolution: {integrity: sha512-CLOieKoaSSEusKyYcXIj8v2qHGLW+tnuffci+8678Sen48NEFQE7M3o0Nx0gj9v63iVDj+yLibj2gCe8eb3jIw==}
dependencies: dependencies:
markdown-it: 13.0.1 markdown-it: 13.0.1
prosemirror-model: 1.19.2 prosemirror-model: 1.19.4
dev: false dev: false
/prosemirror-menu@1.2.2: /prosemirror-menu@1.2.2:
@ -12198,8 +12198,8 @@ packages:
prosemirror-state: 1.4.3 prosemirror-state: 1.4.3
dev: false dev: false
/prosemirror-model@1.19.2: /prosemirror-model@1.19.4:
resolution: {integrity: sha512-RXl0Waiss4YtJAUY3NzKH0xkJmsZupCIccqcIFoLTIKFlKNbIvFDRl27/kQy1FP8iUAxrjRRfIVvOebnnXJgqQ==} resolution: {integrity: sha512-RPmVXxUfOhyFdayHawjuZCxiROsm9L4FCUA6pWI+l7n2yCBsWy9VpdE1hpDHUS8Vad661YLY9AzqfjLhAKQ4iQ==}
dependencies: dependencies:
orderedmap: 2.1.1 orderedmap: 2.1.1
dev: false dev: false
@ -12207,13 +12207,13 @@ packages:
/prosemirror-schema-basic@1.2.2: /prosemirror-schema-basic@1.2.2:
resolution: {integrity: sha512-/dT4JFEGyO7QnNTe9UaKUhjDXbTNkiWTq/N4VpKaF79bBjSExVV2NXmJpcM7z/gD7mbqNjxbmWW5nf1iNSSGnw==} resolution: {integrity: sha512-/dT4JFEGyO7QnNTe9UaKUhjDXbTNkiWTq/N4VpKaF79bBjSExVV2NXmJpcM7z/gD7mbqNjxbmWW5nf1iNSSGnw==}
dependencies: dependencies:
prosemirror-model: 1.19.2 prosemirror-model: 1.19.4
dev: false dev: false
/prosemirror-schema-list@1.3.0: /prosemirror-schema-list@1.3.0:
resolution: {integrity: sha512-Hz/7gM4skaaYfRPNgr421CU4GSwotmEwBVvJh5ltGiffUJwm7C8GfN/Bc6DR1EKEp5pDKhODmdXXyi9uIsZl5A==} resolution: {integrity: sha512-Hz/7gM4skaaYfRPNgr421CU4GSwotmEwBVvJh5ltGiffUJwm7C8GfN/Bc6DR1EKEp5pDKhODmdXXyi9uIsZl5A==}
dependencies: dependencies:
prosemirror-model: 1.19.2 prosemirror-model: 1.19.4
prosemirror-state: 1.4.3 prosemirror-state: 1.4.3
prosemirror-transform: 1.7.3 prosemirror-transform: 1.7.3
dev: false dev: false
@ -12221,22 +12221,22 @@ packages:
/prosemirror-state@1.4.3: /prosemirror-state@1.4.3:
resolution: {integrity: sha512-goFKORVbvPuAQaXhpbemJFRKJ2aixr+AZMGiquiqKxaucC6hlpHNZHWgz5R7dS4roHiwq9vDctE//CZ++o0W1Q==} resolution: {integrity: sha512-goFKORVbvPuAQaXhpbemJFRKJ2aixr+AZMGiquiqKxaucC6hlpHNZHWgz5R7dS4roHiwq9vDctE//CZ++o0W1Q==}
dependencies: dependencies:
prosemirror-model: 1.19.2 prosemirror-model: 1.19.4
prosemirror-transform: 1.7.3 prosemirror-transform: 1.7.3
prosemirror-view: 1.31.5 prosemirror-view: 1.32.7
dev: false dev: false
/prosemirror-tables@1.3.4: /prosemirror-tables@1.3.4:
resolution: {integrity: sha512-z6uLSQ1BLC3rgbGwZmpfb+xkdvD7W/UOsURDfognZFYaTtc0gsk7u/t71Yijp2eLflVpffMk6X0u0+u+MMDvIw==} resolution: {integrity: sha512-z6uLSQ1BLC3rgbGwZmpfb+xkdvD7W/UOsURDfognZFYaTtc0gsk7u/t71Yijp2eLflVpffMk6X0u0+u+MMDvIw==}
dependencies: dependencies:
prosemirror-keymap: 1.2.2 prosemirror-keymap: 1.2.2
prosemirror-model: 1.19.2 prosemirror-model: 1.19.4
prosemirror-state: 1.4.3 prosemirror-state: 1.4.3
prosemirror-transform: 1.7.3 prosemirror-transform: 1.7.3
prosemirror-view: 1.31.5 prosemirror-view: 1.32.7
dev: false dev: false
/prosemirror-trailing-node@2.0.4(prosemirror-model@1.19.2)(prosemirror-state@1.4.3)(prosemirror-view@1.31.5): /prosemirror-trailing-node@2.0.4(prosemirror-model@1.19.4)(prosemirror-state@1.4.3)(prosemirror-view@1.32.7):
resolution: {integrity: sha512-0Yl9w7IdHkaCdqR+NE3FOucePME4OmiGcybnF1iasarEILP5U8+4xTnl53yafULjmwcg1SrSG65Hg7Zk2H2v3g==} resolution: {integrity: sha512-0Yl9w7IdHkaCdqR+NE3FOucePME4OmiGcybnF1iasarEILP5U8+4xTnl53yafULjmwcg1SrSG65Hg7Zk2H2v3g==}
peerDependencies: peerDependencies:
prosemirror-model: ^1.19.0 prosemirror-model: ^1.19.0
@ -12247,9 +12247,9 @@ packages:
'@remirror/core-constants': 2.0.1 '@remirror/core-constants': 2.0.1
'@remirror/core-helpers': 2.0.3 '@remirror/core-helpers': 2.0.3
escape-string-regexp: 4.0.0 escape-string-regexp: 4.0.0
prosemirror-model: 1.19.2 prosemirror-model: 1.19.4
prosemirror-state: 1.4.3 prosemirror-state: 1.4.3
prosemirror-view: 1.31.5 prosemirror-view: 1.32.7
transitivePeerDependencies: transitivePeerDependencies:
- supports-color - supports-color
dev: false dev: false
@ -12257,13 +12257,13 @@ packages:
/prosemirror-transform@1.7.3: /prosemirror-transform@1.7.3:
resolution: {integrity: sha512-qDapyx5lqYfxVeUWEw0xTGgeP2S8346QtE7DxkalsXlX89lpzkY6GZfulgfHyk1n4tf74sZ7CcXgcaCcGjsUtA==} resolution: {integrity: sha512-qDapyx5lqYfxVeUWEw0xTGgeP2S8346QtE7DxkalsXlX89lpzkY6GZfulgfHyk1n4tf74sZ7CcXgcaCcGjsUtA==}
dependencies: dependencies:
prosemirror-model: 1.19.2 prosemirror-model: 1.19.4
dev: false dev: false
/prosemirror-view@1.31.5: /prosemirror-view@1.32.7:
resolution: {integrity: sha512-tobRCDeCp61elR1d97XE/JTL9FDIfswZpWeNs7GKJjAJvWyMGHWYFCq29850p6bbG2bckP+i9n1vT56RifosbA==} resolution: {integrity: sha512-pvxiOoD4shW41X5bYDjRQk3DSG4fMqxh36yPMt7VYgU3dWRmqFzWJM/R6zeo1KtC8nyk717ZbQND3CC9VNeptw==}
dependencies: dependencies:
prosemirror-model: 1.19.2 prosemirror-model: 1.19.4
prosemirror-state: 1.4.3 prosemirror-state: 1.4.3
prosemirror-transform: 1.7.3 prosemirror-transform: 1.7.3
dev: false dev: false