sanity-plugin-iframe-pane 2.3.0 → 2.3.1-beta.1

package/README.md

@@ -7,7 +7,7 @@ Display any URL in a View Pane, along with helpful buttons to Copy the URL or op
 
 Accepts either a string or an async function to resolve a URL based on the current document.
 
-![Iframe View Pane](https://user-images.githubusercontent.com/9684022/144389599-496e1e50-62a7-4d5c-903a-889885eb8aab.png)
+![Iframe View Pane](https://user-images.githubusercontent.com/9684022/226924036-ef9122e6-e498-42aa-ad01-8c4acdc9e65e.png)
 
 ## Installation
 
@@ -23,7 +23,7 @@ yarn add sanity-plugin-iframe-pane
 
 ## Usage
 
-This is designed to be used as a [Component inside of a View](https://www.sanity.io/docs/structure-builder-reference#c0c8284844b7). 
+This is designed to be used as a [Component inside of a View](https://www.sanity.io/docs/structure-builder-reference#c0c8284844b7).
 
 The simplest way to configure views is by customizing the `defaultDocumentNode` setting in the `deskTool()` plugin.
 
@@ -45,7 +45,6 @@ export default defineConfig({
 A basic example of a custom `defaultDocumentNode` function, to only show the Iframe Pane on `movie` type documents.
 
 ```ts
-
 // ./src/defaultDocumentNode.ts
 
 import {DefaultDocumentNodeResolver} from 'sanity/desk'

package/lib/index.cjs

@@ -0,0 +1,216 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var icons = require('@sanity/icons');
+var ui = require('@sanity/ui');
+var react = require('react');
+var usehooksTs = require('usehooks-ts');
+const sizes = {
+  desktop: {
+    width: "100%",
+    height: "100%",
+    maxHeight: "100%"
+  },
+  mobile: {
+    width: 414,
+    height: "100%",
+    maxHeight: 736
+  }
+};
+const DEFAULT_SIZE = "desktop";
+function Iframe(props) {
+  const {
+    document: sanityDocument,
+    options
+  } = props;
+  const {
+    url,
+    defaultSize = DEFAULT_SIZE,
+    reload,
+    loader,
+    attributes = {},
+    showDisplayUrl = true
+  } = options;
+  const [displayUrl, setDisplayUrl] = react.useState(url && typeof url === "string" ? url : "");
+  const [iframeSize, setIframeSize] = react.useState((sizes == null ? void 0 : sizes[defaultSize]) ? defaultSize : DEFAULT_SIZE);
+  const [loading, setLoading] = react.useState(false);
+  const input = react.useRef(null);
+  const iframe = react.useRef(null);
+  const {
+    displayed
+  } = sanityDocument;
+  const [, copy] = usehooksTs.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();
+    }
+  }
+  react.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]);
+  react.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__ */jsxRuntime.jsx(ui.ThemeProvider, {
+      children: /* @__PURE__ */jsxRuntime.jsx(ui.Flex, {
+        padding: 5,
+        align: "center",
+        justify: "center",
+        children: /* @__PURE__ */jsxRuntime.jsx(ui.Spinner, {})
+      })
+    });
+  }
+  return /* @__PURE__ */jsxRuntime.jsxs(ui.ThemeProvider, {
+    children: [/* @__PURE__ */jsxRuntime.jsx("textarea", {
+      style: {
+        position: "absolute",
+        pointerEvents: "none",
+        opacity: 0
+      },
+      ref: input,
+      value: displayUrl,
+      readOnly: true,
+      tabIndex: -1
+    }), /* @__PURE__ */jsxRuntime.jsxs(ui.Flex, {
+      direction: "column",
+      style: {
+        height: "100%"
+      },
+      children: [/* @__PURE__ */jsxRuntime.jsx(ui.Card, {
+        padding: 2,
+        borderBottom: true,
+        children: /* @__PURE__ */jsxRuntime.jsxs(ui.Flex, {
+          align: "center",
+          gap: 2,
+          children: [/* @__PURE__ */jsxRuntime.jsx(ui.Flex, {
+            align: "center",
+            gap: 1,
+            children: /* @__PURE__ */jsxRuntime.jsx(ui.Button, {
+              fontSize: [1],
+              padding: 2,
+              tone: "primary",
+              mode: iframeSize === "mobile" ? "default" : "ghost",
+              icon: icons.MobileDeviceIcon,
+              onClick: () => setIframeSize(iframeSize === "mobile" ? "desktop" : "mobile")
+            })
+          }), /* @__PURE__ */jsxRuntime.jsx(ui.Box, {
+            flex: 1,
+            children: showDisplayUrl && /* @__PURE__ */jsxRuntime.jsx(ui.Text, {
+              size: 0,
+              textOverflow: "ellipsis",
+              children: displayUrl
+            })
+          }), /* @__PURE__ */jsxRuntime.jsxs(ui.Flex, {
+            align: "center",
+            gap: 1,
+            children: [(reload == null ? void 0 : reload.button) ? /* @__PURE__ */jsxRuntime.jsx(ui.Button, {
+              fontSize: [1],
+              padding: 2,
+              icon: icons.UndoIcon,
+              title: "Reload",
+              "aria-label": "Reload",
+              onClick: () => handleReload()
+            }) : null, /* @__PURE__ */jsxRuntime.jsx(ui.Button, {
+              fontSize: [1],
+              icon: icons.CopyIcon,
+              padding: [2],
+              title: "Copy",
+              "aria-label": "Copy",
+              onClick: () => handleCopy()
+            }), /* @__PURE__ */jsxRuntime.jsx(ui.Button, {
+              fontSize: [1],
+              icon: icons.LeaveIcon,
+              padding: [2],
+              text: "Open",
+              tone: "primary",
+              onClick: () => window.open(displayUrl)
+            })]
+          })]
+        })
+      }), /* @__PURE__ */jsxRuntime.jsx(ui.Card, {
+        tone: "transparent",
+        padding: iframeSize === "mobile" ? 2 : 0,
+        style: {
+          height: "100%"
+        },
+        children: /* @__PURE__ */jsxRuntime.jsxs(ui.Flex, {
+          align: "center",
+          justify: "center",
+          style: {
+            height: "100%",
+            position: "relative"
+          },
+          children: [loader && loading && /* @__PURE__ */jsxRuntime.jsx(ui.Flex, {
+            justify: "center",
+            align: "center",
+            style: {
+              inset: "0",
+              position: "absolute"
+            },
+            children: /* @__PURE__ */jsxRuntime.jsx(ui.Flex, {
+              style: {
+                ...sizes[iframeSize],
+                backgroundColor: "rgba(0,0,0,0.2)"
+              },
+              justify: "center",
+              align: "center",
+              children: /* @__PURE__ */jsxRuntime.jsx(ui.Card, {
+                padding: 4,
+                radius: 2,
+                shadow: 1,
+                children: /* @__PURE__ */jsxRuntime.jsxs(ui.Flex, {
+                  align: "center",
+                  direction: "column",
+                  gap: 3,
+                  height: "fill",
+                  justify: "center",
+                  children: [/* @__PURE__ */jsxRuntime.jsx(ui.Spinner, {}), loader && typeof loader === "string" && /* @__PURE__ */jsxRuntime.jsx(ui.Text, {
+                    size: 1,
+                    children: loader
+                  })]
+                })
+              })
+            })
+          }), /* @__PURE__ */jsxRuntime.jsx("iframe", {
+            ref: iframe,
+            title: "preview",
+            style: sizes[iframeSize],
+            frameBorder: "0",
+            src: displayUrl,
+            ...attributes,
+            onLoad: handleIframeLoad
+          })]
+        })
+      })]
+    })]
+  });
+}
+module.exports = Iframe;
+//# sourceMappingURL=index.cjs.map

package/lib/index.cjs.js

@@ -0,0 +1,3 @@
+import cjs from './index.cjs';
+
+export default cjs;

package/lib/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../src/Iframe.tsx"],"sourcesContent":["/* eslint-disable react/jsx-no-bind */\nimport {CopyIcon, LeaveIcon, MobileDeviceIcon, UndoIcon} from '@sanity/icons'\nimport {Box, Button, Card, Flex, Spinner, Text, ThemeProvider} from '@sanity/ui'\nimport React, {useEffect, useRef, useState} from 'react'\nimport {HTMLAttributeReferrerPolicy} from 'react'\nimport {SanityDocumentLike} from 'sanity'\nimport {useCopyToClipboard} from 'usehooks-ts'\n\ntype Size = 'desktop' | 'mobile'\n\ntype SizeProps = {\n  // eslint-disable-next-line no-unused-vars\n  [key in Size]: {\n    width: string | number\n    height: string | number\n    maxHeight: string | number\n  }\n}\n\nconst sizes: SizeProps = {\n  desktop: {\n    width: `100%`,\n    height: `100%`,\n    maxHeight: `100%`,\n  },\n  mobile: {\n    width: 414,\n    height: `100%`,\n    maxHeight: 736,\n  },\n}\n\nexport type IframeOptions = {\n  url: string | ((document: SanityDocumentLike) => unknown)\n  defaultSize?: 'desktop' | 'mobile'\n  loader?: boolean | string\n  showDisplayUrl?: boolean\n  reload: {\n    revision: boolean | number\n    button: boolean\n  }\n  attributes?: Partial<{\n    allow: string\n    referrerPolicy: HTMLAttributeReferrerPolicy | undefined\n    sandbox: string\n    onLoad: () => void\n  }>\n}\n\nexport type IframeProps = {\n  document: {\n    displayed: SanityDocumentLike\n  }\n  options: IframeOptions\n}\n\nconst DEFAULT_SIZE = `desktop`\n\nfunction Iframe(props: IframeProps) {\n  const {document: sanityDocument, options} = props\n  const {\n    url,\n    defaultSize = DEFAULT_SIZE,\n    reload,\n    loader,\n    attributes = {},\n    showDisplayUrl = true,\n  } = options\n  const [displayUrl, setDisplayUrl] = useState(url && typeof url === 'string' ? url : ``)\n  const [iframeSize, setIframeSize] = useState(sizes?.[defaultSize] ? defaultSize : DEFAULT_SIZE)\n  const [loading, setLoading] = useState(false)\n  const input = useRef<HTMLTextAreaElement>(null)\n  const iframe = useRef<HTMLIFrameElement>(null)\n  const {displayed} = sanityDocument\n  const [, copy] = useCopyToClipboard()\n\n  function handleCopy() {\n    if (!input?.current?.value) return\n\n    copy(input.current.value)\n  }\n\n  function handleReload() {\n    if (!iframe?.current) {\n      return\n    }\n\n    // Funky way to reload an iframe without CORS issuies\n    // eslint-disable-next-line no-self-assign\n    iframe.current.src = iframe.current.src\n\n    setLoading(true)\n  }\n\n  function handleIframeLoad() {\n    setLoading(false)\n    // Run onLoad from attributes\n    if (attributes.onLoad && typeof attributes.onLoad === 'function') {\n      attributes.onLoad()\n    }\n  }\n\n  // Reload on new revisions\n  useEffect(() => {\n    if (reload?.revision || reload?.revision == 0) {\n      setTimeout(() => {\n        handleReload()\n      }, Number(reload?.revision))\n    }\n  }, [displayed._rev, reload?.revision])\n\n  // Set initial URL and refresh on new revisions\n  useEffect(() => {\n    const getUrl = async () => {\n      setLoading(true)\n      const resolveUrl = typeof url === 'function' ? await url(displayed) : ``\n\n      // Only update state if URL has changed\n      if (resolveUrl !== displayUrl && resolveUrl && typeof resolveUrl === 'string') {\n        setDisplayUrl(resolveUrl)\n      }\n    }\n\n    if (typeof url === 'function') {\n      getUrl()\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [displayed._rev])\n\n  if (!displayUrl || typeof displayUrl !== 'string') {\n    return (\n      <ThemeProvider>\n        <Flex padding={5} align=\"center\" justify=\"center\">\n          <Spinner />\n        </Flex>\n      </ThemeProvider>\n    )\n  }\n\n  return (\n    <ThemeProvider>\n      <textarea\n        style={{position: `absolute`, pointerEvents: `none`, opacity: 0}}\n        ref={input}\n        value={displayUrl}\n        readOnly\n        tabIndex={-1}\n      />\n      <Flex direction=\"column\" style={{height: `100%`}}>\n        <Card padding={2} borderBottom>\n          <Flex align=\"center\" gap={2}>\n            <Flex align=\"center\" gap={1}>\n              <Button\n                fontSize={[1]}\n                padding={2}\n                tone=\"primary\"\n                mode={iframeSize === 'mobile' ? 'default' : 'ghost'}\n                icon={MobileDeviceIcon}\n                onClick={() => setIframeSize(iframeSize === 'mobile' ? 'desktop' : 'mobile')}\n              />\n            </Flex>\n            <Box flex={1}>\n              {showDisplayUrl && (\n                <Text size={0} textOverflow=\"ellipsis\">\n                  {displayUrl}\n                </Text>\n              )}\n            </Box>\n            <Flex align=\"center\" gap={1}>\n              {reload?.button ? (\n                <Button\n                  fontSize={[1]}\n                  padding={2}\n                  icon={UndoIcon}\n                  title=\"Reload\"\n                  aria-label=\"Reload\"\n                  onClick={() => handleReload()}\n                />\n              ) : null}\n              <Button\n                fontSize={[1]}\n                icon={CopyIcon}\n                padding={[2]}\n                title=\"Copy\"\n                aria-label=\"Copy\"\n                onClick={() => handleCopy()}\n              />\n              <Button\n                fontSize={[1]}\n                icon={LeaveIcon}\n                padding={[2]}\n                text=\"Open\"\n                tone=\"primary\"\n                onClick={() => window.open(displayUrl)}\n              />\n            </Flex>\n          </Flex>\n        </Card>\n        <Card tone=\"transparent\" padding={iframeSize === 'mobile' ? 2 : 0} style={{height: `100%`}}>\n          <Flex align=\"center\" justify=\"center\" style={{height: `100%`, position: `relative`}}>\n            {loader && loading && (\n              <Flex justify=\"center\" align=\"center\" style={{inset: `0`, position: `absolute`}}>\n                <Flex\n                  style={{...sizes[iframeSize], backgroundColor: `rgba(0,0,0,0.2)`}}\n                  justify=\"center\"\n                  align=\"center\"\n                >\n                  <Card padding={4} radius={2} shadow={1}>\n                    <Flex align=\"center\" direction=\"column\" gap={3} height=\"fill\" justify=\"center\">\n                      <Spinner />\n                      {loader && typeof loader === 'string' && <Text size={1}>{loader}</Text>}\n                    </Flex>\n                  </Card>\n                </Flex>\n              </Flex>\n            )}\n            <iframe\n              ref={iframe}\n              title=\"preview\"\n              style={sizes[iframeSize]}\n              frameBorder=\"0\"\n              src={displayUrl}\n              {...attributes}\n              onLoad={handleIframeLoad}\n            />\n          </Flex>\n        </Card>\n      </Flex>\n    </ThemeProvider>\n  )\n}\n\nexport default Iframe\n"],"names":["sizes","desktop","width","height","maxHeight","mobile","DEFAULT_SIZE","Iframe","props","document","sanityDocument","options","url","defaultSize","reload","loader","attributes","showDisplayUrl","displayUrl","setDisplayUrl","useState","iframeSize","setIframeSize","loading","setLoading","input","useRef","iframe","displayed","copy","useCopyToClipboard","handleCopy","_a","current","value","handleReload","src","handleIframeLoad","onLoad","useEffect","revision","setTimeout","Number","_rev","getUrl","resolveUrl","jsx","ThemeProvider","children","Flex","padding","align","justify","Spinner","style","position","pointerEvents","opacity","ref","readOnly","tabIndex","jsxs","direction","Card","borderBottom","gap","Button","fontSize","tone","mode","icon","MobileDeviceIcon","onClick","Box","flex","Text","size","textOverflow","button","UndoIcon","title","CopyIcon","LeaveIcon","text","window","open","inset","backgroundColor","radius","shadow","frameBorder"],"mappings":"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"}

package/lib/{src/index.d.ts → index.d.ts}

@@ -1,7 +1,8 @@
 import {HTMLAttributeReferrerPolicy} from 'react'
+import {JSX as JSX_2} from 'react/jsx-runtime'
 import {SanityDocumentLike} from 'sanity'
 
-declare function Iframe(props: IframeProps): JSX.Element
+declare function Iframe(props: IframeProps): JSX_2.Element
 export default Iframe
 
 export declare type IframeOptions = IframeOptions_2

package/lib/index.js

@@ -1 +1,214 @@
-"use strict";function e(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function t(t){for(var r=1;r<arguments.length;r++){var i=null!=arguments[r]?arguments[r]:{};r%2?e(Object(i),!0).forEach((function(e){n(t,e,i[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(i)):e(Object(i)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(i,e))}))}return t}function n(e,t,n){return(t=function(e){var t=function(e,t){if("object"!=typeof e||null===e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var r=n.call(e,t||"default");if("object"!=typeof r)return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:String(t)}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var r=require("react/jsx-runtime"),i=require("react"),o=require("@sanity/ui"),l=require("@sanity/icons"),s=require("usehooks-ts");const c={desktop:{width:"100%",height:"100%",maxHeight:"100%"},mobile:{width:414,height:"100%",maxHeight:736}},a="desktop";module.exports=function(e){const{document:n,options:u}=e,{url:d,defaultSize:p=a,reload:f,loader:y,attributes:g={},showDisplayUrl:x=!0}=u,[j,h]=i.useState(d&&"string"==typeof d?d:""),[b,v]=i.useState((null==c?void 0:c[p])?p:a),[m,O]=i.useState(!1),w=i.useRef(null),S=i.useRef(null),{displayed:C}=n,[,P]=s.useCopyToClipboard();function k(){(null==S?void 0:S.current)&&(S.current.src=S.current.src,O(!0))}return i.useEffect((()=>{((null==f?void 0:f.revision)||0==(null==f?void 0:f.revision))&&setTimeout((()=>{k()}),Number(null==f?void 0:f.revision))}),[C._rev,null==f?void 0:f.revision]),i.useEffect((()=>{"function"==typeof d&&(async()=>{O(!0);const e="function"==typeof d?await d(C):"";e!==j&&e&&"string"==typeof e&&h(e)})()}),[C._rev]),j&&"string"==typeof j?r.jsxs(o.ThemeProvider,{children:[r.jsx("textarea",{style:{position:"absolute",pointerEvents:"none",opacity:0},ref:w,value:j,readOnly:!0,tabIndex:-1}),r.jsxs(o.Flex,{direction:"column",style:{height:"100%"},children:[r.jsx(o.Card,{padding:2,borderBottom:!0,children:r.jsxs(o.Flex,{align:"center",gap:2,children:[r.jsx(o.Flex,{align:"center",gap:1,children:r.jsx(o.Button,{fontSize:[1],padding:2,tone:"primary",mode:"mobile"===b?"default":"ghost",icon:l.MobileDeviceIcon,onClick:()=>v("mobile"===b?"desktop":"mobile")})}),r.jsx(o.Box,{flex:1,children:x&&r.jsx(o.Text,{size:0,textOverflow:"ellipsis",children:j})}),r.jsxs(o.Flex,{align:"center",gap:1,children:[(null==f?void 0:f.button)?r.jsx(o.Button,{fontSize:[1],padding:2,icon:l.UndoIcon,title:"Reload","aria-label":"Reload",onClick:()=>k()}):null,r.jsx(o.Button,{fontSize:[1],icon:l.CopyIcon,padding:[2],title:"Copy","aria-label":"Copy",onClick:()=>{var e;(null==(e=null==w?void 0:w.current)?void 0:e.value)&&P(w.current.value)}}),r.jsx(o.Button,{fontSize:[1],icon:l.LeaveIcon,padding:[2],text:"Open",tone:"primary",onClick:()=>window.open(j)})]})]})}),r.jsx(o.Card,{tone:"transparent",padding:"mobile"===b?2:0,style:{height:"100%"},children:r.jsxs(o.Flex,{align:"center",justify:"center",style:{height:"100%",position:"relative"},children:[y&&m&&r.jsx(o.Flex,{justify:"center",align:"center",style:{inset:"0",position:"absolute"},children:r.jsx(o.Flex,{style:t(t({},c[b]),{},{backgroundColor:"rgba(0,0,0,0.2)"}),justify:"center",align:"center",children:r.jsx(o.Card,{padding:4,radius:2,shadow:1,children:r.jsxs(o.Flex,{align:"center",direction:"column",gap:3,height:"fill",justify:"center",children:[r.jsx(o.Spinner,{}),y&&"string"==typeof y&&r.jsx(o.Text,{size:1,children:y})]})})})}),r.jsx("iframe",t(t({ref:S,title:"preview",style:c[b],frameBorder:"0",src:j},g),{},{onLoad:function(){O(!1),g.onLoad&&"function"==typeof g.onLoad&&g.onLoad()}}))]})})]})]}):r.jsx(o.ThemeProvider,{children:r.jsx(o.Flex,{padding:5,align:"center",justify:"center",children:r.jsx(o.Spinner,{})})})};//# sourceMappingURL=index.js.map
+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 { useCopyToClipboard } from 'usehooks-ts';
+const sizes = {
+  desktop: {
+    width: "100%",
+    height: "100%",
+    maxHeight: "100%"
+  },
+  mobile: {
+    width: 414,
+    height: "100%",
+    maxHeight: 736
+  }
+};
+const DEFAULT_SIZE = "desktop";
+function Iframe(props) {
+  const {
+    document: sanityDocument,
+    options
+  } = 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;
+  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, {
+    children: [/* @__PURE__ */jsx("textarea", {
+      style: {
+        position: "absolute",
+        pointerEvents: "none",
+        opacity: 0
+      },
+      ref: input,
+      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, {
+          align: "center",
+          gap: 2,
+          children: [/* @__PURE__ */jsx(Flex, {
+            align: "center",
+            gap: 1,
+            children: /* @__PURE__ */jsx(Button, {
+              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, {
+              fontSize: [1],
+              padding: 2,
+              icon: UndoIcon,
+              title: "Reload",
+              "aria-label": "Reload",
+              onClick: () => handleReload()
+            }) : null, /* @__PURE__ */jsx(Button, {
+              fontSize: [1],
+              icon: CopyIcon,
+              padding: [2],
+              title: "Copy",
+              "aria-label": "Copy",
+              onClick: () => handleCopy()
+            }), /* @__PURE__ */jsx(Button, {
+              fontSize: [1],
+              icon: LeaveIcon,
+              padding: [2],
+              text: "Open",
+              tone: "primary",
+              onClick: () => window.open(displayUrl)
+            })]
+          })]
+        })
+      }), /* @__PURE__ */jsx(Card, {
+        tone: "transparent",
+        padding: iframeSize === "mobile" ? 2 : 0,
+        style: {
+          height: "100%"
+        },
+        children: /* @__PURE__ */jsxs(Flex, {
+          align: "center",
+          justify: "center",
+          style: {
+            height: "100%",
+            position: "relative"
+          },
+          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
+          })]
+        })
+      })]
+    })]
+  });
+}
+export { Iframe as default };
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"index.js","sources":["../src/Iframe.tsx"],"sourcesContent":["/* eslint-disable react/jsx-no-bind */\nimport {CopyIcon, LeaveIcon, MobileDeviceIcon, UndoIcon} from '@sanity/icons'\nimport {Box, Button, Card, Flex, Spinner, Text, ThemeProvider} from '@sanity/ui'\nimport React, {useEffect, useRef, useState} from 'react'\nimport {HTMLAttributeReferrerPolicy} from 'react'\nimport {SanityDocumentLike} from 'sanity'\nimport {useCopyToClipboard} from 'usehooks-ts'\n\ntype Size = 'desktop' | 'mobile'\n\ntype SizeProps = {\n  // eslint-disable-next-line no-unused-vars\n  [key in Size]: {\n    width: string | number\n    height: string | number\n    maxHeight: string | number\n  }\n}\n\nconst sizes: SizeProps = {\n  desktop: {\n    width: `100%`,\n    height: `100%`,\n    maxHeight: `100%`,\n  },\n  mobile: {\n    width: 414,\n    height: `100%`,\n    maxHeight: 736,\n  },\n}\n\nexport type IframeOptions = {\n  url: string | ((document: SanityDocumentLike) => unknown)\n  defaultSize?: 'desktop' | 'mobile'\n  loader?: boolean | string\n  showDisplayUrl?: boolean\n  reload: {\n    revision: boolean | number\n    button: boolean\n  }\n  attributes?: Partial<{\n    allow: string\n    referrerPolicy: HTMLAttributeReferrerPolicy | undefined\n    sandbox: string\n    onLoad: () => void\n  }>\n}\n\nexport type IframeProps = {\n  document: {\n    displayed: SanityDocumentLike\n  }\n  options: IframeOptions\n}\n\nconst DEFAULT_SIZE = `desktop`\n\nfunction Iframe(props: IframeProps) {\n  const {document: sanityDocument, options} = props\n  const {\n    url,\n    defaultSize = DEFAULT_SIZE,\n    reload,\n    loader,\n    attributes = {},\n    showDisplayUrl = true,\n  } = options\n  const [displayUrl, setDisplayUrl] = useState(url && typeof url === 'string' ? url : ``)\n  const [iframeSize, setIframeSize] = useState(sizes?.[defaultSize] ? defaultSize : DEFAULT_SIZE)\n  const [loading, setLoading] = useState(false)\n  const input = useRef<HTMLTextAreaElement>(null)\n  const iframe = useRef<HTMLIFrameElement>(null)\n  const {displayed} = sanityDocument\n  const [, copy] = useCopyToClipboard()\n\n  function handleCopy() {\n    if (!input?.current?.value) return\n\n    copy(input.current.value)\n  }\n\n  function handleReload() {\n    if (!iframe?.current) {\n      return\n    }\n\n    // Funky way to reload an iframe without CORS issuies\n    // eslint-disable-next-line no-self-assign\n    iframe.current.src = iframe.current.src\n\n    setLoading(true)\n  }\n\n  function handleIframeLoad() {\n    setLoading(false)\n    // Run onLoad from attributes\n    if (attributes.onLoad && typeof attributes.onLoad === 'function') {\n      attributes.onLoad()\n    }\n  }\n\n  // Reload on new revisions\n  useEffect(() => {\n    if (reload?.revision || reload?.revision == 0) {\n      setTimeout(() => {\n        handleReload()\n      }, Number(reload?.revision))\n    }\n  }, [displayed._rev, reload?.revision])\n\n  // Set initial URL and refresh on new revisions\n  useEffect(() => {\n    const getUrl = async () => {\n      setLoading(true)\n      const resolveUrl = typeof url === 'function' ? await url(displayed) : ``\n\n      // Only update state if URL has changed\n      if (resolveUrl !== displayUrl && resolveUrl && typeof resolveUrl === 'string') {\n        setDisplayUrl(resolveUrl)\n      }\n    }\n\n    if (typeof url === 'function') {\n      getUrl()\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [displayed._rev])\n\n  if (!displayUrl || typeof displayUrl !== 'string') {\n    return (\n      <ThemeProvider>\n        <Flex padding={5} align=\"center\" justify=\"center\">\n          <Spinner />\n        </Flex>\n      </ThemeProvider>\n    )\n  }\n\n  return (\n    <ThemeProvider>\n      <textarea\n        style={{position: `absolute`, pointerEvents: `none`, opacity: 0}}\n        ref={input}\n        value={displayUrl}\n        readOnly\n        tabIndex={-1}\n      />\n      <Flex direction=\"column\" style={{height: `100%`}}>\n        <Card padding={2} borderBottom>\n          <Flex align=\"center\" gap={2}>\n            <Flex align=\"center\" gap={1}>\n              <Button\n                fontSize={[1]}\n                padding={2}\n                tone=\"primary\"\n                mode={iframeSize === 'mobile' ? 'default' : 'ghost'}\n                icon={MobileDeviceIcon}\n                onClick={() => setIframeSize(iframeSize === 'mobile' ? 'desktop' : 'mobile')}\n              />\n            </Flex>\n            <Box flex={1}>\n              {showDisplayUrl && (\n                <Text size={0} textOverflow=\"ellipsis\">\n                  {displayUrl}\n                </Text>\n              )}\n            </Box>\n            <Flex align=\"center\" gap={1}>\n              {reload?.button ? (\n                <Button\n                  fontSize={[1]}\n                  padding={2}\n                  icon={UndoIcon}\n                  title=\"Reload\"\n                  aria-label=\"Reload\"\n                  onClick={() => handleReload()}\n                />\n              ) : null}\n              <Button\n                fontSize={[1]}\n                icon={CopyIcon}\n                padding={[2]}\n                title=\"Copy\"\n                aria-label=\"Copy\"\n                onClick={() => handleCopy()}\n              />\n              <Button\n                fontSize={[1]}\n                icon={LeaveIcon}\n                padding={[2]}\n                text=\"Open\"\n                tone=\"primary\"\n                onClick={() => window.open(displayUrl)}\n              />\n            </Flex>\n          </Flex>\n        </Card>\n        <Card tone=\"transparent\" padding={iframeSize === 'mobile' ? 2 : 0} style={{height: `100%`}}>\n          <Flex align=\"center\" justify=\"center\" style={{height: `100%`, position: `relative`}}>\n            {loader && loading && (\n              <Flex justify=\"center\" align=\"center\" style={{inset: `0`, position: `absolute`}}>\n                <Flex\n                  style={{...sizes[iframeSize], backgroundColor: `rgba(0,0,0,0.2)`}}\n                  justify=\"center\"\n                  align=\"center\"\n                >\n                  <Card padding={4} radius={2} shadow={1}>\n                    <Flex align=\"center\" direction=\"column\" gap={3} height=\"fill\" justify=\"center\">\n                      <Spinner />\n                      {loader && typeof loader === 'string' && <Text size={1}>{loader}</Text>}\n                    </Flex>\n                  </Card>\n                </Flex>\n              </Flex>\n            )}\n            <iframe\n              ref={iframe}\n              title=\"preview\"\n              style={sizes[iframeSize]}\n              frameBorder=\"0\"\n              src={displayUrl}\n              {...attributes}\n              onLoad={handleIframeLoad}\n            />\n          </Flex>\n        </Card>\n      </Flex>\n    </ThemeProvider>\n  )\n}\n\nexport default Iframe\n"],"names":["sizes","desktop","width","height","maxHeight","mobile","DEFAULT_SIZE","Iframe","props","document","sanityDocument","options","url","defaultSize","reload","loader","attributes","showDisplayUrl","displayUrl","setDisplayUrl","useState","iframeSize","setIframeSize","loading","setLoading","input","useRef","iframe","displayed","copy","useCopyToClipboard","handleCopy","_a","current","value","handleReload","src","handleIframeLoad","onLoad","useEffect","revision","setTimeout","Number","_rev","getUrl","resolveUrl","jsx","ThemeProvider","children","Flex","padding","align","justify","Spinner","style","position","pointerEvents","opacity","ref","readOnly","tabIndex","jsxs","direction","Card","borderBottom","gap","Button","fontSize","tone","mode","icon","MobileDeviceIcon","onClick","Box","flex","Text","size","textOverflow","button","UndoIcon","title","CopyIcon","LeaveIcon","text","window","open","inset","backgroundColor","radius","shadow","frameBorder"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sanity-plugin-iframe-pane",
-  "version": "2.3.0",
+  "version": "2.3.1-beta.1",
   "description": "Display any URL in a View Pane, along with helpful buttons to Copy the URL or open in a new tab",
   "homepage": "https://github.com/sanity-io/sanity-plugin-iframe-pane#readme",
   "bugs": {
@@ -11,69 +11,85 @@
     "url": "git@github.com:sanity-io/sanity-plugin-iframe-pane.git"
   },
   "license": "MIT",
-  "author": "Simeon Griggs <simeon@sanity.io>",
+  "author": "Sanity.io <hello@sanity.io>",
+  "sideEffects": false,
+  "type": "module",
   "exports": {
     ".": {
-      "types": "./lib/src/index.d.ts",
+      "types": "./lib/index.d.ts",
       "source": "./src/index.ts",
-      "import": "./lib/index.esm.js",
-      "require": "./lib/index.js",
-      "default": "./lib/index.esm.js"
+      "require": "./lib/index.cjs",
+      "node": {
+        "import": "./lib/index.cjs.js",
+        "require": "./lib/index.cjs"
+      },
+      "import": "./lib/index.js",
+      "default": "./lib/index.js"
     },
     "./package.json": "./package.json"
   },
-  "main": "./lib/index.js",
-  "module": "./lib/index.esm.js",
+  "main": "./lib/index.cjs",
+  "module": "./lib/index.js",
   "source": "./src/index.ts",
-  "types": "./lib/src/index.d.ts",
+  "types": "./lib/index.d.ts",
   "files": [
     "src",
     "lib",
-    "v2-incompatible.js",
-    "sanity.json"
+    "sanity.json",
+    "v2-incompatible.js"
   ],
   "scripts": {
-    "prebuild": "npm run clean && plugin-kit verify-package --silent && pkg-utils",
-    "build": "pkg-utils build --strict",
+    "build": "run-s clean && plugin-kit verify-package --silent && pkg-utils build --strict && pkg-utils --strict",
     "clean": "rimraf lib",
+    "format": "prettier --write --cache --ignore-unknown .",
     "link-watch": "plugin-kit link-watch",
     "lint": "eslint .",
-    "prepare": "husky install",
-    "prepublishOnly": "npm run build",
-    "watch": "pkg-utils watch"
+    "prepare": "husky install || true",
+    "prepublishOnly": "run-s build",
+    "test": "npm run lint && npm run type-check && npm run build",
+    "type-check": "tsc --noEmit",
+    "watch": "pkg-utils watch --strict"
   },
   "dependencies": {
     "@sanity/icons": "^2.2.2",
-    "@sanity/incompatible-plugin": "^1.0.4",
-    "@sanity/ui": "^1.3.0",
-    "usehooks-ts": "^2.9.1"
+    "@sanity/incompatible-plugin": "^1.0.0",
+    "@sanity/ui": "^1.0.0",
+    "usehooks-ts": "2.9.1"
   },
   "devDependencies": {
-    "@commitlint/cli": "^17.2.0",
-    "@commitlint/config-conventional": "^17.2.0",
-    "@sanity/pkg-utils": "^1.20.4",
-    "@sanity/plugin-kit": "^2.2.0",
-    "@sanity/semantic-release-preset": "^2.0.2",
-    "@typescript-eslint/eslint-plugin": "^5.42.0",
-    "@typescript-eslint/parser": "^5.42.0",
-    "eslint": "^8.26.0",
-    "eslint-config-prettier": "^8.5.0",
+    "@commitlint/cli": "^17.6.3",
+    "@commitlint/config-conventional": "^17.6.3",
+    "@sanity/pkg-utils": "^2.2.16",
+    "@sanity/plugin-kit": "^3.1.7",
+    "@sanity/semantic-release-preset": "^4.1.1",
+    "@typescript-eslint/eslint-plugin": "^5.59.7",
+    "@typescript-eslint/parser": "^5.59.7",
+    "eslint": "^8.36.0",
+    "eslint-config-prettier": "^8.7.0",
+    "eslint-config-react-app": "^7.0.1",
     "eslint-config-sanity": "^6.0.0",
+    "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.31.10",
+    "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "husky": "^8.0.1",
-    "lint-staged": "^13.0.3",
-    "prettier": "^2.7.1",
+    "eslint-plugin-simple-import-sort": "^10.0.0",
+    "husky": "^8.0.3",
+    "lint-staged": "^13.2.2",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^2.8.8",
     "prettier-plugin-packagejson": "^2.4.3",
-    "react": "^18",
-    "rimraf": "^3.0.2",
-    "sanity": "^3.0.0",
-    "typescript": "^5.0.0"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-is": "^18.2.0",
+    "rimraf": "^5.0.1",
+    "sanity": "^3.11.1",
+    "styled-components": "^5.3.6",
+    "typescript": "^5.0.4"
   },
   "peerDependencies": {
     "react": "^18",
-    "sanity": "^3.0.0"
+    "sanity": "^3",
+    "styled-components": "^5.2"
   },
   "engines": {
     "node": ">=14"

package/src/Iframe.tsx

@@ -1,10 +1,9 @@
 /* eslint-disable react/jsx-no-bind */
-import React, {useEffect, useState, useRef} from 'react'
-import {SanityDocumentLike} from 'sanity'
-import {Box, Flex, Text, Button, ThemeProvider, Card, Spinner} from '@sanity/ui'
-import {UndoIcon, CopyIcon, LeaveIcon, MobileDeviceIcon} from '@sanity/icons'
+import {CopyIcon, LeaveIcon, MobileDeviceIcon, UndoIcon} from '@sanity/icons'
+import {Box, Button, Card, Flex, Spinner, Text, ThemeProvider} from '@sanity/ui'
+import React, {useEffect, useRef, useState} from 'react'
 import {HTMLAttributeReferrerPolicy} from 'react'
-
+import {SanityDocumentLike} from 'sanity'
 import {useCopyToClipboard} from 'usehooks-ts'
 
 type Size = 'desktop' | 'mobile'

package/lib/index.esm.js

@@ -1 +0,0 @@
-function e(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);t&&(i=i.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,i)}return n}function t(t){for(var i=1;i<arguments.length;i++){var r=null!=arguments[i]?arguments[i]:{};i%2?e(Object(r),!0).forEach((function(e){n(t,e,r[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(r)):e(Object(r)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(r,e))}))}return t}function n(e,t,n){return(t=function(e){var t=function(e,t){if("object"!=typeof e||null===e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var i=n.call(e,t||"default");if("object"!=typeof i)return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:String(t)}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}import{jsx as i,jsxs as r}from"react/jsx-runtime";import{useState as o,useRef as l,useEffect as c}from"react";import{ThemeProvider as a,Flex as u,Spinner as d,Card as s,Button as p,Box as f,Text as y}from"@sanity/ui";import{MobileDeviceIcon as g,UndoIcon as h,CopyIcon as m,LeaveIcon as b}from"@sanity/icons";import{useCopyToClipboard as v}from"usehooks-ts";const O={desktop:{width:"100%",height:"100%",maxHeight:"100%"},mobile:{width:414,height:"100%",maxHeight:736}},j="desktop";function w(e){const{document:n,options:w}=e,{url:P,defaultSize:k=j,reload:S,loader:x,attributes:z={},showDisplayUrl:C=!0}=w,[D,E]=o(P&&"string"==typeof P?P:""),[L,B]=o((null==O?void 0:O[k])?k:j),[H,N]=o(!1),R=l(null),T=l(null),{displayed:_}=n,[,I]=v();function U(){(null==T?void 0:T.current)&&(T.current.src=T.current.src,N(!0))}return c((()=>{((null==S?void 0:S.revision)||0==(null==S?void 0:S.revision))&&setTimeout((()=>{U()}),Number(null==S?void 0:S.revision))}),[_._rev,null==S?void 0:S.revision]),c((()=>{"function"==typeof P&&(async()=>{N(!0);const e="function"==typeof P?await P(_):"";e!==D&&e&&"string"==typeof e&&E(e)})()}),[_._rev]),D&&"string"==typeof D?r(a,{children:[i("textarea",{style:{position:"absolute",pointerEvents:"none",opacity:0},ref:R,value:D,readOnly:!0,tabIndex:-1}),r(u,{direction:"column",style:{height:"100%"},children:[i(s,{padding:2,borderBottom:!0,children:r(u,{align:"center",gap:2,children:[i(u,{align:"center",gap:1,children:i(p,{fontSize:[1],padding:2,tone:"primary",mode:"mobile"===L?"default":"ghost",icon:g,onClick:()=>B("mobile"===L?"desktop":"mobile")})}),i(f,{flex:1,children:C&&i(y,{size:0,textOverflow:"ellipsis",children:D})}),r(u,{align:"center",gap:1,children:[(null==S?void 0:S.button)?i(p,{fontSize:[1],padding:2,icon:h,title:"Reload","aria-label":"Reload",onClick:()=>U()}):null,i(p,{fontSize:[1],icon:m,padding:[2],title:"Copy","aria-label":"Copy",onClick:()=>{var e;(null==(e=null==R?void 0:R.current)?void 0:e.value)&&I(R.current.value)}}),i(p,{fontSize:[1],icon:b,padding:[2],text:"Open",tone:"primary",onClick:()=>window.open(D)})]})]})}),i(s,{tone:"transparent",padding:"mobile"===L?2:0,style:{height:"100%"},children:r(u,{align:"center",justify:"center",style:{height:"100%",position:"relative"},children:[x&&H&&i(u,{justify:"center",align:"center",style:{inset:"0",position:"absolute"},children:i(u,{style:t(t({},O[L]),{},{backgroundColor:"rgba(0,0,0,0.2)"}),justify:"center",align:"center",children:i(s,{padding:4,radius:2,shadow:1,children:r(u,{align:"center",direction:"column",gap:3,height:"fill",justify:"center",children:[i(d,{}),x&&"string"==typeof x&&i(y,{size:1,children:x})]})})})}),i("iframe",t(t({ref:T,title:"preview",style:O[L],frameBorder:"0",src:D},z),{},{onLoad:function(){N(!1),z.onLoad&&"function"==typeof z.onLoad&&z.onLoad()}}))]})})]})]}):i(a,{children:i(u,{padding:5,align:"center",justify:"center",children:i(d,{})})})}export{w as default};//# sourceMappingURL=index.esm.js.map

package/lib/index.esm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}