fix: async import rehype-highlight library

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>

src/components/NcRichText/NcRichText.vue

@@ -313,11 +313,24 @@ 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 should be loaded on demand to reduce component size
+ */
+let rehypeHighlight // from 'rehype-highlight'
+/**
+ * @param {Function} callback - callback function to execute after library is loaded
+ */
+function importRehypeLibrary(callback) {
+	import('rehype-highlight').then((module) => {
+		rehypeHighlight = module.default
+		callback()
+	})
+}
+
 export default {
 	name: 'NcRichText',
 	components: {
@@ -399,6 +412,7 @@ export default {
 	data() {
 		return {
 			parentId: GenRandomId(5),
+			rehypeHighlightLoaded: false,
 		}
 	},
 
@@ -459,7 +473,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 +490,11 @@ export default {
 
 						if (!tag.startsWith('#')) {
 							if (this.useExtendedMarkdown) {
+								if (tag === 'code' && !this.rehypeHighlightLoaded) {
+									importRehypeLibrary(() => {
+										this.rehypeHighlightLoaded = true
+									})
+								}
 								let nestedNode = null
 								if (tag === 'li' && Array.isArray(children)
 									&& children[0].tag === 'input'