From d4dc67cbb3931cf7245347be46605983195eafb6 Mon Sep 17 00:00:00 2001 From: Artem Iagovdik Date: Fri, 30 Aug 2024 17:04:39 +0200 Subject: [PATCH] fix: Add element existence check to prevent Page Builder crashes Encountered a scenario where missing HTML elements in Page Builder caused runtime errors due to direct calls to setAttribute. Added an existence check before setting attributes to avoid breaking the editor. This ensures continued functionality and improves stability by handling cases where elements are not found. Logically, the core should include such checks to enhance resilience and user experience. --- .../PageBuilder/view/adminhtml/web/js/stage-builder.js | 5 +++++ .../PageBuilder/view/adminhtml/web/ts/js/stage-builder.ts | 7 ++++++- 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/js/stage-builder.js b/app/code/Magento/PageBuilder/view/adminhtml/web/js/stage-builder.js index b73292469b7..de2d0973e64 100644 --- a/app/code/Magento/PageBuilder/view/adminhtml/web/js/stage-builder.js +++ b/app/code/Magento/PageBuilder/view/adminhtml/web/js/stage-builder.js @@ -49,6 +49,11 @@ define(["mage/translate", "Magento_PageBuilder/js/events", "Magento_Ui/js/modal/ _.each(styles, function (stylesArray, selector) { var element = document.querySelector(selector); + if (!element) { + console.error('Element not found for selector: %o. Unable to set attribute: "%s".', selector, "data-" + name + "-style"); + return; + } + _.each(stylesArray, function (style) { element.setAttribute("data-" + name + "-style", element.getAttribute("data-" + name + "-style") ? element.getAttribute("data-" + name + "-style") + style.cssText : style.cssText); }); diff --git a/app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/stage-builder.ts b/app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/stage-builder.ts index 01c61e09ba5..da2ccf1fcf0 100644 --- a/app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/stage-builder.ts +++ b/app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/stage-builder.ts @@ -58,7 +58,12 @@ function convertToInlineStyles(document: Document): void { _.each(viewportStyles, (styles, name: string) => { _.each(styles, (stylesArray: CSSStyleDeclaration[], selector: string) => { - const element: HTMLElement = document.querySelector(selector); + const element = document.querySelector(selector); + + if (!element) { + console.error('Element not found for selector: %o. Unable to set attribute: "%s".', selector, `data-${name}-style`); + return; + } _.each(stylesArray, (style: CSSStyleDeclaration) => { element.setAttribute(