diff --git a/docs/helpers.md b/docs/helpers.md index 57eaa41d0..5d0b03f7c 100644 --- a/docs/helpers.md +++ b/docs/helpers.md @@ -93,6 +93,10 @@ You will get `link`html. Do not worry, you can still set th ```md  + + + + ``` ### IDs diff --git a/src/core/render/compiler/image.js b/src/core/render/compiler/image.js index 4c8ea9089..6e9b20f89 100644 --- a/src/core/render/compiler/image.js +++ b/src/core/render/compiler/image.js @@ -27,7 +27,11 @@ export const imageCompiler = ({ renderer, contentBase, router }) => } if (config.class) { - attrs.push(`class="${config.class}"`); + let classes = config.class; + if (Array.isArray(config.class)) { + classes = config.class.join(' '); + } + attrs.push(`class="${classes}"`); } if (config.id) { diff --git a/src/core/render/compiler/link.js b/src/core/render/compiler/link.js index 9483dd88b..be6f31cb7 100644 --- a/src/core/render/compiler/link.js +++ b/src/core/render/compiler/link.js @@ -54,7 +54,11 @@ export const linkCompiler = ({ } if (config.class) { - attrs.push(`class="${config.class}"`); + let classes = config.class; + if (Array.isArray(config.class)) { + classes = config.class.join(' '); + } + attrs.push(`class="${classes}"`); } if (config.id) { diff --git a/src/core/render/utils.js b/src/core/render/utils.js index 20e4d07e4..66796de1e 100644 --- a/src/core/render/utils.js +++ b/src/core/render/utils.js @@ -26,12 +26,21 @@ export function getAndRemoveConfig(str = '') { .replace(/^('|")/, '') .replace(/('|")$/, '') .replace(/(?:^|\s):([\w-]+:?)=?([\w-%]+)?/g, (m, key, value) => { - if (key.indexOf(':') === -1) { - config[key] = (value && value.replace(/"/g, '')) || true; - return ''; + if (key.indexOf(':') !== -1) { + return m; } - return m; + value = (value && value.replace(/"/g, '')) || true; + + if (value !== true && config[key] !== undefined) { + if (!Array.isArray(config[key]) && value !== config[key]) { + config[key] = [config[key]]; + } + config[key].includes(value) || config[key].push(value); + } else { + config[key] = value; + } + return ''; }) .trim(); } diff --git a/test/integration/render.test.js b/test/integration/render.test.js index 4f624618b..210fcc56d 100644 --- a/test/integration/render.test.js +++ b/test/integration/render.test.js @@ -279,6 +279,16 @@ describe('render', function () { ); }); + test('multi class config', async function () { + const output = window.marked( + "[alt text](http://url ':class=someCssClass :class=anotherCssClass')", + ); + + expect(output).toMatchInlineSnapshot( + `"
"`, + ); + }); + test('id', async function () { const output = window.marked("[alt text](http://url ':id=someCssID')"); diff --git a/test/unit/render-util.test.js b/test/unit/render-util.test.js index 33ae14ad2..6c4218254 100644 --- a/test/unit/render-util.test.js +++ b/test/unit/render-util.test.js @@ -87,6 +87,45 @@ describe('core/render/utils', () => { }); }); + test('parse config with key arguments img', () => { + const result = getAndRemoveConfig( + "", + ); + + expect(result).toMatchObject({ + config: { + size: '50x100', + }, + str: "", + }); + }); + + test('parse config with key arguments', () => { + const result = getAndRemoveConfig( + "[filename](_media/example.md ' :class=foo ')", + ); + + expect(result).toMatchObject({ + config: { + class: 'foo', + }, + str: "[filename](_media/example.md ' ')", + }); + }); + + test('parse config with same key arguments', () => { + const result = getAndRemoveConfig( + "[filename](_media/example.md ' :class=foo :class=bar :bb=aa ')", + ); + + expect(result).toMatchObject({ + config: { + class: ['foo', 'bar'], + }, + str: "[filename](_media/example.md ' ')", + }); + }); + test('parse config with double quotes', () => { const result = getAndRemoveConfig( '[filename](_media/example.md ":include")',