#713: WYSIWYG content styles are not working on upgraded content

Author: omiroshnichenko

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

@@ -8,6 +8,7 @@ import {ContentTypeConfigAppearanceElementInterface} from "../../content-type-co
 import ConverterPool from "../../converter/converter-pool";
 import {DataObject} from "../../data-store";
 import { replaceWithDataSrc } from "../../utils/directives";
+import {processInlineStyles} from "../../utils/editor";
 import {get} from "../../utils/object";
 
 /**
@@ -41,5 +42,10 @@ export default function generate(
         value = replaceWithDataSrc(value);
     }
 
+    // Process all desktop styles that left unprocessed after migrating from inline styles.
+    if (typeof value === "string") {
+        value = processInlineStyles(value);
+    }
+
     return value;
 }

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

@@ -350,6 +350,16 @@ export function createDoubleClickEvent(): Event {
     }
 }
 
+/**
+ * Replace all desktop styles that left unprocessed back to style element to prevent data corruption.
+ */
+export function processInlineStyles(html: string) {
+    const name = Config.getConfig("defaultViewport");
+    const searchPattern =  new RegExp(`data-${name}-style=`, "g");
+
+    return html.replace(searchPattern, "style=");
+}
+
 /**
  * Move the end point of a range to handle tables
  *