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(code-block): meta property #2067

Merged
merged 9 commits into from
May 22, 2023
Merged

fix(code-block): meta property #2067

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
97005cf
fix(code-block): meta property
farnabaz May 16, 2023
2b3c393
up
farnabaz May 16, 2023
eec3a60
up
farnabaz May 16, 2023
2ff79df
Update src/runtime/markdown-parser/handler/utils.ts
farnabaz May 17, 2023
5ac822a
up
farnabaz May 17, 2023
66d7c1d
updates tests
farnabaz May 17, 2023
c1e24c8
Merge branch 'main' into fix/code-meta
farnabaz May 17, 2023
b277066
Apply suggestions from code review
farnabaz May 22, 2023
04aa05f
test: fix
farnabaz May 22, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/runtime/markdown-parser/handler/code.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ type Node = MdastContent & {

export default (h: H, node: Node) => {
const lang = (node.lang || '') + ' ' + (node.meta || '')
const { language, highlights, filename } = parseThematicBlock(lang)
const { language, highlights, filename, meta } = parseThematicBlock(lang)
const code = node.value ? detab(node.value + '\n') : ''

return h(
Expand All @@ -22,7 +22,7 @@ export default (h: H, node: Node) => {
language,
filename,
highlights,
meta: node.meta,
meta,
code,
className: [`language-${language}`]
},
Expand Down
4 changes: 3 additions & 1 deletion src/runtime/markdown-parser/handler/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,11 +20,13 @@ export function parseThematicBlock (lang: string) {
const language = lang.replace(/[{|[](.+)/, '').match(/^[^ \t]+(?=[ \t]|$)/)
const highlightTokens = lang.match(/{([^}]+)}/)
const filenameTokens = lang.match(/\[(.+)\]/)
const meta = lang.replace(/^\w+\s*(\[[^\]]+\])?\s*(\{[^}]+\})?\s*/g, '')
farnabaz marked this conversation as resolved.
Show resolved Hide resolved
Copy link
Contributor

@nobkd nobkd May 16, 2023 •
edited

Choose a reason for hiding this comment

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

Previous comment:

A problem is, that the meta regex has a fixed order for lang […] {…} meta
It is not replaced if we write lang {…} […] meta, even though L21-22 allow different ordering.

Also, if we want to use {…} or […] in the meta block, but not provide highlights or a filename, it will be matched (by L21-22).
Maybe, the user could provide an empty [] or {} block before the meta to prevent it from reading those parts in the meta.
Something like: lang [] meta=['not', 'a', 'filename'] would be possible then

In my opinion, we should also trim the lang property before checking if it is empty (adding it in L11)

lang = lang.trim()

Also return undefined (or an empty string '') for the meta if lang is empty (adding in L17)

{
  // ...
  meta: undefined
}


return {
language: language ? language[0] : undefined,
highlights: parseHighlightedLines(highlightTokens && highlightTokens[1]),
filename: Array.isArray(filenameTokens) ? filenameTokens[1] : undefined
filename: Array.isArray(filenameTokens) ? filenameTokens[1] : undefined,
farnabaz marked this conversation as resolved.
Show resolved Hide resolved
meta
}
}

Expand Down
27 changes: 26 additions & 1 deletion test/features/parser-markdown.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,32 @@ export const testMarkdownParser = () => {
expect(parsed.body).toHaveProperty('children[0].props')
const props = parsed.body.children[0].props
expect(props).toHaveProperty('meta')
expect(props.meta).toBe('[file.ts]{4-6,7} other code block info')
expect(props.meta).toBe('other code block info')
expect(props.language).toBe('ts')
expect(props.filename).toBe('file.ts')
expect(props.highlights).toEqual([4, 5, 6, 7])
})

test('Keep meta from fenced code block 2', async () => {
const parsed = await $fetch('/api/parse', {
method: 'POST',
body: {
id: 'content:index.md',
content: [
'```ts[file.ts] {4-6,7} other code block info',
'let code = undefined;',
'return code;',
'```'
].join('\n')
}
})

expect(parsed).toHaveProperty('body')
expect(parsed.body).toHaveProperty('children[0].tag', 'code')
expect(parsed.body).toHaveProperty('children[0].props')
const props = parsed.body.children[0].props
expect(props).toHaveProperty('meta')
expect(props.meta).toBe('other code block info')
expect(props.language).toBe('ts')
expect(props.filename).toBe('file.ts')
expect(props.highlights).toEqual([4, 5, 6, 7])
Expand Down