sanity-plugin-iframe-pane 2.3.1-beta.1 → 2.3.2-canary.0

package/lib/index.js

@@ -1,91 +1,113 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { MobileDeviceIcon, UndoIcon, CopyIcon, LeaveIcon } from '@sanity/icons';
-import { ThemeProvider, Flex, Spinner, Card, Button, Box, Text } from '@sanity/ui';
-import { useState, useRef, useEffect } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { MobileDeviceIcon, UndoIcon, ClipboardIcon, LaunchIcon, WarningOutlineIcon } from '@sanity/icons';
+import { Text, useToast, Card, Flex, Tooltip, Button, Box, Spinner, usePrefersReducedMotion, Container, Stack } from '@sanity/ui';
+import { motion, AnimatePresence, MotionConfig } from 'framer-motion';
+import { useState, useEffect, useMemo, useRef, forwardRef, useCallback, useDeferredValue } from 'react';
+import { useClient } from 'sanity';
+import { apiVersion, fetchSecretQuery, tag } from './_chunks/is-valid-secret-3aaae7ae.js';
+import { patchUrlSecret, getExpiresAt, MissingSlug } from './_chunks/types-4860e7b4.js';
 import { useCopyToClipboard } from 'usehooks-ts';
+function GetUrlSecret(props) {
+  const {
+    urlSecretId,
+    setUrlSecret,
+    urlSecret,
+    setError
+  } = props;
+  const client = useClient({
+    apiVersion
+  });
+  const [secretExpiresAt, setSecretExpiresAt] = useState(null);
+  if (!urlSecretId.includes(".")) {
+    throw new TypeError("`urlSecretId` must have a dot prefix, `".concat(urlSecretId, "` is not secure, add a prefix, for example `preview.").concat(urlSecretId, "` "));
+  }
+  useEffect(() => {
+    if (urlSecret) return;
+    async function getSecret(signal) {
+      const data = await client.fetch(fetchSecretQuery, {
+        id: urlSecretId
+      }, {
+        signal,
+        tag
+      });
+      if (signal.aborted) return;
+      if (!(data == null ? void 0 : data.secret) || !(data == null ? void 0 : data._updatedAt)) {
+        try {
+          const newUpdatedAt = /* @__PURE__ */new Date();
+          const newSecret = await patchUrlSecret(client, urlSecretId, signal);
+          if (signal.aborted) return;
+          setUrlSecret(newSecret);
+          setSecretExpiresAt(getExpiresAt(newUpdatedAt));
+        } catch (err) {
+          console.error("Failed to create a new preview secret. Ensure the `client` has a `token` specified that has `write` permissions.", err);
+        }
+        return;
+      }
+      if ((data == null ? void 0 : data.secret) !== urlSecret) {
+        setUrlSecret(data == null ? void 0 : data.secret);
+        setSecretExpiresAt(getExpiresAt(new Date(data == null ? void 0 : data._updatedAt)));
+      }
+    }
+    const abort = new AbortController();
+    getSecret(abort.signal).catch(error => error.name !== "AbortError" && setError(error));
+    return () => abort.abort();
+  }, [client, setError, setUrlSecret, urlSecret, urlSecretId]);
+  useEffect(() => {
+    if (!secretExpiresAt) return;
+    const timeout = setTimeout(() => {
+      setUrlSecret(null);
+      setSecretExpiresAt(null);
+    }, Math.max(0, secretExpiresAt.getTime() - /* @__PURE__ */new Date().getTime()));
+    return () => clearTimeout(timeout);
+  }, [secretExpiresAt, setUrlSecret]);
+  return null;
+}
+function DisplayUrl(_ref) {
+  let {
+    displayUrl
+  } = _ref;
+  const truncatedUrl = useMemo(() => {
+    const url = new URL(displayUrl);
+    if (url.searchParams.has("secret")) {
+      url.searchParams.delete("secret");
+      url.searchParams.append("secret", "***");
+    }
+    return "".concat(url.origin === location.origin ? "" : url.origin).concat(url.pathname).concat(url.search);
+  }, [displayUrl]);
+  return /* @__PURE__ */jsx(Text, {
+    size: 0,
+    textOverflow: "ellipsis",
+    title: displayUrl,
+    children: truncatedUrl
+  });
+}
 const sizes = {
   desktop: {
     width: "100%",
-    height: "100%",
-    maxHeight: "100%"
+    height: "100%"
   },
   mobile: {
     width: 414,
-    height: "100%",
-    maxHeight: 736
+    height: 746
   }
 };
 const DEFAULT_SIZE = "desktop";
