MC-13917: Content types mark up within Text content type causes whole stage to become HTML

- Resolve issue with content types containing other content types incorrectly

Author: davemacaulay

app/code/Magento/PageBuilder/view/adminhtml/web/js/master-format/read/configurable.js

@@ -41,7 +41,7 @@ export default class Configurable implements ReadInterface {
                 let data = {};
                 for (const elementName of Object.keys(config.elements)) {
                     const elementConfig = config.elements[elementName];
-                    const currentElement = this.findElementByName(element, elementName);
+                    const currentElement = this.findElementByName(role, element, elementName);
 
                     // If we cannot locate the current element skip trying to read any attributes from it
                     if (currentElement === null || currentElement === undefined) {
@@ -93,20 +93,26 @@ export default class Configurable implements ReadInterface {
      * Find the element for the current content type by it's name, avoiding searching in other content types by
      * removing any other element which contains it's own data-role.
      *
+     * @param {string} role
      * @param {HTMLElement} element
      * @param {string} name
      * @returns {HTMLElement}
      */
-    private findElementByName(element: HTMLElement, name: string): HTMLElement {
+    private findElementByName(role: string, element: HTMLElement, name: string): HTMLElement {
         // Create a clone of the element to avoid modifying the source
         const currentElement = $(element).clone();
-        // Remove all child instances of data-role elements
-        currentElement.find(`[${Config.getConfig("dataRoleAttributeName")}]`).remove();
+        if (currentElement.attr("data-element") === name) {
+            return currentElement[0];
+        }
+
+        // Attempt to find the element in the children of the data-role
+        const searchInChildren = currentElement.find(`[data-element="${name}"]`);
+        // Ensure the element is within the current content type
+        if (searchInChildren.length > 0 && searchInChildren.closest("[data-role]")[0] === currentElement[0]) {
+            return searchInChildren[0];
+        }
 
-        // Attempt to find the content type element within the modified clone element
-        return currentElement.attr("data-element") === name
-            ? currentElement[0]
-            : currentElement[0].querySelector<HTMLElement>(`[data-element=${name}]`);
+        return null;
     }
 
     /**

app/code/Magento/PageBuilder/view/adminhtml/web/js/stage-builder.js

@@ -20,6 +20,7 @@ import validateFormat from "./master-format/validator";
 import Stage from "./stage";
 import {removeQuotesInMediaDirectives} from "./utils/directives";
 import {set} from "./utils/object";
+import ContentTypeCollection from "./content-type-collection";
 
 /**
  * Build the stage with the provided value
@@ -62,7 +63,10 @@ function buildElementIntoStage(element: Element, parent: ContentTypeCollectionIn
         return Promise.all(childPromises).then((childrenPromises) => {
             return Promise.all(childrenPromises.map((child, index) => {
                 parent.addChild(child);
-                return buildElementIntoStage(childElements[index], child, stage);
+                // Only render children if the content type implements the collection
+                if (child instanceof ContentTypeCollection) {
+                    return buildElementIntoStage(childElements[index], child, stage);
+                }
             }));
         });
     }