Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(NcRichText): async import remark-gfm library #6259

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
+25 −6
Open

fix(NcRichText): async import remark-gfm library #6259

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2518c65
fix(NcRichText): async import remark-gfm library
Antreesy Nov 22, 2024
cc74645
fix(NcRichText): adjust import conditions for rehype-highlight library
Antreesy Nov 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 23 additions & 6 deletions src/components/NcRichText/NcRichText.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -311,7 +311,6 @@ 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'
Expand All @@ -321,12 +320,22 @@ import { RouterLink } from 'vue-router'
/**
* Heavy libraries should be loaded on demand to reduce component size
*/
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
}
Comment on lines +323 to +332
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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
}

let rehypeHighlight
const rehypeHighlightLoaded = ref(false)
/**
* 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
Expand Down Expand Up @@ -410,6 +419,12 @@ export default {
},
emits: ['interact:todo'],

setup(props) {
if (props.useExtendedMarkdown && !remarkGfmLoaded.value) {
importRemarkGfmLibrary()
}
},
Comment on lines +422 to +426
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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


data() {
return {
parentId: GenRandomId(5),
Expand Down Expand Up @@ -464,7 +479,7 @@ export default {
useMarkdown: this.useMarkdown,
useExtendedMarkdown: this.useExtendedMarkdown,
})
.use(this.useExtendedMarkdown ? remarkGfm : undefined)
.use((this.useExtendedMarkdown && remarkGfmLoaded.value) ? remarkGfm : undefined)
.use(breaks)
.use(remark2rehype, {
handlers: {
Expand All @@ -489,9 +504,11 @@ export default {
)

if (!tag.startsWith('#')) {
if (this.useExtendedMarkdown) {
if (tag === 'code' && !rehypeHighlightLoaded.value) {
importRehypeLibrary()
if (this.useExtendedMarkdown && remarkGfmLoaded.value) {
if (tag === 'code'
&& attrs?.attrs?.class?.includes('language')
&& !rehypeHighlightLoaded.value) {
importRehypeHighlightLibrary()
Comment on lines +509 to +511
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

makes sense 👍

}
let nestedNode = null
if (tag === 'li' && Array.isArray(children)
Expand Down
2 changes: 2 additions & 0 deletions tests/unit/components/NcRichText/NcRichText.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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()
Expand Down
Loading