MWPW-159445 - Remove thumbnail from authoring for change background i… (

#143)

Stage to main sync PR (Stage PR (#134))

- Remove thumbnail from authoring for change background in unity block
- This update is done to fix an issue with html localization flow
adobe/helix-html2md#555

Resolves: [MWPW-159445](https://jira.corp.adobe.com/browse/MWPW-159445)

Test URLs:

Before:

https://main--cc--adobecom.hlx.page/drafts/ruchika/remove-background1?unitylibs=main
After:

https://main--cc--adobecom.hlx.page/drafts/ruchika/remove-background1?unitylibs=stage

unitylibs/core/workflow/workflow-photoshop/workflow-photoshop.css

@@ -9,7 +9,7 @@
 }
 
 .unity-enabled .interactive-area .unity-option-area .changebg-options-tray .changebg-option {
-  border-radius: 5.36px;
+  border-radius: 4px;
   cursor: pointer;
   border: 3px solid transparent;
   overflow: hidden;

unitylibs/core/workflow/workflow-photoshop/workflow-photoshop.js

@@ -7,6 +7,7 @@ import {
   loadSvg,
   decorateDefaultLinkAnalytics,
   createIntersectionObserver,
+  priorityLoad,
 } from '../../../scripts/utils.js';
 
 function resetSliders(unityWidget) {
@@ -265,6 +266,14 @@ async function changeBgHandler(cfg, selectedUrl = null, refreshState = true) {
   unityEl.dispatchEvent(new CustomEvent(interactiveSwitchEvent));
 }
 
+function updateQueryParam(url, params) {
+  const parsedUrl = new URL(url);
+  Object.entries(params).forEach(([key, value]) => {
+    parsedUrl.searchParams.set(key, value);
+  });
+  return parsedUrl;
+}
+
 async function changebg(cfg, featureName) {
   const { unityWidget, wfDetail } = cfg;
   const { authorCfg } = wfDetail[featureName];
@@ -275,19 +284,23 @@ async function changebg(cfg, featureName) {
   btn.dataset.optionsTray = 'changebg-options-tray';
   const bgSelectorTray = createTag('div', { class: 'changebg-options-tray show' });
   const bgOptions = authorCfg.querySelectorAll(':scope ul li');
+  const thumbnailSrc = [];
   [...bgOptions].forEach((o) => {
     let thumbnail = null;
     let bgImg = null;
-    [thumbnail, bgImg] = o.querySelectorAll('img');
-    if (!bgImg) bgImg = thumbnail;
+    bgImg = o.querySelector('img');
+    thumbnail = bgImg;
     thumbnail.dataset.backgroundImg = bgImg.src;
+    thumbnail.setAttribute('src', updateQueryParam(bgImg.src, { format: 'webply', width: '68', height: '68' }));
+    thumbnailSrc.push(thumbnail.getAttribute('src'));
     const a = createTag('a', { href: '#', class: 'changebg-option' }, thumbnail);
     bgSelectorTray.append(a);
     a.addEventListener('click', async (evt) => {
       evt.preventDefault();
       handleEvent(cfg, () => changeBgHandler(cfg, bgImg.src, false));
     });
   });
+  priorityLoad(thumbnailSrc);
   unityWidget.querySelector('.unity-option-area').append(bgSelectorTray);
   btn.addEventListener('click', (evt) => {
     evt.preventDefault();