sanity-plugin-iframe-pane 4.0.0 → 5.0.0

package/lib/index.d.cts

@@ -1,75 +0,0 @@
-import type {HTMLAttributeReferrerPolicy} from 'react'
-import {SanityDocument} from 'sanity'
-import {usePerspective} from 'sanity'
-
-export declare function Iframe(props: IframeProps): React.JSX.Element
-
-export declare interface IframeOptions {
-  /**
-   * If you have multiple iframe instances side-by-side you need to give each a unique key.
-   */
-  key?: string
-  url:
-    | string
-    | UrlResolver
-    | {
-        /**
-         * The URL origin of where the preview is hosted, for example `https://example.com`.
-         * If it's an embedded Studio then set it to `'same-origin'`.
-         */
-        origin: 'same-origin' | string
-        /**
-         * The route to redirect to after enabling Draft Mode.
-         * If you don't have enough data to build the URL, return an `Error` instance to show an error message.
-         * @example `return new Error('Missing slug')`
-         * To prolong the loading state, return `undefined`
-         */
-        preview: string | UrlResolver
-        /**
-         * The route that enables Draft Mode
-         * @example '/api/draft'
-         */
-        draftMode: string
-      }
-  defaultSize?: IframeSizeKey
-  showDisplayUrl?: boolean
-  reload?: {
-    button?: boolean
-  }
-  attributes?: Partial<{
-    allow: string
-    referrerPolicy: HTMLAttributeReferrerPolicy | undefined
-    sandbox: string
-    onLoad: () => void
-  }>
-}
-
-export declare interface IframeProps {
-  document: {
-    displayed: SanityDocument
-    draft: SanityDocument | null
-    published: SanityDocument | null
-  }
-  options: IframeOptions
-}
-
-export declare type IframeSizeKey = keyof SizeProps
-
-export declare type Size = 'desktop' | 'mobile'
-
-export declare type SizeProps = {
-  [key in Size]: {
-    width: string | number
-    height: string | number
-  }
-}
-
-export declare type UrlResolver = (
-  document: SanityDocument | null,
-  perspective: Pick<
-    ReturnType<typeof usePerspective>,
-    'selectedPerspectiveName' | 'perspectiveStack'
-  >,
-) => string | Error | undefined | Promise<string | Error | undefined>
-
-export {}

package/lib/index.d.ts

@@ -1,75 +0,0 @@
-import type {HTMLAttributeReferrerPolicy} from 'react'
-import {SanityDocument} from 'sanity'
-import {usePerspective} from 'sanity'
-
-export declare function Iframe(props: IframeProps): React.JSX.Element
-
-export declare interface IframeOptions {
-  /**
-   * If you have multiple iframe instances side-by-side you need to give each a unique key.
-   */
-  key?: string
-  url:
-    | string
-    | UrlResolver
-    | {
-        /**
-         * The URL origin of where the preview is hosted, for example `https://example.com`.
-         * If it's an embedded Studio then set it to `'same-origin'`.
-         */
-        origin: 'same-origin' | string
-        /**
-         * The route to redirect to after enabling Draft Mode.
-         * If you don't have enough data to build the URL, return an `Error` instance to show an error message.
-         * @example `return new Error('Missing slug')`
-         * To prolong the loading state, return `undefined`
-         */
-        preview: string | UrlResolver
-        /**
-         * The route that enables Draft Mode
-         * @example '/api/draft'
-         */
-        draftMode: string
-      }
-  defaultSize?: IframeSizeKey
-  showDisplayUrl?: boolean
-  reload?: {
-    button?: boolean
-  }
-  attributes?: Partial<{
-    allow: string
-    referrerPolicy: HTMLAttributeReferrerPolicy | undefined
-    sandbox: string
-    onLoad: () => void
-  }>
-}
-
-export declare interface IframeProps {
-  document: {
-    displayed: SanityDocument
-    draft: SanityDocument | null
-    published: SanityDocument | null
-  }
-  options: IframeOptions
-}
-
-export declare type IframeSizeKey = keyof SizeProps
-
-export declare type Size = 'desktop' | 'mobile'
-
-export declare type SizeProps = {
-  [key in Size]: {
-    width: string | number
-    height: string | number
-  }
-}
-
-export declare type UrlResolver = (
-  document: SanityDocument | null,
-  perspective: Pick<
-    ReturnType<typeof usePerspective>,
-    'selectedPerspectiveName' | 'perspectiveStack'
-  >,
-) => string | Error | undefined | Promise<string | Error | undefined>
-
-export {}

package/lib/index.js

