@strapi/content-manager 0.0.0-next.330c50cc41f280d03e0fdb875323ab5133aeebf3 → 0.0.0-next.35ca30daa48c41dc5d8fa1d8312557d733c580da

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

@@ -9,10 +9,18 @@
    * 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 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';
     const INTERNAL_EVENTS = {
-        DUMMY_EVENT: 'dummyEvent'
+        STRAPI_FIELD_FOCUS: 'strapiFieldFocus',
+        STRAPI_FIELD_BLUR: 'strapiFieldBlur',
+        STRAPI_FIELD_CHANGE: 'strapiFieldChange',
+        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
@@ -24,8 +32,111 @@
         };
     }
     /* -----------------------------------------------------------------------------------------------
+   * Utils
+   * ---------------------------------------------------------------------------------------------*/ const sendMessage = (type, payload)=>{
+        window.parent.postMessage({
+            type,
+            payload
+        }, '*');
+    };
+    const getElementsByPath = (path)=>{
+        return document.querySelectorAll(`[${SOURCE_ATTRIBUTE}*="path=${path}"]`);
+    };
+    /* -----------------------------------------------------------------------------------------------
    * Functionality pieces
-   * ---------------------------------------------------------------------------------------------*/ const createOverlaySystem = ()=>{
+   * ---------------------------------------------------------------------------------------------*/ const setupStegaDOMObserver = async ()=>{
+        if (DISABLE_STEGA_DECODING) {
+            return;
+        }
+        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 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 && '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) {
+                                const cleanedText = stegaClean(node.textContent);
+                                if (cleanedText !== node.textContent) {
+                                    node.textContent = cleanedText;
+                                }
+                            }
+                        });
+                    }
+                } catch (error) {}
+            }
+        };
+        // Process all existing elements
+        const allElements = document.querySelectorAll('*');
+        Array.from(allElements).forEach(applyStegaToElement);
+        // Create observer for new elements and text changes
+        const observer = new MutationObserver((mutations)=>{
+            mutations.forEach((mutation)=>{
+                // Handle added nodes
+                if (mutation.type === 'childList') {
+                    mutation.addedNodes.forEach((node)=>{
+                        if (node.nodeType === Node.ELEMENT_NODE) {
+                            const element = node;
+                            // Process the added element
+                            applyStegaToElement(element);
+                            // Process all child elements
+                            const childElements = element.querySelectorAll('*');
+                            Array.from(childElements).forEach(applyStegaToElement);
+                        }
+                    });
+                }
+                // Handle text content changes
+                if (mutation.type === 'characterData' && mutation.target.parentElement) {
+                    applyStegaToElement(mutation.target.parentElement);
+                }
+            });
+        });
+        observer.observe(document, {
+            childList: true,
+            subtree: true,
+            characterData: true
+        });
+        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?.();
         document.getElementById(OVERLAY_ID)?.remove();
