@strapi/content-manager 5.23.0 → 5.23.1

package/dist/admin/preview/utils/previewScript.js

@@ -11,10 +11,14 @@
    * Params
    * ---------------------------------------------------------------------------------------------*/ const HIGHLIGHT_PADDING = 2; // in pixels
     const HIGHLIGHT_HOVER_COLOR = window.STRAPI_HIGHLIGHT_HOVER_COLOR ?? '#4945ff'; // dark primary500
+    const HIGHLIGHT_ACTIVE_COLOR = window.STRAPI_HIGHLIGHT_ACTIVE_COLOR ?? '#7b79ff'; // dark primary600
     const SOURCE_ATTRIBUTE = 'data-strapi-source';
     const OVERLAY_ID = 'strapi-preview-overlay';
     const INTERNAL_EVENTS = {
-        DUMMY_EVENT: 'dummyEvent'
+        STRAPI_FIELD_FOCUS: 'strapiFieldFocus',
+        STRAPI_FIELD_BLUR: 'strapiFieldBlur',
+        STRAPI_FIELD_CHANGE: 'strapiFieldChange',
+        STRAPI_FIELD_FOCUS_INTENT: 'strapiFieldFocusIntent'
     };
     /**
    * Calling the function in no-run mode lets us retrieve the constants from other files and keep
@@ -26,6 +30,14 @@
         };
     }
     /* -----------------------------------------------------------------------------------------------
+   * Utils
+   * ---------------------------------------------------------------------------------------------*/ const sendMessage = (type, payload)=>{
+        window.parent.postMessage({
+            type,
+            payload
+        }, '*');
+    };
+    /* -----------------------------------------------------------------------------------------------
    * Functionality pieces
    * ---------------------------------------------------------------------------------------------*/ const createOverlaySystem = ()=>{
         // Clean up before creating a new overlay so we can safely call previewScript multiple times
@@ -47,8 +59,10 @@
     };
     const createHighlightManager = (overlay)=>{
         const elements = window.document.querySelectorAll(`[${SOURCE_ATTRIBUTE}]`);
-        const highlights = [];
         const eventListeners = [];
+        const highlights = [];
+        const focusedHighlights = [];
+        let focusedField = null;
         const drawHighlight = (target, highlight)=>{
             if (!highlight) return;
             const rect = target.getBoundingClientRect();
@@ -78,15 +92,31 @@
         `;
                 // Move hover detection to the underlying element
                 const mouseEnterHandler = ()=>{
-                    highlight.style.outlineColor = HIGHLIGHT_HOVER_COLOR;
+                    if (!highlightManager.focusedHighlights.includes(highlight)) {
+                        highlight.style.outlineColor = HIGHLIGHT_HOVER_COLOR;
+                    }
                 };
                 const mouseLeaveHandler = ()=>{
-                    highlight.style.outlineColor = 'transparent';
+                    if (!highlightManager.focusedHighlights.includes(highlight)) {
+                        highlight.style.outlineColor = 'transparent';
+                    }
                 };
                 const doubleClickHandler = ()=>{
-                    // TODO: handle for real
-                    // eslint-disable-next-line no-console
-                    console.log('Double click on highlight', element);
+                    const sourceAttribute = element.getAttribute(SOURCE_ATTRIBUTE);
+                    if (sourceAttribute) {
+                        const rect = element.getBoundingClientRect();
+                        sendMessage(INTERNAL_EVENTS.STRAPI_FIELD_FOCUS_INTENT, {
+                            path: sourceAttribute,
+                            position: {
+                                top: rect.top,
+                                left: rect.left,
+                                right: rect.right,
+                                bottom: rect.bottom,
+                                width: rect.width,
+                                height: rect.height
+                            }
+                        });
+                    }
                 };
                 const mouseDownHandler = (event)=>{
                     // Prevent default multi click to select behavior
@@ -124,7 +154,13 @@
         return {
             elements,
             updateAllHighlights,
-            eventListeners
+            eventListeners,
+            highlights,
+            focusedHighlights,
+            setFocusedField: (field)=>{
+                focusedField = field;
+            },
+            getFocusedField: ()=>focusedField
         };
     };
     const setupObservers = (highlightManager)=>{
@@ -168,8 +204,65 @@
         };
     };
     const setupEventHandlers = (highlightManager)=>{
-        // TODO: The listeners for postMessage events will go here
-        return highlightManager.eventListeners;
+        const handleMessage = (event)=>{
+            if (!event.data?.type) return;
+            // The user typed in an input, reflect the change in the preview
+            if (event.data.type === INTERNAL_EVENTS.STRAPI_FIELD_CHANGE) {
+                const { field, value } = event.data.payload;
+                if (!field) return;
+                const matchingElements = document.querySelectorAll(`[${SOURCE_ATTRIBUTE}="${field}"]`);
+                matchingElements.forEach((element)=>{
+                    if (element instanceof HTMLElement) {
+                        element.textContent = value || '';
+                    }
+                });
+                return;
+            }
+            // The user focused a new input, update the highlights in the preview
+            if (event.data.type === INTERNAL_EVENTS.STRAPI_FIELD_FOCUS) {
+                const { field } = event.data.payload;
+                if (!field) return;
+                // Clear existing focused highlights
+                highlightManager.focusedHighlights.forEach((highlight)=>{
+                    highlight.style.outlineColor = 'transparent';
+                });
+                highlightManager.focusedHighlights.length = 0;
+                // Set new focused field and highlight matching elements
+                highlightManager.setFocusedField(field);
+                const matchingElements = document.querySelectorAll(`[${SOURCE_ATTRIBUTE}="${field}"]`);
+                matchingElements.forEach((element)=>{
+                    const highlight = highlightManager.highlights[Array.from(highlightManager.elements).indexOf(element)];
+                    if (highlight) {
+                        highlight.style.outlineColor = HIGHLIGHT_ACTIVE_COLOR;
+                        highlight.style.outlineWidth = '3px';
+                        highlightManager.focusedHighlights.push(highlight);
+                    }
+                });
+                return;
+            }
+            // The user is no longer focusing an input, remove the highlights
+            if (event.data.type === INTERNAL_EVENTS.STRAPI_FIELD_BLUR) {
+                const { field } = event.data.payload;
+                if (field !== highlightManager.getFocusedField()) return;
+                highlightManager.focusedHighlights.forEach((highlight)=>{
+                    highlight.style.outlineColor = 'transparent';
+                    highlight.style.outlineWidth = '2px';
+                });
+                highlightManager.focusedHighlights.length = 0;
+                highlightManager.setFocusedField(null);
+            }
+        };
+        window.addEventListener('message', handleMessage);
+        // Add the message handler to the cleanup list
+        const messageEventListener = {
+            element: window,
+            type: 'message',
+            handler: handleMessage
+        };
+        return [
+            ...highlightManager.eventListeners,
+            messageEventListener
+        ];
     };
     const createCleanupSystem = (overlay, observers, eventHandlers)=>{
         window.__strapi_previewCleanup = ()=>{

package/dist/admin/preview/utils/previewScript.js.map

@@ -1 +1 @@
-{"version":3,"file":"previewScript.js","sources":["../../../../admin/src/preview/utils/previewScript.ts"],"sourcesContent":["// NOTE: This override is for the properties on _user's site_, it's not about Strapi Admin.\ndeclare global {\n  interface Window {\n    __strapi_previewCleanup?: () => void;\n    STRAPI_HIGHLIGHT_HOVER_COLOR?: string;\n  }\n}\n\n/**\n * previewScript will be injected into the preview iframe after being stringified.\n * Therefore it CANNOT use any imports, or refer to any variables outside of its own scope.\n * It's why many functions are defined within previewScript, it's the only way to avoid going full spaghetti.\n * To get a better overview of everything previewScript does, go to the orchestration part at its end.\n */\nconst previewScript = (shouldRun = true) => {\n  /* -----------------------------------------------------------------------------------------------\n   * Params\n   * ---------------------------------------------------------------------------------------------*/\n  const HIGHLIGHT_PADDING = 2; // in pixels\n  const HIGHLIGHT_HOVER_COLOR = window.STRAPI_HIGHLIGHT_HOVER_COLOR ?? '#4945ff'; // dark primary500\n  const SOURCE_ATTRIBUTE = 'data-strapi-source';\n  const OVERLAY_ID = 'strapi-preview-overlay';\n  const INTERNAL_EVENTS = {\n    DUMMY_EVENT: 'dummyEvent',\n  } as const;\n\n  /**\n   * Calling the function in no-run mode lets us retrieve the constants from other files and keep\n   * a single source of truth for them. It's the only way to do this because this script can't\n   * refer to any variables outside of its own scope, because it's stringified before it's run.\n   */\n  if (!shouldRun) {\n    return { INTERNAL_EVENTS };\n  }\n\n  /* -----------------------------------------------------------------------------------------------\n   * Functionality pieces\n   * ---------------------------------------------------------------------------------------------*/\n\n  const createOverlaySystem = () => {\n    // Clean up before creating a new overlay so we can safely call previewScript multiple times\n    window.__strapi_previewCleanup?.();\n    document.getElementById(OVERLAY_ID)?.remove();\n\n    const overlay = document.createElement('div');\n    overlay.id = OVERLAY_ID;\n    overlay.style.cssText = `\n      position: fixed;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      pointer-events: none;\n      z-index: 9999;\n    `;\n\n    window.document.body.appendChild(overlay);\n    return overlay;\n  };\n\n  type EventListenersList = Array<{\n    element: HTMLElement;\n    type: keyof HTMLElementEventMap;\n    handler: EventListener;\n  }>;\n\n  const createHighlightManager = (overlay: HTMLElement) => {\n    const elements = window.document.querySelectorAll(`[${SOURCE_ATTRIBUTE}]`);\n    const highlights: HTMLElement[] = [];\n    const eventListeners: EventListenersList = [];\n\n    const drawHighlight = (target: Element, highlight: HTMLElement) => {\n      if (!highlight) return;\n\n      const rect = target.getBoundingClientRect();\n      highlight.style.width = `${rect.width + HIGHLIGHT_PADDING * 2}px`;\n      highlight.style.height = `${rect.height + HIGHLIGHT_PADDING * 2}px`;\n      highlight.style.transform = `translate(${rect.left - HIGHLIGHT_PADDING}px, ${rect.top - HIGHLIGHT_PADDING}px)`;\n    };\n\n    const updateAllHighlights = () => {\n      highlights.forEach((highlight, index) => {\n        const element = elements[index];\n        if (element && highlight) {\n          drawHighlight(element, highlight);\n        }\n      });\n    };\n\n    elements.forEach((element) => {\n      if (element instanceof HTMLElement) {\n        const highlight = document.createElement('div');\n        highlight.style.cssText = `\n          position: absolute;\n          outline: 2px solid transparent;\n          pointer-events: none;\n          border-radius: 2px;\n          background-color: transparent;\n          will-change: transform;\n          transition: outline-color 0.1s ease-in-out;\n        `;\n\n        // Move hover detection to the underlying element\n        const mouseEnterHandler = () => {\n          highlight.style.outlineColor = HIGHLIGHT_HOVER_COLOR;\n        };\n        const mouseLeaveHandler = () => {\n          highlight.style.outlineColor = 'transparent';\n        };\n        const doubleClickHandler = () => {\n          // TODO: handle for real\n          // eslint-disable-next-line no-console\n          console.log('Double click on highlight', element);\n        };\n        const mouseDownHandler = (event: MouseEvent) => {\n          // Prevent default multi click to select behavior\n          if (event.detail >= 2) {\n            event.preventDefault();\n          }\n        };\n\n        element.addEventListener('mouseenter', mouseEnterHandler);\n        element.addEventListener('mouseleave', mouseLeaveHandler);\n        element.addEventListener('dblclick', doubleClickHandler);\n        element.addEventListener('mousedown', mouseDownHandler);\n\n        // Store event listeners for cleanup\n        eventListeners.push(\n          { element, type: 'mouseenter', handler: mouseEnterHandler },\n          { element, type: 'mouseleave', handler: mouseLeaveHandler },\n          { element, type: 'dblclick', handler: doubleClickHandler },\n          { element, type: 'mousedown', handler: mouseDownHandler as EventListener }\n        );\n\n        highlights.push(highlight);\n        overlay.appendChild(highlight);\n\n        drawHighlight(element, highlight);\n      }\n    });\n\n    return {\n      elements,\n      updateAllHighlights,\n      eventListeners,\n    };\n  };\n\n  type HighlightManager = ReturnType<typeof createHighlightManager>;\n\n  const setupObservers = (highlightManager: HighlightManager) => {\n    const resizeObserver = new ResizeObserver(() => {\n      highlightManager.updateAllHighlights();\n    });\n\n    highlightManager.elements.forEach((element: Element) => {\n      resizeObserver.observe(element);\n    });\n\n    resizeObserver.observe(document.documentElement);\n\n    const updateOnScroll = () => {\n      highlightManager.updateAllHighlights();\n    };\n\n    const scrollableElements = new Set<Element | Window>();\n    scrollableElements.add(window);\n\n    // Find all scrollable ancestors for all tracked elements\n    highlightManager.elements.forEach((element) => {\n      let parent = element.parentElement;\n      while (parent) {\n        const computedStyle = window.getComputedStyle(parent);\n        const overflow = computedStyle.overflow + computedStyle.overflowX + computedStyle.overflowY;\n\n        if (overflow.includes('scroll') || overflow.includes('auto')) {\n          scrollableElements.add(parent);\n        }\n\n        parent = parent.parentElement;\n      }\n    });\n\n    // Add scroll listeners to all scrollable elements\n    scrollableElements.forEach((element) => {\n      if (element === window) {\n        window.addEventListener('scroll', updateOnScroll);\n        window.addEventListener('resize', updateOnScroll);\n      } else {\n        (element as Element).addEventListener('scroll', updateOnScroll);\n      }\n    });\n\n    return {\n      resizeObserver,\n      updateOnScroll,\n      scrollableElements,\n    };\n  };\n\n  const setupEventHandlers = (highlightManager: HighlightManager) => {\n    // TODO: The listeners for postMessage events will go here\n    return highlightManager.eventListeners;\n  };\n\n  const createCleanupSystem = (\n    overlay: HTMLElement,\n    observers: ReturnType<typeof setupObservers>,\n    eventHandlers: EventListenersList\n  ) => {\n    window.__strapi_previewCleanup = () => {\n      observers.resizeObserver.disconnect();\n\n      // Remove all scroll listeners\n      observers.scrollableElements.forEach((element) => {\n        if (element === window) {\n          window.removeEventListener('scroll', observers.updateOnScroll);\n          window.removeEventListener('resize', observers.updateOnScroll);\n        } else {\n          (element as Element).removeEventListener('scroll', observers.updateOnScroll);\n        }\n      });\n\n      // Remove highlight event listeners\n      eventHandlers.forEach(({ element, type, handler }) => {\n        element.removeEventListener(type, handler);\n      });\n\n      overlay.remove();\n    };\n  };\n\n  /* -----------------------------------------------------------------------------------------------\n   * Orchestration\n   * ---------------------------------------------------------------------------------------------*/\n\n  const overlay = createOverlaySystem();\n  const highlightManager = createHighlightManager(overlay);\n  const observers = setupObservers(highlightManager);\n  const eventHandlers = setupEventHandlers(highlightManager);\n  createCleanupSystem(overlay, observers, eventHandlers);\n};\n\nexport { previewScript };\n"],"names":["previewScript","shouldRun","HIGHLIGHT_PADDING","HIGHLIGHT_HOVER_COLOR","window","STRAPI_HIGHLIGHT_HOVER_COLOR","SOURCE_ATTRIBUTE","OVERLAY_ID","INTERNAL_EVENTS","DUMMY_EVENT","createOverlaySystem","__strapi_previewCleanup","document","getElementById","remove","overlay","createElement","id","style","cssText","body","appendChild","createHighlightManager","elements","querySelectorAll","highlights","eventListeners","drawHighlight","target","highlight","rect","getBoundingClientRect","width","height","transform","left","top","updateAllHighlights","forEach","index","element","HTMLElement","mouseEnterHandler","outlineColor","mouseLeaveHandler","doubleClickHandler","console","log","mouseDownHandler","event","detail","preventDefault","addEventListener","push","type","handler","setupObservers","highlightManager","resizeObserver","ResizeObserver","observe","documentElement","updateOnScroll","scrollableElements","Set","add","parent","parentElement","computedStyle","getComputedStyle","overflow","overflowX","overflowY","includes","setupEventHandlers","createCleanupSystem","observers","eventHandlers","disconnect","removeEventListener"],"mappings":";;AAAA;AAQA;;;;;AAKC,IACKA,MAAAA,aAAAA,GAAgB,CAACC,SAAAA,GAAY,IAAI,GAAA;AACrC;;qGAGA,MAAMC,iBAAoB,GAAA,CAAA,CAAA;AAC1B,IAAA,MAAMC,qBAAwBC,GAAAA,MAAAA,CAAOC,4BAA4B,IAAI;AACrE,IAAA,MAAMC,gBAAmB,GAAA,oBAAA;AACzB,IAAA,MAAMC,UAAa,GAAA,wBAAA;AACnB,IAAA,MAAMC,eAAkB,GAAA;QACtBC,WAAa,EAAA;AACf,KAAA;AAEA;;;;MAKA,IAAI,CAACR,SAAW,EAAA;QACd,OAAO;AAAEO,YAAAA;AAAgB,SAAA;AAC3B;AAEA;;AAEgG,qGAEhG,MAAME,mBAAsB,GAAA,IAAA;;AAE1BN,QAAAA,MAAAA,CAAOO,uBAAuB,IAAA;QAC9BC,QAASC,CAAAA,cAAc,CAACN,UAAaO,CAAAA,EAAAA,MAAAA,EAAAA;QAErC,MAAMC,OAAAA,GAAUH,QAASI,CAAAA,aAAa,CAAC,KAAA,CAAA;AACvCD,QAAAA,OAAAA,CAAQE,EAAE,GAAGV,UAAAA;AACbQ,QAAAA,OAAAA,CAAQG,KAAK,CAACC,OAAO,GAAG;;;;;;;;IAQxB,CAAC;AAEDf,QAAAA,MAAAA,CAAOQ,QAAQ,CAACQ,IAAI,CAACC,WAAW,CAACN,OAAAA,CAAAA;QACjC,OAAOA,OAAAA;AACT,KAAA;AAQA,IAAA,MAAMO,yBAAyB,CAACP,OAAAA,GAAAA;QAC9B,MAAMQ,QAAAA,GAAWnB,MAAOQ,CAAAA,QAAQ,CAACY,gBAAgB,CAAC,CAAC,CAAC,EAAElB,gBAAiB,CAAA,CAAC,CAAC,CAAA;AACzE,QAAA,MAAMmB,aAA4B,EAAE;AACpC,QAAA,MAAMC,iBAAqC,EAAE;QAE7C,MAAMC,aAAAA,GAAgB,CAACC,MAAiBC,EAAAA,SAAAA,GAAAA;AACtC,YAAA,IAAI,CAACA,SAAW,EAAA;YAEhB,MAAMC,IAAAA,GAAOF,OAAOG,qBAAqB,EAAA;AACzCF,YAAAA,SAAAA,CAAUX,KAAK,CAACc,KAAK,GAAG,CAAC,EAAEF,IAAKE,CAAAA,KAAK,GAAG9B,iBAAAA,GAAoB,CAAE,CAAA,EAAE,CAAC;AACjE2B,YAAAA,SAAAA,CAAUX,KAAK,CAACe,MAAM,GAAG,CAAC,EAAEH,IAAKG,CAAAA,MAAM,GAAG/B,iBAAAA,GAAoB,CAAE,CAAA,EAAE,CAAC;AACnE2B,YAAAA,SAAAA,CAAUX,KAAK,CAACgB,SAAS,GAAG,CAAC,UAAU,EAAEJ,IAAKK,CAAAA,IAAI,GAAGjC,iBAAAA,CAAkB,IAAI,EAAE4B,IAAAA,CAAKM,GAAG,GAAGlC,iBAAAA,CAAkB,GAAG,CAAC;AAChH,SAAA;AAEA,QAAA,MAAMmC,mBAAsB,GAAA,IAAA;YAC1BZ,UAAWa,CAAAA,OAAO,CAAC,CAACT,SAAWU,EAAAA,KAAAA,GAAAA;gBAC7B,MAAMC,OAAAA,GAAUjB,QAAQ,CAACgB,KAAM,CAAA;AAC/B,gBAAA,IAAIC,WAAWX,SAAW,EAAA;AACxBF,oBAAAA,aAAAA,CAAca,OAASX,EAAAA,SAAAA,CAAAA;AACzB;AACF,aAAA,CAAA;AACF,SAAA;QAEAN,QAASe,CAAAA,OAAO,CAAC,CAACE,OAAAA,GAAAA;AAChB,YAAA,IAAIA,mBAAmBC,WAAa,EAAA;gBAClC,MAAMZ,SAAAA,GAAYjB,QAASI,CAAAA,aAAa,CAAC,KAAA,CAAA;AACzCa,gBAAAA,SAAAA,CAAUX,KAAK,CAACC,OAAO,GAAG;;;;;;;;QAQ1B,CAAC;;AAGD,gBAAA,MAAMuB,iBAAoB,GAAA,IAAA;oBACxBb,SAAUX,CAAAA,KAAK,CAACyB,YAAY,GAAGxC,qBAAAA;AACjC,iBAAA;AACA,gBAAA,MAAMyC,iBAAoB,GAAA,IAAA;oBACxBf,SAAUX,CAAAA,KAAK,CAACyB,YAAY,GAAG,aAAA;AACjC,iBAAA;AACA,gBAAA,MAAME,kBAAqB,GAAA,IAAA;;;oBAGzBC,OAAQC,CAAAA,GAAG,CAAC,2BAA6BP,EAAAA,OAAAA,CAAAA;AAC3C,iBAAA;AACA,gBAAA,MAAMQ,mBAAmB,CAACC,KAAAA,GAAAA;;oBAExB,IAAIA,KAAAA,CAAMC,MAAM,IAAI,CAAG,EAAA;AACrBD,wBAAAA,KAAAA,CAAME,cAAc,EAAA;AACtB;AACF,iBAAA;gBAEAX,OAAQY,CAAAA,gBAAgB,CAAC,YAAcV,EAAAA,iBAAAA,CAAAA;gBACvCF,OAAQY,CAAAA,gBAAgB,CAAC,YAAcR,EAAAA,iBAAAA,CAAAA;gBACvCJ,OAAQY,CAAAA,gBAAgB,CAAC,UAAYP,EAAAA,kBAAAA,CAAAA;gBACrCL,OAAQY,CAAAA,gBAAgB,CAAC,WAAaJ,EAAAA,gBAAAA,CAAAA;;AAGtCtB,gBAAAA,cAAAA,CAAe2B,IAAI,CACjB;AAAEb,oBAAAA,OAAAA;oBAASc,IAAM,EAAA,YAAA;oBAAcC,OAASb,EAAAA;iBACxC,EAAA;AAAEF,oBAAAA,OAAAA;oBAASc,IAAM,EAAA,YAAA;oBAAcC,OAASX,EAAAA;iBACxC,EAAA;AAAEJ,oBAAAA,OAAAA;oBAASc,IAAM,EAAA,UAAA;oBAAYC,OAASV,EAAAA;iBACtC,EAAA;AAAEL,oBAAAA,OAAAA;oBAASc,IAAM,EAAA,WAAA;oBAAaC,OAASP,EAAAA;AAAkC,iBAAA,CAAA;AAG3EvB,gBAAAA,UAAAA,CAAW4B,IAAI,CAACxB,SAAAA,CAAAA;AAChBd,gBAAAA,OAAAA,CAAQM,WAAW,CAACQ,SAAAA,CAAAA;AAEpBF,gBAAAA,aAAAA,CAAca,OAASX,EAAAA,SAAAA,CAAAA;AACzB;AACF,SAAA,CAAA;QAEA,OAAO;AACLN,YAAAA,QAAAA;AACAc,YAAAA,mBAAAA;AACAX,YAAAA;AACF,SAAA;AACF,KAAA;AAIA,IAAA,MAAM8B,iBAAiB,CAACC,gBAAAA,GAAAA;QACtB,MAAMC,cAAAA,GAAiB,IAAIC,cAAe,CAAA,IAAA;AACxCF,YAAAA,gBAAAA,CAAiBpB,mBAAmB,EAAA;AACtC,SAAA,CAAA;AAEAoB,QAAAA,gBAAAA,CAAiBlC,QAAQ,CAACe,OAAO,CAAC,CAACE,OAAAA,GAAAA;AACjCkB,YAAAA,cAAAA,CAAeE,OAAO,CAACpB,OAAAA,CAAAA;AACzB,SAAA,CAAA;QAEAkB,cAAeE,CAAAA,OAAO,CAAChD,QAAAA,CAASiD,eAAe,CAAA;AAE/C,QAAA,MAAMC,cAAiB,GAAA,IAAA;AACrBL,YAAAA,gBAAAA,CAAiBpB,mBAAmB,EAAA;AACtC,SAAA;AAEA,QAAA,MAAM0B,qBAAqB,IAAIC,GAAAA,EAAAA;AAC/BD,QAAAA,kBAAAA,CAAmBE,GAAG,CAAC7D,MAAAA,CAAAA;;AAGvBqD,QAAAA,gBAAAA,CAAiBlC,QAAQ,CAACe,OAAO,CAAC,CAACE,OAAAA,GAAAA;YACjC,IAAI0B,MAAAA,GAAS1B,QAAQ2B,aAAa;AAClC,YAAA,MAAOD,MAAQ,CAAA;gBACb,MAAME,aAAAA,GAAgBhE,MAAOiE,CAAAA,gBAAgB,CAACH,MAAAA,CAAAA;gBAC9C,MAAMI,QAAAA,GAAWF,cAAcE,QAAQ,GAAGF,cAAcG,SAAS,GAAGH,cAAcI,SAAS;AAE3F,gBAAA,IAAIF,SAASG,QAAQ,CAAC,aAAaH,QAASG,CAAAA,QAAQ,CAAC,MAAS,CAAA,EAAA;AAC5DV,oBAAAA,kBAAAA,CAAmBE,GAAG,CAACC,MAAAA,CAAAA;AACzB;AAEAA,gBAAAA,MAAAA,GAASA,OAAOC,aAAa;AAC/B;AACF,SAAA,CAAA;;QAGAJ,kBAAmBzB,CAAAA,OAAO,CAAC,CAACE,OAAAA,GAAAA;AAC1B,YAAA,IAAIA,YAAYpC,MAAQ,EAAA;gBACtBA,MAAOgD,CAAAA,gBAAgB,CAAC,QAAUU,EAAAA,cAAAA,CAAAA;gBAClC1D,MAAOgD,CAAAA,gBAAgB,CAAC,QAAUU,EAAAA,cAAAA,CAAAA;aAC7B,MAAA;gBACJtB,OAAoBY,CAAAA,gBAAgB,CAAC,QAAUU,EAAAA,cAAAA,CAAAA;AAClD;AACF,SAAA,CAAA;QAEA,OAAO;AACLJ,YAAAA,cAAAA;AACAI,YAAAA,cAAAA;AACAC,YAAAA;AACF,SAAA;AACF,KAAA;AAEA,IAAA,MAAMW,qBAAqB,CAACjB,gBAAAA,GAAAA;;AAE1B,QAAA,OAAOA,iBAAiB/B,cAAc;AACxC,KAAA;IAEA,MAAMiD,mBAAAA,GAAsB,CAC1B5D,OAAAA,EACA6D,SACAC,EAAAA,aAAAA,GAAAA;AAEAzE,QAAAA,MAAAA,CAAOO,uBAAuB,GAAG,IAAA;YAC/BiE,SAAUlB,CAAAA,cAAc,CAACoB,UAAU,EAAA;;AAGnCF,YAAAA,SAAAA,CAAUb,kBAAkB,CAACzB,OAAO,CAAC,CAACE,OAAAA,GAAAA;AACpC,gBAAA,IAAIA,YAAYpC,MAAQ,EAAA;AACtBA,oBAAAA,MAAAA,CAAO2E,mBAAmB,CAAC,QAAUH,EAAAA,SAAAA,CAAUd,cAAc,CAAA;AAC7D1D,oBAAAA,MAAAA,CAAO2E,mBAAmB,CAAC,QAAUH,EAAAA,SAAAA,CAAUd,cAAc,CAAA;iBACxD,MAAA;AACJtB,oBAAAA,OAAAA,CAAoBuC,mBAAmB,CAAC,QAAUH,EAAAA,SAAAA,CAAUd,cAAc,CAAA;AAC7E;AACF,aAAA,CAAA;;YAGAe,aAAcvC,CAAAA,OAAO,CAAC,CAAC,EAAEE,OAAO,EAAEc,IAAI,EAAEC,OAAO,EAAE,GAAA;gBAC/Cf,OAAQuC,CAAAA,mBAAmB,CAACzB,IAAMC,EAAAA,OAAAA,CAAAA;AACpC,aAAA,CAAA;AAEAxC,YAAAA,OAAAA,CAAQD,MAAM,EAAA;AAChB,SAAA;AACF,KAAA;AAEA;;AAEgG,qGAEhG,MAAMC,OAAUL,GAAAA,mBAAAA,EAAAA;AAChB,IAAA,MAAM+C,mBAAmBnC,sBAAuBP,CAAAA,OAAAA,CAAAA;AAChD,IAAA,MAAM6D,YAAYpB,cAAeC,CAAAA,gBAAAA,CAAAA;AACjC,IAAA,MAAMoB,gBAAgBH,kBAAmBjB,CAAAA,gBAAAA,CAAAA;AACzCkB,IAAAA,mBAAAA,CAAoB5D,SAAS6D,SAAWC,EAAAA,aAAAA,CAAAA;AAC1C;;;;"}
+{"version":3,"file":"previewScript.js","sources":["../../../../admin/src/preview/utils/previewScript.ts"],"sourcesContent":["// NOTE: This override is for the properties on _user's site_, it's not about Strapi Admin.\ndeclare global {\n  interface Window {\n    __strapi_previewCleanup?: () => void;\n    STRAPI_HIGHLIGHT_HOVER_COLOR?: string;\n    STRAPI_HIGHLIGHT_ACTIVE_COLOR?: string;\n  }\n}\n\n/**\n * previewScript will be injected into the preview iframe after being stringified.\n * Therefore it CANNOT use any imports, or refer to any variables outside of its own scope.\n * It's why many functions are defined within previewScript, it's the only way to avoid going full spaghetti.\n * To get a better overview of everything previewScript does, go to the orchestration part at its end.\n */\nconst previewScript = (shouldRun = true) => {\n  /* -----------------------------------------------------------------------------------------------\n   * Params\n   * ---------------------------------------------------------------------------------------------*/\n  const HIGHLIGHT_PADDING = 2; // in pixels\n  const HIGHLIGHT_HOVER_COLOR = window.STRAPI_HIGHLIGHT_HOVER_COLOR ?? '#4945ff'; // dark primary500\n  const HIGHLIGHT_ACTIVE_COLOR = window.STRAPI_HIGHLIGHT_ACTIVE_COLOR ?? '#7b79ff'; // dark primary600\n\n  const SOURCE_ATTRIBUTE = 'data-strapi-source';\n  const OVERLAY_ID = 'strapi-preview-overlay';\n  const INTERNAL_EVENTS = {\n    STRAPI_FIELD_FOCUS: 'strapiFieldFocus',\n    STRAPI_FIELD_BLUR: 'strapiFieldBlur',\n    STRAPI_FIELD_CHANGE: 'strapiFieldChange',\n    STRAPI_FIELD_FOCUS_INTENT: 'strapiFieldFocusIntent',\n  } as const;\n\n  /**\n   * Calling the function in no-run mode lets us retrieve the constants from other files and keep\n   * a single source of truth for them. It's the only way to do this because this script can't\n   * refer to any variables outside of its own scope, because it's stringified before it's run.\n   */\n  if (!shouldRun) {\n    return { INTERNAL_EVENTS };\n  }\n\n  /* -----------------------------------------------------------------------------------------------\n   * Utils\n   * ---------------------------------------------------------------------------------------------*/\n\n  const sendMessage = (\n    type: (typeof INTERNAL_EVENTS)[keyof typeof INTERNAL_EVENTS],\n    payload: unknown\n  ) => {\n    window.parent.postMessage({ type, payload }, '*');\n  };\n\n  /* -----------------------------------------------------------------------------------------------\n   * Functionality pieces\n   * ---------------------------------------------------------------------------------------------*/\n\n  const createOverlaySystem = () => {\n    // Clean up before creating a new overlay so we can safely call previewScript multiple times\n    window.__strapi_previewCleanup?.();\n    document.getElementById(OVERLAY_ID)?.remove();\n\n    const overlay = document.createElement('div');\n    overlay.id = OVERLAY_ID;\n    overlay.style.cssText = `\n      position: fixed;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      pointer-events: none;\n      z-index: 9999;\n    `;\n\n    window.document.body.appendChild(overlay);\n    return overlay;\n  };\n\n  type EventListenersList = Array<{\n    element: HTMLElement | Window;\n    type: keyof HTMLElementEventMap | 'message';\n    handler: EventListener;\n  }>;\n\n  const createHighlightManager = (overlay: HTMLElement) => {\n    const elements = window.document.querySelectorAll(`[${SOURCE_ATTRIBUTE}]`);\n    const eventListeners: EventListenersList = [];\n    const highlights: HTMLElement[] = [];\n    const focusedHighlights: HTMLElement[] = [];\n    let focusedField: string | null = null;\n\n    const drawHighlight = (target: Element, highlight: HTMLElement) => {\n      if (!highlight) return;\n\n      const rect = target.getBoundingClientRect();\n      highlight.style.width = `${rect.width + HIGHLIGHT_PADDING * 2}px`;\n      highlight.style.height = `${rect.height + HIGHLIGHT_PADDING * 2}px`;\n      highlight.style.transform = `translate(${rect.left - HIGHLIGHT_PADDING}px, ${rect.top - HIGHLIGHT_PADDING}px)`;\n    };\n\n    const updateAllHighlights = () => {\n      highlights.forEach((highlight, index) => {\n        const element = elements[index];\n        if (element && highlight) {\n          drawHighlight(element, highlight);\n        }\n      });\n    };\n\n    elements.forEach((element) => {\n      if (element instanceof HTMLElement) {\n        const highlight = document.createElement('div');\n        highlight.style.cssText = `\n          position: absolute;\n          outline: 2px solid transparent;\n          pointer-events: none;\n          border-radius: 2px;\n          background-color: transparent;\n          will-change: transform;\n          transition: outline-color 0.1s ease-in-out;\n        `;\n\n        // Move hover detection to the underlying element\n        const mouseEnterHandler = () => {\n          if (!highlightManager.focusedHighlights.includes(highlight)) {\n            highlight.style.outlineColor = HIGHLIGHT_HOVER_COLOR;\n          }\n        };\n        const mouseLeaveHandler = () => {\n          if (!highlightManager.focusedHighlights.includes(highlight)) {\n            highlight.style.outlineColor = 'transparent';\n          }\n        };\n        const doubleClickHandler = () => {\n          const sourceAttribute = element.getAttribute(SOURCE_ATTRIBUTE);\n          if (sourceAttribute) {\n            const rect = element.getBoundingClientRect();\n            sendMessage(INTERNAL_EVENTS.STRAPI_FIELD_FOCUS_INTENT, {\n              path: sourceAttribute,\n              position: {\n                top: rect.top,\n                left: rect.left,\n                right: rect.right,\n                bottom: rect.bottom,\n                width: rect.width,\n                height: rect.height,\n              },\n            });\n          }\n        };\n        const mouseDownHandler = (event: MouseEvent) => {\n          // Prevent default multi click to select behavior\n          if (event.detail >= 2) {\n            event.preventDefault();\n          }\n        };\n\n        element.addEventListener('mouseenter', mouseEnterHandler);\n        element.addEventListener('mouseleave', mouseLeaveHandler);\n        element.addEventListener('dblclick', doubleClickHandler);\n        element.addEventListener('mousedown', mouseDownHandler);\n\n        // Store event listeners for cleanup\n        eventListeners.push(\n          { element, type: 'mouseenter', handler: mouseEnterHandler },\n          { element, type: 'mouseleave', handler: mouseLeaveHandler },\n          { element, type: 'dblclick', handler: doubleClickHandler },\n          { element, type: 'mousedown', handler: mouseDownHandler as EventListener }\n        );\n\n        highlights.push(highlight);\n        overlay.appendChild(highlight);\n\n        drawHighlight(element, highlight);\n      }\n    });\n\n    return {\n      elements,\n      updateAllHighlights,\n      eventListeners,\n      highlights,\n      focusedHighlights,\n      setFocusedField: (field: string | null) => {\n        focusedField = field;\n      },\n      getFocusedField: () => focusedField,\n    };\n  };\n\n  type HighlightManager = ReturnType<typeof createHighlightManager>;\n\n  const setupObservers = (highlightManager: HighlightManager) => {\n    const resizeObserver = new ResizeObserver(() => {\n      highlightManager.updateAllHighlights();\n    });\n\n    highlightManager.elements.forEach((element: Element) => {\n      resizeObserver.observe(element);\n    });\n\n    resizeObserver.observe(document.documentElement);\n\n    const updateOnScroll = () => {\n      highlightManager.updateAllHighlights();\n    };\n\n    const scrollableElements = new Set<Element | Window>();\n    scrollableElements.add(window);\n\n    // Find all scrollable ancestors for all tracked elements\n    highlightManager.elements.forEach((element) => {\n      let parent = element.parentElement;\n      while (parent) {\n        const computedStyle = window.getComputedStyle(parent);\n        const overflow = computedStyle.overflow + computedStyle.overflowX + computedStyle.overflowY;\n\n        if (overflow.includes('scroll') || overflow.includes('auto')) {\n          scrollableElements.add(parent);\n        }\n\n        parent = parent.parentElement;\n      }\n    });\n\n    // Add scroll listeners to all scrollable elements\n    scrollableElements.forEach((element) => {\n      if (element === window) {\n        window.addEventListener('scroll', updateOnScroll);\n        window.addEventListener('resize', updateOnScroll);\n      } else {\n        element.addEventListener('scroll', updateOnScroll);\n      }\n    });\n\n    return {\n      resizeObserver,\n      updateOnScroll,\n      scrollableElements,\n    };\n  };\n\n  const setupEventHandlers = (highlightManager: HighlightManager) => {\n    const handleMessage = (event: MessageEvent) => {\n      if (!event.data?.type) return;\n\n      // The user typed in an input, reflect the change in the preview\n      if (event.data.type === INTERNAL_EVENTS.STRAPI_FIELD_CHANGE) {\n        const { field, value } = event.data.payload;\n        if (!field) return;\n\n        const matchingElements = document.querySelectorAll(`[${SOURCE_ATTRIBUTE}=\"${field}\"]`);\n        matchingElements.forEach((element) => {\n          if (element instanceof HTMLElement) {\n            element.textContent = value || '';\n          }\n        });\n        return;\n      }\n\n      // The user focused a new input, update the highlights in the preview\n      if (event.data.type === INTERNAL_EVENTS.STRAPI_FIELD_FOCUS) {\n        const { field } = event.data.payload;\n        if (!field) return;\n\n        // Clear existing focused highlights\n        highlightManager.focusedHighlights.forEach((highlight: HTMLElement) => {\n          highlight.style.outlineColor = 'transparent';\n        });\n        highlightManager.focusedHighlights.length = 0;\n\n        // Set new focused field and highlight matching elements\n        highlightManager.setFocusedField(field);\n        const matchingElements = document.querySelectorAll(`[${SOURCE_ATTRIBUTE}=\"${field}\"]`);\n        matchingElements.forEach((element) => {\n          const highlight =\n            highlightManager.highlights[Array.from(highlightManager.elements).indexOf(element)];\n          if (highlight) {\n            highlight.style.outlineColor = HIGHLIGHT_ACTIVE_COLOR;\n            highlight.style.outlineWidth = '3px';\n            highlightManager.focusedHighlights.push(highlight);\n          }\n        });\n        return;\n      }\n\n      // The user is no longer focusing an input, remove the highlights\n      if (event.data.type === INTERNAL_EVENTS.STRAPI_FIELD_BLUR) {\n        const { field } = event.data.payload;\n        if (field !== highlightManager.getFocusedField()) return;\n\n        highlightManager.focusedHighlights.forEach((highlight: HTMLElement) => {\n          highlight.style.outlineColor = 'transparent';\n          highlight.style.outlineWidth = '2px';\n        });\n        highlightManager.focusedHighlights.length = 0;\n        highlightManager.setFocusedField(null);\n      }\n    };\n\n    window.addEventListener('message', handleMessage);\n\n    // Add the message handler to the cleanup list\n    const messageEventListener = {\n      element: window,\n      type: 'message' as keyof HTMLElementEventMap,\n      handler: handleMessage as EventListener,\n    };\n\n    return [...highlightManager.eventListeners, messageEventListener];\n  };\n\n  const createCleanupSystem = (\n    overlay: HTMLElement,\n    observers: ReturnType<typeof setupObservers>,\n    eventHandlers: EventListenersList\n  ) => {\n    window.__strapi_previewCleanup = () => {\n      observers.resizeObserver.disconnect();\n\n      // Remove all scroll listeners\n      observers.scrollableElements.forEach((element) => {\n        if (element === window) {\n          window.removeEventListener('scroll', observers.updateOnScroll);\n          window.removeEventListener('resize', observers.updateOnScroll);\n        } else {\n          (element as Element).removeEventListener('scroll', observers.updateOnScroll);\n        }\n      });\n\n      // Remove highlight event listeners\n      eventHandlers.forEach(({ element, type, handler }) => {\n        element.removeEventListener(type, handler);\n      });\n\n      overlay.remove();\n    };\n  };\n\n  /* -----------------------------------------------------------------------------------------------\n   * Orchestration\n   * ---------------------------------------------------------------------------------------------*/\n\n  const overlay = createOverlaySystem();\n  const highlightManager = createHighlightManager(overlay);\n  const observers = setupObservers(highlightManager);\n  const eventHandlers = setupEventHandlers(highlightManager);\n  createCleanupSystem(overlay, observers, eventHandlers);\n};\n\nexport { previewScript };\n"],"names":["previewScript","shouldRun","HIGHLIGHT_PADDING","HIGHLIGHT_HOVER_COLOR","window","STRAPI_HIGHLIGHT_HOVER_COLOR","HIGHLIGHT_ACTIVE_COLOR","STRAPI_HIGHLIGHT_ACTIVE_COLOR","SOURCE_ATTRIBUTE","OVERLAY_ID","INTERNAL_EVENTS","STRAPI_FIELD_FOCUS","STRAPI_FIELD_BLUR","STRAPI_FIELD_CHANGE","STRAPI_FIELD_FOCUS_INTENT","sendMessage","type","payload","parent","postMessage","createOverlaySystem","__strapi_previewCleanup","document","getElementById","remove","overlay","createElement","id","style","cssText","body","appendChild","createHighlightManager","elements","querySelectorAll","eventListeners","highlights","focusedHighlights","focusedField","drawHighlight","target","highlight","rect","getBoundingClientRect","width","height","transform","left","top","updateAllHighlights","forEach","index","element","HTMLElement","mouseEnterHandler","highlightManager","includes","outlineColor","mouseLeaveHandler","doubleClickHandler","sourceAttribute","getAttribute","path","position","right","bottom","mouseDownHandler","event","detail","preventDefault","addEventListener","push","handler","setFocusedField","field","getFocusedField","setupObservers","resizeObserver","ResizeObserver","observe","documentElement","updateOnScroll","scrollableElements","Set","add","parentElement","computedStyle","getComputedStyle","overflow","overflowX","overflowY","setupEventHandlers","handleMessage","data","value","matchingElements","textContent","length","Array","from","indexOf","outlineWidth","messageEventListener","createCleanupSystem","observers","eventHandlers","disconnect","removeEventListener"],"mappings":"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"}

package/dist/admin/preview/utils/previewScript.mjs

@@ -9,10 +9,14 @@
    * Params
    * ---------------------------------------------------------------------------------------------*/ const HIGHLIGHT_PADDING = 2; // in pixels
     const HIGHLIGHT_HOVER_COLOR = window.STRAPI_HIGHLIGHT_HOVER_COLOR ?? '#4945ff'; // dark primary500
+    const HIGHLIGHT_ACTIVE_COLOR = window.STRAPI_HIGHLIGHT_ACTIVE_COLOR ?? '#7b79ff'; // dark primary600
     const SOURCE_ATTRIBUTE = 'data-strapi-source';
     const OVERLAY_ID = 'strapi-preview-overlay';
     const INTERNAL_EVENTS = {
-        DUMMY_EVENT: 'dummyEvent'
+        STRAPI_FIELD_FOCUS: 'strapiFieldFocus',
+        STRAPI_FIELD_BLUR: 'strapiFieldBlur',
+        STRAPI_FIELD_CHANGE: 'strapiFieldChange',
+        STRAPI_FIELD_FOCUS_INTENT: 'strapiFieldFocusIntent'
     };
     /**
    * Calling the function in no-run mode lets us retrieve the constants from other files and keep
@@ -24,6 +28,14 @@
         };
     }
     /* -----------------------------------------------------------------------------------------------
+   * Utils
+   * ---------------------------------------------------------------------------------------------*/ const sendMessage = (type, payload)=>{
+        window.parent.postMessage({
+            type,
+            payload
+        }, '*');
+    };
+    /* -----------------------------------------------------------------------------------------------
    * Functionality pieces
    * ---------------------------------------------------------------------------------------------*/ const createOverlaySystem = ()=>{
         // Clean up before creating a new overlay so we can safely call previewScript multiple times
@@ -45,8 +57,10 @@
     };
     const createHighlightManager = (overlay)=>{
         const elements = window.document.querySelectorAll(`[${SOURCE_ATTRIBUTE}]`);
-        const highlights = [];
         const eventListeners = [];
+        const highlights = [];
+        const focusedHighlights = [];
+        let focusedField = null;
         const drawHighlight = (target, highlight)=>{
             if (!highlight) return;
             const rect = target.getBoundingClientRect();
@@ -76,15 +90,31 @@
         `;
                 // Move hover detection to the underlying element
                 const mouseEnterHandler = ()=>{
-                    highlight.style.outlineColor = HIGHLIGHT_HOVER_COLOR;
+                    if (!highlightManager.focusedHighlights.includes(highlight)) {
+                        highlight.style.outlineColor = HIGHLIGHT_HOVER_COLOR;
+                    }
                 };
                 const mouseLeaveHandler = ()=>{
-                    highlight.style.outlineColor = 'transparent';
+                    if (!highlightManager.focusedHighlights.includes(highlight)) {
+                        highlight.style.outlineColor = 'transparent';
+                    }
                 };
                 const doubleClickHandler = ()=>{
-                    // TODO: handle for real
-                    // eslint-disable-next-line no-console
-                    console.log('Double click on highlight', element);
+                    const sourceAttribute = element.getAttribute(SOURCE_ATTRIBUTE);
+                    if (sourceAttribute) {
+                        const rect = element.getBoundingClientRect();
+                        sendMessage(INTERNAL_EVENTS.STRAPI_FIELD_FOCUS_INTENT, {
+                            path: sourceAttribute,
+                            position: {
+                                top: rect.top,
+                                left: rect.left,
+                                right: rect.right,
+                                bottom: rect.bottom,
+                                width: rect.width,
+                                height: rect.height
+                            }
+                        });
+                    }
                 };
                 const mouseDownHandler = (event)=>{
                     // Prevent default multi click to select behavior
@@ -122,7 +152,13 @@
         return {
             elements,
             updateAllHighlights,
-            eventListeners
+            eventListeners,
+            highlights,
+            focusedHighlights,
+            setFocusedField: (field)=>{
+                focusedField = field;
+            },
+            getFocusedField: ()=>focusedField
         };
     };
     const setupObservers = (highlightManager)=>{
@@ -166,8 +202,65 @@
         };
     };
     const setupEventHandlers = (highlightManager)=>{
-        // TODO: The listeners for postMessage events will go here
-        return highlightManager.eventListeners;
+        const handleMessage = (event)=>{
+            if (!event.data?.type) return;
+            // The user typed in an input, reflect the change in the preview
+            if (event.data.type === INTERNAL_EVENTS.STRAPI_FIELD_CHANGE) {
+                const { field, value } = event.data.payload;
+                if (!field) return;
+                const matchingElements = document.querySelectorAll(`[${SOURCE_ATTRIBUTE}="${field}"]`);
+                matchingElements.forEach((element)=>{
+                    if (element instanceof HTMLElement) {
+                        element.textContent = value || '';
+                    }
+                });
+                return;
+            }
+            // The user focused a new input, update the highlights in the preview
+            if (event.data.type === INTERNAL_EVENTS.STRAPI_FIELD_FOCUS) {
+                const { field } = event.data.payload;
+                if (!field) return;
+                // Clear existing focused highlights
+                highlightManager.focusedHighlights.forEach((highlight)=>{
+                    highlight.style.outlineColor = 'transparent';
+                });
+                highlightManager.focusedHighlights.length = 0;
+                // Set new focused field and highlight matching elements
+                highlightManager.setFocusedField(field);
+                const matchingElements = document.querySelectorAll(`[${SOURCE_ATTRIBUTE}="${field}"]`);
+                matchingElements.forEach((element)=>{
+                    const highlight = highlightManager.highlights[Array.from(highlightManager.elements).indexOf(element)];
+                    if (highlight) {
+                        highlight.style.outlineColor = HIGHLIGHT_ACTIVE_COLOR;
+                        highlight.style.outlineWidth = '3px';
+                        highlightManager.focusedHighlights.push(highlight);
+                    }
+                });
+                return;
+            }
+            // The user is no longer focusing an input, remove the highlights
+            if (event.data.type === INTERNAL_EVENTS.STRAPI_FIELD_BLUR) {
+                const { field } = event.data.payload;
+                if (field !== highlightManager.getFocusedField()) return;
+                highlightManager.focusedHighlights.forEach((highlight)=>{
+                    highlight.style.outlineColor = 'transparent';
+                    highlight.style.outlineWidth = '2px';
+                });
+                highlightManager.focusedHighlights.length = 0;
+                highlightManager.setFocusedField(null);
+            }
+        };
+        window.addEventListener('message', handleMessage);
+        // Add the message handler to the cleanup list
+        const messageEventListener = {
+            element: window,
+            type: 'message',
+            handler: handleMessage
+        };
+        return [
+            ...highlightManager.eventListeners,
+            messageEventListener
+        ];
     };
     const createCleanupSystem = (overlay, observers, eventHandlers)=>{
         window.__strapi_previewCleanup = ()=>{

package/dist/admin/preview/utils/previewScript.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"previewScript.mjs","sources":["../../../../admin/src/preview/utils/previewScript.ts"],"sourcesContent":["// NOTE: This override is for the properties on _user's site_, it's not about Strapi Admin.\ndeclare global {\n  interface Window {\n    __strapi_previewCleanup?: () => void;\n    STRAPI_HIGHLIGHT_HOVER_COLOR?: string;\n  }\n}\n\n/**\n * previewScript will be injected into the preview iframe after being stringified.\n * Therefore it CANNOT use any imports, or refer to any variables outside of its own scope.\n * It's why many functions are defined within previewScript, it's the only way to avoid going full spaghetti.\n * To get a better overview of everything previewScript does, go to the orchestration part at its end.\n */\nconst previewScript = (shouldRun = true) => {\n  /* -----------------------------------------------------------------------------------------------\n   * Params\n   * ---------------------------------------------------------------------------------------------*/\n  const HIGHLIGHT_PADDING = 2; // in pixels\n  const HIGHLIGHT_HOVER_COLOR = window.STRAPI_HIGHLIGHT_HOVER_COLOR ?? '#4945ff'; // dark primary500\n  const SOURCE_ATTRIBUTE = 'data-strapi-source';\n  const OVERLAY_ID = 'strapi-preview-overlay';\n  const INTERNAL_EVENTS = {\n    DUMMY_EVENT: 'dummyEvent',\n  } as const;\n\n  /**\n   * Calling the function in no-run mode lets us retrieve the constants from other files and keep\n   * a single source of truth for them. It's the only way to do this because this script can't\n   * refer to any variables outside of its own scope, because it's stringified before it's run.\n   */\n  if (!shouldRun) {\n    return { INTERNAL_EVENTS };\n  }\n\n  /* -----------------------------------------------------------------------------------------------\n   * Functionality pieces\n   * ---------------------------------------------------------------------------------------------*/\n\n  const createOverlaySystem = () => {\n    // Clean up before creating a new overlay so we can safely call previewScript multiple times\n    window.__strapi_previewCleanup?.();\n    document.getElementById(OVERLAY_ID)?.remove();\n\n    const overlay = document.createElement('div');\n    overlay.id = OVERLAY_ID;\n    overlay.style.cssText = `\n      position: fixed;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      pointer-events: none;\n      z-index: 9999;\n    `;\n\n    window.document.body.appendChild(overlay);\n    return overlay;\n  };\n\n  type EventListenersList = Array<{\n    element: HTMLElement;\n    type: keyof HTMLElementEventMap;\n    handler: EventListener;\n  }>;\n\n  const createHighlightManager = (overlay: HTMLElement) => {\n    const elements = window.document.querySelectorAll(`[${SOURCE_ATTRIBUTE}]`);\n    const highlights: HTMLElement[] = [];\n    const eventListeners: EventListenersList = [];\n\n    const drawHighlight = (target: Element, highlight: HTMLElement) => {\n      if (!highlight) return;\n\n      const rect = target.getBoundingClientRect();\n      highlight.style.width = `${rect.width + HIGHLIGHT_PADDING * 2}px`;\n      highlight.style.height = `${rect.height + HIGHLIGHT_PADDING * 2}px`;\n      highlight.style.transform = `translate(${rect.left - HIGHLIGHT_PADDING}px, ${rect.top - HIGHLIGHT_PADDING}px)`;\n    };\n\n    const updateAllHighlights = () => {\n      highlights.forEach((highlight, index) => {\n        const element = elements[index];\n        if (element && highlight) {\n          drawHighlight(element, highlight);\n        }\n      });\n    };\n\n    elements.forEach((element) => {\n      if (element instanceof HTMLElement) {\n        const highlight = document.createElement('div');\n        highlight.style.cssText = `\n          position: absolute;\n          outline: 2px solid transparent;\n          pointer-events: none;\n          border-radius: 2px;\n          background-color: transparent;\n          will-change: transform;\n          transition: outline-color 0.1s ease-in-out;\n        `;\n\n        // Move hover detection to the underlying element\n        const mouseEnterHandler = () => {\n          highlight.style.outlineColor = HIGHLIGHT_HOVER_COLOR;\n        };\n        const mouseLeaveHandler = () => {\n          highlight.style.outlineColor = 'transparent';\n        };\n        const doubleClickHandler = () => {\n          // TODO: handle for real\n          // eslint-disable-next-line no-console\n          console.log('Double click on highlight', element);\n        };\n        const mouseDownHandler = (event: MouseEvent) => {\n          // Prevent default multi click to select behavior\n          if (event.detail >= 2) {\n            event.preventDefault();\n          }\n        };\n\n        element.addEventListener('mouseenter', mouseEnterHandler);\n        element.addEventListener('mouseleave', mouseLeaveHandler);\n        element.addEventListener('dblclick', doubleClickHandler);\n        element.addEventListener('mousedown', mouseDownHandler);\n\n        // Store event listeners for cleanup\n        eventListeners.push(\n          { element, type: 'mouseenter', handler: mouseEnterHandler },\n          { element, type: 'mouseleave', handler: mouseLeaveHandler },\n          { element, type: 'dblclick', handler: doubleClickHandler },\n          { element, type: 'mousedown', handler: mouseDownHandler as EventListener }\n        );\n\n        highlights.push(highlight);\n        overlay.appendChild(highlight);\n\n        drawHighlight(element, highlight);\n      }\n    });\n\n    return {\n      elements,\n      updateAllHighlights,\n      eventListeners,\n    };\n  };\n\n  type HighlightManager = ReturnType<typeof createHighlightManager>;\n\n  const setupObservers = (highlightManager: HighlightManager) => {\n    const resizeObserver = new ResizeObserver(() => {\n      highlightManager.updateAllHighlights();\n    });\n\n    highlightManager.elements.forEach((element: Element) => {\n      resizeObserver.observe(element);\n    });\n\n    resizeObserver.observe(document.documentElement);\n\n    const updateOnScroll = () => {\n      highlightManager.updateAllHighlights();\n    };\n\n    const scrollableElements = new Set<Element | Window>();\n    scrollableElements.add(window);\n\n    // Find all scrollable ancestors for all tracked elements\n    highlightManager.elements.forEach((element) => {\n      let parent = element.parentElement;\n      while (parent) {\n        const computedStyle = window.getComputedStyle(parent);\n        const overflow = computedStyle.overflow + computedStyle.overflowX + computedStyle.overflowY;\n\n        if (overflow.includes('scroll') || overflow.includes('auto')) {\n          scrollableElements.add(parent);\n        }\n\n        parent = parent.parentElement;\n      }\n    });\n\n    // Add scroll listeners to all scrollable elements\n    scrollableElements.forEach((element) => {\n      if (element === window) {\n        window.addEventListener('scroll', updateOnScroll);\n        window.addEventListener('resize', updateOnScroll);\n      } else {\n        (element as Element).addEventListener('scroll', updateOnScroll);\n      }\n    });\n\n    return {\n      resizeObserver,\n      updateOnScroll,\n      scrollableElements,\n    };\n  };\n\n  const setupEventHandlers = (highlightManager: HighlightManager) => {\n    // TODO: The listeners for postMessage events will go here\n    return highlightManager.eventListeners;\n  };\n\n  const createCleanupSystem = (\n    overlay: HTMLElement,\n    observers: ReturnType<typeof setupObservers>,\n    eventHandlers: EventListenersList\n  ) => {\n    window.__strapi_previewCleanup = () => {\n      observers.resizeObserver.disconnect();\n\n      // Remove all scroll listeners\n      observers.scrollableElements.forEach((element) => {\n        if (element === window) {\n          window.removeEventListener('scroll', observers.updateOnScroll);\n          window.removeEventListener('resize', observers.updateOnScroll);\n        } else {\n          (element as Element).removeEventListener('scroll', observers.updateOnScroll);\n        }\n      });\n\n      // Remove highlight event listeners\n      eventHandlers.forEach(({ element, type, handler }) => {\n        element.removeEventListener(type, handler);\n      });\n\n      overlay.remove();\n    };\n  };\n\n  /* -----------------------------------------------------------------------------------------------\n   * Orchestration\n   * ---------------------------------------------------------------------------------------------*/\n\n  const overlay = createOverlaySystem();\n  const highlightManager = createHighlightManager(overlay);\n  const observers = setupObservers(highlightManager);\n  const eventHandlers = setupEventHandlers(highlightManager);\n  createCleanupSystem(overlay, observers, eventHandlers);\n};\n\nexport { previewScript };\n"],"names":["previewScript","shouldRun","HIGHLIGHT_PADDING","HIGHLIGHT_HOVER_COLOR","window","STRAPI_HIGHLIGHT_HOVER_COLOR","SOURCE_ATTRIBUTE","OVERLAY_ID","INTERNAL_EVENTS","DUMMY_EVENT","createOverlaySystem","__strapi_previewCleanup","document","getElementById","remove","overlay","createElement","id","style","cssText","body","appendChild","createHighlightManager","elements","querySelectorAll","highlights","eventListeners","drawHighlight","target","highlight","rect","getBoundingClientRect","width","height","transform","left","top","updateAllHighlights","forEach","index","element","HTMLElement","mouseEnterHandler","outlineColor","mouseLeaveHandler","doubleClickHandler","console","log","mouseDownHandler","event","detail","preventDefault","addEventListener","push","type","handler","setupObservers","highlightManager","resizeObserver","ResizeObserver","observe","documentElement","updateOnScroll","scrollableElements","Set","add","parent","parentElement","computedStyle","getComputedStyle","overflow","overflowX","overflowY","includes","setupEventHandlers","createCleanupSystem","observers","eventHandlers","disconnect","removeEventListener"],"mappings":"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"}
+{"version":3,"file":"previewScript.mjs","sources":["../../../../admin/src/preview/utils/previewScript.ts"],"sourcesContent":["// NOTE: This override is for the properties on _user's site_, it's not about Strapi Admin.\ndeclare global {\n  interface Window {\n    __strapi_previewCleanup?: () => void;\n    STRAPI_HIGHLIGHT_HOVER_COLOR?: string;\n    STRAPI_HIGHLIGHT_ACTIVE_COLOR?: string;\n  }\n}\n\n/**\n * previewScript will be injected into the preview iframe after being stringified.\n * Therefore it CANNOT use any imports, or refer to any variables outside of its own scope.\n * It's why many functions are defined within previewScript, it's the only way to avoid going full spaghetti.\n * To get a better overview of everything previewScript does, go to the orchestration part at its end.\n */\nconst previewScript = (shouldRun = true) => {\n  /* -----------------------------------------------------------------------------------------------\n   * Params\n   * ---------------------------------------------------------------------------------------------*/\n  const HIGHLIGHT_PADDING = 2; // in pixels\n  const HIGHLIGHT_HOVER_COLOR = window.STRAPI_HIGHLIGHT_HOVER_COLOR ?? '#4945ff'; // dark primary500\n  const HIGHLIGHT_ACTIVE_COLOR = window.STRAPI_HIGHLIGHT_ACTIVE_COLOR ?? '#7b79ff'; // dark primary600\n\n  const SOURCE_ATTRIBUTE = 'data-strapi-source';\n  const OVERLAY_ID = 'strapi-preview-overlay';\n  const INTERNAL_EVENTS = {\n    STRAPI_FIELD_FOCUS: 'strapiFieldFocus',\n    STRAPI_FIELD_BLUR: 'strapiFieldBlur',\n    STRAPI_FIELD_CHANGE: 'strapiFieldChange',\n    STRAPI_FIELD_FOCUS_INTENT: 'strapiFieldFocusIntent',\n  } as const;\n\n  /**\n   * Calling the function in no-run mode lets us retrieve the constants from other files and keep\n   * a single source of truth for them. It's the only way to do this because this script can't\n   * refer to any variables outside of its own scope, because it's stringified before it's run.\n   */\n  if (!shouldRun) {\n    return { INTERNAL_EVENTS };\n  }\n\n  /* -----------------------------------------------------------------------------------------------\n   * Utils\n   * ---------------------------------------------------------------------------------------------*/\n\n  const sendMessage = (\n    type: (typeof INTERNAL_EVENTS)[keyof typeof INTERNAL_EVENTS],\n    payload: unknown\n  ) => {\n    window.parent.postMessage({ type, payload }, '*');\n  };\n\n  /* -----------------------------------------------------------------------------------------------\n   * Functionality pieces\n   * ---------------------------------------------------------------------------------------------*/\n\n  const createOverlaySystem = () => {\n    // Clean up before creating a new overlay so we can safely call previewScript multiple times\n    window.__strapi_previewCleanup?.();\n    document.getElementById(OVERLAY_ID)?.remove();\n\n    const overlay = document.createElement('div');\n    overlay.id = OVERLAY_ID;\n    overlay.style.cssText = `\n      position: fixed;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      pointer-events: none;\n      z-index: 9999;\n    `;\n\n    window.document.body.appendChild(overlay);\n    return overlay;\n  };\n\n  type EventListenersList = Array<{\n    element: HTMLElement | Window;\n    type: keyof HTMLElementEventMap | 'message';\n    handler: EventListener;\n  }>;\n\n  const createHighlightManager = (overlay: HTMLElement) => {\n    const elements = window.document.querySelectorAll(`[${SOURCE_ATTRIBUTE}]`);\n    const eventListeners: EventListenersList = [];\n    const highlights: HTMLElement[] = [];\n    const focusedHighlights: HTMLElement[] = [];\n    let focusedField: string | null = null;\n\n    const drawHighlight = (target: Element, highlight: HTMLElement) => {\n      if (!highlight) return;\n\n      const rect = target.getBoundingClientRect();\n      highlight.style.width = `${rect.width + HIGHLIGHT_PADDING * 2}px`;\n      highlight.style.height = `${rect.height + HIGHLIGHT_PADDING * 2}px`;\n      highlight.style.transform = `translate(${rect.left - HIGHLIGHT_PADDING}px, ${rect.top - HIGHLIGHT_PADDING}px)`;\n    };\n\n    const updateAllHighlights = () => {\n      highlights.forEach((highlight, index) => {\n        const element = elements[index];\n        if (element && highlight) {\n          drawHighlight(element, highlight);\n        }\n      });\n    };\n\n    elements.forEach((element) => {\n      if (element instanceof HTMLElement) {\n        const highlight = document.createElement('div');\n        highlight.style.cssText = `\n          position: absolute;\n          outline: 2px solid transparent;\n          pointer-events: none;\n          border-radius: 2px;\n          background-color: transparent;\n          will-change: transform;\n          transition: outline-color 0.1s ease-in-out;\n        `;\n\n        // Move hover detection to the underlying element\n        const mouseEnterHandler = () => {\n          if (!highlightManager.focusedHighlights.includes(highlight)) {\n            highlight.style.outlineColor = HIGHLIGHT_HOVER_COLOR;\n          }\n        };\n        const mouseLeaveHandler = () => {\n          if (!highlightManager.focusedHighlights.includes(highlight)) {\n            highlight.style.outlineColor = 'transparent';\n          }\n        };\n        const doubleClickHandler = () => {\n          const sourceAttribute = element.getAttribute(SOURCE_ATTRIBUTE);\n          if (sourceAttribute) {\n            const rect = element.getBoundingClientRect();\n            sendMessage(INTERNAL_EVENTS.STRAPI_FIELD_FOCUS_INTENT, {\n              path: sourceAttribute,\n              position: {\n                top: rect.top,\n                left: rect.left,\n                right: rect.right,\n                bottom: rect.bottom,\n                width: rect.width,\n                height: rect.height,\n              },\n            });\n          }\n        };\n        const mouseDownHandler = (event: MouseEvent) => {\n          // Prevent default multi click to select behavior\n          if (event.detail >= 2) {\n            event.preventDefault();\n          }\n        };\n\n        element.addEventListener('mouseenter', mouseEnterHandler);\n        element.addEventListener('mouseleave', mouseLeaveHandler);\n        element.addEventListener('dblclick', doubleClickHandler);\n        element.addEventListener('mousedown', mouseDownHandler);\n\n        // Store event listeners for cleanup\n        eventListeners.push(\n          { element, type: 'mouseenter', handler: mouseEnterHandler },\n          { element, type: 'mouseleave', handler: mouseLeaveHandler },\n          { element, type: 'dblclick', handler: doubleClickHandler },\n          { element, type: 'mousedown', handler: mouseDownHandler as EventListener }\n        );\n\n        highlights.push(highlight);\n        overlay.appendChild(highlight);\n\n        drawHighlight(element, highlight);\n      }\n    });\n\n    return {\n      elements,\n      updateAllHighlights,\n      eventListeners,\n      highlights,\n      focusedHighlights,\n      setFocusedField: (field: string | null) => {\n        focusedField = field;\n      },\n      getFocusedField: () => focusedField,\n    };\n  };\n\n  type HighlightManager = ReturnType<typeof createHighlightManager>;\n\n  const setupObservers = (highlightManager: HighlightManager) => {\n    const resizeObserver = new ResizeObserver(() => {\n      highlightManager.updateAllHighlights();\n    });\n\n    highlightManager.elements.forEach((element: Element) => {\n      resizeObserver.observe(element);\n    });\n\n    resizeObserver.observe(document.documentElement);\n\n    const updateOnScroll = () => {\n      highlightManager.updateAllHighlights();\n    };\n\n    const scrollableElements = new Set<Element | Window>();\n    scrollableElements.add(window);\n\n    // Find all scrollable ancestors for all tracked elements\n    highlightManager.elements.forEach((element) => {\n      let parent = element.parentElement;\n      while (parent) {\n        const computedStyle = window.getComputedStyle(parent);\n        const overflow = computedStyle.overflow + computedStyle.overflowX + computedStyle.overflowY;\n\n        if (overflow.includes('scroll') || overflow.includes('auto')) {\n          scrollableElements.add(parent);\n        }\n\n        parent = parent.parentElement;\n      }\n    });\n\n    // Add scroll listeners to all scrollable elements\n    scrollableElements.forEach((element) => {\n      if (element === window) {\n        window.addEventListener('scroll', updateOnScroll);\n        window.addEventListener('resize', updateOnScroll);\n      } else {\n        element.addEventListener('scroll', updateOnScroll);\n      }\n    });\n\n    return {\n      resizeObserver,\n      updateOnScroll,\n      scrollableElements,\n    };\n  };\n\n  const setupEventHandlers = (highlightManager: HighlightManager) => {\n    const handleMessage = (event: MessageEvent) => {\n      if (!event.data?.type) return;\n\n      // The user typed in an input, reflect the change in the preview\n      if (event.data.type === INTERNAL_EVENTS.STRAPI_FIELD_CHANGE) {\n        const { field, value } = event.data.payload;\n        if (!field) return;\n\n        const matchingElements = document.querySelectorAll(`[${SOURCE_ATTRIBUTE}=\"${field}\"]`);\n        matchingElements.forEach((element) => {\n          if (element instanceof HTMLElement) {\n            element.textContent = value || '';\n          }\n        });\n        return;\n      }\n\n      // The user focused a new input, update the highlights in the preview\n      if (event.data.type === INTERNAL_EVENTS.STRAPI_FIELD_FOCUS) {\n        const { field } = event.data.payload;\n        if (!field) return;\n\n        // Clear existing focused highlights\n        highlightManager.focusedHighlights.forEach((highlight: HTMLElement) => {\n          highlight.style.outlineColor = 'transparent';\n        });\n        highlightManager.focusedHighlights.length = 0;\n\n        // Set new focused field and highlight matching elements\n        highlightManager.setFocusedField(field);\n        const matchingElements = document.querySelectorAll(`[${SOURCE_ATTRIBUTE}=\"${field}\"]`);\n        matchingElements.forEach((element) => {\n          const highlight =\n            highlightManager.highlights[Array.from(highlightManager.elements).indexOf(element)];\n          if (highlight) {\n            highlight.style.outlineColor = HIGHLIGHT_ACTIVE_COLOR;\n            highlight.style.outlineWidth = '3px';\n            highlightManager.focusedHighlights.push(highlight);\n          }\n        });\n        return;\n      }\n\n      // The user is no longer focusing an input, remove the highlights\n      if (event.data.type === INTERNAL_EVENTS.STRAPI_FIELD_BLUR) {\n        const { field } = event.data.payload;\n        if (field !== highlightManager.getFocusedField()) return;\n\n        highlightManager.focusedHighlights.forEach((highlight: HTMLElement) => {\n          highlight.style.outlineColor = 'transparent';\n          highlight.style.outlineWidth = '2px';\n        });\n        highlightManager.focusedHighlights.length = 0;\n        highlightManager.setFocusedField(null);\n      }\n    };\n\n    window.addEventListener('message', handleMessage);\n\n    // Add the message handler to the cleanup list\n    const messageEventListener = {\n      element: window,\n      type: 'message' as keyof HTMLElementEventMap,\n      handler: handleMessage as EventListener,\n    };\n\n    return [...highlightManager.eventListeners, messageEventListener];\n  };\n\n  const createCleanupSystem = (\n    overlay: HTMLElement,\n    observers: ReturnType<typeof setupObservers>,\n    eventHandlers: EventListenersList\n  ) => {\n    window.__strapi_previewCleanup = () => {\n      observers.resizeObserver.disconnect();\n\n      // Remove all scroll listeners\n      observers.scrollableElements.forEach((element) => {\n        if (element === window) {\n          window.removeEventListener('scroll', observers.updateOnScroll);\n          window.removeEventListener('resize', observers.updateOnScroll);\n        } else {\n          (element as Element).removeEventListener('scroll', observers.updateOnScroll);\n        }\n      });\n\n      // Remove highlight event listeners\n      eventHandlers.forEach(({ element, type, handler }) => {\n        element.removeEventListener(type, handler);\n      });\n\n      overlay.remove();\n    };\n  };\n\n  /* -----------------------------------------------------------------------------------------------\n   * Orchestration\n   * ---------------------------------------------------------------------------------------------*/\n\n  const overlay = createOverlaySystem();\n  const highlightManager = createHighlightManager(overlay);\n  const observers = setupObservers(highlightManager);\n  const eventHandlers = setupEventHandlers(highlightManager);\n  createCleanupSystem(overlay, observers, eventHandlers);\n};\n\nexport { previewScript };\n"],"names":["previewScript","shouldRun","HIGHLIGHT_PADDING","HIGHLIGHT_HOVER_COLOR","window","STRAPI_HIGHLIGHT_HOVER_COLOR","HIGHLIGHT_ACTIVE_COLOR","STRAPI_HIGHLIGHT_ACTIVE_COLOR","SOURCE_ATTRIBUTE","OVERLAY_ID","INTERNAL_EVENTS","STRAPI_FIELD_FOCUS","STRAPI_FIELD_BLUR","STRAPI_FIELD_CHANGE","STRAPI_FIELD_FOCUS_INTENT","sendMessage","type","payload","parent","postMessage","createOverlaySystem","__strapi_previewCleanup","document","getElementById","remove","overlay","createElement","id","style","cssText","body","appendChild","createHighlightManager","elements","querySelectorAll","eventListeners","highlights","focusedHighlights","focusedField","drawHighlight","target","highlight","rect","getBoundingClientRect","width","height","transform","left","top","updateAllHighlights","forEach","index","element","HTMLElement","mouseEnterHandler","highlightManager","includes","outlineColor","mouseLeaveHandler","doubleClickHandler","sourceAttribute","getAttribute","path","position","right","bottom","mouseDownHandler","event","detail","preventDefault","addEventListener","push","handler","setFocusedField","field","getFocusedField","setupObservers","resizeObserver","ResizeObserver","observe","documentElement","updateOnScroll","scrollableElements","Set","add","parentElement","computedStyle","getComputedStyle","overflow","overflowX","overflowY","setupEventHandlers","handleMessage","data","value","matchingElements","textContent","length","Array","from","indexOf","outlineWidth","messageEventListener","createCleanupSystem","observers","eventHandlers","disconnect","removeEventListener"],"mappings":"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"}

package/dist/admin/src/pages/EditView/components/Blocker.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Prevents users from leaving the page with unsaved form changes
+ */
+declare const Blocker: () => import("react/jsx-runtime").JSX.Element;
+export { Blocker };

package/dist/admin/src/pages/EditView/components/InputRenderer.d.ts

@@ -7,6 +7,6 @@ type InputRendererProps = DistributiveOmit<EditFieldLayout, 'size'> & {
     document: ReturnType<UseDocument>;
 };
 declare const useFieldHint: (hint: React.ReactNode, attribute: Schema.Attribute.AnyAttribute) => string | number | boolean | import("react/jsx-runtime").JSX.Element | Iterable<React.ReactNode> | (string | import("react/jsx-runtime").JSX.Element | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal)[] | null | undefined;
-declare const MemoizedInputRenderer: React.MemoExoticComponent<({ visible, hint: providedHint, document, ...props }: InputRendererProps) => import("react/jsx-runtime").JSX.Element | null>;
+declare const MemoizedInputRenderer: React.MemoExoticComponent<({ visible, hint: providedHint, document, ...inputProps }: InputRendererProps) => import("react/jsx-runtime").JSX.Element | null>;
 export type { InputRendererProps };
 export { MemoizedInputRenderer as InputRenderer, useFieldHint };

package/dist/admin/src/preview/components/InputPopover.d.ts

@@ -0,0 +1,6 @@
+import { type UseDocument } from '../../hooks/useDocument';
+declare const InputPopover: ({ documentResponse }: {
+    documentResponse: ReturnType<UseDocument>;
+}) => import("react/jsx-runtime").JSX.Element | null;
+declare function useHasInputPopoverParent(): boolean;
+export { InputPopover, useHasInputPopoverParent };

package/dist/admin/src/preview/hooks/usePreviewInputManager.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+type PreviewInputProps = Pick<Required<React.InputHTMLAttributes<HTMLInputElement>>, 'onFocus' | 'onBlur'>;
+export declare function usePreviewInputManager(name: string): PreviewInputProps;
+export {};

package/dist/admin/src/preview/pages/Preview.d.ts

@@ -1,5 +1,10 @@
+import * as React from 'react';
 import { type UseDocument } from '../../hooks/useDocument';
 import { type EditLayout } from '../../hooks/useDocumentLayout';
+interface PopoverField {
+    path: string;
+    position: DOMRect;
+}
 interface PreviewContextValue {
     url: string;
     title: string;
@@ -8,6 +13,9 @@ interface PreviewContextValue {
     schema: NonNullable<ReturnType<UseDocument>['schema']>;
     layout: EditLayout;
     onPreview: () => void;
+    iframeRef: React.RefObject<HTMLIFrameElement>;
+    popoverField: PopoverField | null;
+    setPopoverField: (value: PopoverField | null) => void;
 }
 declare const usePreviewContext: <Selected, ShouldThrow extends boolean = true>(consumerName: string, selector: (value: PreviewContextValue) => Selected, shouldThrowOnMissingContext?: ShouldThrow | undefined) => ShouldThrow extends true ? Selected : Selected | undefined;
 declare const ProtectedPreviewPage: () => import("react/jsx-runtime").JSX.Element;

package/dist/admin/src/preview/utils/constants.d.ts

@@ -4,7 +4,10 @@
  * do what we want with them.
  */
 export declare const INTERNAL_EVENTS: {
-    readonly DUMMY_EVENT: "dummyEvent";
+    readonly STRAPI_FIELD_FOCUS: "strapiFieldFocus";
+    readonly STRAPI_FIELD_BLUR: "strapiFieldBlur";
+    readonly STRAPI_FIELD_CHANGE: "strapiFieldChange";
+    readonly STRAPI_FIELD_FOCUS_INTENT: "strapiFieldFocusIntent";
 };
 /**
  * These events are documented to users, and will be hardcoded in their frontends.

package/dist/admin/src/preview/utils/getSendMessage.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import type { INTERNAL_EVENTS, PUBLIC_EVENTS } from './constants';
+type MessageType = (typeof INTERNAL_EVENTS)[keyof typeof INTERNAL_EVENTS] | (typeof PUBLIC_EVENTS)[keyof typeof PUBLIC_EVENTS];
+/**
+ * A function factory so we can generate a new sendMessage everytime we need one.
+ * We can't store and reuse a single sendMessage because it needs to have a stable identity
+ * as it used in a useEffect function. And we can't rely on useCallback because we need the
+ * up-to-date iframe ref, and this would make it stale (refs don't trigger callback reevaluations).
+ */
+export declare function getSendMessage(iframe: React.RefObject<HTMLIFrameElement> | undefined): (type: MessageType, payload?: unknown) => void;
+export {};

package/dist/admin/src/preview/utils/previewScript.d.ts

@@ -2,6 +2,7 @@ declare global {
     interface Window {
         __strapi_previewCleanup?: () => void;
         STRAPI_HIGHLIGHT_HOVER_COLOR?: string;
+        STRAPI_HIGHLIGHT_ACTIVE_COLOR?: string;
     }
 }
 /**
@@ -12,7 +13,10 @@ declare global {
  */
 declare const previewScript: (shouldRun?: boolean) => {
     INTERNAL_EVENTS: {
-        readonly DUMMY_EVENT: "dummyEvent";
+        readonly STRAPI_FIELD_FOCUS: "strapiFieldFocus";
+        readonly STRAPI_FIELD_BLUR: "strapiFieldBlur";
+        readonly STRAPI_FIELD_CHANGE: "strapiFieldChange";
+        readonly STRAPI_FIELD_FOCUS_INTENT: "strapiFieldFocusIntent";
     };
 } | undefined;
 export { previewScript };

package/dist/admin/translations/en.json.js

@@ -313,6 +313,7 @@ var en = {
     "validation.error.unreadable-required-field": "Your current permissions prevent access to certain required fields. Please request access from an administrator to proceed.",
     "bulk-publish.edit": "Edit",
     "widget.chart-entries.title": "Entries",
+    "widget.chart-entries.count.label": "{count, plural, =0 {Entries} one {Entry} other {Entries}}",
     "widget.chart-entries.tooltip": "{count} {label}",
     "widget.last-edited.title": "Last edited entries",
     "widget.last-edited.single-type": "Single-Type",