@@ -1,384 +0,0 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { MobileDeviceIcon, RefreshIcon, CopyIcon, LaunchIcon, WarningOutlineIcon } from "@sanity/icons";
-import { createPreviewSecret } from "@sanity/preview-url-secret/create-secret";
-import { definePreviewUrl } from "@sanity/preview-url-secret/define-preview-url";
-import { Text, useToast, Card, Flex, Tooltip, Button, Box, usePrefersReducedMotion, Spinner, Container, Stack } from "@sanity/ui";
-import { motion, MotionConfig, AnimatePresence } from "framer-motion";
-import { useMemo, useRef, useState, useCallback, memo, forwardRef, useEffect, useTransition, Suspense } from "react";
-import { useActiveWorkspace, useCurrentUser, useClient, usePerspective } from "sanity";
-import { suspend } from "suspend-react";
-import { getRedirectTo } from "@sanity/preview-url-secret/get-redirect-to";
-function DisplayUrl(props) {
-  const truncatedUrl = useMemo(() => {
-    const url = getRedirectTo(props.url);
-    return `${url.origin === location.origin ? "" : url.origin}${url.pathname}${url.search}`;
-  }, [props.url]);
-  return /* @__PURE__ */ jsx(Text, { size: 0, textOverflow: "ellipsis", children: truncatedUrl });
-}
-const sizes = {
-  desktop: {
-    width: "100%",
-    height: "100%"
-  },
-  mobile: {
-    width: 414,
-    height: 746
-  }
-}, DEFAULT_SIZE = "desktop";
-function Toolbar(props) {
-  const { url, iframeSize, setIframeSize, reloading, showUrl, reloadButton, handleReload } = props, validUrl = url instanceof URL, input = useRef(null), { push: pushToast } = useToast(), [, copy] = useCopyToClipboard();
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      "textarea",
-      {
-        style: { position: "absolute", pointerEvents: "none", opacity: 0 },
-        ref: input,
-        value: validUrl ? url.toString() : "",
-        readOnly: !0,
-        tabIndex: -1
-      }
-    ),
-    /* @__PURE__ */ jsx(Card, { padding: 2, borderBottom: !0, children: /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 2, children: [
-      /* @__PURE__ */ jsx(Flex, { align: "center", gap: 1, children: /* @__PURE__ */ jsx(
-        Tooltip,
-        {
-          animate: !0,
-          content: /* @__PURE__ */ jsx(Text, { size: 1, style: { whiteSpace: "nowrap" }, children: iframeSize === "mobile" ? "Exit mobile preview" : "Preview mobile viewport" }),
-          padding: 2,
-          placement: "bottom-start",
-          children: /* @__PURE__ */ jsx(
-            Button,
-            {
-              disabled: !validUrl,
-              fontSize: [1],
-              padding: 2,
-              mode: iframeSize === "mobile" ? "default" : "ghost",
-              icon: MobileDeviceIcon,
-              onClick: () => setIframeSize(iframeSize === "mobile" ? "desktop" : "mobile")
-            }
-          )
-        }
-      ) }),
-      /* @__PURE__ */ jsx(Box, { flex: 1, children: showUrl && validUrl && /* @__PURE__ */ jsx(DisplayUrl, { url }) }),
-      /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 1, children: [
-        reloadButton ? /* @__PURE__ */ jsx(
-          Tooltip,
-          {
-            animate: !0,
-            content: /* @__PURE__ */ jsx(Text, { size: 1, style: { whiteSpace: "nowrap" }, children: reloading ? "Reloading\u2026" : "Reload" }),
-            padding: 2,
-            children: /* @__PURE__ */ jsx(
-              Button,
-              {
-                disabled: !validUrl,
-                mode: "bleed",
-                fontSize: [1],
-                padding: 2,
-                icon: RefreshIcon,
-                loading: reloading,
-                "aria-label": "Reload",
-                onClick: () => handleReload()
-              }
-            )
-          }
-        ) : null,
-        /* @__PURE__ */ jsx(
-          Tooltip,
-          {
-            animate: !0,
-            content: /* @__PURE__ */ jsx(Text, { size: 1, style: { whiteSpace: "nowrap" }, children: "Copy URL" }),
-            padding: 2,
-            children: /* @__PURE__ */ jsx(
-              Button,
-              {
-                mode: "bleed",
-                disabled: !validUrl,
-                fontSize: [1],
-                icon: CopyIcon,
-                padding: [2],
-                "aria-label": "Copy URL",
-                onClick: () => {
-                  input?.current?.value && copy(input.current.value).then((copied) => {
-                    pushToast(copied ? {
-                      closable: !0,
-                      status: "success",
-                      title: "The URL is copied to the clipboard"
-                    } : {
-                      closable: !0,
-                      status: "error",
-                      title: "Failed to copy the URL to the clipboard"
-                    });
-                  });
-                }
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Tooltip,
-          {
-            animate: !0,
-            content: /* @__PURE__ */ jsx(Text, { size: 1, style: { whiteSpace: "nowrap" }, children: "Open URL in a new tab" }),
-            padding: 2,
-            placement: "bottom-end",
-            children: /* @__PURE__ */ jsx(
-              Button,
-              {
-                disabled: !validUrl,
-                fontSize: [1],
-                icon: LaunchIcon,
-                mode: "ghost",
-                paddingY: [2],
-                text: "Open",
-                "aria-label": "Open URL in a new tab",
-                onClick: validUrl ? () => window.open(url.toString()) : void 0
-              }
-            )
-          }
-        )
-      ] })
-    ] }) })
-  ] });
-}
-function useCopyToClipboard() {
-  const [copiedText, setCopiedText] = useState(null), copy = useCallback(async (text) => {
-    if (!navigator?.clipboard)
-      return console.warn("Clipboard not supported"), !1;
-    try {
-      return await navigator.clipboard.writeText(text), setCopiedText(text), !0;
-    } catch (error) {
-      return console.warn("Copy failed", error), setCopiedText(null), !1;
-    }
-  }, []);
-  return [copiedText, copy];
-}
-const MotionFlex = motion.create(Flex);
-function encodeStudioPerspective(studioPerspective) {
-  return Array.isArray(studioPerspective) ? studioPerspective.join(",") : studioPerspective;
-}
-function Iframe(props) {
-  const { document, options } = props, draft = document.draft || document.published || document.displayed, { defaultSize = DEFAULT_SIZE, reload, attributes, showDisplayUrl = !0, key } = options, basePath = useActiveWorkspace()?.activeWorkspace?.basePath || "/", urlRef = useRef(options.url), [draftSnapshot, setDraftSnapshot] = useState(() => ({ key, draft }));
-  useEffect(() => {
-    urlRef.current = options.url;
-  }, [options.url]), useEffect(() => {
-    JSON.stringify({ key, draft }) !== JSON.stringify(draftSnapshot) && startTransition(() => setDraftSnapshot({ key, draft }));
-  }, [draft, draftSnapshot, key]);
-  const currentUser = useCurrentUser(), client = useClient({ apiVersion: "2023-10-16" }), [expiresAt, setExpiresAt] = useState(), previewSecretRef = useRef(void 0), [isResolvingUrl, startTransition] = useTransition(), { perspectiveStack, selectedPerspectiveName } = usePerspective(), perspective = useMemo(
-    () => ({
-      perspectiveStack,
-      selectedPerspectiveName
-    }),
-    [perspectiveStack, selectedPerspectiveName]
-  ), url = useCallback(
-    // eslint-disable-next-line @typescript-eslint/no-shadow
-    async (draft2) => {
-      if (typeof location > "u")
-        return;
-      const urlProp = urlRef.current;
-      if (typeof urlProp == "string")
-        return new URL(urlProp, location.origin);
-      if (typeof urlProp == "function") {
-        const url2 = await urlProp(draft2, perspective);
-        return typeof url2 == "string" ? new URL(url2, location.origin) : url2;
-      }
-      if (typeof urlProp == "object") {
-        const preview = typeof urlProp.preview == "function" ? await urlProp.preview(draft2, perspective) : urlProp.preview;
-        if (typeof preview != "string")
-          return preview;
-        if (!previewSecretRef.current) {
-          const { secret, expiresAt: expiresAt2 } = await createPreviewSecret(
-            client,
-            "sanity-plugin-iframe-pane",
-            location.href,
-            currentUser?.id
-          );
-          previewSecretRef.current = secret, startTransition(() => setExpiresAt(expiresAt2.getTime()));
-        }
-        const url2 = await definePreviewUrl({
-          origin: urlProp.origin === "same-origin" ? location.origin : urlProp.origin,
-          preview,
-          draftMode: {
-            enable: urlProp.draftMode
-          }
-        })({
-          client,
-          previewUrlSecret: previewSecretRef.current,
-          previewSearchParam: null,
-          studioBasePath: basePath,
-          studioPreviewPerspective: encodeStudioPerspective(perspective.perspectiveStack)
-        });
-        return new URL(url2, location.origin);
-      }
-    },
-    [basePath, client, currentUser?.id, perspective]
-  );
-  return useEffect(() => {
-    if (expiresAt) {
-      const timeout = setTimeout(
-        () => {
-          startTransition(() => setExpiresAt(void 0)), previewSecretRef.current = void 0;
-        },
-        Math.max(0, expiresAt - Date.now())
-      );
-      return () => clearTimeout(timeout);
-    }
-  }, [expiresAt]), /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(Loading, { iframeSize: "desktop" }), children: /* @__PURE__ */ jsx(
-    IframeInner,
-    {
-      _key: draftSnapshot.key,
-      draftSnapshot: draftSnapshot.draft,
-      url,
-      isResolvingUrl,
-      attributes,
-      perspective,
-      defaultSize,
-      reload,
-      showDisplayUrl,
-      userId: currentUser?.id
-    },
-    `${draftSnapshot.key}-${selectedPerspectiveName || "draft"}`
-  ) });
-}
-const IframeInner = memo(function(props) {
-  const {
-    isResolvingUrl,
-    defaultSize = DEFAULT_SIZE,
-    reload,
-    attributes = {},
-    showDisplayUrl = !0,
-    draftSnapshot,
-    userId,
-    expiresAt,
-    perspective: { selectedPerspectiveName, perspectiveStack },
-    _key
-  } = props, [iframeSize, setIframeSize] = useState(sizes?.[defaultSize] ? defaultSize : DEFAULT_SIZE), prefersReducedMotion = usePrefersReducedMotion(), url = suspend(
-    () => props.url(draftSnapshot),
-    [
-      // Cache based on a few specific conditions
-      "sanity-plugin-iframe-pane",
-      draftSnapshot,
-      selectedPerspectiveName,
-      perspectiveStack,
-      userId,
-      expiresAt,
-      _key,
-      resolveUUID
-    ]
-  ), [loading, setLoading] = useState(!0), [_reloading, setReloading] = useState(!1), reloading = _reloading || isResolvingUrl, iframe = useRef(null), handleReload = useCallback(() => {
-    iframe?.current && (iframe.current.src = iframe.current.src, setReloading(!0));
-  }, []);
-  return /* @__PURE__ */ jsx(MotionConfig, { transition: prefersReducedMotion ? { duration: 0 } : void 0, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", style: { height: "100%" }, children: [
-    /* @__PURE__ */ jsx(
-      Toolbar,
-      {
-        url,
-        iframeSize,
-        reloading,
-        setIframeSize,
-        showUrl: showDisplayUrl,
-        reloadButton: !!reload?.button,
-        handleReload
-      }
-    ),
-    url instanceof Error ? /* @__PURE__ */ jsx(ErrorCard, { error: url }) : /* @__PURE__ */ jsx(Card, { tone: "transparent", style: { height: "100%" }, children: /* @__PURE__ */ jsx(
-      Frame,
-      {
-        ref: iframe,
-        loading,
-        reloading,
-        iframeSize,
-        setReloading,
-        setLoading,
-        url,
-        attributes
-      }
-    ) })
-  ] }) });
-}), Frame = forwardRef(function(props, iframe) {
-  const { loading, setLoading, iframeSize, attributes, reloading, url, setReloading } = props;
-  function handleIframeLoad() {
-    setLoading(!1), setReloading(!1), 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: !url || loading && /* @__PURE__ */ jsx(
-      MotionFlex,
-      {
-        initial: "initial",
-        animate: "animate",
-        exit: "exit",
-        variants: spinnerVariants,
-        justify: "center",
-        align: "center",
-        style: { inset: "0", position: "absolute" },
-        children: /* @__PURE__ */ jsx(Loading, { iframeSize })
-      }
-    ) }),
-    url && /* @__PURE__ */ jsx(
-      motion.iframe,
-      {
-        ref: iframe,
-        title: "preview",
-        frameBorder: "0",
-        style: { maxHeight: "100%" },
-        src: url.toString(),
-        initial: ["background", iframeSize],
-        variants: iframeVariants,
-        animate: [
-          loading ? "background" : "active",
-          reloading ? "reloading" : "idle",
-          iframeSize
-        ],
-        ...attributes,
-        onLoad: handleIframeLoad
-      }
-    )
-  ] });
-}), spinnerVariants = {
-  initial: { opacity: 1 },
-  animate: { opacity: [0, 0, 1] },
-  exit: { opacity: [1, 0, 0] }
-}, 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 Loading({ iframeSize }) {
-  return /* @__PURE__ */ jsxs(Flex, { style: { ...sizes[iframeSize] }, justify: "center", align: "center", direction: "column", gap: 4, children: [
-    /* @__PURE__ */ jsx(Spinner, { muted: !0 }),
-    /* @__PURE__ */ jsx(Text, { muted: !0, size: 1, children: "Loading\u2026" })
-  ] });
-}
-function ErrorCard({ error }) {
-  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: error.name }),
-      /* @__PURE__ */ jsx(Text, { as: "p", muted: !0, size: 1, children: error.message })
-    ] })
-  ] }) }) }) }) });
-}
-const resolveUUID = Symbol();
-export {
-  Iframe
-};
-//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":["../src/DisplayUrl.tsx","../src/Toolbar.tsx","../src/Iframe.tsx"],"sourcesContent":["import {getRedirectTo} from '@sanity/preview-url-secret/get-redirect-to'\nimport {Text} from '@sanity/ui'\nimport {useMemo} from 'react'\n\nexport function DisplayUrl(props: {url: URL}) {\n  const truncatedUrl = useMemo(() => {\n    const url = getRedirectTo(props.url)\n    return `${url.origin === location.origin ? '' : url.origin}${url.pathname}${url.search}`\n  }, [props.url])\n\n  return (\n    <Text size={0} textOverflow=\"ellipsis\">\n      {truncatedUrl}\n    </Text>\n  )\n}\n","import {CopyIcon, LaunchIcon, MobileDeviceIcon, RefreshIcon} from '@sanity/icons'\nimport {Box, Button, Card, Flex, Text, Tooltip, useToast} from '@sanity/ui'\nimport {useCallback, useRef, useState} from 'react'\n\nimport {DisplayUrl} from './DisplayUrl'\nimport type {IframeSizeKey, SizeProps} from './types'\n\nexport const sizes: SizeProps = {\n  desktop: {\n    width: '100%',\n    height: '100%',\n  },\n  mobile: {\n    width: 414,\n    height: 746,\n  },\n}\n\nexport const DEFAULT_SIZE = 'desktop'\n\nexport interface ToolbarProps {\n  url: URL | Error | undefined\n  iframeSize: IframeSizeKey\n  setIframeSize: (size: IframeSizeKey) => void\n  showUrl: boolean\n  reloading: boolean\n  reloadButton: boolean\n  handleReload: () => void\n}\nexport function Toolbar(props: ToolbarProps) {\n  const {url, iframeSize, setIframeSize, reloading, showUrl, reloadButton, handleReload} = props\n  const validUrl = url instanceof URL\n\n  const input = useRef<HTMLTextAreaElement>(null)\n  const {push: pushToast} = useToast()\n  const [, copy] = useCopyToClipboard()\n\n  return (\n    <>\n      <textarea\n        style={{position: 'absolute', pointerEvents: 'none', opacity: 0}}\n        ref={input}\n        value={validUrl ? url.toString() : ''}\n        readOnly\n        tabIndex={-1}\n      />\n      <Card padding={2} borderBottom>\n        <Flex align=\"center\" gap={2}>\n          <Flex align=\"center\" gap={1}>\n            <Tooltip\n              animate\n              content={\n                <Text size={1} style={{whiteSpace: 'nowrap'}}>\n                  {iframeSize === 'mobile' ? 'Exit mobile preview' : 'Preview mobile viewport'}\n                </Text>\n              }\n              padding={2}\n              placement=\"bottom-start\"\n            >\n              <Button\n                disabled={!validUrl}\n                fontSize={[1]}\n                padding={2}\n                mode={iframeSize === 'mobile' ? 'default' : 'ghost'}\n                icon={MobileDeviceIcon}\n                onClick={() => setIframeSize(iframeSize === 'mobile' ? 'desktop' : 'mobile')}\n              />\n            </Tooltip>\n          </Flex>\n          <Box flex={1}>{showUrl && validUrl && <DisplayUrl url={url} />}</Box>\n          <Flex align=\"center\" gap={1}>\n            {reloadButton ? (\n              <Tooltip\n                animate\n                content={\n                  <Text size={1} style={{whiteSpace: 'nowrap'}}>\n                    {reloading ? 'Reloading…' : 'Reload'}\n                  </Text>\n                }\n                padding={2}\n              >\n                <Button\n                  disabled={!validUrl}\n                  mode=\"bleed\"\n                  fontSize={[1]}\n                  padding={2}\n                  icon={RefreshIcon}\n                  loading={reloading}\n                  aria-label=\"Reload\"\n                  onClick={() => handleReload()}\n                />\n              </Tooltip>\n            ) : null}\n            <Tooltip\n              animate\n              content={\n                <Text size={1} style={{whiteSpace: 'nowrap'}}>\n                  Copy URL\n                </Text>\n              }\n              padding={2}\n            >\n              <Button\n                mode=\"bleed\"\n                disabled={!validUrl}\n                fontSize={[1]}\n                icon={CopyIcon}\n                padding={[2]}\n                aria-label=\"Copy URL\"\n                onClick={() => {\n                  if (!input?.current?.value) return\n\n                  copy(input.current.value).then((copied) => {\n                    if (copied) {\n                      pushToast({\n                        closable: true,\n                        status: 'success',\n                        title: 'The URL is copied to the clipboard',\n                      })\n                    } else {\n                      pushToast({\n                        closable: true,\n                        status: 'error',\n                        title: 'Failed to copy the URL to the clipboard',\n                      })\n                    }\n                  })\n                }}\n              />\n            </Tooltip>\n            <Tooltip\n              animate\n              content={\n                <Text size={1} style={{whiteSpace: 'nowrap'}}>\n                  Open URL in a new tab\n                </Text>\n              }\n              padding={2}\n              placement=\"bottom-end\"\n            >\n              <Button\n                disabled={!validUrl}\n                fontSize={[1]}\n                icon={LaunchIcon}\n                mode=\"ghost\"\n                paddingY={[2]}\n                text=\"Open\"\n                aria-label=\"Open URL in a new tab\"\n                onClick={validUrl ? () => window.open(url.toString()) : undefined}\n              />\n            </Tooltip>\n          </Flex>\n        </Flex>\n      </Card>\n    </>\n  )\n}\n\ntype CopiedValue = string | null\n\ntype CopyFn = (text: string) => Promise<boolean>\n\nfunction useCopyToClipboard(): [CopiedValue, CopyFn] {\n  const [copiedText, setCopiedText] = useState<CopiedValue>(null)\n\n  const copy: CopyFn = useCallback(async (text) => {\n    if (!navigator?.clipboard) {\n      console.warn('Clipboard not supported')\n      return false\n    }\n\n    // Try to save to clipboard then save it in the state if worked\n    try {\n      await navigator.clipboard.writeText(text)\n      setCopiedText(text)\n      return true\n    } catch (error) {\n      console.warn('Copy failed', error)\n      setCopiedText(null)\n      return false\n    }\n  }, [])\n\n  return [copiedText, copy]\n}\n","import {WarningOutlineIcon} from '@sanity/icons'\nimport {createPreviewSecret} from '@sanity/preview-url-secret/create-secret'\nimport {definePreviewUrl} from '@sanity/preview-url-secret/define-preview-url'\nimport {Box, Card, Container, Flex, Spinner, Stack, Text, usePrefersReducedMotion} from '@sanity/ui'\nimport {AnimatePresence, motion, MotionConfig} from 'framer-motion'\nimport type {HTMLAttributeReferrerPolicy} from 'react'\nimport {\n  forwardRef,\n  memo,\n  Suspense,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  useTransition,\n} from 'react'\nimport {\n  type SanityDocument,\n  useActiveWorkspace,\n  useClient,\n  useCurrentUser,\n  usePerspective,\n} from 'sanity'\nimport {suspend} from 'suspend-react'\n\nimport {DEFAULT_SIZE, sizes, Toolbar} from './Toolbar'\nimport type {IframeSizeKey} from './types'\n\nexport type UrlResolver = (\n  document: SanityDocument | null,\n  perspective: Pick<\n    ReturnType<typeof usePerspective>,\n    'selectedPerspectiveName' | 'perspectiveStack'\n  >,\n) => string | Error | undefined | Promise<string | Error | undefined>\n\nexport type {IframeSizeKey}\n\nexport interface IframeOptions {\n  /**\n   * If you have multiple iframe instances side-by-side you need to give each a unique key.\n   */\n  key?: string\n  url:\n    | string\n    | UrlResolver\n    | {\n        /**\n         * The URL origin of where the preview is hosted, for example `https://example.com`.\n         * If it's an embedded Studio then set it to `'same-origin'`.\n         */\n        origin: 'same-origin' | string\n        /**\n         * The route to redirect to after enabling Draft Mode.\n         * If you don't have enough data to build the URL, return an `Error` instance to show an error message.\n         * @example `return new Error('Missing slug')`\n         * To prolong the loading state, return `undefined`\n         */\n        preview: string | UrlResolver\n        /**\n         * The route that enables Draft Mode\n         * @example '/api/draft'\n         */\n        draftMode: string\n      }\n  defaultSize?: IframeSizeKey\n  showDisplayUrl?: boolean\n  reload?: {\n    button?: boolean\n  }\n  attributes?: Partial<{\n    allow: string\n    referrerPolicy: HTMLAttributeReferrerPolicy | undefined\n    sandbox: string\n    onLoad: () => void\n  }>\n}\n\nconst MotionFlex = motion.create(Flex)\n\nexport interface IframeProps {\n  document: {\n    displayed: SanityDocument\n    draft: SanityDocument | null\n    published: SanityDocument | null\n  }\n  options: IframeOptions\n}\n\nfunction encodeStudioPerspective(studioPerspective: string[] | string): string {\n  return Array.isArray(studioPerspective) ? studioPerspective.join(',') : studioPerspective\n}\n\nexport function Iframe(props: IframeProps): React.JSX.Element {\n  const {document, options} = props\n  const draft = document.draft || document.published || document.displayed\n\n  const {defaultSize = DEFAULT_SIZE, reload, attributes, showDisplayUrl = true, key} = options\n\n  const workspace = useActiveWorkspace()\n  const basePath = workspace?.activeWorkspace?.basePath || '/'\n  const urlRef = useRef(options.url)\n  const [draftSnapshot, setDraftSnapshot] = useState(() => ({key, draft}))\n  useEffect(() => {\n    urlRef.current = options.url\n  }, [options.url])\n  useEffect(() => {\n    if (JSON.stringify({key, draft}) !== JSON.stringify(draftSnapshot)) {\n      startTransition(() => setDraftSnapshot({key, draft}))\n    }\n  }, [draft, draftSnapshot, key])\n  const currentUser = useCurrentUser()\n  const client = useClient({apiVersion: '2023-10-16'})\n  const [expiresAt, setExpiresAt] = useState<number | undefined>()\n  const previewSecretRef = useRef<string | undefined>(undefined)\n  const [isResolvingUrl, startTransition] = useTransition()\n  const {perspectiveStack, selectedPerspectiveName} = usePerspective()\n  const perspective = useMemo(\n    () => ({\n      perspectiveStack,\n      selectedPerspectiveName,\n    }),\n    [perspectiveStack, selectedPerspectiveName],\n  )\n\n  const url = useCallback(\n    // eslint-disable-next-line @typescript-eslint/no-shadow\n    async (draft: SanityDocument | null) => {\n      if (typeof location === 'undefined') {\n        return undefined\n      }\n      const urlProp = urlRef.current\n      if (typeof urlProp === 'string') {\n        return new URL(urlProp, location.origin)\n      }\n      if (typeof urlProp === 'function') {\n        // eslint-disable-next-line @typescript-eslint/no-shadow\n        const url = await urlProp(draft, perspective)\n        return typeof url === 'string' ? new URL(url, location.origin) : url\n      }\n      if (typeof urlProp === 'object') {\n        const preview =\n          typeof urlProp.preview === 'function'\n            ? await urlProp.preview(draft, perspective)\n            : urlProp.preview\n        if (typeof preview !== 'string') {\n          return preview\n        }\n        if (!previewSecretRef.current) {\n          // eslint-disable-next-line @typescript-eslint/no-shadow\n          const {secret, expiresAt} = await createPreviewSecret(\n            client,\n            'sanity-plugin-iframe-pane',\n            location.href,\n            currentUser?.id,\n          )\n          previewSecretRef.current = secret\n          startTransition(() => setExpiresAt(expiresAt.getTime()))\n        }\n\n        const resolvePreviewUrl = definePreviewUrl({\n          origin: urlProp.origin === 'same-origin' ? location.origin : urlProp.origin,\n          preview,\n          draftMode: {\n            enable: urlProp.draftMode,\n          },\n        })\n        // eslint-disable-next-line @typescript-eslint/no-shadow\n        const url = await resolvePreviewUrl({\n          client,\n          previewUrlSecret: previewSecretRef.current,\n          previewSearchParam: null,\n          studioBasePath: basePath,\n          studioPreviewPerspective: encodeStudioPerspective(perspective.perspectiveStack),\n        })\n        return new URL(url, location.origin)\n      }\n      return undefined\n    },\n    [basePath, client, currentUser?.id, perspective],\n  )\n  useEffect(() => {\n    if (expiresAt) {\n      const timeout = setTimeout(\n        () => {\n          startTransition(() => setExpiresAt(undefined))\n          previewSecretRef.current = undefined\n        },\n        Math.max(0, expiresAt - Date.now()),\n      )\n      return () => clearTimeout(timeout)\n    }\n    return undefined\n  }, [expiresAt])\n\n  return (\n    <Suspense fallback={<Loading iframeSize=\"desktop\" />}>\n      <IframeInner\n        key={`${draftSnapshot.key}-${selectedPerspectiveName || 'draft'}`}\n        _key={draftSnapshot.key}\n        draftSnapshot={draftSnapshot.draft}\n        url={url}\n        isResolvingUrl={isResolvingUrl}\n        attributes={attributes}\n        perspective={perspective}\n        defaultSize={defaultSize}\n        reload={reload}\n        showDisplayUrl={showDisplayUrl}\n        userId={currentUser?.id}\n      />\n    </Suspense>\n  )\n}\n\nexport interface IframeInnerProps extends Omit<IframeOptions, 'url'> {\n  url: (draftSnapshot: SanityDocument | null) => Promise<URL | Error | undefined>\n  isResolvingUrl: boolean\n  draftSnapshot: SanityDocument | null\n  perspective: Parameters<UrlResolver>[1]\n  userId?: string\n  expiresAt?: number\n  _key?: string\n}\nconst IframeInner = memo(function IframeInner(props: IframeInnerProps) {\n  const {\n    isResolvingUrl,\n    defaultSize = DEFAULT_SIZE,\n    reload,\n    attributes = {},\n    showDisplayUrl = true,\n    draftSnapshot,\n    userId,\n    expiresAt,\n    perspective: {selectedPerspectiveName, perspectiveStack},\n    _key,\n  } = props\n  const [iframeSize, setIframeSize] = useState(sizes?.[defaultSize] ? defaultSize : DEFAULT_SIZE)\n\n  const prefersReducedMotion = usePrefersReducedMotion()\n\n  const url = suspend(\n    () => props.url(draftSnapshot),\n    [\n      // Cache based on a few specific conditions\n      'sanity-plugin-iframe-pane',\n      draftSnapshot,\n      selectedPerspectiveName,\n      perspectiveStack,\n      userId,\n      expiresAt,\n      _key,\n      resolveUUID,\n    ],\n  )\n\n  const [loading, setLoading] = useState(true)\n  const [_reloading, setReloading] = useState(false)\n  const reloading = _reloading || isResolvingUrl\n\n  const iframe = useRef<HTMLIFrameElement>(null)\n\n  const handleReload = useCallback(() => {\n    if (!iframe?.current) {\n      return\n    }\n\n    // Funky way to reload an iframe without CORS issues\n    // eslint-disable-next-line no-self-assign\n    iframe.current.src = iframe.current.src\n\n    setReloading(true)\n  }, [])\n\n  return (\n    <MotionConfig transition={prefersReducedMotion ? {duration: 0} : undefined}>\n      <Flex direction=\"column\" style={{height: '100%'}}>\n        <Toolbar\n          url={url}\n          iframeSize={iframeSize}\n          reloading={reloading}\n          setIframeSize={setIframeSize}\n          showUrl={showDisplayUrl}\n          reloadButton={!!reload?.button}\n          handleReload={handleReload}\n        />\n        {url instanceof Error ? (\n          <ErrorCard error={url} />\n        ) : (\n          <Card tone=\"transparent\" style={{height: '100%'}}>\n            <Frame\n              ref={iframe}\n              loading={loading}\n              reloading={reloading}\n              iframeSize={iframeSize}\n              setReloading={setReloading}\n              setLoading={setLoading}\n              url={url}\n              attributes={attributes}\n            />\n          </Card>\n        )}\n      </Flex>\n    </MotionConfig>\n  )\n})\n\ninterface FrameProps extends Required<Pick<IframeOptions, 'attributes'>> {\n  loading: boolean\n  reloading: boolean\n  setLoading: (loading: boolean) => void\n  setReloading: (reloading: boolean) => void\n  iframeSize: IframeSizeKey\n  url: URL | undefined\n}\nconst Frame = forwardRef(function Frame(\n  props: FrameProps,\n  iframe: React.ForwardedRef<HTMLIFrameElement>,\n) {\n  const {loading, setLoading, iframeSize, attributes, reloading, url, setReloading} = props\n\n  function handleIframeLoad() {\n    setLoading(false)\n    setReloading(false)\n    // Run onLoad from attributes\n    if (attributes.onLoad && typeof attributes.onLoad === 'function') {\n      attributes.onLoad()\n    }\n  }\n\n  return (\n    <Flex align=\"center\" justify=\"center\" style={{height: '100%', position: 'relative'}}>\n      <AnimatePresence>\n        {!url ||\n          (loading && (\n            <MotionFlex\n              initial=\"initial\"\n              animate=\"animate\"\n              exit=\"exit\"\n              variants={spinnerVariants}\n              justify=\"center\"\n              align=\"center\"\n              style={{inset: '0', position: 'absolute'}}\n            >\n              <Loading iframeSize={iframeSize} />\n            </MotionFlex>\n          ))}\n      </AnimatePresence>\n      {url && (\n        <motion.iframe\n          ref={iframe}\n          title=\"preview\"\n          frameBorder=\"0\"\n          style={{maxHeight: '100%'}}\n          src={url.toString()}\n          initial={['background', iframeSize]}\n          variants={iframeVariants}\n          animate={[\n            loading ? 'background' : 'active',\n            reloading ? 'reloading' : 'idle',\n            iframeSize,\n          ]}\n          {...attributes}\n          onLoad={handleIframeLoad}\n        />\n      )}\n    </Flex>\n  )\n})\n\nconst spinnerVariants = {\n  initial: {opacity: 1},\n  animate: {opacity: [0, 0, 1]},\n  exit: {opacity: [1, 0, 0]},\n}\n\nconst iframeVariants = {\n  ...sizes,\n  desktop: {\n    ...sizes.desktop,\n    boxShadow: '0 0 0 0px var(--card-shadow-outline-color)',\n  },\n  mobile: {\n    ...sizes.mobile,\n    boxShadow: '0 0 0 1px var(--card-shadow-outline-color)',\n  },\n  background: {\n    opacity: 0,\n    scale: 1,\n  },\n  idle: {\n    scale: 1,\n  },\n  reloading: {\n    scale: [1, 1, 1, 0.98],\n  },\n  active: {\n    opacity: [0, 0, 1],\n    scale: 1,\n  },\n}\n\nfunction Loading({iframeSize}: {iframeSize: IframeSizeKey}) {\n  return (\n    <Flex style={{...sizes[iframeSize]}} justify=\"center\" align=\"center\" direction=\"column\" gap={4}>\n      <Spinner muted />\n      <Text muted size={1}>\n        Loading…\n      </Text>\n    </Flex>\n  )\n}\n\nexport function ErrorCard({error}: {error: Error}) {\n  return (\n    <Card height=\"fill\">\n      <Flex align=\"center\" height=\"fill\" justify=\"center\" padding={4} sizing=\"border\">\n        <Container width={0}>\n          <Card padding={4} radius={2} shadow={1} tone=\"caution\">\n            <Flex>\n              <Box>\n                <Text size={1}>\n                  <WarningOutlineIcon />\n                </Text>\n              </Box>\n              <Stack flex={1} marginLeft={3} space={3}>\n                <Text as=\"h1\" size={1} weight=\"bold\">\n                  {error.name}\n                </Text>\n                <Text as=\"p\" muted size={1}>\n                  {error.message}\n                </Text>\n              </Stack>\n            </Flex>\n          </Card>\n        </Container>\n      </Flex>\n    </Card>\n  )\n}\n\n// https://github.com/pmndrs/suspend-react?tab=readme-ov-file#making-cache-keys-unique\nconst resolveUUID = Symbol()\n"],"names":["draft","url","expiresAt"],"mappings":"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"}

package/sanity.json

@@ -1,8 +0,0 @@
-{
-  "parts": [
-    {
-      "implements": "part:@sanity/base/sanity-root",
-      "path": "./v2-incompatible.js"
-    }
-  ]
-}

package/src/DisplayUrl.tsx

@@ -1,16 +0,0 @@
-import {getRedirectTo} from '@sanity/preview-url-secret/get-redirect-to'
-import {Text} from '@sanity/ui'
-import {useMemo} from 'react'
-
-export function DisplayUrl(props: {url: URL}) {
-  const truncatedUrl = useMemo(() => {
-    const url = getRedirectTo(props.url)
-    return `${url.origin === location.origin ? '' : url.origin}${url.pathname}${url.search}`
-  }, [props.url])
-
-  return (
-    <Text size={0} textOverflow="ellipsis">
-      {truncatedUrl}
-    </Text>
-  )
-}