fix(NcRichText): async import remark-gfm library

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

src/components/NcRichText/NcRichText.vue

@@ -304,13 +304,13 @@ See [NcRichContenteditable](#/Components/NcRichContenteditable) documentation fo
 <script>
 import NcReferenceList from './NcReferenceList.vue'
 import NcCheckboxRadioSwitch from '../NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue'
+import NcLoadingIcon from '../NcLoadingIcon/NcLoadingIcon.vue'
 import { getRoute, remarkAutolink } from './autolink.ts'
 import { remarkPlaceholder, prepareTextNode } from './placeholder.js'
 import GenRandomId from '../../utils/GenRandomId.js'
 
 import { unified } from 'unified'
 import remarkParse from 'remark-parse'
-import remarkGfm from 'remark-gfm'
 import breaks from 'remark-breaks'
 import remark2rehype from 'remark-rehype'
 import rehype2react from 'rehype-react'
@@ -321,6 +321,15 @@ import { RouterLink } from 'vue-router'
 /**
  * Heavy libraries should be loaded on demand to reduce component size
  */
+const remarkGfm = ref(null)
+/**
+ * Load 'remark-gfm' library when prop `useExtendedMarkdown` is truthy
+ */
+async function importRemarkGfmLibrary() {
+	const module = await import('remark-gfm')
+	remarkGfm.value = module.default
+}
+
 const rehypeHighlight = ref(null)
 /**
  * Load 'rehype-highlight' library when code block is rendered with `useExtendedMarkdown`
@@ -414,6 +423,17 @@ export default {
 		}
 	},
 
+	watch: {
+		useExtendedMarkdown: {
+			handler(value) {
+				if (value && !remarkGfm.value) {
+					importRemarkGfmLibrary()
+				}
+			},
+			immediate: true,
+		},
+	},
+
 	methods: {
 		renderPlaintext() {
 			const placeholders = this.text.split(/(\{[a-z\-_.0-9]+\})/ig).map((entry) => {
@@ -459,7 +479,7 @@ export default {
 					useMarkdown: this.useMarkdown,
 					useExtendedMarkdown: this.useExtendedMarkdown,
 				})
-				.use(this.useExtendedMarkdown ? remarkGfm : undefined)
+				.use(this.useExtendedMarkdown ? remarkGfm.value : undefined)
 				.use(breaks)
 				.use(remark2rehype, {
 					handlers: {
@@ -520,7 +540,7 @@ export default {
 
 			if (!String(type).startsWith('#')) {
 				let nestedNode = null
-				if (this.useExtendedMarkdown) {
+				if (this.useExtendedMarkdown && remarkGfm.value) {
 					if (String(type) === 'code' && !rehypeHighlight.value
 						&& props?.class?.includes('language')) {
 						importRehypeHighlightLibrary()
@@ -578,6 +598,12 @@ export default {
 				return h('span', { ...props }, [placeholder])
 			}
 
+			if (this.useExtendedMarkdown && !remarkGfm.value) {
+				return h('div', { class: 'rich-text--wrapper' }, [
+					h(NcLoadingIcon),
+				])
+			}
+
 			return h(
 				(typeof placeholder.component === 'string') ? resolveComponent(placeholder.component) : placeholder.component,
 				{

tests/unit/components/NcRichText/NcRichText.spec.js

@@ -204,6 +204,7 @@ describe('Foo', () => {
 				interactive: true,
 			},
 		})
+		await vi.dynamicImportSettled()
 		expect(wrapper.text()).toEqual('task item')
 		const checkbox = wrapper.findComponent({ name: 'NcCheckboxRadioSwitch' })
 		expect(checkbox.exists()).toBeTruthy()