-function Iframe(props) {
+function Toolbar(props) {
   const {
-    document: sanityDocument,
-    options
+    displayUrl,
+    iframeSize,
+    setIframeSize,
+    reloading,
+    showDisplayUrl,
+    reloadButton,
+    handleReload
   } = props;
-  const {
-    url,
-    defaultSize = DEFAULT_SIZE,
-    reload,
-    loader,
-    attributes = {},
-    showDisplayUrl = true
-  } = options;
-  const [displayUrl, setDisplayUrl] = useState(url && typeof url === "string" ? url : "");
-  const [iframeSize, setIframeSize] = useState((sizes == null ? void 0 : sizes[defaultSize]) ? defaultSize : DEFAULT_SIZE);
-  const [loading, setLoading] = useState(false);
   const input = useRef(null);
-  const iframe = useRef(null);
   const {
-    displayed
-  } = sanityDocument;
+    push: pushToast
+  } = useToast();
   const [, copy] = useCopyToClipboard();
-  function handleCopy() {
-    var _a;
-    if (!((_a = input == null ? void 0 : input.current) == null ? void 0 : _a.value)) return;
-    copy(input.current.value);
-  }
-  function handleReload() {
-    if (!(iframe == null ? void 0 : iframe.current)) {
-      return;
-    }
-    iframe.current.src = iframe.current.src;
-    setLoading(true);
-  }
-  function handleIframeLoad() {
-    setLoading(false);
-    if (attributes.onLoad && typeof attributes.onLoad === "function") {
-      attributes.onLoad();
-    }
-  }
-  useEffect(() => {
-    if ((reload == null ? void 0 : reload.revision) || (reload == null ? void 0 : reload.revision) == 0) {
-      setTimeout(() => {
-        handleReload();
-      }, Number(reload == null ? void 0 : reload.revision));
-    }
-  }, [displayed._rev, reload == null ? void 0 : reload.revision]);
-  useEffect(() => {
-    const getUrl = async () => {
-      setLoading(true);
-      const resolveUrl = typeof url === "function" ? await url(displayed) : "";
-      if (resolveUrl !== displayUrl && resolveUrl && typeof resolveUrl === "string") {
-        setDisplayUrl(resolveUrl);
-      }
-    };
-    if (typeof url === "function") {
-      getUrl();
-    }
-  }, [displayed._rev]);
-  if (!displayUrl || typeof displayUrl !== "string") {
-    return /* @__PURE__ */jsx(ThemeProvider, {
-      children: /* @__PURE__ */jsx(Flex, {
-        padding: 5,
-        align: "center",
-        justify: "center",
-        children: /* @__PURE__ */jsx(Spinner, {})
-      })
-    });
-  }
-  return /* @__PURE__ */jsxs(ThemeProvider, {
+  return /* @__PURE__ */jsxs(Fragment, {
     children: [/* @__PURE__ */jsx("textarea", {
       style: {
         position: "absolute",
@@ -96,119 +118,401 @@ function Iframe(props) {
       value: displayUrl,
       readOnly: true,
       tabIndex: -1
-    }), /* @__PURE__ */jsxs(Flex, {
-      direction: "column",
-      style: {
-        height: "100%"
-      },
-      children: [/* @__PURE__ */jsx(Card, {
-        padding: 2,
-        borderBottom: true,
-        children: /* @__PURE__ */jsxs(Flex, {
+    }), /* @__PURE__ */jsx(Card, {
+      padding: 2,
+      borderBottom: true,
+      children: /* @__PURE__ */jsxs(Flex, {
+        align: "center",
+        gap: 2,
+        children: [/* @__PURE__ */jsx(Flex, {
           align: "center",
-          gap: 2,
-          children: [/* @__PURE__ */jsx(Flex, {
-            align: "center",
-            gap: 1,
+          gap: 1,
+          children: /* @__PURE__ */jsx(Tooltip, {
+            content: /* @__PURE__ */jsx(Text, {
+              size: 1,
+              style: {
+                whiteSpace: "nowrap"
+              },
+              children: iframeSize === "mobile" ? "Exit mobile preview" : "Preview mobile viewport"
+            }),
+            padding: 2,
             children: /* @__PURE__ */jsx(Button, {
+              disabled: !displayUrl,
               fontSize: [1],
               padding: 2,
-              tone: "primary",
               mode: iframeSize === "mobile" ? "default" : "ghost",
               icon: MobileDeviceIcon,
               onClick: () => setIframeSize(iframeSize === "mobile" ? "desktop" : "mobile")
             })
-          }), /* @__PURE__ */jsx(Box, {
-            flex: 1,
-            children: showDisplayUrl && /* @__PURE__ */jsx(Text, {
-              size: 0,
-              textOverflow: "ellipsis",
-              children: displayUrl
-            })
-          }), /* @__PURE__ */jsxs(Flex, {
-            align: "center",
-            gap: 1,
-            children: [(reload == null ? void 0 : reload.button) ? /* @__PURE__ */jsx(Button, {
+          })
+        }), /* @__PURE__ */jsx(Box, {
+          flex: 1,
+          children: showDisplayUrl && displayUrl && /* @__PURE__ */jsx(DisplayUrl, {
+            displayUrl
+          })
+        }), /* @__PURE__ */jsxs(Flex, {
+          align: "center",
+          gap: 1,
+          children: [reloadButton ? /* @__PURE__ */jsx(Tooltip, {
+            content: /* @__PURE__ */jsx(Text, {
+              size: 1,
+              style: {
+                whiteSpace: "nowrap"
+              },
+              children: reloading ? "Reloading\u2026" : "Reload"
+            }),
+            padding: 2,
+            children: /* @__PURE__ */jsx(Button, {
+              disabled: !displayUrl,
+              mode: "bleed",
               fontSize: [1],
               padding: 2,
-              icon: UndoIcon,
-              title: "Reload",
+              icon: /* @__PURE__ */jsx(UndoIcon, {
+                style: {
+                  transform: "rotate(90deg) scaleY(-1)"
+                }
+              }),
+              loading: reloading,
               "aria-label": "Reload",
               onClick: () => handleReload()
-            }) : null, /* @__PURE__ */jsx(Button, {
+            })
+          }) : null, /* @__PURE__ */jsx(Tooltip, {
+            content: /* @__PURE__ */jsx(Text, {
+              size: 1,
+              style: {
+                whiteSpace: "nowrap"
+              },
+              children: "Copy URL"
+            }),
+            padding: 2,
+            children: /* @__PURE__ */jsx(Button, {
+              mode: "bleed",
+              disabled: !displayUrl,
               fontSize: [1],
-              icon: CopyIcon,
+              icon: ClipboardIcon,
               padding: [2],
-              title: "Copy",
-              "aria-label": "Copy",
-              onClick: () => handleCopy()
-            }), /* @__PURE__ */jsx(Button, {
+              "aria-label": "Copy URL",
+              onClick: () => {
+                var _a;
+                if (!((_a = input == null ? void 0 : input.current) == null ? void 0 : _a.value)) return;
+                copy(input.current.value);
+                pushToast({
+                  closable: true,
+                  status: "success",
+                  title: "The URL is copied to the clipboard"
+                });
+              }
+            })
+          }), /* @__PURE__ */jsx(Tooltip, {
+            content: /* @__PURE__ */jsx(Text, {
+              size: 1,
+              style: {
+                whiteSpace: "nowrap"
+              },
+              children: "Open URL in a new tab"
+            }),
+            padding: 2,
+            children: /* @__PURE__ */jsx(Button, {
+              disabled: !displayUrl,
               fontSize: [1],
-              icon: LeaveIcon,
-              padding: [2],
+              icon: LaunchIcon,
+              mode: "ghost",
+              paddingY: [2],
               text: "Open",
-              tone: "primary",
+              "aria-label": "Open URL in a new tab",
               onClick: () => window.open(displayUrl)
-            })]
+            })
           })]
-        })
-      }), /* @__PURE__ */jsx(Card, {
+        })]
+      })
+    })]
+  });
+}
+const MotionFlex = motion(Flex);
+function Iframe(props) {
+  var _a;
+  const [error, setError] = useState(null);
+  if (error) {
+    throw error;
+  }
+  const {
+    document: sanityDocument,
+    options
+  } = props;
+  const {
+    url,
+    urlSecretId,
+    defaultSize = DEFAULT_SIZE,
+    reload,
+    loader = "Loading\u2026",
+    attributes = {},
+    showDisplayUrl = true
+  } = options;
+  const [iframeSize, setIframeSize] = useState(((_a = sizes) == null ? void 0 : _a[defaultSize]) ? defaultSize : DEFAULT_SIZE);
+  const [workaroundEmptyDocument, setWorkaroundEmptyDocument] = useState(true);
+  useEffect(() => {
+    const timeout = setTimeout(() => setWorkaroundEmptyDocument(false), 1e3);
+    return () => clearTimeout(timeout);
+  }, []);
+  const prefersReducedMotion = usePrefersReducedMotion();
+  const [urlState, setUrlState] = useState(() => typeof url === "function" ? "" : url);
+  const [loading, setLoading] = useState(true);
+  const [reloading, setReloading] = useState(false);
+  const iframe = useRef(null);
+  const {
+    displayed
+  } = sanityDocument;
+  const handleReload = useCallback(() => {
+    if (!(iframe == null ? void 0 : iframe.current)) {
+      return;
+    }
+    iframe.current.src = iframe.current.src;
+    setReloading(true);
+  }, []);
+  const deferredRevision = useDeferredValue(displayed._rev);
+  const displayUrl = typeof urlState === "string" ? urlState : "";
+  return /* @__PURE__ */jsx(MotionConfig, {
+    transition: prefersReducedMotion ? {
+      duration: 0
+    } : void 0,
+    children: /* @__PURE__ */jsxs(Flex, {
+      direction: "column",
+      style: {
+        height: "100%"
+      },
+      children: [/* @__PURE__ */jsx(Toolbar, {
+        displayUrl,
+        iframeSize,
+        reloading,
+        setIframeSize,
+        showDisplayUrl,
+        reloadButton: !!(reload == null ? void 0 : reload.button),
+        handleReload
+      }), urlState === MissingSlug && !workaroundEmptyDocument ? /* @__PURE__ */jsx(MissingSlugScreen, {}) : /* @__PURE__ */jsx(Card, {
         tone: "transparent",
-        padding: iframeSize === "mobile" ? 2 : 0,
         style: {
           height: "100%"
         },
+        children: /* @__PURE__ */jsx(Frame, {
+          ref: iframe,
+          loader,
+          loading,
+          reloading,
+          iframeSize,
+          setReloading,
+          setLoading,
+          displayUrl,
+          attributes
+        })
+      }), typeof url === "function" && /* @__PURE__ */jsx(AsyncUrl, {
+        url,
+        displayed,
+        urlSecretId,
+        setDisplayUrl: setUrlState,
+        setError
+      }, deferredRevision), displayUrl && ((reload == null ? void 0 : reload.revision) || (reload == null ? void 0 : reload.revision) === 0) && /* @__PURE__ */jsx(ReloadOnRevision, {
+        revision: reload.revision,
+        _rev: deferredRevision,
+        handleReload
+      })]
+    })
+  });
+}
+const Frame = forwardRef(function Frame2(props, iframe) {
+  const {
+    loader,
+    loading,
+    setLoading,
+    iframeSize,
+    attributes,
+    reloading,
+    displayUrl,
+    setReloading
+  } = props;
+  function handleIframeLoad() {
+    setLoading(false);
+    setReloading(false);
+    if (attributes.onLoad && typeof attributes.onLoad === "function") {
+      attributes.onLoad();
+    }
+  }
+  return /* @__PURE__ */jsxs(Flex, {
+    align: "center",
+    justify: "center",
+    style: {
+      height: "100%",
+      position: "relative"
+    },
+    children: [/* @__PURE__ */jsx(AnimatePresence, {
+      children: loader && loading && /* @__PURE__ */jsx(MotionFlex, {
+        initial: "initial",
+        animate: "animate",
+        exit: "exit",
+        variants: spinnerVariants,
+        justify: "center",
+        align: "center",
+        style: {
+          inset: "0",
+          position: "absolute"
+        },
         children: /* @__PURE__ */jsxs(Flex, {
-          align: "center",
-          justify: "center",
           style: {
-            height: "100%",
-            position: "relative"
+            ...sizes[iframeSize]
           },
-          children: [loader && loading && /* @__PURE__ */jsx(Flex, {
-            justify: "center",
-            align: "center",
-            style: {
-              inset: "0",
-              position: "absolute"
-            },
-            children: /* @__PURE__ */jsx(Flex, {
-              style: {
-                ...sizes[iframeSize],
-                backgroundColor: "rgba(0,0,0,0.2)"
-              },
-              justify: "center",
-              align: "center",
-              children: /* @__PURE__ */jsx(Card, {
-                padding: 4,
-                radius: 2,
-                shadow: 1,
-                children: /* @__PURE__ */jsxs(Flex, {
-                  align: "center",
-                  direction: "column",
-                  gap: 3,
-                  height: "fill",
-                  justify: "center",
-                  children: [/* @__PURE__ */jsx(Spinner, {}), loader && typeof loader === "string" && /* @__PURE__ */jsx(Text, {
-                    size: 1,
-                    children: loader
-                  })]
-                })
-              })
-            })
-          }), /* @__PURE__ */jsx("iframe", {
-            ref: iframe,
-            title: "preview",
-            style: sizes[iframeSize],
-            frameBorder: "0",
-            src: displayUrl,
-            ...attributes,
-            onLoad: handleIframeLoad
+          justify: "center",
+          align: "center",
+          direction: "column",
+          gap: 4,
+          children: [/* @__PURE__ */jsx(Spinner, {
+            muted: true
+          }), loader && typeof loader === "string" && /* @__PURE__ */jsx(Text, {
+            muted: true,
+            size: 1,
+            children: loader
           })]
         })
-      })]
+      })
+    }), /* @__PURE__ */jsx(motion.iframe, {
+      ref: iframe,
+      title: "preview",
+      frameBorder: "0",
+      style: {
+        maxHeight: "100%"
+      },
+      src: displayUrl,
+      initial: ["background", iframeSize],
+      variants: iframeVariants,
+      animate: [loader && loading ? "background" : "active", reloading ? "reloading" : "idle", iframeSize],
+      ...attributes,
+      onLoad: handleIframeLoad
     })]
   });
+});
+const spinnerVariants = {
+  initial: {
+    opacity: 1
+  },
+  animate: {
+    opacity: [0, 0, 1]
+  },
+  exit: {
+    opacity: [1, 0, 0]
+  }
+};
+const iframeVariants = {
+  ...sizes,
+  desktop: {
+    ...sizes.desktop,
+    boxShadow: "0 0 0 0px var(--card-shadow-outline-color)"
+  },
+  mobile: {
+    ...sizes.mobile,
+    boxShadow: "0 0 0 1px var(--card-shadow-outline-color)"
+  },
+  background: {
+    opacity: 0,
+    scale: 1
+  },
+  idle: {
+    scale: 1
+  },
+  reloading: {
+    scale: [1, 1, 1, 0.98]
+  },
+  active: {
+    opacity: [0, 0, 1],
+    scale: 1
+  }
+};
+function ReloadOnRevision(props) {
+  const {
+    revision,
+    handleReload,
+    _rev
+  } = props;
+  const [initialRev] = useState(_rev);
+  useEffect(() => {
+    if (_rev !== initialRev) {
+      const timeout = setTimeout(handleReload, Number(revision === true ? 300 : revision));
+      return () => clearTimeout(timeout);
+    }
+  }, [_rev, revision, handleReload, initialRev]);
+  return null;
+}
+function AsyncUrl(props) {
+  const {
+    urlSecretId,
+    setDisplayUrl,
+    setError
+  } = props;
+  const [displayed] = useState(props.displayed);
+  const [url] = useState(() => props.url);
+  const [urlSecret, setUrlSecret] = useState(null);
+  useEffect(() => {
+    if (urlSecretId && !urlSecret) return;
+    const getUrl = async signal => {
+      const resolveUrl = await url(displayed, urlSecret, abort.signal);
+      if (!signal.aborted && resolveUrl) {
+        setDisplayUrl(resolveUrl);
+      }
+    };
+    const abort = new AbortController();
+    getUrl(abort.signal).catch(error => error.name !== "AbortError" && setError(error));
+    return () => abort.abort();
+  }, [displayed, setDisplayUrl, setError, url, urlSecret, urlSecretId]);
+  if (urlSecretId) {
+    return /* @__PURE__ */jsx(GetUrlSecret, {
+      urlSecretId,
+      urlSecret,
+      setUrlSecret,
+      setError
+    });
+  }
+  return null;
+}
+function MissingSlugScreen() {
+  return /* @__PURE__ */jsx(Card, {
+    height: "fill",
+    children: /* @__PURE__ */jsx(Flex, {
+      align: "center",
+      height: "fill",
+      justify: "center",
+      padding: 4,
+      sizing: "border",
+      children: /* @__PURE__ */jsx(Container, {
+        width: 0,
+        children: /* @__PURE__ */jsx(Card, {
+          padding: 4,
+          radius: 2,
+          shadow: 1,
+          tone: "caution",
+          children: /* @__PURE__ */jsxs(Flex, {
+            children: [/* @__PURE__ */jsx(Box, {
+              children: /* @__PURE__ */jsx(Text, {
+                size: 1,
+                children: /* @__PURE__ */jsx(WarningOutlineIcon, {})
+              })
+            }), /* @__PURE__ */jsxs(Stack, {
+              flex: 1,
+              marginLeft: 3,
+              space: 3,
+              children: [/* @__PURE__ */jsx(Text, {
+                as: "h1",
+                size: 1,
+                weight: "bold",
+                children: "Missing slug"
+              }), /* @__PURE__ */jsx(Text, {
+                as: "p",
+                muted: true,
+                size: 1,
+                children: "Add a slug to see the preview."
+              })]
+            })]
+          })
+        })
+      })
+    })
+  });
 }
-export { Iframe as default };
+export { Iframe };
 //# sourceMappingURL=index.js.map