[Release] Sync main from stage 5/14 #296

Merging following PRs to main -
MWPW-142989-Multi image marquee #280
MWPW-146221 | LCP is seen high on huesat #282
MWPW-147905-Move image span value outside of alt value #290
Continue to Photoshop button added on Hue-Sat marquee. #291
MWPW-148147-Fix Generate button #293
MWPW-148165: continue to photoshop button is not seen working in stage ,proxy denied error is seen #294

creativecloud/blocks/interactive-marquee/interactive-marquee.js

@@ -98,6 +98,20 @@ export default async function init(el) {
       await decorateGenfill(el, { createTag });
       break;
     }
+    case el.classList.contains('ff-masonry'): {
+      try {
+        const stylePromise = new Promise((resolve) => {
+          loadStyle('/creativecloud/features/firefly/firefly-masonry.css', resolve);
+        });
+        await stylePromise;
+        interactiveInit(el, decorateButtons, decorateBlockBg, createTag);
+        const { default: setMultiImageMarquee } = await import('../../features/firefly/firefly-masonry.js');
+        await setMultiImageMarquee(el);
+      } catch (err) {
+        window.lana?.log(`Failed to load firefly masonry: ${err}`);
+      }
+      break;
+    }
     case el.classList.contains('firefly'): {
       loadStyle('/creativecloud/blocks/interactive-marquee/milo-marquee.css');
       loadStyle('/creativecloud/features/interactive-elements/interactive-elements.css');

creativecloud/blocks/interactive-metadata/interactive-metadata.css

@@ -123,6 +123,10 @@
   z-index: 2;
 }
 
+.interactive-enabled .step-slider-tray .layer.show-layer {
+  min-height: 205px;
+}
+
 .interactive-enabled .layer .gray-button {
   position: absolute;
   box-sizing: border-box;

creativecloud/blocks/interactive-metadata/interactive-metadata.js

@@ -284,20 +284,20 @@ function getWorkFlowInformation(el) {
 export default async function init(el) {
   const workflow = getWorkFlowInformation(el);
   if (!workflow.length) return;
-  const targetAsset = await getTargetArea(el);
-  if (!targetAsset) return;
   const stepInfo = {
     el,
     stepIndex: -1,
     stepName: '',
     stepList: workflow,
     stepConfigs: el.querySelectorAll(':scope > div'),
     nextStepEvent: 'cc:interactive-switch',
-    target: targetAsset,
     displayPath: 0,
     openForExecution: Promise.resolve(true),
   };
   await handleNextStep(stepInfo);
+  const targetAsset = await getTargetArea(el);
+  if (!targetAsset) return;
+  stepInfo.target = targetAsset;
   await renderLayer(stepInfo);
   if (workflow.length === 1) return;
   el.addEventListener('cc:interactive-switch', async () => {

creativecloud/features/firefly/firefly-interactive.js

@@ -2,22 +2,21 @@ import { getLibs } from '../../scripts/utils.js';
 
 const { default: defineDeviceByScreenSize } = await import('../../scripts/decorate.js');
 
-function focusOnInput(media, createTag) {
-  const input = media.querySelector('.prompt-text');
-  if (input) {
-    const device = defineDeviceByScreenSize();
-    const blinkingCursor = createTag('div', { class: 'blinking-cursor' });
-    if (input.classList.contains('light')) blinkingCursor.classList.add('blink-light');
-    if (device === 'MOBILE' || device === 'TABLET') {
+export function focusOnInput(media, createTag, inputfield = null) {
+  const input = inputfield === null ? media.querySelector('.prompt-text') : inputfield;
+  if (!input) return;
+  const device = defineDeviceByScreenSize();
+  const blinkingCursor = createTag('div', { class: 'blinking-cursor' });
+  if (input.classList.contains('light')) blinkingCursor.classList.add('blink-light');
+  if (device === 'MOBILE' || device === 'TABLET') {
+    input.insertAdjacentElement('beforebegin', blinkingCursor);
+  } else input.focus();
+  input.addEventListener('focusout', () => {
+    if (document.querySelector('.locale-modal-v2') && device === 'DESKTOP') {
       input.insertAdjacentElement('beforebegin', blinkingCursor);
-    } else input.focus();
-    input.addEventListener('focusout', () => {
-      if (document.querySelector('.locale-modal-v2') && device === 'DESKTOP') {
-        input.insertAdjacentElement('beforebegin', blinkingCursor);
-      }
-    }, { once: true });
-    input.addEventListener('click', () => { document.querySelector('.blinking-cursor')?.remove(); });
-  }
+    }
+  }, { once: true });
+  input.addEventListener('click', () => { document.querySelector('.blinking-cursor')?.remove(); });
 }
 
 function eventOnGenerate(generateButton, media, fireflyfeature = '') {