From 3c9774cc9a687cf20be86a5d2fe0a79cb708945a Mon Sep 17 00:00:00 2001
From: Suhani Jain <110388864+suhjainadobe@users.noreply.github.com>
Date: Wed, 14 Aug 2024 13:49:39 +0530
Subject: [PATCH] MWPW-153810 media image is seen loaded twice in product page
 urls in desktop (#2715)

* Update utils.js

* Update utils.js

* Update utils.js

* Update utils.js

* Update utils.js

* Update utils.js

* Update body.html

* Update utils.test.js
---
 libs/utils/utils.js        | 26 +++++++++++++++++++++++---
 test/utils/mocks/body.html |  2 +-
 test/utils/utils.test.js   |  2 +-
 3 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/libs/utils/utils.js b/libs/utils/utils.js
index 2970289cea..fbbfb37cb4 100644
--- a/libs/utils/utils.js
+++ b/libs/utils/utils.js
@@ -730,10 +730,30 @@ async function decorateIcons(area, config) {
 async function decoratePlaceholders(area, config) {
   const el = area.querySelector('main') || area;
   const regex = /{{(.*?)}}|%7B%7B(.*?)%7D%7D/g;
-  const found = regex.test(el.innerHTML);
-  if (!found) return;
+  const walker = document.createTreeWalker(
+    el,
+    NodeFilter.SHOW_TEXT,
+    {
+      acceptNode(node) {
+        const a = regex.test(node.nodeValue) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
+        regex.lastIndex = 0;
+        return a;
+      },
+    },
+  );
+  const nodes = [];
+  let node = walker.nextNode();
+  while (node !== null) {
+    nodes.push(node);
+    node = walker.nextNode();
+  }
+  if (!nodes.length) return;
   const { replaceText } = await import('../features/placeholders.js');
-  el.innerHTML = await replaceText(el.innerHTML, config, regex);
+  const replaceNodes = nodes.map(async (textNode) => {
+    textNode.nodeValue = await replaceText(textNode.nodeValue, config, regex);
+    textNode.nodeValue = textNode.nodeValue.replace(/&nbsp;/g, '\u00A0');
+  });
+  await Promise.all(replaceNodes);
 }
 
 async function loadFooter() {
diff --git a/test/utils/mocks/body.html b/test/utils/mocks/body.html
index 6e636675b1..44d2a43192 100644
--- a/test/utils/mocks/body.html
+++ b/test/utils/mocks/body.html
@@ -47,6 +47,6 @@
   <!-- Default content -->
   <div>
     <p>I'm not a blockhead.</p>
-    <p>{{nothing-to-see-here}}</p>
+    <p>{{&nbsp;inkl. MwSt.}}</p>
   </div>
 </main>
diff --git a/test/utils/utils.test.js b/test/utils/utils.test.js
index d02c008716..f9c497baa8 100644
--- a/test/utils/utils.test.js
+++ b/test/utils/utils.test.js
@@ -191,7 +191,7 @@ describe('Utils', () => {
     it('Decorates placeholder', () => {
       const paragraphs = [...document.querySelectorAll('p')];
       const lastPara = paragraphs.pop();
-      expect(lastPara.textContent).to.equal('nothing to see here');
+      expect(lastPara.textContent).to.equal(' inkl. MwSt.');
     });
 
     it('Decorates meta helix url', () => {