@strapi/content-manager 0.0.0-experimental.8478bb287dfba93afd007cad7697c0f88853a2d8 → 0.0.0-experimental.848e0ac442910c1ad22a7c5eaab07088827fb53c

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

@@ -12,6 +12,8 @@
    * ---------------------------------------------------------------------------------------------*/ 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 HIGHLIGHT_STYLES_ID = 'strapi-preview-highlight-styles';
+    const DOUBLE_CLICK_TIMEOUT = 300; // milliseconds to wait for potential double-click
     const DISABLE_STEGA_DECODING = window.STRAPI_DISABLE_STEGA_DECODING ?? false;
     const SOURCE_ATTRIBUTE = 'data-strapi-source';
     const OVERLAY_ID = 'strapi-preview-overlay';
@@ -19,7 +21,8 @@
         STRAPI_FIELD_FOCUS: 'strapiFieldFocus',
         STRAPI_FIELD_BLUR: 'strapiFieldBlur',
         STRAPI_FIELD_CHANGE: 'strapiFieldChange',
-        STRAPI_FIELD_FOCUS_INTENT: 'strapiFieldFocusIntent'
+        STRAPI_FIELD_FOCUS_INTENT: 'strapiFieldFocusIntent',
+        STRAPI_FIELD_SINGLE_CLICK_HINT: 'strapiFieldSingleClickHint'
     };
     /**
    * Calling the function in no-run mode lets us retrieve the constants from other files and keep
@@ -38,6 +41,9 @@
             payload
         }, '*');
     };
+    const getElementsByPath = (path)=>{
+        return document.querySelectorAll(`[${SOURCE_ATTRIBUTE}*="path=${path}"]`);
+    };
     /* -----------------------------------------------------------------------------------------------
    * Functionality pieces
    * ---------------------------------------------------------------------------------------------*/ const setupStegaDOMObserver = async ()=>{
@@ -47,14 +53,15 @@
         const { vercelStegaDecode: stegaDecode, vercelStegaClean: stegaClean } = await import(// @ts-expect-error it's not a local dependency
         // eslint-disable-next-line import/no-unresolved
         'https://cdn.jsdelivr.net/npm/@vercel/stega@0.1.2/+esm');
-        const processElementForStega = (element)=>{
+        const applyStegaToElement = (element)=>{
             const directTextNodes = Array.from(element.childNodes).filter((node)=>node.nodeType === Node.TEXT_NODE);
             const directTextContent = directTextNodes.map((node)=>node.textContent || '').join('');
             if (directTextContent) {
                 try {
+                    // TODO: check if we can call split instead of decode+clean
                     const result = stegaDecode(directTextContent);
-                    if (result) {
-                        element.setAttribute(SOURCE_ATTRIBUTE, result.key);
+                    if (result && 'strapiSource' in result) {
+                        element.setAttribute(SOURCE_ATTRIBUTE, result.strapiSource);
                         // Remove encoded part from DOM text content (to avoid breaking links for example)
                         directTextNodes.forEach((node)=>{
                             if (node.textContent) {
@@ -70,7 +77,7 @@
         };
         // Process all existing elements
         const allElements = document.querySelectorAll('*');
-        Array.from(allElements).forEach(processElementForStega);
+        Array.from(allElements).forEach(applyStegaToElement);
         // Create observer for new elements and text changes
         const observer = new MutationObserver((mutations)=>{
             mutations.forEach((mutation)=>{
@@ -80,16 +87,16 @@
                         if (node.nodeType === Node.ELEMENT_NODE) {
                             const element = node;
                             // Process the added element
-                            processElementForStega(element);
+                            applyStegaToElement(element);
                             // Process all child elements
                             const childElements = element.querySelectorAll('*');
-                            Array.from(childElements).forEach(processElementForStega);
+                            Array.from(childElements).forEach(applyStegaToElement);
                         }
                     });
                 }
                 // Handle text content changes
                 if (mutation.type === 'characterData' && mutation.target.parentElement) {
-                    processElementForStega(mutation.target.parentElement);
+                    applyStegaToElement(mutation.target.parentElement);
                 }
             });
         });
@@ -100,6 +107,37 @@
         });
         return observer;
     };
+    const createHighlightStyles = ()=>{
+        const existingStyles = document.getElementById(HIGHLIGHT_STYLES_ID);
+        // Remove existing styles to avoid duplicates
+        if (existingStyles) {
+            existingStyles.remove();
+        }
+        const styleElement = document.createElement('style');
+        styleElement.id = HIGHLIGHT_STYLES_ID;
+        styleElement.textContent = `
+      .strapi-highlight {
+        position: absolute;
+        outline: 2px solid transparent;
+        pointer-events: auto;
+        border-radius: 2px;
+        background-color: transparent;
+        will-change: transform;
+        transition: outline-color 0.1s ease-in-out;
+      }
+
+      .strapi-highlight:hover {
+        outline-color: ${HIGHLIGHT_HOVER_COLOR} !important;
+      }
+
+      .strapi-highlight.strapi-highlight-focused {
+        outline-color: ${HIGHLIGHT_ACTIVE_COLOR} !important;
+        outline-width: 3px !important;
+      }
+    `;
+        document.head.appendChild(styleElement);
+        return styleElement;
+    };
     const createOverlaySystem = ()=>{
         // Clean up before creating a new overlay so we can safely call previewScript multiple times
         window.__strapi_previewCleanup?.();
@@ -119,9 +157,10 @@
         return overlay;
     };
     const createHighlightManager = (overlay)=>{
-        const elementToHighlight = new Map();
+        const elementsToHighlight = new Map();
         const eventListeners = [];
         const focusedHighlights = [];
+        const pendingClicks = new Map(); // number is timeout id
         let focusedField = null;
         const drawHighlight = (target, highlight)=>{
             if (!highlight) return;
@@ -131,36 +170,67 @@
             highlight.style.transform = `translate(${rect.left - HIGHLIGHT_PADDING}px, ${rect.top - HIGHLIGHT_PADDING}px)`;
         };
         const updateAllHighlights = ()=>{
-            elementToHighlight.forEach((highlight, element)=>{
+            elementsToHighlight.forEach((highlight, element)=>{
                 drawHighlight(element, highlight);
             });
         };
         const createHighlightForElement = (element)=>{
-            if (elementToHighlight.has(element)) {
-                return; // Already has a highlight
+            if (elementsToHighlight.has(element)) {
+                // Already has a highlight
+                return;
             }
             const highlight = document.createElement('div');
-            highlight.style.cssText = `
-        position: absolute;
-        outline: 2px solid transparent;
-        pointer-events: none;
-        border-radius: 2px;
-        background-color: transparent;
-        will-change: transform;
-        transition: outline-color 0.1s ease-in-out;
-      `;
-            // Move hover detection to the underlying element
-            const mouseEnterHandler = ()=>{
-                if (!focusedHighlights.includes(highlight)) {
-                    highlight.style.outlineColor = HIGHLIGHT_HOVER_COLOR;
+            highlight.className = 'strapi-highlight';
+            const clickHandler = (event)=>{
+                // Skip if this is a re-dispatched event from our delayed handler to avoid infinite loops
+                if (event.__strapi_redispatched) {
+                    return;
                 }
-            };
-            const mouseLeaveHandler = ()=>{
-                if (!focusedHighlights.includes(highlight)) {
-                    highlight.style.outlineColor = 'transparent';
+                // Prevent the immediate action for interactive elements
+                event.preventDefault();
+                event.stopPropagation();
+                // Clear any existing timeout for this element
+                const existingTimeout = pendingClicks.get(element);
+                if (existingTimeout) {
+                    window.clearTimeout(existingTimeout);
+                    pendingClicks.delete(element);
                 }
+                // Set up a delayed single-click handler
+                const timeout = window.setTimeout(()=>{
+                    pendingClicks.delete(element);
+                    // Send single-click hint notification
+                    sendMessage(INTERNAL_EVENTS.STRAPI_FIELD_SINGLE_CLICK_HINT, null);
+                    // Re-trigger the click on the underlying element after the double-click timeout
+                    // Create a new event to dispatch with a marker to prevent re-handling
+                    const newEvent = new MouseEvent('click', {
+                        bubbles: true,
+                        cancelable: true,
+                        view: window,
+                        detail: 1,
+                        button: event.button,
+                        buttons: event.buttons,
+                        clientX: event.clientX,
+                        clientY: event.clientY,
+                        ctrlKey: event.ctrlKey,
+                        altKey: event.altKey,
+                        shiftKey: event.shiftKey,
+                        metaKey: event.metaKey
+                    });
+                    newEvent.__strapi_redispatched = true;
+                    element.dispatchEvent(newEvent);
+                }, DOUBLE_CLICK_TIMEOUT);
+                pendingClicks.set(element, timeout);
             };
-            const doubleClickHandler = ()=>{
+            const doubleClickHandler = (event)=>{
+                // Prevent the default behavior on double-click
+                event.preventDefault();
+                event.stopPropagation();
+                // Clear any pending single-click action
+                const existingTimeout = pendingClicks.get(element);
+                if (existingTimeout) {
+                    clearTimeout(existingTimeout);
+                    pendingClicks.delete(element);
+                }
                 const sourceAttribute = element.getAttribute(SOURCE_ATTRIBUTE);
                 if (sourceAttribute) {
                     const rect = element.getBoundingClientRect();
@@ -183,44 +253,45 @@
                     event.preventDefault();
                 }
             };
-            element.addEventListener('mouseenter', mouseEnterHandler);
-            element.addEventListener('mouseleave', mouseLeaveHandler);
-            element.addEventListener('dblclick', doubleClickHandler);
-            element.addEventListener('mousedown', mouseDownHandler);
+            highlight.addEventListener('click', clickHandler);
+            highlight.addEventListener('dblclick', doubleClickHandler);
+            highlight.addEventListener('mousedown', mouseDownHandler);
             // Store event listeners for cleanup
             eventListeners.push({
-                element,
-                type: 'mouseenter',
-                handler: mouseEnterHandler
-            }, {
-                element,
-                type: 'mouseleave',
-                handler: mouseLeaveHandler
+                element: highlight,
+                type: 'click',
+                handler: clickHandler
             }, {
-                element,
+                element: highlight,
                 type: 'dblclick',
                 handler: doubleClickHandler
             }, {
-                element,
+                element: highlight,
                 type: 'mousedown',
                 handler: mouseDownHandler
             });
-            elementToHighlight.set(element, highlight);
+            elementsToHighlight.set(element, highlight);
             overlay.appendChild(highlight);
             drawHighlight(element, highlight);
         };
         const removeHighlightForElement = (element)=>{
-            const highlight = elementToHighlight.get(element);
+            const highlight = elementsToHighlight.get(element);
             if (!highlight) return;
+            // Clear any pending click timeout for this element
+            const pendingTimeout = pendingClicks.get(element);
+            if (pendingTimeout) {
+                window.clearTimeout(pendingTimeout);
+                pendingClicks.delete(element);
+            }
             highlight.remove();
-            elementToHighlight.delete(element);
-            // Remove event listeners for this element
-            const listenersToRemove = eventListeners.filter((listener)=>listener.element === element);
+            elementsToHighlight.delete(element);
+            // Remove event listeners for this highlight
+            const listenersToRemove = eventListeners.filter((listener)=>listener.element === highlight);
             listenersToRemove.forEach(({ element, type, handler })=>{
                 element.removeEventListener(type, handler);
             });
-            // Mutate eventListeners to remove listeners for this element
-            eventListeners.splice(0, eventListeners.length, ...eventListeners.filter((listener)=>listener.element !== element));
+            // Mutate eventListeners to remove listeners for this highlight
+            eventListeners.splice(0, eventListeners.length, ...eventListeners.filter((listener)=>listener.element !== highlight));
         };
         // Process all existing elements with source attributes
         const initialElements = window.document.querySelectorAll(`[${SOURCE_ATTRIBUTE}]`);
@@ -231,10 +302,10 @@
         });
         return {
             get elements () {
-                return Array.from(elementToHighlight.keys());
+                return Array.from(elementsToHighlight.keys());
             },
             get highlights () {
-                return Array.from(elementToHighlight.values());
+                return Array.from(elementsToHighlight.values());
             },
             updateAllHighlights,
             eventListeners,
@@ -244,7 +315,56 @@
             setFocusedField: (field)=>{
                 focusedField = field;
             },
-            getFocusedField: ()=>focusedField
+            getFocusedField: ()=>focusedField,
+            clearAllPendingClicks: ()=>{
+                pendingClicks.forEach((timeout)=>clearTimeout(timeout));
+                pendingClicks.clear();
+            }
+        };
+    };
+    /**
+   * We need to track scroll in all the element parents in order to keep the highlight position
+   * in sync with the element position. Listening to window scroll is not enough because the
+   * element can be inside one or more scrollable containers.
+   */ const setupScrollManagement = (highlightManager)=>{
+        const updateOnScroll = ()=>{
+            highlightManager.updateAllHighlights();
+        };
+        const scrollableElements = new Set();
+        scrollableElements.add(window);
+        // Find all scrollable ancestors for all tracked elements and set up scroll listeners
+        highlightManager.elements.forEach((element)=>{
+            let parent = element.parentElement;
+            while(parent){
+                const computedStyle = window.getComputedStyle(parent);
+                const overflow = computedStyle.overflow + computedStyle.overflowX + computedStyle.overflowY;
+                if (overflow.includes('scroll') || overflow.includes('auto')) {
+                    scrollableElements.add(parent);
+                }
+                parent = parent.parentElement;
+            }
+        });
+        // Add scroll listeners to all scrollable elements
+        scrollableElements.forEach((element)=>{
+            if (element === window) {
+                window.addEventListener('scroll', updateOnScroll);
+                window.addEventListener('resize', updateOnScroll);
+            } else {
+                element.addEventListener('scroll', updateOnScroll);
+            }
+        });
+        const cleanup = ()=>{
+            scrollableElements.forEach((element)=>{
+                if (element === window) {
+                    window.removeEventListener('scroll', updateOnScroll);
+                    window.removeEventListener('resize', updateOnScroll);
+                } else {
+                    element.removeEventListener('scroll', updateOnScroll);
+                }
+            });
+        };
+        return {
+            cleanup
         };
     };
     const setupObservers = (highlightManager, stegaObserver)=>{
@@ -305,51 +425,10 @@
                 SOURCE_ATTRIBUTE
             ]
         });
-        const updateOnScroll = ()=>{
-            highlightManager.updateAllHighlights();
-        };
-        const scrollableElements = new Set();
-        scrollableElements.add(window);
-        const findScrollableAncestors = ()=>{
-            // Clear existing scrollable elements (except window)
-            scrollableElements.forEach((element)=>{
-                if (element !== window) {
-                    element.removeEventListener('scroll', updateOnScroll);
-                }
-            });
-            scrollableElements.clear();
-            scrollableElements.add(window);
-            // Find all scrollable ancestors for all tracked elements
-            highlightManager.elements.forEach((element)=>{
-                let parent = element.parentElement;
-                while(parent){
-                    const computedStyle = window.getComputedStyle(parent);
-                    const overflow = computedStyle.overflow + computedStyle.overflowX + computedStyle.overflowY;
-                    if (overflow.includes('scroll') || overflow.includes('auto')) {
-                        scrollableElements.add(parent);
-                    }
-                    parent = parent.parentElement;
-                }
-            });
-            // Add scroll listeners to all scrollable elements
-            scrollableElements.forEach((element)=>{
-                if (element === window) {
-                    window.addEventListener('scroll', updateOnScroll);
-                    window.addEventListener('resize', updateOnScroll);
-                } else {
-                    element.addEventListener('scroll', updateOnScroll);
-                }
-            });
-        };
-        // Initial setup of scrollable elements
-        findScrollableAncestors();
         return {
             resizeObserver,
             highlightObserver,
-            stegaObserver,
-            updateOnScroll,
-            scrollableElements,
-            findScrollableAncestors
+            stegaObserver
         };
     };
     const setupEventHandlers = (highlightManager)=>{
@@ -359,8 +438,7 @@
             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)=>{
+                getElementsByPath(field).forEach((element)=>{
                     if (element instanceof HTMLElement) {
                         element.textContent = value || '';
                     }
@@ -375,17 +453,21 @@
                 if (!field) return;
                 // Clear existing focused highlights
                 highlightManager.focusedHighlights.forEach((highlight)=>{
-                    highlight.style.outlineColor = 'transparent';
+                    highlight.classList.remove('strapi-highlight-focused');
                 });
                 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)=>{
+                getElementsByPath(field).forEach((element, index)=>{
+                    if (index === 0) {
+                        element.scrollIntoView({
+                            behavior: 'smooth',
+                            block: 'center'
+                        });
+                    }
                     const highlight = highlightManager.highlights[Array.from(highlightManager.elements).indexOf(element)];
                     if (highlight) {
-                        highlight.style.outlineColor = HIGHLIGHT_ACTIVE_COLOR;
-                        highlight.style.outlineWidth = '3px';
+                        highlight.classList.add('strapi-highlight-focused');
                         highlightManager.focusedHighlights.push(highlight);
                     }
                 });
@@ -396,8 +478,7 @@
                 const { field } = event.data.payload;
                 if (field !== highlightManager.getFocusedField()) return;
                 highlightManager.focusedHighlights.forEach((highlight)=>{
-                    highlight.style.outlineColor = 'transparent';
-                    highlight.style.outlineWidth = '2px';
+                    highlight.classList.remove('strapi-highlight-focused');
                 });
                 highlightManager.focusedHighlights.length = 0;
                 highlightManager.setFocusedField(null);
@@ -415,35 +496,37 @@
             messageEventListener
         ];
     };
-    const createCleanupSystem = (overlay, observers, eventHandlers)=>{
+    const createCleanupSystem = (overlay, observers, scrollManager, eventHandlers, highlightManager)=>{
         window.__strapi_previewCleanup = ()=>{
             observers.resizeObserver.disconnect();
             observers.highlightObserver.disconnect();
             observers.stegaObserver?.disconnect();
-            // Remove all scroll listeners
-            observers.scrollableElements.forEach((element)=>{
-                if (element === window) {
-                    window.removeEventListener('scroll', observers.updateOnScroll);
-                    window.removeEventListener('resize', observers.updateOnScroll);
-                } else {
-                    element.removeEventListener('scroll', observers.updateOnScroll);
-                }
-            });
+            // Clean up scroll listeners
+            scrollManager.cleanup();
+            // Clear all pending click timeouts
+            highlightManager.clearAllPendingClicks();
             // Remove highlight event listeners
             eventHandlers.forEach(({ element, type, handler })=>{
                 element.removeEventListener(type, handler);
             });
+            // Clean up CSS styles
+            const existingStyles = document.getElementById(HIGHLIGHT_STYLES_ID);
+            if (existingStyles) {
+                existingStyles.remove();
+            }
             overlay.remove();
         };
     };
     /* -----------------------------------------------------------------------------------------------
    * Orchestration
    * ---------------------------------------------------------------------------------------------*/ setupStegaDOMObserver().then((stegaObserver)=>{
+        createHighlightStyles();
         const overlay = createOverlaySystem();
         const highlightManager = createHighlightManager(overlay);
         const observers = setupObservers(highlightManager, stegaObserver);
+        const scrollManager = setupScrollManagement(highlightManager);
         const eventHandlers = setupEventHandlers(highlightManager);
-        createCleanupSystem(overlay, observers, eventHandlers);
+        createCleanupSystem(overlay, observers, scrollManager, eventHandlers, highlightManager);
     });
 };