Fixed matches sorting in shortcodeConverter.

[jorgefilipecosta]

It looks like the algorithm to compute and return shortcode pieces array is dependent on ascending sorting of the matches and the sorting was not ascending causing a series of bugs and unexpected behaviours.
This change should fix issue #4215 and the "Problems converting a Bootstrap page" section referred in issue #4219.

Description

This PR just changes sorting in shortcodeConverter function to be ascending as it looks like is what the algorithm expects.

How Has This Been Tested?

Paste into a simple text editor first to make sure pasting is plain text. Copying from here escapes content.
Paste the following text :

<div>
[caption id="attachment_915" align="aligncenter" width="50"]<a href="/another-page/"><img src="https://dummyimage.com/50x50/333333/09f09f.jpg&amp;text=image+1" alt="“My alt” alt 1" width="50" height="50" /></a> “My caption” caption 1[/caption]

[caption id="attachment_936" align="aligncenter" width="50"]<a href="/another-page/"><img src="https://dummyimage.com/50x50/000000/ffffff.jpg&amp;text=image+2" alt="“My alt” alt 2" width="50" height="50" /></a> “My caption” caption 2[/caption]
</div> 

Verify the output is an image block as expected.

Create a post in the classic editor with the following content provided by @ElectricFeet in issue #4219:

<div class="row">

<div class="col-xs-12 col-md-6 col-lg-4">
[caption id="attachment_915" align="aligncenter" width="400"]<a href="/another-page/"><img src="https://dummyimage.com/400x400/333333/09f09f.jpg&text=image+1" alt="“My alt” alt 1" width="400" height="400" /></a> “My caption” caption 1[/caption]
</div>

<div class="col-xs-12 col-md-6 col-lg-4">
[caption id="attachment_936" align="aligncenter" width="400"]<a href="/another-page/"><img src="https://dummyimage.com/400x400/000000/ffffff.jpg&text=image+2" alt="“My alt” alt 2" width="400" height="400" /></a> “My caption” caption 2[/caption]
</div>

<div class="col-xs-12 col-md-12 col-lg-4">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
<p style="text-align: right;"><a title="More" href="/another-page/">...More</a></p>
</div>

</div>

Load the post in Gutenberg use convert to blocks option and verify the result is similar to what we add in the classic editor.

Verify "simple" shortcode pasting works as before.

Screenshots (jpeg or gifs if applicable):

Before:

After:

Before:

After:

[ellatrix]

Wow, I can't believe I didn't see your PR... I just created #4274 which does essentially the same. Are the array of keys not all strings though? Should we pass through pasteInt?

[jorgefilipecosta]

Are the array of keys not all strings though? Should we pass through pasteInt?

Hi @iseulde, thank you for your review. It is a good indication that this solves the problem if both of us arrived to the same fix :) Yes, the array keys are strings, but given that we are applying the "-" arithmetic operator the values get converted to integers before the operator execution, so I decided to not have parseInt in order for the code to be simpler.

[ellatrix]

Sounds good to me then :)

[mcsf]

Ah, late to the party. Good fix. Since it may not be obvious to the reader that Array#sort defaults to alphabetical sorting, we could add a small comment explaining that providing (a, b) => a - b just forces numerical sorting over alphabetical.