DEV: Make image resize controls more resilient (#8867)

Commit aa24be1 made it possible to build data attributes from image's
Markdown and this changes ensure that the resize controls still work
when data attributes are present.

app/assets/javascripts/discourse/components/composer-editor.js.es6

@@ -787,19 +787,18 @@ export default Component.extend({
   },
 
   _registerImageScaleButtonClick($preview) {
-    // original string `![image|690x220, 50%](upload://1TjaobgKObzpU7xRMw2HuUc87vO.png "image title")`
+    // original string `![image|foo=bar|690x220, 50%|bar=baz](upload://1TjaobgKObzpU7xRMw2HuUc87vO.png "image title")`
-    // group 1 `image`
+    // group 1 `image|foo=bar`
     // group 2 `690x220`
     // group 3 `, 50%`
-    // group 4 'upload://1TjaobgKObzpU7xRMw2HuUc87vO.png'
+    // group 4 '|bar=baz'
-    // group 4 'upload://1TjaobgKObzpU7xRMw2HuUc87vO.png "image title"'
+    // group 5 'upload://1TjaobgKObzpU7xRMw2HuUc87vO.png "image title"'
 
     // Notes:
     // Group 3 is optional. group 4 can match images with or without a markdown title.
     // All matches are whitespace tolerant as long it's still valid markdown.
     // If the image is inside a code block, we'll ignore it `(?!(.*`))`.
-    const imageScaleRegex = /!\[(.*?)\|(\d{1,4}x\d{1,4})(,\s*\d{1,3}%)?\]\((upload:\/\/.*?)\)(?!(.*`))/g;
+    const imageScaleRegex = /!\[(.*?)\|(\d{1,4}x\d{1,4})(,\s*\d{1,3}%)?(.*?)\]\((upload:\/\/.*?)\)(?!(.*`))/g;
-
     $preview.off("click", ".scale-btn").on("click", ".scale-btn", e => {
       const index = parseInt(
         $(e.target)
@@ -821,7 +820,7 @@ export default Component.extend({
 
         const replacement = match.replace(
           imageScaleRegex,
-          `![$1|$2, ${scale}%]($4)`
+          `![$1|$2, ${scale}%$4]($5)`
         );
 
         this.appEvents.trigger(

app/assets/javascripts/pretty-text/engines/discourse-markdown/resize-controls.js.es6

@@ -15,10 +15,15 @@ function buildToken(state, type, tag, klass, nesting) {
 
 function wrapImage(tokens, index, state, imgNumber) {
   const imgToken = tokens[index];
-  let selectedScale = imgToken.content
+  const sizePart = imgToken.content
-    .split(",")
+    .split("|")
-    .pop()
+    .find(x => x.match(/\d{1,4}x\d{1,4}(,\s*\d{1,3}%)?/));
-    .trim();
+  let selectedScale =
+    sizePart &&
+    sizePart
+      .split(",")
+      .pop()
+      .trim();
   tokens.splice(
     index,
     0,

test/javascripts/acceptance/composer-test.js.es6

@@ -766,13 +766,15 @@ QUnit.test("Image resizing buttons", async assert => {
     // 10 Image with markdown title - should work
     `![image|690x220](upload://test.png "image title")`,
     // 11 bbcode - should not work
-    "[img]http://example.com/image.jpg[/img]"
+    "[img]http://example.com/image.jpg[/img]",
+    // 12 Image with data attributes
+    "![test|foo=bar|690x313,50%|bar=baz](upload://test.png)"
   ];
 
   await fillIn(".d-editor-input", uploads.join("\n"));
 
   assert.ok(
-    find(".button-wrapper").length === 9,
+    find(".button-wrapper").length === 10,
     "it adds correct amount of scaling button groups"
   );
 
@@ -820,6 +822,13 @@ QUnit.test("Image resizing buttons", async assert => {
   );
   assertImageResized(assert, uploads);
 
+  // Keep data attributes
+  uploads[12] = `![test|foo=bar|690x313, 75%|bar=baz](upload://test.png)`;
+  await click(
+    find(".button-wrapper[data-image-index='9'] .scale-btn[data-scale='75']")
+  );
+  assertImageResized(assert, uploads);
+
   await fillIn(
     ".d-editor-input",
     `