From 228e30f5518c941fe73c4f51531f07d5328ed72e Mon Sep 17 00:00:00 2001 From: Maksim Sukharev Date: Fri, 15 Nov 2024 16:15:12 +0100 Subject: [PATCH] fix: async import rehype-highlight library Signed-off-by: Maksim Sukharev --- src/components/NcRichText/NcRichText.vue | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/src/components/NcRichText/NcRichText.vue b/src/components/NcRichText/NcRichText.vue index f3006fed90..123515516b 100644 --- a/src/components/NcRichText/NcRichText.vue +++ b/src/components/NcRichText/NcRichText.vue @@ -313,11 +313,13 @@ import remarkParse from 'remark-parse' import remarkGfm from 'remark-gfm' import breaks from 'remark-breaks' import remark2rehype from 'remark-rehype' -import rehypeHighlight from 'rehype-highlight' import rehype2react from 'rehype-react' import rehypeExternalLinks from 'rehype-external-links' import { RouterLink } from 'vue-router' +// Heavy libraries are loaded on demand +let rehypeHighlight // from 'rehype-highlight' + export default { name: 'NcRichText', components: { @@ -399,6 +401,7 @@ export default { data() { return { parentId: GenRandomId(5), + rehypeHighlightLoaded: false, } }, @@ -459,7 +462,7 @@ export default { }, }, }) - .use(this.useExtendedMarkdown ? rehypeHighlight : undefined) + .use((this.useExtendedMarkdown && this.rehypeHighlightLoaded) ? rehypeHighlight : undefined) // .use(rehypeAddClasses, this.markdownCssClasses) .use(remarkPlaceholder) .use(rehypeExternalLinks, { @@ -476,6 +479,9 @@ export default { if (!tag.startsWith('#')) { if (this.useExtendedMarkdown) { + if (tag === 'code' && !this.rehypeHighlightLoaded) { + this.importRehypeLibrary() + } let nestedNode = null if (tag === 'li' && Array.isArray(children) && children[0].tag === 'input' @@ -569,6 +575,12 @@ export default { : null, ]) }, + importRehypeLibrary() { + import('rehype-highlight').then((module) => { + rehypeHighlight = module.default + this.rehypeHighlightLoaded = true + }) + }, }, render(h) { return this.useMarkdown || this.useExtendedMarkdown