fix: async import rehype-highlight library

Signed-off-by: Maksim Sukharev <[email protected]>

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