ACP2E-1362: The issue is with Pagebuilder not being able to update/save text on certain pagebuilder pages.

Author: bubasuma

app/code/Magento/PageBuilder/etc/adminhtml/di.xml

@@ -549,13 +549,18 @@
             <argument name="data" xsi:type="array">
                 <item name="root_content_type" xsi:type="string">none</item>
                 <item name="html_display_content_type" xsi:type="string">html</item>
+                <item name="html_display_content_type" xsi:type="string">html</item>
                 <item name="template_types" xsi:type="array">
                     <item name="any" xsi:type="string">Any</item>
                     <item name="page" xsi:type="string">Page</item>
                     <item name="product" xsi:type="string">Product</item>
                     <item name="category" xsi:type="string">Category</item>
                     <item name="block" xsi:type="string">Block</item>
                 </item>
+                <item name="reserved_html_attributes" xsi:type="array">
+                    <item name="data-content-type" xsi:type="string">data-content-type</item>
+                    <item name="contenteditable" xsi:type="string">contenteditable</item>
+                </item>
             </argument>
             <argument name="rootContainerConfig" xsi:type="array">
                 <item name="label" xsi:type="string">Root Container</item>

app/code/Magento/PageBuilder/etc/di.xml

@@ -414,6 +414,7 @@
                 <item name="data-video-overlay-color" xsi:type="string">data-video-overlay-color</item>
                 <item name="data-video-play-only-visible" xsi:type="string">data-video-play-only-visible</item>
                 <item name="data-video-src" xsi:type="string">data-video-src</item>
+                <item name="data-placeholder" xsi:type="string">data-placeholder</item>
                 <item name="href" xsi:type="string">href</item>
                 <item name="id" xsi:type="string">id</item>
                 <item name="role" xsi:type="string">role</item>

app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/banner/preview.js

@@ -24,6 +24,7 @@ import {
     isWysiwygSupported,
     lockImageSize,
     moveToBookmark,
+    removeReservedHtmlAttributes,
     unlockImageSize,
 } from "../../utils/editor";
 import nestingLinkDialog from "../../utils/nesting-link-dialog";
@@ -493,6 +494,14 @@ export default class Preview extends BasePreview {
      * @inheritDoc
      */
     protected bindEvents() {
+        this.contentType.dataStore.subscribe((state: DataObject) => {
+            const sanitizedContent = removeReservedHtmlAttributes(state.message);
+
+            if (sanitizedContent !== state.message) {
+                state.message = sanitizedContent;
+            }
+        }, "message");
+
         super.bindEvents();
         events.on("banner:mountAfter", (args: ContentTypeReadyEventParamsInterface) => {
             if (args.id === this.contentType.id) {

app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/slide/preview.js

@@ -25,6 +25,7 @@ import {
     isWysiwygSupported,
     lockImageSize,
     moveToBookmark,
+    removeReservedHtmlAttributes,
     unlockImageSize,
 } from "../../utils/editor";
 import nestingLinkDialog from "../../utils/nesting-link-dialog";
@@ -488,6 +489,14 @@ export default class Preview extends BasePreview {
      * @inheritDoc
      */
     protected bindEvents() {
+        this.contentType.dataStore.subscribe((state: DataObject) => {
+            const sanitizedContent = removeReservedHtmlAttributes(state.content);
+
+            if (sanitizedContent !== state.content) {
+                state.content = sanitizedContent;
+            }
+        }, "content");
+
         super.bindEvents();
 
         events.on("slide:mountAfter", (args: ContentTypeReadyEventParamsInterface) => {

app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/text/preview.js

@@ -20,6 +20,7 @@ import {
     isWysiwygSupported,
     lockImageSize,
     moveToBookmark,
+    removeReservedHtmlAttributes,
     replaceDoubleQuoteWithSingleQuoteWithinVariableDirective,
     unlockImageSize,
 } from "../../utils/editor";
@@ -340,17 +341,19 @@ export default class Preview extends BasePreview {
      * Bind events
      */
     protected bindEvents() {
-        super.bindEvents();
-
         this.contentType.dataStore.subscribe((state: DataObject) => {
-            const sanitizedContent = replaceDoubleQuoteWithSingleQuoteWithinVariableDirective(
-                escapeDoubleQuoteWithinWidgetDirective(state.content),
-            );
+            const sanitizedContent = removeReservedHtmlAttributes(
+                    replaceDoubleQuoteWithSingleQuoteWithinVariableDirective(
+                        escapeDoubleQuoteWithinWidgetDirective(state.content),
+                    ),
+                );
 
             if (sanitizedContent !== state.content) {
                 state.content = sanitizedContent;
             }
-        });
+        }, "content");
+
+        super.bindEvents();
 
         // After drop of new content type open TinyMCE and focus
         events.on("text:dropAfter", (args: ContentTypeMountEventParamsInterface) => {

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

@@ -469,6 +469,40 @@ export function replaceDoubleQuoteWithSingleQuoteWithinVariableDirective(content
     );
 }
 
+/**
+ * Remove Page Builder reserved html tag attributes from the content
+ *
+ * @param {string} content
+ * @returns {string}
+ */
+export function removeReservedHtmlAttributes(content: string): string
+{
+    const attributes: {[key: string]: string} = Config.getConfig("stage_config").reserved_html_attributes || {};
+    for (const attribute of Object.keys(attributes)) {
+        content = removeHtmlTagAttribute(content, attribute);
+    }
+    return content;
+}
+
+/**
+ * Remove attribute from html tags
+ *
+ * @param content
+ * @param name
+ */
+function removeHtmlTagAttribute(content: string, name: string): string
+{
+    if (typeof content === "string" && content.indexOf(`${name}=`) !== -1) {
+        const html = new DOMParser().parseFromString(content, "text/html");
+        const children = html.querySelectorAll("[" + name + "]");
+        children.forEach((child: Element) => {
+            child.removeAttribute(name);
+        });
+        content = html.body.innerHTML;
+    }
+    return content;
+}
+
 interface IdBookmark {
     id: string;
     keep?: boolean;