fix: async import rehype-highlight library

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

src/components/NcRichText/NcRichText.vue

@@ -302,6 +302,7 @@ See [NcRichContenteditable](#/Components/NcRichContenteditable) documentation fo
 </docs>
 
 <script>
+import { ref } from 'vue'
 import NcReferenceList from './NcReferenceList.vue'
 import NcCheckboxRadioSwitch from '../NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue'
 import { getRoute, remarkAutolink } from './autolink.js'
@@ -313,11 +314,25 @@ 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'
+const rehypeHighlightLoaded = ref(false)
+/**
+ * @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: {
@@ -459,7 +474,7 @@ export default {
 						},
 					},
 				})
-				.use(this.useExtendedMarkdown ? rehypeHighlight : undefined)
+				.use((this.useExtendedMarkdown && rehypeHighlightLoaded.value) ? rehypeHighlight : undefined)
 				// .use(rehypeAddClasses, this.markdownCssClasses)
 				.use(remarkPlaceholder)
 				.use(rehypeExternalLinks, {
@@ -476,6 +491,11 @@ export default {
 
 						if (!tag.startsWith('#')) {
 							if (this.useExtendedMarkdown) {
+								if (tag === 'code' && !rehypeHighlightLoaded.value) {
+									importRehypeLibrary(() => {
+										rehypeHighlightLoaded.value = true
+									})
+								}
 								let nestedNode = null
 								if (tag === 'li' && Array.isArray(children)
 									&& children[0].tag === 'input'