feat: support config helper multi keys if supported (#2571)

* update: support config helper multi keys

---------

Co-authored-by: Luffy <lufei@docsifyjs.org>

Author: Koooooo-7

docs/helpers.md

@@ -93,6 +93,10 @@ You will get `<a href="/demo/">link</a>`html. Do not worry, you can still set th
 
 ```md
 ![logo](https://docsify.js.org/_media/icon.svg ':class=someCssClass')
+
+<!-- Multiple class names -->
+
+![logo](https://docsify.js.org/_media/icon.svg ':class=someCssClass :class=anotherCssClass')
 ```
 
 ### IDs

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) {

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) {

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();
   }

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(
+        `"<p><a href="http://url" target="_blank"  rel="noopener" class="someCssClass anotherCssClass">alt text</a></p>"`,
+      );
+    });
+
     test('id', async function () {
       const output = window.marked("[alt text](http://url ':id=someCssID')");
 

test/unit/render-util.test.js

@@ -87,6 +87,45 @@ describe('core/render/utils', () => {
       });
     });
 
+    test('parse config with key arguments img', () => {
+      const result = getAndRemoveConfig(
+        "![logo](https://docsify.js.org/_media/icon.svg ' :size=50x100 ')",
+      );
+
+      expect(result).toMatchObject({
+        config: {
+          size: '50x100',
+        },
+        str: "![logo](https://docsify.js.org/_media/icon.svg ' ')",
+      });
+    });
+
+    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")',