MC-2294: Architectural Review for MC-2294

- Updated with feedback

Author: nathanjosiah

app/code/Magento/PageBuilder/view/adminhtml/web/js/converter/attribute/src.js

@@ -39,10 +39,9 @@ export default class Src implements ConverterInterface {
             return "";
         }
         const imageUrl = value[0].url;
-        const imageId = value[0].id;
         const mediaUrl = convertUrlToPathIfOtherUrlIsOnlyAPath(Config.getConfig("media_url"), imageUrl);
 
         const mediaPath = imageUrl.split(mediaUrl);
-        return "{{media url=" + mediaPath[1] + (imageId ? " id=" + imageId : "") + "}}";
+        return "{{media url=" + mediaPath[1] + "}}";
     }
 }

app/code/Magento/PageBuilder/view/adminhtml/web/js/converter/style/background-image.js

@@ -40,11 +40,10 @@ export default class BackgroundImage implements ConverterInterface {
             return "";
         }
         const imageUrl = value[0].url;
-        const imageId = value[0].id;
         const mediaUrl = convertUrlToPathIfOtherUrlIsOnlyAPath(Config.getConfig("media_url"), imageUrl);
 
         const mediaPath = imageUrl.split(mediaUrl);
-        const directive = "{{media url=" + mediaPath[1] + (imageId ? " id=" + imageId : "") + "}}";
+        const directive = "{{media url=" + mediaPath[1] + "}}";
         return "url(\'" + toDataUrl(directive) + "\')";
     }
 }

app/code/Magento/PageBuilder/view/adminhtml/web/js/utils/directives.js

@@ -87,15 +87,13 @@ export function getImageUrl(image: any[]) {
  */
 export function removeQuotesInMediaDirectives(html: string): string {
     const mediaDirectiveRegExp = /\{\{\s*media\s+url\s*=\s*(.*?)\s*\}\}/g;
-    const urlRegExp = /\{\{\s*media\s+url\s*=\s*(.*?)\s*(?:id\s*=(.*?))?\s*\}\}/;
+    const urlRegExp = /\{\{\s*media\s+url\s*=\s*(.*)\s*\}\}/;
     const mediaDirectiveMatches = html.match(mediaDirectiveRegExp);
     if (mediaDirectiveMatches) {
         mediaDirectiveMatches.forEach((mediaDirective: string) => {
             const urlMatches = mediaDirective.match(urlRegExp);
             if (urlMatches && urlMatches[1] !== undefined) {
-                const directiveWithOutQuotes = "{{media url=" + urlMatches[1].replace(/("|"|\s)/g, "") +
-                    (urlMatches[2] ? " id=" + urlMatches[2].replace(/("|"|\s)/g, "") : "") +
-                    "}}";
+                const directiveWithOutQuotes = "{{media url=" + urlMatches[1].replace(/("|"|\s)/g, "") + "}}";
                 html = html.replace(mediaDirective, directiveWithOutQuotes);
             }
         });

app/code/Magento/PageBuilder/view/adminhtml/web/js/utils/image.js

@@ -15,21 +15,15 @@ import Config from "../config";
 export function decodeUrl(value: string): string | [object] {
     let result: any = "";
     value = decodeURIComponent((value).replace(window.location.href, ""));
-    const regexp = /{{.*\s*url="?(.*\.([a-z|A-Z]*))"?.*?}}/;
+    const regexp = /{{.*\s*url="?(.*\.([a-z|A-Z]*))"?\s*}}/;
     if (regexp.test(value)) {
         const [, url, type] = regexp.exec(value);
         const image = {
             name: url.split("/").pop(),
             size: 0,
             type: "image/" + type,
-            url: Config.getConfig("media_url") + url,
-            id: "",
+            url: Config.getConfig("media_url") + url
         };
-        const imageIdMatch = value.match(/{{.*\s*id\s*="?([a-zA-Z0-9-]*)"?\s*}}/);
-
-        if (imageIdMatch) {
-            image.id = imageIdMatch[1];
-        }
 
         result = [image];
     }