Repository: strapi/strapi
File: packages/core/content-manager/admin/src/preview/utils/previewScript.ts (TypeScript)

Code before:
        const element = elements[index];
        if (element && highlight) {
          drawOverlay(element, highlight);
        }
      });
    };

    elements.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: MouseEvent) => {
          // 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 as EventListener }
        );

Review comment (suggestion):
Regarding my comment above about dialog I would think here you could just highglight.close() instead of using styles but this is fine too

Code after:
        const element = elements[index];
        if (element && highlight) {
          drawHighlight(element, highlight);
        }
      });
    };

    elements.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: MouseEvent) => {
          // 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 as EventListener }
        );