ACP2E-1444: [Page Builder] Product widget does not work with SKUs containing '&'

Author: bubasuma

app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/products/mass-converter/carousel-widget-directive.js

@@ -30,7 +30,9 @@ export default class WidgetDirective extends BaseWidgetDirective {
         data.carousel_products_count = attributes.products_count;
         data.sort_order = attributes.sort_order;
         data.condition_option = attributes.condition_option || "condition";
-        data[data.condition_option] = this.decodeWysiwygCharacters(attributes.condition_option_value || "");
+        data[data.condition_option] = this.decodeWysiwygCharacters(
+            this.decodeHtmlCharacters(attributes.condition_option_value || ""),
+        );
         data.conditions_encoded = this.decodeWysiwygCharacters(attributes.conditions_encoded || "");
         data[data.condition_option + "_source"] = data.conditions_encoded;
         return data;
@@ -98,4 +100,20 @@ export default class WidgetDirective extends BaseWidgetDirective {
             .replace(/&lt;/g, "<")
             .replace(/&gt;/g, ">");
     }
+
+    /**
+     * Decode html special characters
+     *
+     * @param {string} content
+     * @returns {string}
+     */
+    private decodeHtmlCharacters(content: string) {
+        if (content) {
+            const htmlDocument = new DOMParser().parseFromString(content, "text/html");
+
+            return htmlDocument.body ? htmlDocument.body.textContent : content;
+        }
+
+        return content;
+    }
 }

app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/products/mass-converter/widget-directive.js

@@ -30,7 +30,9 @@ export default class WidgetDirective extends BaseWidgetDirective {
         data.products_count = attributes.products_count;
         data.sort_order = attributes.sort_order;
         data.condition_option = attributes.condition_option || "condition";
-        data[data.condition_option] = this.decodeWysiwygCharacters(attributes.condition_option_value || "");
+        data[data.condition_option] = this.decodeWysiwygCharacters(
+            this.decodeHtmlCharacters(attributes.condition_option_value || ""),
+        );
         data.conditions_encoded = this.decodeWysiwygCharacters(attributes.conditions_encoded || "");
         data[data.condition_option + "_source"] = data.conditions_encoded;
         return data;
@@ -98,4 +100,20 @@ export default class WidgetDirective extends BaseWidgetDirective {
             .replace(/&lt;/g, "<")
             .replace(/&gt;/g, ">");
     }
+
+    /**
+     * Decode html special characters
+     *
+     * @param {string} content
+     * @returns {string}
+     */
+    private decodeHtmlCharacters(content: string) {
+        if (content) {
+            const htmlDocument = new DOMParser().parseFromString(content, "text/html");
+
+            return htmlDocument.body ? htmlDocument.body.textContent : content;
+        }
+
+        return content;
+    }
 }