@@ -44,9 +155,11 @@
         return overlay;
     };
     const createHighlightManager = (overlay)=>{
-        const elements = window.document.querySelectorAll(`[${SOURCE_ATTRIBUTE}]`);
-        const highlights = [];
+        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;
             const rect = target.getBoundingClientRect();
@@ -55,90 +168,169 @@
             highlight.style.transform = `translate(${rect.left - HIGHLIGHT_PADDING}px, ${rect.top - HIGHLIGHT_PADDING}px)`;
         };
         const updateAllHighlights = ()=>{
-            highlights.forEach((highlight, index)=>{
-                const element = elements[index];
-                if (element && highlight) {
-                    drawHighlight(element, highlight);
+            elementsToHighlight.forEach((highlight, element)=>{
+                drawHighlight(element, highlight);
+            });
+        };
+        const createHighlightForElement = (element)=>{
+            if (elementsToHighlight.has(element)) {
+                // Already has a highlight
+                return;
+            }
+            const highlight = document.createElement('div');
+            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;
                 }
+                // 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 = (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();
+                    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
+                if (event.detail >= 2) {
+                    event.preventDefault();
+                }
+            };
+            highlight.addEventListener('click', clickHandler);
+            highlight.addEventListener('dblclick', doubleClickHandler);
+            highlight.addEventListener('mousedown', mouseDownHandler);
+            // Store event listeners for cleanup
+            eventListeners.push({
+                element: highlight,
+                type: 'click',
+                handler: clickHandler
+            }, {
+                element: highlight,
+                type: 'dblclick',
+                handler: doubleClickHandler
+            }, {
+                element: highlight,
+                type: 'mousedown',
+                handler: mouseDownHandler
+            });
+            elementsToHighlight.set(element, highlight);
+            overlay.appendChild(highlight);
+            drawHighlight(element, highlight);
+        };
+        const removeHighlightForElement = (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();
+            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 highlight
+            eventListeners.splice(0, eventListeners.length, ...eventListeners.filter((listener)=>listener.element !== highlight));
         };
-        elements.forEach((element)=>{
+        // Process all existing elements with source attributes
+        const initialElements = window.document.querySelectorAll(`[${SOURCE_ATTRIBUTE}]`);
+        Array.from(initialElements).forEach((element)=>{
             if (element instanceof HTMLElement) {
-                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 = ()=>{
-                    highlight.style.outlineColor = HIGHLIGHT_HOVER_COLOR;
-                };
-                const mouseLeaveHandler = ()=>{
-                    highlight.style.outlineColor = 'transparent';
-                };
-                const doubleClickHandler = ()=>{
-                    // TODO: handle for real
-                    // eslint-disable-next-line no-console
-                    console.log('Double click on highlight', element);
-                };
-                const mouseDownHandler = (event)=>{
-                    // Prevent default multi click to select behavior
-                    if (event.detail >= 2) {
-                        event.preventDefault();
-                    }
-                };
-                element.addEventListener('mouseenter', mouseEnterHandler);
-                element.addEventListener('mouseleave', mouseLeaveHandler);
-                element.addEventListener('dblclick', doubleClickHandler);
-                element.addEventListener('mousedown', mouseDownHandler);
-                // Store event listeners for cleanup
-                eventListeners.push({
-                    element,
-                    type: 'mouseenter',
-                    handler: mouseEnterHandler
-                }, {
-                    element,
-                    type: 'mouseleave',
-                    handler: mouseLeaveHandler
-                }, {
-                    element,
-                    type: 'dblclick',
-                    handler: doubleClickHandler
-                }, {
-                    element,
-                    type: 'mousedown',
-                    handler: mouseDownHandler
-                });
-                highlights.push(highlight);
-                overlay.appendChild(highlight);
-                drawHighlight(element, highlight);
+                createHighlightForElement(element);
             }
         });
         return {
-            elements,
+            get elements () {
+                return Array.from(elementsToHighlight.keys());
+            },
+            get highlights () {
+                return Array.from(elementsToHighlight.values());
+            },
             updateAllHighlights,
-            eventListeners
+            eventListeners,
+            focusedHighlights,
+            createHighlightForElement,
+            removeHighlightForElement,
+            setFocusedField: (field)=>{
+                focusedField = field;
+            },
+            getFocusedField: ()=>focusedField,
+            clearAllPendingClicks: ()=>{
+                pendingClicks.forEach((timeout)=>clearTimeout(timeout));
+                pendingClicks.clear();
+            }
         };
     };
-    const setupObservers = (highlightManager)=>{
-        const resizeObserver = new ResizeObserver(()=>{
-            highlightManager.updateAllHighlights();
-        });
-        highlightManager.elements.forEach((element)=>{
-            resizeObserver.observe(element);
-        });
-        resizeObserver.observe(document.documentElement);
+    /**
+   * 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
+        // Find all scrollable ancestors for all tracked elements and set up scroll listeners
         highlightManager.elements.forEach((element)=>{
             let parent = element.parentElement;
             while(parent){
@@ -159,42 +351,181 @@
                 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)=>{
+        const resizeObserver = new ResizeObserver(()=>{
+            highlightManager.updateAllHighlights();
+        });
+        const observeElementForResize = (element)=>{
+            resizeObserver.observe(element);
+        };
+        // Observe existing elements
+        highlightManager.elements.forEach(observeElementForResize);
+        resizeObserver.observe(document.documentElement);
+        // Create highlight observer to watch for new elements with source attributes
+        const highlightObserver = new MutationObserver((mutations)=>{
+            mutations.forEach((mutation)=>{
+                if (mutation.type === 'attributes' && mutation.attributeName === SOURCE_ATTRIBUTE) {
+                    const target = mutation.target;
+                    if (target.hasAttribute(SOURCE_ATTRIBUTE)) {
+                        highlightManager.createHighlightForElement(target);
+                        observeElementForResize(target);
+                    } else {
+                        highlightManager.removeHighlightForElement(target);
+                    }
+                }
+                if (mutation.type === 'childList') {
+                    mutation.addedNodes.forEach((node)=>{
+                        if (node.nodeType === Node.ELEMENT_NODE) {
+                            const element = node;
+                            // Check if the added element has source attribute
+                            if (element.hasAttribute(SOURCE_ATTRIBUTE) && element instanceof HTMLElement) {
+                                highlightManager.createHighlightForElement(element);
+                                observeElementForResize(element);
+                            }
+                            // Check all child elements for source attributes
+                            const elementsWithSource = element.querySelectorAll(`[${SOURCE_ATTRIBUTE}]`);
+                            Array.from(elementsWithSource).forEach((childElement)=>{
+                                if (childElement instanceof HTMLElement) {
+                                    highlightManager.createHighlightForElement(childElement);
+                                    observeElementForResize(childElement);
+                                }
+                            });
+                        }
+                    });
+                    mutation.removedNodes.forEach((node)=>{
+                        if (node.nodeType === Node.ELEMENT_NODE) {
+                            const element = node;
+                            highlightManager.removeHighlightForElement(element);
+                        }
+                    });
+                }
+            });
+        });
+        highlightObserver.observe(document, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            attributeFilter: [
+                SOURCE_ATTRIBUTE
+            ]
+        });
         return {
             resizeObserver,
-            updateOnScroll,
-            scrollableElements
+            highlightObserver,
+            stegaObserver
         };
     };
     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;
+                getElementsByPath(field).forEach((element)=>{
+                    if (element instanceof HTMLElement) {
+                        element.textContent = value || '';
+                    }
+                });
+                // Update highlight dimensions since the new text content may affect them
+                highlightManager.updateAllHighlights();
+                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.classList.remove('strapi-highlight-focused');
+                });
+                highlightManager.focusedHighlights.length = 0;
+                // Set new focused field and highlight matching elements
+                highlightManager.setFocusedField(field);
+                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.classList.add('strapi-highlight-focused');
+                        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.classList.remove('strapi-highlight-focused');
+                });
+                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)=>{
+    const createCleanupSystem = (overlay, observers, scrollManager, eventHandlers, highlightManager)=>{
         window.__strapi_previewCleanup = ()=>{
             observers.resizeObserver.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);
-                }
-            });
+            observers.highlightObserver.disconnect();
+            observers.stegaObserver?.disconnect();
+            // 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
-   * ---------------------------------------------------------------------------------------------*/ const overlay = createOverlaySystem();
-    const highlightManager = createHighlightManager(overlay);
-    const observers = setupObservers(highlightManager);
-    const eventHandlers = setupEventHandlers(highlightManager);
-    createCleanupSystem(overlay, observers, eventHandlers);
+   * ---------------------------------------------------------------------------------------------*/ 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, scrollManager, eventHandlers, highlightManager);
+    });
 };
 
 export { previewScript };