From 2db7b3d9c70ab0ec8fbb8328e8d3c6fedf7e3e4e Mon Sep 17 00:00:00 2001
From: Roman Rizzi <rizziromanalejandro@gmail.com>
Date: Wed, 15 Jan 2020 14:01:14 -0300
Subject: [PATCH] FIX: Correctly wrap image and resize controls inside
 paragraph (#8718)

---
 .../discourse-markdown/resize-controls.js.es6 | 24 +++++--------------
 1 file changed, 6 insertions(+), 18 deletions(-)

diff --git a/app/assets/javascripts/pretty-text/engines/discourse-markdown/resize-controls.js.es6 b/app/assets/javascripts/pretty-text/engines/discourse-markdown/resize-controls.js.es6
index bb8e381d33..11458bdd02 100644
--- a/app/assets/javascripts/pretty-text/engines/discourse-markdown/resize-controls.js.es6
+++ b/app/assets/javascripts/pretty-text/engines/discourse-markdown/resize-controls.js.es6
@@ -22,14 +22,14 @@ function wrapImage(tokens, index, state, imgNumber) {
   tokens.splice(
     index,
     0,
-    buildToken(state, "wrap_image_open", "div", "image-wrapper", 1)
+    buildToken(state, "wrap_image_open", "span", "image-wrapper", 1)
   );
 
   const newElements = [];
   const btnWrapper = buildToken(
     state,
     "wrap_button_open",
-    "div",
+    "span",
     "button-wrapper",
     1
   );
@@ -70,24 +70,14 @@ function wrapImage(tokens, index, state, imgNumber) {
       newElements.push(buildToken(state, "separator_close", "span", "", -1));
     }
   });
-  newElements.push(buildToken(state, "wrap_button_close", "div", "", -1));
+  newElements.push(buildToken(state, "wrap_button_close", "span", "", -1));
 
-  newElements.push(buildToken(state, "wrap_image_close", "div", "", -1));
+  newElements.push(buildToken(state, "wrap_image_close", "span", "", -1));
 
   const afterImageIndex = index + 2;
   tokens.splice(afterImageIndex, 0, ...newElements);
 }
 
-function removeParagraph(tokens, imageIndex) {
-  if (
-    tokens[imageIndex - 1] &&
-    tokens[imageIndex - 1].type === "paragraph_open"
-  )
-    tokens.splice(imageIndex - 1, 1);
-  if (tokens[imageIndex] && tokens[imageIndex].type === "paragraph_close")
-    tokens.splice(imageIndex, 1);
-}
-
 function updateIndexes(indexes, name) {
   indexes[name].push(indexes.current);
   indexes.current++;
@@ -97,7 +87,6 @@ function wrapImages(tokens, tokenIndexes, state, imgNumberIndexes) {
   //We do this in reverse order because it's easier for #wrapImage to manipulate the tokens array.
   for (let j = tokenIndexes.length - 1; j >= 0; j--) {
     let index = tokenIndexes[j];
-    removeParagraph(tokens, index);
     wrapImage(tokens, index, state, imgNumberIndexes.pop());
   }
 }
@@ -123,7 +112,6 @@ function rule(state) {
       const childrenImage = token.tag === "img";
 
       if (childrenImage && isUpload(blockToken) && hasMetadata(token)) {
-        removeParagraph(state.tokens, i);
         childrenIndexes.push(j);
         updateIndexes(indexNumbers, "childrens");
       }
@@ -144,8 +132,8 @@ export function setup(helper) {
   const opts = helper.getOptions();
   if (opts.previewing) {
     helper.whiteList([
-      "div.image-wrapper",
-      "div.button-wrapper",
+      "span.image-wrapper",
+      "span.button-wrapper",
       "span[class=scale-btn]",
       "span[class=scale-btn active]",
       "span.separator",