MC-36202: Support same site

Author: omiroshnichenko

app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/observable-updater/attributes.js

@@ -7,25 +7,25 @@
 
 <figure attr="data.main.attributes" ko-style="Object.assign({}, data.main.style(), !data.desktop_image.attributes().src ? {} : {borderStyle: 'none'})" css="data.main.css">
     <a if="data.link.attributes().href" attr="data.link.attributes" ko-style="data.link.style" css="data.link.css">
-        <img if="data.desktop_image.attributes().src"
+        <img if="data.desktop_image.attributes()['data-src']"
              attr="data.desktop_image.attributes"
              class="pagebuilder-mobile-hidden"
              css="data.desktop_image.css"
              ko-style="data.desktop_image.style" />
-        <img if="data.mobile_image.attributes().src"
+        <img if="data.mobile_image.attributes()['data-src']"
              attr="data.mobile_image.attributes"
              class="pagebuilder-mobile-only"
              css="data.mobile_image.css"
              ko-style="data.mobile_image.style" />
     </a>
 
     <ifnot args="data.link.attributes().href">
-        <img if="data.desktop_image.attributes().src"
+        <img if="data.desktop_image.attributes()['data-src']"
              attr="data.desktop_image.attributes"
              class="pagebuilder-mobile-hidden"
              css="data.desktop_image.css"
              ko-style="data.desktop_image.style"/>
-        <img if="data.mobile_image.attributes().src"
+        <img if="data.mobile_image.attributes()['data-src']"
              attr="data.mobile_image.attributes"
              class="pagebuilder-mobile-only"
              css="data.mobile_image.css"

app/code/Magento/PageBuilder/view/adminhtml/web/js/master-format/render/frame.js

@@ -3,6 +3,7 @@
  * See COPYING.txt for license details.
  */
 
+import Config from "../../config";
 import {ContentTypeConfigAppearanceElementInterface} from "../../content-type-config.types";
 import ConverterPool from "../../converter/converter-pool";
 import {DataObject} from "../../data-store";
@@ -39,7 +40,12 @@ export default function generate(
         if (converterPool.get(converter)) {
             value = converterPool.get(converter).toDom(attributeConfig.var, data);
         }
-        attributeData[attributeConfig.name] = value;
+
+        if (attributeConfig.name === "src" && Config.getMode() !== "Preview") {
+            attributeData["data-" + attributeConfig.name] = value;
+        } else {
+            attributeData[attributeConfig.name] = value;
+        }
     }
 
     attributeData["data-element"] = elementName;

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

@@ -13,7 +13,7 @@ import ConfigInterface from "../../config.types";
 import ContentTypeCollectionInterface from "../../content-type-collection.types";
 import createContentType from "../../content-type-factory";
 import ContentTypeInterface from "../../content-type.types";
-import decodeAllDataUrlsInString from "../../utils/directives";
+import decodeAllDataUrlsInString, { replaceSrc } from "../../utils/directives";
 import filterHtml from "../filter-html";
 import { TreeItem } from "./serialize";
 
@@ -160,7 +160,7 @@ function render(message: {stageId: string, tree: TreeItem}) {
                 observer.disconnect();
                 ko.cleanNode(element);
                 const filtered: JQuery = filterHtml($(element));
-                const output = decodeAllDataUrlsInString(filtered.html());
+                const output = replaceSrc(decodeAllDataUrlsInString(filtered.html()));
                 resolve(output);
             });
 

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/image/full-width/master.html

@@ -131,3 +131,10 @@ export function convertMediaDirectivesToUrls(html: string): string {
     }
     return html;
 }
+
+export function replaceSrc(html: string): string {
+    return html.replace(
+        new RegExp("data-src=\"\{\{", "g"),
+        "src=\"{{",
+    );
+}