fix(NcRichText): async import remark-gfm library

[Antreesy]

☑️ Resolves

• Fix [Enhancement] NcRichText: remark-gfm could be async loaded to reduce initial size #6246
• remark-gfm is 39.5 kB in dev build, which is 30% of rehype-highlight library size (111kB which we're also importing async)
• rehype-highlight won't be imported for code blocks without language provided/recognised
• ⚠️ if all conditions are met, that would cause two re-renders of the first component

🖼️ Screenshots

No visual changes

🏁 Checklist

• ⛑️ Tests are included or are not applicable
• 📘 Component documentation has been extended, updated or is not applicable
• 3️⃣ Backport to next requested with a Vue 3 upgrade
  Signed-off-by: Maksim Sukharev [email protected]

[ShGKme]

I'm not sure this is a good idea with remark-gfm.

If the connection is slow - it first renders the raw text value, and then it flashes to rendered Markdown.

Unlike code => code with highlights update, this is a huge visible change. Imagine a message with headings and lists, that is first a plain text and then formatted.

I'm not sure we need a dynamic module here. But if we do it, we should render content ONLY when remark-gfm is loaded, and render nothing during loading.

[ShGKme]

This loads the lib only if useExtendedMarkdown was true initially. It doesn't support prop update.

[ShGKme]

makes sense 👍

[ShGKme]

Just realized, we only need one variable here.

Suggested change

	let remarkGfm
	const remarkGfmLoaded = ref(false)
	/**
	* Load 'remark-gfm' library when prop `useExtendedMarkdown` is truthy
	*/
	async function importRemarkGfmLibrary() {
	const module = await import('remark-gfm')
	remarkGfm = module.default
	remarkGfmLoaded.value = true
	}
	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
	}