Skip to content

Commit

Permalink
fix(markdown): handle data uri correctly, close #1393
Browse files Browse the repository at this point in the history
  • Loading branch information
@Mister-Hope
Mister-Hope committed Aug 20, 2023
1 parent db3ce2c commit a092a2a
Show file tree
Hide file tree
Showing 2 changed files with 50 additions and 27 deletions.
7 changes: 5 additions & 2 deletions packages/markdown/src/plugins/assetsPlugin/resolveLink.ts
View file
Expand Up @@ -6,8 +6,11 @@ export const resolveLink = (
link: string,
relativePathPrefix: string,
env: MarkdownEnv,
strict = false,
strict = false
): string => {
// do not resolve data uri
if (link.startsWith('data:')) return link

// decode link to ensure bundler can find the file correctly
let resolvedLink = decode(link)

Expand All @@ -23,7 +26,7 @@ export const resolveLink = (
if (isRelativePath && env.filePathRelative) {
resolvedLink = `${relativePathPrefix}/${path.join(
path.dirname(env.filePathRelative),
resolvedLink,
resolvedLink
)}`
}

Expand Down
70 changes: 45 additions & 25 deletions packages/markdown/tests/plugins/assetsPlugin.spec.ts
View file
Expand Up @@ -34,6 +34,8 @@ describe('@vuepress/markdown > plugins > assetsPlugin', () => {
'![invalid](.../invalid.png)',
'![汉字](.../汉字.png)',
'![100%](.../100%.png)',
// data uri
'![data-uri](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+P+/HgAFhAJ/wr4H/wAAAABJRU5ErkJggg==)',
]

const testCases: {
Expand Down Expand Up @@ -77,6 +79,8 @@ describe('@vuepress/markdown > plugins > assetsPlugin', () => {
'<img src="@source/sub/.../invalid.png" alt="invalid">',
'<img src="@source/sub/.../汉字.png" alt="汉字">',
'<img src="@source/sub/.../100%.png" alt="100%">',
// data uri
'<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+P+/HgAFhAJ/wr4H/wAAAABJRU5ErkJggg==" alt="data-uri">',
],
},
{
Expand Down Expand Up @@ -116,6 +120,8 @@ describe('@vuepress/markdown > plugins > assetsPlugin', () => {
'<img src="@foo/sub/.../invalid.png" alt="invalid">',
'<img src="@foo/sub/.../汉字.png" alt="汉字">',
'<img src="@foo/sub/.../100%.png" alt="100%">',
// data uri
'<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+P+/HgAFhAJ/wr4H/wAAAABJRU5ErkJggg==" alt="data-uri">',
],
},
{
Expand Down Expand Up @@ -152,16 +158,18 @@ describe('@vuepress/markdown > plugins > assetsPlugin', () => {
'<img src=".../invalid.png" alt="invalid">',
'<img src=".../汉字.png" alt="汉字">',
'<img src=".../100%.png" alt="100%">',
// data uri
'<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+P+/HgAFhAJ/wr4H/wAAAABJRU5ErkJggg==" alt="data-uri">',
],
},
]

testCases.forEach(({ description, md, env, expected }) =>
it(description, () => {
expect(md.render(source.join('\n\n'), env)).toEqual(
expected.map((item) => `<p>${item}</p>`).join('\n') + '\n',
expected.map((item) => `<p>${item}</p>`).join('\n') + '\n'
)
}),
})
)
})

Expand Down Expand Up @@ -236,6 +244,9 @@ describe('@vuepress/markdown > plugins > assetsPlugin', () => {
'<img srcset="~@alias/foo.png 1x, ~@alias/汉字.png 2x, ~@alias/100%.png 3x" alt="attrs" src="~@alias/attrs.png" width="100px">',
// keep as is
'<img alt="attrs" src="" width="100px" srcset="/absolute.png 1x, no-prefix.png 2x, http://foobar.com/icon.png">',

/* data uri */
'<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+P+/HgAFhAJ/wr4H/wAAAABJRU5ErkJggg==">',
]

const testCases: {
Expand Down Expand Up @@ -319,6 +330,9 @@ describe('@vuepress/markdown > plugins > assetsPlugin', () => {
'<img srcset="~@alias/foo.png 1x, ~@alias/汉字.png 2x, ~@alias/100%.png 3x" alt="attrs" src="~@alias/attrs.png" width="100px">',
// keep as is
'<img alt="attrs" src="" width="100px" srcset="/absolute.png 1x, no-prefix.png 2x, http://foobar.com/icon.png">',

/* data uri */
'<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+P+/HgAFhAJ/wr4H/wAAAABJRU5ErkJggg==">',
],
},
{
Expand Down Expand Up @@ -398,6 +412,9 @@ describe('@vuepress/markdown > plugins > assetsPlugin', () => {
'<img srcset="~@alias/foo.png 1x, ~@alias/汉字.png 2x, ~@alias/100%.png 3x" alt="attrs" src="~@alias/attrs.png" width="100px">',
// keep as is
'<img alt="attrs" src="" width="100px" srcset="/absolute.png 1x, no-prefix.png 2x, http://foobar.com/icon.png">',

/* data uri */
'<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+P+/HgAFhAJ/wr4H/wAAAABJRU5ErkJggg==">',
],
},
{
Expand Down Expand Up @@ -474,6 +491,9 @@ describe('@vuepress/markdown > plugins > assetsPlugin', () => {
'<img srcset="~@alias/foo.png 1x, ~@alias/汉字.png 2x, ~@alias/100%.png 3x" alt="attrs" src="~@alias/attrs.png" width="100px">',
// keep as is
'<img alt="attrs" src="" width="100px" srcset="/absolute.png 1x, no-prefix.png 2x, http://foobar.com/icon.png">',

/* data uri */
'<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+P+/HgAFhAJ/wr4H/wAAAABJRU5ErkJggg==">',
],
},
]
Expand All @@ -482,43 +502,43 @@ describe('@vuepress/markdown > plugins > assetsPlugin', () => {
it(description, () => {
// block
expect(md.render(source.join('\n\n'), env)).toEqual(
expected.map((item) => `${item}`).join('\n'),
expected.map((item) => `${item}`).join('\n')
)

// block with leading white space
expect(
md.render(source.map((item) => ` ${item}`).join('\n\n'), env),
md.render(source.map((item) => ` ${item}`).join('\n\n'), env)
).toEqual(expected.map((item) => ` ${item}`).join('\n'))

// inline with prefix
expect(
md.render(source.map((item) => `foo${item}`).join('\n\n'), env),
md.render(source.map((item) => `foo${item}`).join('\n\n'), env)
).toEqual(
expected.map((item) => `<p>foo${item}</p>`).join('\n') + '\n',
expected.map((item) => `<p>foo${item}</p>`).join('\n') + '\n'
)

// inline with suffix
expect(
md.render(source.map((item) => `${item}foo`).join('\n\n'), env),
md.render(source.map((item) => `${item}foo`).join('\n\n'), env)
).toEqual(
expected.map((item) => `<p>${item}foo</p>`).join('\n') + '\n',
expected.map((item) => `<p>${item}foo</p>`).join('\n') + '\n'
)

// inline with line break
expect(
md.render(
source.map((item) => item.replace('<img', '<img\n')).join('\n\n'),
env,
),
env
)
).toEqual(
expected
.map((item) => `<p>${item.replace('<img', '<img\n')}</p>`)
.join('\n') + '\n',
.join('\n') + '\n'
)

// wrapped item
expect(
md.render(source.map((item) => `<p>${item}</p>`).join('\n\n'), env),
md.render(source.map((item) => `<p>${item}</p>`).join('\n\n'), env)
).toEqual(expected.map((item) => `<p>${item}</p>`).join('\n'))

// wrapped item with line break
Expand All @@ -527,20 +547,20 @@ describe('@vuepress/markdown > plugins > assetsPlugin', () => {
source
.map((item) => `<p>${item.replace('<img', '<img\n')}</p>`)
.join('\n\n'),
env,
),
env
)
).toEqual(
expected
.map((item) => `<p>${item.replace('<img', '<img\n')}</p>`)
.join('\n'),
.join('\n')
)

// wrapped multiple items
expect(
md.render(
source.map((item) => `<p>${item}${item}</p>`).join('\n\n'),
env,
),
env
)
).toEqual(expected.map((item) => `<p>${item}${item}</p>`).join('\n'))

// deeply wrapped multiple items
Expand All @@ -549,14 +569,14 @@ describe('@vuepress/markdown > plugins > assetsPlugin', () => {
source
.map((item) => `<p>\n<span>\n${item}\n${item}\n</span>\n</p>`)
.join('\n\n'),
env,
),
env
)
).toEqual(
expected
.map((item) => `<p>\n<span>\n${item}\n${item}\n</span>\n</p>`)
.join('\n'),
.join('\n')
)
}),
})
)
})

Expand Down Expand Up @@ -655,16 +675,16 @@ describe('@vuepress/markdown > plugins > assetsPlugin', () => {
it(description, () => {
// double quote
expect(md.render(source.join('\n\n'), env)).toEqual(
expected.map((item) => `${item}`).join('\n') + '\n',
expected.map((item) => `${item}`).join('\n') + '\n'
)
// single quote
expect(
md.render(source.join('\n\n').replace(/"/g, "'"), env),
md.render(source.join('\n\n').replace(/"/g, "'"), env)
).toEqual(
expected.map((item) => `${item}`.replace(/"/g, "'")).join('\n') +
'\n',
'\n'
)
}),
})
)
})
})
Expand Down

0 comments on commit a092a2a

Please sign in to comment.