@payloadcms/ui 3.68.0-internal-debug.e9b66ee → 3.68.0-internal.10bf491

package/dist/providers/LivePreview/index.js

@@ -1,6 +1,8 @@
 'use client';
+
+import { jsx as _jsx } from "react/jsx-runtime";
 import { DndContext } from '@dnd-kit/core';
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
 import { usePopupWindow } from '../../hooks/usePopupWindow.js';
 import { useDocumentInfo } from '../../providers/DocumentInfo/index.js';
 import { usePreferences } from '../../providers/Preferences/index.js';
@@ -8,223 +10,216 @@ import { formatAbsoluteURL } from '../../utilities/formatAbsoluteURL.js';
 import { customCollisionDetection } from './collisionDetection.js';
 import { LivePreviewContext } from './context.js';
 import { sizeReducer } from './sizeReducer.js';
-/**
-   * This specifically relates to `admin.preview` function in the config instead of live preview.
-   */ /**
-   * This specifically relates to `admin.preview` function in the config instead of live preview.
-   */ export const LivePreviewProvider = ({ breakpoints: incomingBreakpoints, children, isLivePreviewEnabled, isLivePreviewing: incomingIsLivePreviewing, isPreviewEnabled, previewURL: previewURLFromProps, typeofLivePreviewURL, url: urlFromProps })=>{
-    const [previewWindowType, setPreviewWindowType] = useState('iframe');
-    const [isLivePreviewing, setIsLivePreviewing] = useState(incomingIsLivePreviewing);
-    const breakpoints = useMemo(()=>[
-            ...incomingBreakpoints || [],
-            {
-                name: 'responsive',
-                height: '100%',
-                label: 'Responsive',
-                width: '100%'
-            }
-        ], [
-        incomingBreakpoints
-    ]);
-    const [url, setURL] = useState('');
-    const [previewURL, setPreviewURL] = useState(previewURLFromProps);
-    const { isPopupOpen, openPopupWindow, popupRef } = usePopupWindow({
-        eventType: 'payload-live-preview',
-        url
-    });
-    const [appIsReady, setAppIsReady] = useState(false);
-    const [listeningForMessages, setListeningForMessages] = useState(false);
-    const { collectionSlug, globalSlug } = useDocumentInfo();
-    const isFirstRender = useRef(true);
-    const { setPreference } = usePreferences();
-    const iframeRef = React.useRef(null);
-    const [loadedURL, setLoadedURL] = useState();
-    const [zoom, setZoom] = useState(1);
-    const [position, setPosition] = useState({
-        x: 0,
-        y: 0
-    });
-    const [size, setSize] = React.useReducer(sizeReducer, {
-        height: 0,
-        width: 0
+export const LivePreviewProvider = ({
+  breakpoints: incomingBreakpoints,
+  children,
+  isLivePreviewEnabled,
+  isLivePreviewing: incomingIsLivePreviewing,
+  isPreviewEnabled,
+  previewURL: previewURLFromProps,
+  typeofLivePreviewURL,
+  url: urlFromProps
+}) => {
+  const [previewWindowType, setPreviewWindowType] = useState('iframe');
+  const [isLivePreviewing, setIsLivePreviewing] = useState(incomingIsLivePreviewing);
+  const breakpoints = useMemo(() => [...(incomingBreakpoints || []), {
+    name: 'responsive',
+    height: '100%',
+    label: 'Responsive',
+    width: '100%'
+  }], [incomingBreakpoints]);
+  const [url, setURL] = useState('');
+  const [previewURL, setPreviewURL] = useState(previewURLFromProps);
+  const {
+    isPopupOpen,
+    openPopupWindow,
+    popupRef
+  } = usePopupWindow({
+    eventType: 'payload-live-preview',
+    url
+  });
+  const [appIsReady, setAppIsReady] = useState(false);
+  const [listeningForMessages, setListeningForMessages] = useState(false);
+  const {
+    collectionSlug,
+    globalSlug
+  } = useDocumentInfo();
+  const isFirstRender = useRef(true);
+  const {
+    setPreference
+  } = usePreferences();
+  const iframeRef = React.useRef(null);
+  const [loadedURL, setLoadedURL] = useState();
+  const [zoom, setZoom] = useState(1);
+  const [position, setPosition] = useState({
+    x: 0,
+    y: 0
+  });
+  const [size, setSize] = React.useReducer(sizeReducer, {
+    height: 0,
+    width: 0
+  });
+  const [measuredDeviceSize, setMeasuredDeviceSize] = useState({
+    height: 0,
+    width: 0
+  });
+  const [breakpoint, setBreakpoint] = React.useState('responsive');
+  /**
+  * A "middleware" callback fn that does some additional work before `setURL`.
+  * This is what we provide through context, bc it:
+  *  - ensures the URL is absolute
+  *  - resets `appIsReady` to `false` while the new URL is loading
+  */
+  const setLivePreviewURL = useCallback(_incomingURL => {
+    let incomingURL;
+    if (typeof _incomingURL === 'string') {
+      incomingURL = formatAbsoluteURL(_incomingURL);
+    }
+    if (!incomingURL) {
+      setIsLivePreviewing(false);
+    }
+    if (incomingURL !== url) {
+      setAppIsReady(false);
+      setURL(incomingURL);
+    }
+  }, [url]);
+  /**
+  * `url` needs to be relative to the window, which cannot be done on initial render.
+  */
+  useEffect(() => {
+    if (typeof urlFromProps === 'string') {
+      setURL(formatAbsoluteURL(urlFromProps));
+    }
+  }, [urlFromProps]);
+  // The toolbar needs to freely drag and drop around the page
+  const handleDragEnd = ev => {
+    // only update position if the toolbar is completely within the preview area
+    // otherwise reset it back to the previous position
+    // TODO: reset to the nearest edge of the preview area
+    if (ev.over && ev.over.id === 'live-preview-area') {
+      const newPos = {
+        x: position.x + ev.delta.x,
+        y: position.y + ev.delta.y
+      };
+      setPosition(newPos);
+    } else {
+      // reset
+    }
+  };
+  const setWidth = useCallback(width => {
+    setSize({
+      type: 'width',
+      value: width
     });
-    const [measuredDeviceSize, setMeasuredDeviceSize] = useState({
-        height: 0,
-        width: 0
+  }, [setSize]);
+  const setHeight = useCallback(height => {
+    setSize({
+      type: 'height',
+      value: height
     });
-    const [breakpoint, setBreakpoint] = React.useState('responsive');
-    /**
-   * A "middleware" callback fn that does some additional work before `setURL`.
-   * This is what we provide through context, bc it:
-   *  - ensures the URL is absolute
-   *  - resets `appIsReady` to `false` while the new URL is loading
-   */ const setLivePreviewURL = useCallback((_incomingURL)=>{
-        let incomingURL;
-        if (typeof _incomingURL === 'string') {
-            incomingURL = formatAbsoluteURL(_incomingURL);
+  }, [setSize]);
+  // explicitly set new width and height when as new breakpoints are selected
+  // exclude `custom` breakpoint as it is handled by the `setWidth` and `setHeight` directly
+  useEffect(() => {
+    const foundBreakpoint = breakpoints?.find(bp => bp.name === breakpoint);
+    if (foundBreakpoint && breakpoint !== 'responsive' && breakpoint !== 'custom' && typeof foundBreakpoint?.width === 'number' && typeof foundBreakpoint?.height === 'number') {
+      setSize({
+        type: 'reset',
+        value: {
+          height: foundBreakpoint.height,
+          width: foundBreakpoint.width
         }
-        if (!incomingURL) {
-            setIsLivePreviewing(false);
+      });
+    }
+  }, [breakpoint, breakpoints]);
+  /**
+  * Receive the `ready` message from the popup window
+  * This indicates that the app is ready to receive `window.postMessage` events
+  * This is also the only cross-origin way of detecting when a popup window has loaded
+  * Unlike iframe elements which have an `onLoad` handler, there is no way to access `window.open` on popups
+  */
+  useEffect(() => {
+    const handleMessage = event => {
+      if (url?.startsWith(event.origin) && event.data && typeof event.data === 'object' && event.data.type === 'payload-live-preview') {
+        if (event.data.ready) {
+          setAppIsReady(true);
         }
-        if (incomingURL !== url) {
-            setAppIsReady(false);
-            setURL(incomingURL);
-        }
-    }, [
-        url
-    ]);
-    /**
-   * `url` needs to be relative to the window, which cannot be done on initial render.
-   */ useEffect(()=>{
-        if (typeof urlFromProps === 'string') {
-            setURL(formatAbsoluteURL(urlFromProps));
-        }
-    }, [
-        urlFromProps
-    ]);
-    // The toolbar needs to freely drag and drop around the page
-    const handleDragEnd = (ev)=>{
-        // only update position if the toolbar is completely within the preview area
-        // otherwise reset it back to the previous position
-        // TODO: reset to the nearest edge of the preview area
-        if (ev.over && ev.over.id === 'live-preview-area') {
-            const newPos = {
-                x: position.x + ev.delta.x,
-                y: position.y + ev.delta.y
-            };
-            setPosition(newPos);
-        } else {}
+      }
     };
-    // reset
-    const setWidth = useCallback((width)=>{
-        setSize({
-            type: 'width',
-            value: width
-        });
-    }, [
-        setSize
-    ]);
-    const setHeight = useCallback((height)=>{
-        setSize({
-            type: 'height',
-            value: height
-        });
-    }, [
-        setSize
-    ]);
-    // explicitly set new width and height when as new breakpoints are selected
-    // exclude `custom` breakpoint as it is handled by the `setWidth` and `setHeight` directly
-    useEffect(()=>{
-        const foundBreakpoint = breakpoints?.find((bp)=>bp.name === breakpoint);
-        if (foundBreakpoint && breakpoint !== 'responsive' && breakpoint !== 'custom' && typeof foundBreakpoint?.width === 'number' && typeof foundBreakpoint?.height === 'number') {
-            setSize({
-                type: 'reset',
-                value: {
-                    height: foundBreakpoint.height,
-                    width: foundBreakpoint.width
-                }
-            });
-        }
-    }, [
-        breakpoint,
-        breakpoints
-    ]);
-    /**
-   * Receive the `ready` message from the popup window
-   * This indicates that the app is ready to receive `window.postMessage` events
-   * This is also the only cross-origin way of detecting when a popup window has loaded
-   * Unlike iframe elements which have an `onLoad` handler, there is no way to access `window.open` on popups
-   */ useEffect(()=>{
-        const handleMessage = (event)=>{
-            if (url?.startsWith(event.origin) && event.data && typeof event.data === 'object' && event.data.type === 'payload-live-preview') {
-                if (event.data.ready) {
-                    setAppIsReady(true);
-                }
-            }
-        };
-        window.addEventListener('message', handleMessage);
-        setListeningForMessages(true);
-        return ()=>{
-            window.removeEventListener('message', handleMessage);
-        };
-    }, [
-        url,
-        listeningForMessages
-    ]);
-    const handleWindowChange = useCallback((type)=>{
-        setAppIsReady(false);
-        setPreviewWindowType(type);
-        if (type === 'popup') {
-            openPopupWindow();
-        }
-    }, [
-        openPopupWindow
-    ]);
-    // when the user closes the popup window, switch back to the iframe
-    // the `usePopupWindow` reports the `isPopupOpen` state for us to use here
-    useEffect(()=>{
-        const newPreviewWindowType = isPopupOpen ? 'popup' : 'iframe';
-        if (newPreviewWindowType !== previewWindowType) {
-            handleWindowChange('iframe');
-        }
-    }, [
-        previewWindowType,
-        isPopupOpen,
-        handleWindowChange
-    ]);
-    useEffect(()=>{
-        if (isFirstRender.current) {
-            isFirstRender.current = false;
-            return;
-        }
-        void setPreference(collectionSlug ? `collection-${collectionSlug}` : `global-${globalSlug}`, {
-            editViewType: isLivePreviewing ? 'live-preview' : 'default'
-        }, true);
-    }, [
-        isLivePreviewing,
-        setPreference,
-        collectionSlug,
-        globalSlug
-    ]);
-    return <LivePreviewContext value={{
-        appIsReady,
-        breakpoint,
-        breakpoints,
-        iframeRef,
-        isLivePreviewEnabled,
-        isLivePreviewing,
-        isPopupOpen,
-        isPreviewEnabled,
-        listeningForMessages,
-        loadedURL,
-        measuredDeviceSize,
-        openPopupWindow,
-        popupRef,
-        previewURL,
-        previewWindowType,
-        setAppIsReady,
-        setBreakpoint,
-        setHeight,
-        setIsLivePreviewing,
-        setLoadedURL,
-        setMeasuredDeviceSize,
-        setPreviewURL,
-        setPreviewWindowType: handleWindowChange,
-        setSize,
-        setToolbarPosition: setPosition,
-        setURL: setLivePreviewURL,
-        setWidth,
-        setZoom,
-        size,
-        toolbarPosition: position,
-        typeofLivePreviewURL,
-        url,
-        zoom
-    }}>
-      <DndContext collisionDetection={customCollisionDetection} onDragEnd={handleDragEnd}>
-        {children}
-      </DndContext>
-    </LivePreviewContext>;
+    window.addEventListener('message', handleMessage);
+    setListeningForMessages(true);
+    return () => {
+      window.removeEventListener('message', handleMessage);
+    };
+  }, [url, listeningForMessages]);
+  const handleWindowChange = useCallback(type => {
+    setAppIsReady(false);
+    setPreviewWindowType(type);
+    if (type === 'popup') {
+      openPopupWindow();
+    }
+  }, [openPopupWindow]);
+  // when the user closes the popup window, switch back to the iframe
+  // the `usePopupWindow` reports the `isPopupOpen` state for us to use here
+  useEffect(() => {
+    const newPreviewWindowType = isPopupOpen ? 'popup' : 'iframe';
+    if (newPreviewWindowType !== previewWindowType) {
+      handleWindowChange('iframe');
+    }
+  }, [previewWindowType, isPopupOpen, handleWindowChange]);
+  useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    }
+    void setPreference(collectionSlug ? `collection-${collectionSlug}` : `global-${globalSlug}`, {
+      editViewType: isLivePreviewing ? 'live-preview' : 'default'
+    }, true);
+  }, [isLivePreviewing, setPreference, collectionSlug, globalSlug]);
+  const dndContextID = useId();
+  return /*#__PURE__*/_jsx(LivePreviewContext, {
+    value: {
+      appIsReady,
+      breakpoint,
+      breakpoints,
+      iframeRef,
+      isLivePreviewEnabled,
+      isLivePreviewing,
+      isPopupOpen,
+      isPreviewEnabled,
+      listeningForMessages,
+      loadedURL,
+      measuredDeviceSize,
+      openPopupWindow,
+      popupRef,
+      previewURL,
+      previewWindowType,
+      setAppIsReady,
+      setBreakpoint,
+      setHeight,
+      setIsLivePreviewing,
+      setLoadedURL,
+      setMeasuredDeviceSize,
+      setPreviewURL,
+      setPreviewWindowType: handleWindowChange,
+      setSize,
+      setToolbarPosition: setPosition,
+      setURL: setLivePreviewURL,
+      setWidth,
+      setZoom,
+      size,
+      toolbarPosition: position,
+      typeofLivePreviewURL,
+      url,
+      zoom
+    },
+    children: /*#__PURE__*/_jsx(DndContext, {
+      collisionDetection: customCollisionDetection,
+      // Provide stable ID to fix hydration issues: https://github.com/clauderic/dnd-kit/issues/926
+      id: dndContextID,
+      onDragEnd: handleDragEnd,
+      children: children
+    })
+  });
 };
-
 //# sourceMappingURL=index.js.map

package/dist/providers/LivePreview/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/providers/LivePreview/index.tsx"],"sourcesContent":["'use client'\nimport type { CollectionPreferences, LivePreviewConfig, LivePreviewURLType } from 'payload'\n\nimport { DndContext } from '@dnd-kit/core'\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'\n\nimport type { LivePreviewContextType } from './context.js'\n\nimport { usePopupWindow } from '../../hooks/usePopupWindow.js'\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { usePreferences } from '../../providers/Preferences/index.js'\nimport { formatAbsoluteURL } from '../../utilities/formatAbsoluteURL.js'\nimport { customCollisionDetection } from './collisionDetection.js'\nimport { LivePreviewContext } from './context.js'\nimport { sizeReducer } from './sizeReducer.js'\n\nexport type LivePreviewProviderProps = {\n  appIsReady?: boolean\n  breakpoints?: LivePreviewConfig['breakpoints']\n  children: React.ReactNode\n  deviceSize?: {\n    height: number\n    width: number\n  }\n  isLivePreviewEnabled?: boolean\n  isLivePreviewing: boolean\n  /**\n   * This specifically relates to `admin.preview` function in the config instead of live preview.\n   */\n  isPreviewEnabled?: boolean\n  /**\n   * This specifically relates to `admin.preview` function in the config instead of live preview.\n   */\n  previewURL?: string\n} & Pick<LivePreviewContextType, 'typeofLivePreviewURL' | 'url'>\n\nexport const LivePreviewProvider: React.FC<LivePreviewProviderProps> = ({\n  breakpoints: incomingBreakpoints,\n  children,\n  isLivePreviewEnabled,\n  isLivePreviewing: incomingIsLivePreviewing,\n  isPreviewEnabled,\n  previewURL: previewURLFromProps,\n  typeofLivePreviewURL,\n  url: urlFromProps,\n}) => {\n  const [previewWindowType, setPreviewWindowType] = useState<'iframe' | 'popup'>('iframe')\n  const [isLivePreviewing, setIsLivePreviewing] = useState(incomingIsLivePreviewing)\n\n  const breakpoints: LivePreviewConfig['breakpoints'] = useMemo(\n    () => [\n      ...(incomingBreakpoints || []),\n      {\n        name: 'responsive',\n        height: '100%',\n        label: 'Responsive',\n        width: '100%',\n      },\n    ],\n    [incomingBreakpoints],\n  )\n\n  const [url, setURL] = useState<string>('')\n  const [previewURL, setPreviewURL] = useState<string>(previewURLFromProps)\n\n  const { isPopupOpen, openPopupWindow, popupRef } = usePopupWindow({\n    eventType: 'payload-live-preview',\n    url,\n  })\n\n  const [appIsReady, setAppIsReady] = useState(false)\n  const [listeningForMessages, setListeningForMessages] = useState(false)\n\n  const { collectionSlug, globalSlug } = useDocumentInfo()\n\n  const isFirstRender = useRef(true)\n\n  const { setPreference } = usePreferences()\n\n  const iframeRef = React.useRef<HTMLIFrameElement>(null)\n\n  const [loadedURL, setLoadedURL] = useState<string>()\n\n  const [zoom, setZoom] = useState(1)\n\n  const [position, setPosition] = useState({ x: 0, y: 0 })\n\n  const [size, setSize] = React.useReducer(sizeReducer, { height: 0, width: 0 })\n\n  const [measuredDeviceSize, setMeasuredDeviceSize] = useState({\n    height: 0,\n    width: 0,\n  })\n\n  const [breakpoint, setBreakpoint] =\n    React.useState<LivePreviewConfig['breakpoints'][0]['name']>('responsive')\n\n  /**\n   * A \"middleware\" callback fn that does some additional work before `setURL`.\n   * This is what we provide through context, bc it:\n   *  - ensures the URL is absolute\n   *  - resets `appIsReady` to `false` while the new URL is loading\n   */\n  const setLivePreviewURL = useCallback<LivePreviewContextType['setURL']>(\n    (_incomingURL) => {\n      let incomingURL: LivePreviewURLType\n\n      if (typeof _incomingURL === 'string') {\n        incomingURL = formatAbsoluteURL(_incomingURL)\n      }\n\n      if (!incomingURL) {\n        setIsLivePreviewing(false)\n      }\n\n      if (incomingURL !== url) {\n        setAppIsReady(false)\n        setURL(incomingURL)\n      }\n    },\n    [url],\n  )\n\n  /**\n   * `url` needs to be relative to the window, which cannot be done on initial render.\n   */\n  useEffect(() => {\n    if (typeof urlFromProps === 'string') {\n      setURL(formatAbsoluteURL(urlFromProps))\n    }\n  }, [urlFromProps])\n\n  // The toolbar needs to freely drag and drop around the page\n  const handleDragEnd = (ev) => {\n    // only update position if the toolbar is completely within the preview area\n    // otherwise reset it back to the previous position\n    // TODO: reset to the nearest edge of the preview area\n    if (ev.over && ev.over.id === 'live-preview-area') {\n      const newPos = {\n        x: position.x + ev.delta.x,\n        y: position.y + ev.delta.y,\n      }\n\n      setPosition(newPos)\n    } else {\n      // reset\n    }\n  }\n\n  const setWidth = useCallback(\n    (width) => {\n      setSize({ type: 'width', value: width })\n    },\n    [setSize],\n  )\n\n  const setHeight = useCallback(\n    (height) => {\n      setSize({ type: 'height', value: height })\n    },\n    [setSize],\n  )\n\n  // explicitly set new width and height when as new breakpoints are selected\n  // exclude `custom` breakpoint as it is handled by the `setWidth` and `setHeight` directly\n  useEffect(() => {\n    const foundBreakpoint = breakpoints?.find((bp) => bp.name === breakpoint)\n\n    if (\n      foundBreakpoint &&\n      breakpoint !== 'responsive' &&\n      breakpoint !== 'custom' &&\n      typeof foundBreakpoint?.width === 'number' &&\n      typeof foundBreakpoint?.height === 'number'\n    ) {\n      setSize({\n        type: 'reset',\n        value: {\n          height: foundBreakpoint.height,\n          width: foundBreakpoint.width,\n        },\n      })\n    }\n  }, [breakpoint, breakpoints])\n\n  /**\n   * Receive the `ready` message from the popup window\n   * This indicates that the app is ready to receive `window.postMessage` events\n   * This is also the only cross-origin way of detecting when a popup window has loaded\n   * Unlike iframe elements which have an `onLoad` handler, there is no way to access `window.open` on popups\n   */\n  useEffect(() => {\n    const handleMessage = (event: MessageEvent) => {\n      if (\n        url?.startsWith(event.origin) &&\n        event.data &&\n        typeof event.data === 'object' &&\n        event.data.type === 'payload-live-preview'\n      ) {\n        if (event.data.ready) {\n          setAppIsReady(true)\n        }\n      }\n    }\n\n    window.addEventListener('message', handleMessage)\n\n    setListeningForMessages(true)\n\n    return () => {\n      window.removeEventListener('message', handleMessage)\n    }\n  }, [url, listeningForMessages])\n\n  const handleWindowChange = useCallback(\n    (type: 'iframe' | 'popup') => {\n      setAppIsReady(false)\n      setPreviewWindowType(type)\n      if (type === 'popup') {\n        openPopupWindow()\n      }\n    },\n    [openPopupWindow],\n  )\n\n  // when the user closes the popup window, switch back to the iframe\n  // the `usePopupWindow` reports the `isPopupOpen` state for us to use here\n  useEffect(() => {\n    const newPreviewWindowType = isPopupOpen ? 'popup' : 'iframe'\n\n    if (newPreviewWindowType !== previewWindowType) {\n      handleWindowChange('iframe')\n    }\n  }, [previewWindowType, isPopupOpen, handleWindowChange])\n\n  useEffect(() => {\n    if (isFirstRender.current) {\n      isFirstRender.current = false\n      return\n    }\n\n    void setPreference<CollectionPreferences>(\n      collectionSlug ? `collection-${collectionSlug}` : `global-${globalSlug}`,\n      {\n        editViewType: isLivePreviewing ? 'live-preview' : 'default',\n      },\n      true,\n    )\n  }, [isLivePreviewing, setPreference, collectionSlug, globalSlug])\n\n  return (\n    <LivePreviewContext\n      value={{\n        appIsReady,\n        breakpoint,\n        breakpoints,\n        iframeRef,\n        isLivePreviewEnabled,\n        isLivePreviewing,\n        isPopupOpen,\n        isPreviewEnabled,\n        listeningForMessages,\n        loadedURL,\n        measuredDeviceSize,\n        openPopupWindow,\n        popupRef,\n        previewURL,\n        previewWindowType,\n        setAppIsReady,\n        setBreakpoint,\n        setHeight,\n        setIsLivePreviewing,\n        setLoadedURL,\n        setMeasuredDeviceSize,\n        setPreviewURL,\n        setPreviewWindowType: handleWindowChange,\n        setSize,\n        setToolbarPosition: setPosition,\n        setURL: setLivePreviewURL,\n        setWidth,\n        setZoom,\n        size,\n        toolbarPosition: position,\n        typeofLivePreviewURL,\n        url,\n        zoom,\n      }}\n    >\n      <DndContext collisionDetection={customCollisionDetection} onDragEnd={handleDragEnd}>\n        {children}\n      </DndContext>\n    </LivePreviewContext>\n  )\n}\n"],"names":["DndContext","React","useCallback","useEffect","useMemo","useRef","useState","usePopupWindow","useDocumentInfo","usePreferences","formatAbsoluteURL","customCollisionDetection","LivePreviewContext","sizeReducer","LivePreviewProvider","breakpoints","incomingBreakpoints","children","isLivePreviewEnabled","isLivePreviewing","incomingIsLivePreviewing","isPreviewEnabled","previewURL","previewURLFromProps","typeofLivePreviewURL","url","urlFromProps","previewWindowType","setPreviewWindowType","setIsLivePreviewing","name","height","label","width","setURL","setPreviewURL","isPopupOpen","openPopupWindow","popupRef","eventType","appIsReady","setAppIsReady","listeningForMessages","setListeningForMessages","collectionSlug","globalSlug","isFirstRender","setPreference","iframeRef","loadedURL","setLoadedURL","zoom","setZoom","position","setPosition","x","y","size","setSize","useReducer","measuredDeviceSize","setMeasuredDeviceSize","breakpoint","setBreakpoint","setLivePreviewURL","_incomingURL","incomingURL","handleDragEnd","ev","over","id","newPos","delta","setWidth","type","value","setHeight","foundBreakpoint","find","bp","handleMessage","event","startsWith","origin","data","ready","window","addEventListener","removeEventListener","handleWindowChange","newPreviewWindowType","current","editViewType","setToolbarPosition","toolbarPosition","collisionDetection","onDragEnd"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["DndContext","React","useCallback","useEffect","useId","useMemo","useRef","useState","usePopupWindow","useDocumentInfo","usePreferences","formatAbsoluteURL","customCollisionDetection","LivePreviewContext","sizeReducer","LivePreviewProvider","breakpoints","incomingBreakpoints","children","isLivePreviewEnabled","isLivePreviewing","incomingIsLivePreviewing","isPreviewEnabled","previewURL","previewURLFromProps","typeofLivePreviewURL","url","urlFromProps","previewWindowType","setPreviewWindowType","setIsLivePreviewing","name","height","label","width","setURL","setPreviewURL","isPopupOpen","openPopupWindow","popupRef","eventType","appIsReady","setAppIsReady","listeningForMessages","setListeningForMessages","collectionSlug","globalSlug","isFirstRender","setPreference","iframeRef","loadedURL","setLoadedURL","zoom","setZoom","position","setPosition","x","y","size","setSize","useReducer","measuredDeviceSize","setMeasuredDeviceSize","breakpoint","setBreakpoint","setLivePreviewURL","_incomingURL","incomingURL","handleDragEnd","ev","over","id","newPos","delta","setWidth","type","value","setHeight","foundBreakpoint","find","bp","handleMessage","event","startsWith","origin","data","ready","window","addEventListener","removeEventListener","handleWindowChange","newPreviewWindowType","current","editViewType","dndContextID","_jsx","setToolbarPosition","toolbarPosition","collisionDetection","onDragEnd"],"sources":["../../../src/providers/LivePreview/index.tsx"],"sourcesContent":["'use client'\nimport type { CollectionPreferences, LivePreviewConfig, LivePreviewURLType } from 'payload'\n\nimport { DndContext } from '@dnd-kit/core'\nimport React, { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react'\n\nimport type { LivePreviewContextType } from './context.js'\n\nimport { usePopupWindow } from '../../hooks/usePopupWindow.js'\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { usePreferences } from '../../providers/Preferences/index.js'\nimport { formatAbsoluteURL } from '../../utilities/formatAbsoluteURL.js'\nimport { customCollisionDetection } from './collisionDetection.js'\nimport { LivePreviewContext } from './context.js'\nimport { sizeReducer } from './sizeReducer.js'\n\nexport type LivePreviewProviderProps = {\n  appIsReady?: boolean\n  breakpoints?: LivePreviewConfig['breakpoints']\n  children: React.ReactNode\n  deviceSize?: {\n    height: number\n    width: number\n  }\n  isLivePreviewEnabled?: boolean\n  isLivePreviewing: boolean\n  /**\n   * This specifically relates to `admin.preview` function in the config instead of live preview.\n   */\n  isPreviewEnabled?: boolean\n  /**\n   * This specifically relates to `admin.preview` function in the config instead of live preview.\n   */\n  previewURL?: string\n} & Pick<LivePreviewContextType, 'typeofLivePreviewURL' | 'url'>\n\nexport const LivePreviewProvider: React.FC<LivePreviewProviderProps> = ({\n  breakpoints: incomingBreakpoints,\n  children,\n  isLivePreviewEnabled,\n  isLivePreviewing: incomingIsLivePreviewing,\n  isPreviewEnabled,\n  previewURL: previewURLFromProps,\n  typeofLivePreviewURL,\n  url: urlFromProps,\n}) => {\n  const [previewWindowType, setPreviewWindowType] = useState<'iframe' | 'popup'>('iframe')\n  const [isLivePreviewing, setIsLivePreviewing] = useState(incomingIsLivePreviewing)\n\n  const breakpoints: LivePreviewConfig['breakpoints'] = useMemo(\n    () => [\n      ...(incomingBreakpoints || []),\n      {\n        name: 'responsive',\n        height: '100%',\n        label: 'Responsive',\n        width: '100%',\n      },\n    ],\n    [incomingBreakpoints],\n  )\n\n  const [url, setURL] = useState<string>('')\n  const [previewURL, setPreviewURL] = useState<string>(previewURLFromProps)\n\n  const { isPopupOpen, openPopupWindow, popupRef } = usePopupWindow({\n    eventType: 'payload-live-preview',\n    url,\n  })\n\n  const [appIsReady, setAppIsReady] = useState(false)\n  const [listeningForMessages, setListeningForMessages] = useState(false)\n\n  const { collectionSlug, globalSlug } = useDocumentInfo()\n\n  const isFirstRender = useRef(true)\n\n  const { setPreference } = usePreferences()\n\n  const iframeRef = React.useRef<HTMLIFrameElement>(null)\n\n  const [loadedURL, setLoadedURL] = useState<string>()\n\n  const [zoom, setZoom] = useState(1)\n\n  const [position, setPosition] = useState({ x: 0, y: 0 })\n\n  const [size, setSize] = React.useReducer(sizeReducer, { height: 0, width: 0 })\n\n  const [measuredDeviceSize, setMeasuredDeviceSize] = useState({\n    height: 0,\n    width: 0,\n  })\n\n  const [breakpoint, setBreakpoint] =\n    React.useState<LivePreviewConfig['breakpoints'][0]['name']>('responsive')\n\n  /**\n   * A \"middleware\" callback fn that does some additional work before `setURL`.\n   * This is what we provide through context, bc it:\n   *  - ensures the URL is absolute\n   *  - resets `appIsReady` to `false` while the new URL is loading\n   */\n  const setLivePreviewURL = useCallback<LivePreviewContextType['setURL']>(\n    (_incomingURL) => {\n      let incomingURL: LivePreviewURLType\n\n      if (typeof _incomingURL === 'string') {\n        incomingURL = formatAbsoluteURL(_incomingURL)\n      }\n\n      if (!incomingURL) {\n        setIsLivePreviewing(false)\n      }\n\n      if (incomingURL !== url) {\n        setAppIsReady(false)\n        setURL(incomingURL)\n      }\n    },\n    [url],\n  )\n\n  /**\n   * `url` needs to be relative to the window, which cannot be done on initial render.\n   */\n  useEffect(() => {\n    if (typeof urlFromProps === 'string') {\n      setURL(formatAbsoluteURL(urlFromProps))\n    }\n  }, [urlFromProps])\n\n  // The toolbar needs to freely drag and drop around the page\n  const handleDragEnd = (ev) => {\n    // only update position if the toolbar is completely within the preview area\n    // otherwise reset it back to the previous position\n    // TODO: reset to the nearest edge of the preview area\n    if (ev.over && ev.over.id === 'live-preview-area') {\n      const newPos = {\n        x: position.x + ev.delta.x,\n        y: position.y + ev.delta.y,\n      }\n\n      setPosition(newPos)\n    } else {\n      // reset\n    }\n  }\n\n  const setWidth = useCallback(\n    (width) => {\n      setSize({ type: 'width', value: width })\n    },\n    [setSize],\n  )\n\n  const setHeight = useCallback(\n    (height) => {\n      setSize({ type: 'height', value: height })\n    },\n    [setSize],\n  )\n\n  // explicitly set new width and height when as new breakpoints are selected\n  // exclude `custom` breakpoint as it is handled by the `setWidth` and `setHeight` directly\n  useEffect(() => {\n    const foundBreakpoint = breakpoints?.find((bp) => bp.name === breakpoint)\n\n    if (\n      foundBreakpoint &&\n      breakpoint !== 'responsive' &&\n      breakpoint !== 'custom' &&\n      typeof foundBreakpoint?.width === 'number' &&\n      typeof foundBreakpoint?.height === 'number'\n    ) {\n      setSize({\n        type: 'reset',\n        value: {\n          height: foundBreakpoint.height,\n          width: foundBreakpoint.width,\n        },\n      })\n    }\n  }, [breakpoint, breakpoints])\n\n  /**\n   * Receive the `ready` message from the popup window\n   * This indicates that the app is ready to receive `window.postMessage` events\n   * This is also the only cross-origin way of detecting when a popup window has loaded\n   * Unlike iframe elements which have an `onLoad` handler, there is no way to access `window.open` on popups\n   */\n  useEffect(() => {\n    const handleMessage = (event: MessageEvent) => {\n      if (\n        url?.startsWith(event.origin) &&\n        event.data &&\n        typeof event.data === 'object' &&\n        event.data.type === 'payload-live-preview'\n      ) {\n        if (event.data.ready) {\n          setAppIsReady(true)\n        }\n      }\n    }\n\n    window.addEventListener('message', handleMessage)\n\n    setListeningForMessages(true)\n\n    return () => {\n      window.removeEventListener('message', handleMessage)\n    }\n  }, [url, listeningForMessages])\n\n  const handleWindowChange = useCallback(\n    (type: 'iframe' | 'popup') => {\n      setAppIsReady(false)\n      setPreviewWindowType(type)\n      if (type === 'popup') {\n        openPopupWindow()\n      }\n    },\n    [openPopupWindow],\n  )\n\n  // when the user closes the popup window, switch back to the iframe\n  // the `usePopupWindow` reports the `isPopupOpen` state for us to use here\n  useEffect(() => {\n    const newPreviewWindowType = isPopupOpen ? 'popup' : 'iframe'\n\n    if (newPreviewWindowType !== previewWindowType) {\n      handleWindowChange('iframe')\n    }\n  }, [previewWindowType, isPopupOpen, handleWindowChange])\n\n  useEffect(() => {\n    if (isFirstRender.current) {\n      isFirstRender.current = false\n      return\n    }\n\n    void setPreference<CollectionPreferences>(\n      collectionSlug ? `collection-${collectionSlug}` : `global-${globalSlug}`,\n      {\n        editViewType: isLivePreviewing ? 'live-preview' : 'default',\n      },\n      true,\n    )\n  }, [isLivePreviewing, setPreference, collectionSlug, globalSlug])\n\n  const dndContextID = useId()\n\n  return (\n    <LivePreviewContext\n      value={{\n        appIsReady,\n        breakpoint,\n        breakpoints,\n        iframeRef,\n        isLivePreviewEnabled,\n        isLivePreviewing,\n        isPopupOpen,\n        isPreviewEnabled,\n        listeningForMessages,\n        loadedURL,\n        measuredDeviceSize,\n        openPopupWindow,\n        popupRef,\n        previewURL,\n        previewWindowType,\n        setAppIsReady,\n        setBreakpoint,\n        setHeight,\n        setIsLivePreviewing,\n        setLoadedURL,\n        setMeasuredDeviceSize,\n        setPreviewURL,\n        setPreviewWindowType: handleWindowChange,\n        setSize,\n        setToolbarPosition: setPosition,\n        setURL: setLivePreviewURL,\n        setWidth,\n        setZoom,\n        size,\n        toolbarPosition: position,\n        typeofLivePreviewURL,\n        url,\n        zoom,\n      }}\n    >\n      <DndContext\n        collisionDetection={customCollisionDetection}\n        // Provide stable ID to fix hydration issues: https://github.com/clauderic/dnd-kit/issues/926\n        id={dndContextID}\n        onDragEnd={handleDragEnd}\n      >\n        {children}\n      </DndContext>\n    </LivePreviewContext>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/providers/LivePreview/sizeReducer.js

@@ -8,24 +8,23 @@
 //       return { ...state, ...(action?.value || {}) }
 //   }
 // },
-export const sizeReducer = (state, action)=>{
-    switch(action.type){
-        case 'height':
-            return {
-                ...state,
-                height: action.value
-            };
-        case 'width':
-            return {
-                ...state,
-                width: action.value
-            };
-        default:
-            return {
-                ...state,
-                ...action?.value || {}
-            };
-    }
+export const sizeReducer = (state, action) => {
+  switch (action.type) {
+    case 'height':
+      return {
+        ...state,
+        height: action.value
+      };
+    case 'width':
+      return {
+        ...state,
+        width: action.value
+      };
+    default:
+      return {
+        ...state,
+        ...(action?.value || {})
+      };
+  }
 };
-
 //# sourceMappingURL=sizeReducer.js.map

package/dist/providers/LivePreview/sizeReducer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/providers/LivePreview/sizeReducer.ts"],"sourcesContent":["// export const sizeReducer: (state, action) => {\n//   switch (action.type) {\n//     case 'width':\n//       return { ...state, width: action.value }\n//     case 'height':\n//       return { ...state, height: action.value }\n//     default:\n//       return { ...state, ...(action?.value || {}) }\n//   }\n// },\n\ntype SizeReducerState = {\n  height: number\n  width: number\n}\n\nexport type SizeReducerAction =\n  | {\n      type: 'height' | 'width'\n      value: number\n    }\n  | {\n      type: 'reset'\n      value: {\n        height: number\n        width: number\n      }\n    }\n\nexport const sizeReducer = (state: SizeReducerState, action: SizeReducerAction) => {\n  switch (action.type) {\n    case 'height':\n      return { ...state, height: action.value }\n    case 'width':\n      return { ...state, width: action.value }\n    default:\n      return { ...state, ...(action?.value || {}) }\n  }\n}\n"],"names":["sizeReducer","state","action","type","height","value","width"],"mappings":"AAAA,iDAAiD;AACjD,2BAA2B;AAC3B,oBAAoB;AACpB,iDAAiD;AACjD,qBAAqB;AACrB,kDAAkD;AAClD,eAAe;AACf,sDAAsD;AACtD,MAAM;AACN,KAAK;AAoBL,OAAO,MAAMA,cAAc,CAACC,OAAyBC;IACnD,OAAQA,OAAOC,IAAI;QACjB,KAAK;YACH,OAAO;gBAAE,GAAGF,KAAK;gBAAEG,QAAQF,OAAOG,KAAK;YAAC;QAC1C,KAAK;YACH,OAAO;gBAAE,GAAGJ,KAAK;gBAAEK,OAAOJ,OAAOG,KAAK;YAAC;QACzC;YACE,OAAO;gBAAE,GAAGJ,KAAK;gBAAE,GAAIC,QAAQG,SAAS,CAAC,CAAC;YAAE;IAChD;AACF,EAAC"}
+{"version":3,"file":"sizeReducer.js","names":["sizeReducer","state","action","type","height","value","width"],"sources":["../../../src/providers/LivePreview/sizeReducer.ts"],"sourcesContent":["// export const sizeReducer: (state, action) => {\n//   switch (action.type) {\n//     case 'width':\n//       return { ...state, width: action.value }\n//     case 'height':\n//       return { ...state, height: action.value }\n//     default:\n//       return { ...state, ...(action?.value || {}) }\n//   }\n// },\n\ntype SizeReducerState = {\n  height: number\n  width: number\n}\n\nexport type SizeReducerAction =\n  | {\n      type: 'height' | 'width'\n      value: number\n    }\n  | {\n      type: 'reset'\n      value: {\n        height: number\n        width: number\n      }\n    }\n\nexport const sizeReducer = (state: SizeReducerState, action: SizeReducerAction) => {\n  switch (action.type) {\n    case 'height':\n      return { ...state, height: action.value }\n    case 'width':\n      return { ...state, width: action.value }\n    default:\n      return { ...state, ...(action?.value || {}) }\n  }\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAoBA,OAAO,MAAMA,WAAA,GAAcA,CAACC,KAAA,EAAyBC,MAAA;EACnD,QAAQA,MAAA,CAAOC,IAAI;IACjB,KAAK;MACH,OAAO;QAAE,GAAGF,KAAK;QAAEG,MAAA,EAAQF,MAAA,CAAOG;MAAM;IAC1C,KAAK;MACH,OAAO;QAAE,GAAGJ,KAAK;QAAEK,KAAA,EAAOJ,MAAA,CAAOG;MAAM;IACzC;MACE,OAAO;QAAE,GAAGJ,KAAK;QAAE,IAAIC,MAAA,EAAQG,KAAA,IAAS,CAAC,CAAC;MAAE;EAChD;AACF","ignoreList":[]}