Image resize in % doesn't work anymore

[costimuraru]

Bug Report

We're following the docsify documentation, which states that it's possible to resize an image using a percentage: https://github.com/docsifyjs/docsify/blob/develop/docs/helpers.md#resizing

Steps to reproduce

Use markdown to insert an image, with 50% width:

![My diagram](/_media/diagrams/sample_upstream_flow.png ':size=50%')

What is current behaviour

Notice the width is wrong. Instead of 50% it's just 50. Also the % seems to somehow be transferred to the title attribute:

<img src="/upstream-protocol/sample-app/_media/diagrams/sample_upstream_flow.png" 
 alt="My diagram" 
 title="%" 
 width="50" 
 height="50">

What is the expected behaviour

<img src="/upstream-protocol/sample-app/_media/diagrams/sample_upstream_flow.png" 
 alt="My diagram"
 width="50%">

Other relevant information

Could this be a parsing mardown issue? Perhaps here: https://github.com/docsifyjs/docsify/blob/master/src/core/render/utils.js#L6-L14 ?

• Bug does still occur when all/other plugins are disabled?

• Your OS:

• Node.js version:

• npm/yarn version:

• Browser version:

• Docsify version: 4.11.3

• Docsify plugins:

Please create a reproducible sandbox

Mention the docsify version in which this bug was not present (if any)

[costimuraru]

CC @anikethsaha, @QingWei-Li

[anikethsaha]

I think this #1065 might fix the height issue.
And about the % issue, I do think there might be some bug with the extractor.

could you try ![My diagram](/_media/diagrams/sample_upstream_flow.png ':size=50%x50%') and check if the % issue still exists or not !

[Koooooo-7]

I think this #1065 might fix the height issue.
And about the % issue, I do think there might be some bug with the extractor.

yep, I think it is the regex issues.

...
.replace(/(?:^|\s):([\w-]+:?)=?([\w-]+)?/g, (m, key, value) => {

the ([\w-]+)missed the %. and I checked v4.11.0,v4.8.0,v4.6.8, both have this problem 😅.
I fixed the regex

 .replace(/(?:^|\s):([\w-]+:?)=?([\w-%]+)?/

then, it works.

[anikethsaha]

@Koooooo-7 thanks a lot for investigating this ( as always 😄 )

Can you submit a PR with the fix and also we need to check if it's breaking something else or not,

[Koooooo-7]

@Koooooo-7 thanks a lot for investigating this ( as always )

Can you submit a PR with the fix and also we need to check if it's breaking something else or not,

yea, I m working on it. 🔨

[costimuraru]

Thanks for the quick fix here, @Koooooo-7. And @anikethsaha for reviewing. You guys rock!

[cugxuan]

so great!
waiting for new release!