fix(NcRichText): async import remark-gfm library

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

src/components/NcRichText/NcRichText.vue

@@ -305,13 +305,13 @@ See [NcRichContenteditable](#/Components/NcRichContenteditable) documentation fo
 import { ref } from 'vue'
 import NcReferenceList from './NcReferenceList.vue'
 import NcCheckboxRadioSwitch from '../NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue'
+import NcLoadingIcon from '../NcLoadingIcon/NcLoadingIcon.vue'
 import { getRoute, remarkAutolink } from './autolink.js'
 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(h) {
 			const context = this
@@ -462,7 +482,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: {
@@ -487,7 +507,7 @@ export default {
 						)
 
 						if (!tag.startsWith('#')) {
-							if (this.useExtendedMarkdown) {
+							if (this.useExtendedMarkdown && remarkGfm.value) {
 								if (tag === 'code' && !rehypeHighlight.value
 									&& attrs?.attrs?.class?.includes('language')) {
 									importRehypeHighlightLibrary()
@@ -569,6 +589,12 @@ export default {
 				)
 				.result
 
+			if (this.useExtendedMarkdown && !remarkGfm.value) {
+				return h('div', { class: 'rich-text--wrapper' }, [
+					h(NcLoadingIcon),
+				])
+			}
+
 			return h('div', { class: 'rich-text--wrapper rich-text--wrapper-markdown' }, [
 				renderedMarkdown,
 				this.referenceLimit > 0

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

@@ -202,6 +202,8 @@ describe('NcRichText', () => {
 				interactive: true,
 			},
 		})
+		await nextTick()
+		await nextTick()
 		expect(wrapper.text()).toEqual('task item')
 		const checkbox = wrapper.findComponent({ name: 'NcCheckboxRadioSwitch' })
 		expect(checkbox.exists()).toBeTruthy()