From 5e98f6658cda82b4e7817e266cedb1879086f96c Mon Sep 17 00:00:00 2001 From: Maksim Sukharev Date: Mon, 25 Nov 2024 23:45:35 +0100 Subject: [PATCH 1/2] fix(NcRichText): adjust import conditions for rehype-highlight library Signed-off-by: Maksim Sukharev --- src/components/NcRichText/NcRichText.vue | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/src/components/NcRichText/NcRichText.vue b/src/components/NcRichText/NcRichText.vue index 08c4a19f2d..fd48323724 100644 --- a/src/components/NcRichText/NcRichText.vue +++ b/src/components/NcRichText/NcRichText.vue @@ -321,15 +321,13 @@ import { RouterLink } from 'vue-router' /** * Heavy libraries should be loaded on demand to reduce component size */ -let rehypeHighlight -const rehypeHighlightLoaded = ref(false) +const rehypeHighlight = ref(null) /** * Load 'rehype-highlight' library when code block is rendered with `useExtendedMarkdown` */ -async function importRehypeLibrary() { +async function importRehypeHighlightLibrary() { const module = await import('rehype-highlight') - rehypeHighlight = module.default - rehypeHighlightLoaded.value = true + rehypeHighlight.value = module.default } export default { @@ -473,7 +471,7 @@ export default { }, }, }) - .use((this.useExtendedMarkdown && rehypeHighlightLoaded.value) ? rehypeHighlight : undefined) + .use(this.useExtendedMarkdown ? rehypeHighlight.value : undefined) // .use(rehypeAddClasses, this.markdownCssClasses) .use(remarkPlaceholder) .use(rehypeExternalLinks, { @@ -490,8 +488,9 @@ export default { if (!tag.startsWith('#')) { if (this.useExtendedMarkdown) { - if (tag === 'code' && !rehypeHighlightLoaded.value) { - importRehypeLibrary() + if (tag === 'code' && !rehypeHighlight.value + && attrs?.attrs?.class?.includes('language')) { + importRehypeHighlightLibrary() } let nestedNode = null if (tag === 'li' && Array.isArray(children) From 49ce673235268a63e765859caeabec6800dba136 Mon Sep 17 00:00:00 2001 From: Maksim Sukharev Date: Tue, 26 Nov 2024 00:52:32 +0100 Subject: [PATCH 2/2] fix(NcRichText): async import remark-gfm library Signed-off-by: Maksim Sukharev --- src/components/NcRichText/NcRichText.vue | 32 +++++++++++++++++-- .../components/NcRichText/NcRichText.spec.js | 2 ++ 2 files changed, 31 insertions(+), 3 deletions(-) diff --git a/src/components/NcRichText/NcRichText.vue b/src/components/NcRichText/NcRichText.vue index fd48323724..c7614abf0f 100644 --- a/src/components/NcRichText/NcRichText.vue +++ b/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 diff --git a/tests/unit/components/NcRichText/NcRichText.spec.js b/tests/unit/components/NcRichText/NcRichText.spec.js index 84bbf0a06e..135c544985 100644 --- a/tests/unit/components/NcRichText/NcRichText.spec.js +++ b/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()