@payloadcms/ui 3.81.0-canary.4 → 3.81.0-internal-debug.1a0f4d0

package/dist/providers/LivePreview/index.js

@@ -1,6 +1,5 @@
 'use client';
-
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 import { DndContext } from '@dnd-kit/core';
 import React, { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
 import { usePopupWindow } from '../../hooks/usePopupWindow.js';
@@ -10,228 +9,248 @@ import { formatAbsoluteURL } from '../../utilities/formatAbsoluteURL.js';
 import { customCollisionDetection } from './collisionDetection.js';
 import { LivePreviewContext } from './context.js';
 import { sizeReducer } from './sizeReducer.js';
-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 [shouldRenderIframe, setShouldRenderIframe] = useState(isLivePreviewing);
-  /**
-  * Rendering the iframe is a one-way event, e.g. defer load and never unmount.
-  * This way, subsequent toggles will appear to load instantly.
-  */
-  const setIsLivePreviewing = useCallback(livePreviewing => {
-    if (livePreviewing) {
-      setShouldRenderIframe(true);
-    }
-    _setIsLivePreviewing(livePreviewing);
-  }, []);
-  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
+/**
+   * 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 [shouldRenderIframe, setShouldRenderIframe] = useState(isLivePreviewing);
+    /**
+   * Rendering the iframe is a one-way event, e.g. defer load and never unmount.
+   * This way, subsequent toggles will appear to load instantly.
+   */ const setIsLivePreviewing = useCallback((livePreviewing)=>{
+        if (livePreviewing) {
+            setShouldRenderIframe(true);
+        }
+        _setIsLivePreviewing(livePreviewing);
+    }, []);
+    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
     });
-  }, [setSize]);
-  const setHeight = useCallback(height => {
-    setSize({
-      type: 'height',
-      value: height
+    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
     });
-  }, [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
+    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);
         }
-      });
-    }
-  }, [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) {
+            setIsLivePreviewing(false);
         }
-      }
-    };
-    window.addEventListener('message', handleMessage);
-    setListeningForMessages(true);
-    return () => {
-      window.removeEventListener('message', handleMessage);
+        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 {}
     };
-  }, [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,
-      shouldRenderIframe,
-      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
-    })
-  });
+    // 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
+    ]);
+    const dndContextID = useId();
+    return /*#__PURE__*/ _jsxDEV(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,
+            shouldRenderIframe,
+            size,
+            toolbarPosition: position,
+            typeofLivePreviewURL,
+            url,
+            zoom
+        },
+        children: /*#__PURE__*/ _jsxDEV(DndContext, {
+            collisionDetection: customCollisionDetection,
+            // Provide stable ID to fix hydration issues: https://github.com/clauderic/dnd-kit/issues/926
+            id: dndContextID,
+            onDragEnd: handleDragEnd,
+            children: children
+        }, void 0, false, {
+            fileName: "src/providers/LivePreview/index.tsx",
+            lineNumber: 312,
+            columnNumber: 7
+        }, this)
+    }, void 0, false, {
+        fileName: "src/providers/LivePreview/index.tsx",
+        lineNumber: 274,
+        columnNumber: 5
+    }, this);
 };
+
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"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","shouldRenderIframe","setShouldRenderIframe","setIsLivePreviewing","livePreviewing","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\n  const [isLivePreviewing, _setIsLivePreviewing] =\n    useState<LivePreviewContextType['isLivePreviewing']>(incomingIsLivePreviewing)\n\n  const [shouldRenderIframe, setShouldRenderIframe] =\n    useState<LivePreviewContextType['shouldRenderIframe']>(isLivePreviewing)\n\n  /**\n   * Rendering the iframe is a one-way event, e.g. defer load and never unmount.\n   * This way, subsequent toggles will appear to load instantly.\n   */\n  const setIsLivePreviewing = useCallback<LivePreviewContextType['setIsLivePreviewing']>(\n    (livePreviewing) => {\n      if (livePreviewing) {\n        setShouldRenderIframe(true)\n      }\n\n      _setIsLivePreviewing(livePreviewing)\n    },\n    [],\n  )\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        shouldRenderIframe,\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":[]}
+{"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, 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\n  const [isLivePreviewing, _setIsLivePreviewing] =\n    useState<LivePreviewContextType['isLivePreviewing']>(incomingIsLivePreviewing)\n\n  const [shouldRenderIframe, setShouldRenderIframe] =\n    useState<LivePreviewContextType['shouldRenderIframe']>(isLivePreviewing)\n\n  /**\n   * Rendering the iframe is a one-way event, e.g. defer load and never unmount.\n   * This way, subsequent toggles will appear to load instantly.\n   */\n  const setIsLivePreviewing = useCallback<LivePreviewContextType['setIsLivePreviewing']>(\n    (livePreviewing) => {\n      if (livePreviewing) {\n        setShouldRenderIframe(true)\n      }\n\n      _setIsLivePreviewing(livePreviewing)\n    },\n    [],\n  )\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        shouldRenderIframe,\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"],"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","shouldRenderIframe","setShouldRenderIframe","setIsLivePreviewing","livePreviewing","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","setToolbarPosition","toolbarPosition","collisionDetection","onDragEnd"],"mappings":"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"}

package/dist/providers/LivePreview/sizeReducer.js

@@ -8,23 +8,24 @@
 //       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,"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":[]}
+{"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"}