sanity-plugin-iframe-pane 1.1.4 → 2.0.1-v3-studio.1

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2021 Simeon Griggs
+Copyright (c) 2022 Simeon Griggs
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -1,8 +1,10 @@
 # sanity-plugin-iframe-pane
 
-> NOTE This is for the Studio v2 version of the plugin
+> **NOTE**
 >
-> There is a [Studio v3 specific version in the studio-v3 branch](https://github.com/SimeonGriggs/sanity-plugin-iframe-pane/tree/studio-v3)
+> This is the **Sanity Studio v3 version** of sanity-plugin-iframe-pane.
+>
+> For the v2 version, please refer to the [v2-branch](https://github.com/sanity-io/sanity-plugin-iframe-pane).
 
 Display any URL in a View Pane, along with helpful buttons to Copy the URL or open in a new tab.
 
@@ -13,14 +15,22 @@ Accepts either a string or an async function to resolve a URL based on the curre
 ## Installation
 
 ```
-sanity install iframe-pane
+npm install --save sanity-plugin-iframe-pane@studio-v3
+```
+
+or
+
+```
+yarn add sanity-plugin-iframe-pane@studio-v3
 ```
 
+## Usage
+
 This is designed to be used as a [Component inside of a View](https://www.sanity.io/docs/structure-builder-reference#c0c8284844b7).
 
 ```js
 // ./src/deskStructure.js
-import Iframe from "sanity-plugin-iframe-pane";
+import Iframe from 'sanity-plugin-iframe-pane'
 
 // ...all other list items
 
@@ -36,20 +46,27 @@ S.view
     // Optional: Add a reload button, or reload on new document revisions
     reload: {
       button: true, // default `undefined`
-      revision: true, // boolean | number. default `undefined`. If a number is provided, add a delay (in ms) before the automatic reload on document revision
+      revision: true, // default `undefined`
     },
-    // Optional: Pass attributes to the underlying `iframe` element:
-    // See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe
-    attributes: {
-      allow: 'fullscreen' // string, optional
-      referrerPolicy: 'strict-origin-when-cross-origin' // string, optional
-      sandbox: 'allow-same-origin' // string, optional
-    }
   })
-  .title("Preview");
+  .title('Preview')
 ```
 
 ## License
 
-MIT © Simeon Griggs
-See LICENSE
+MIT-licensed. See LICENSE.
+
+## Develop & test
+
+This plugin uses [@sanity/plugin-kit](https://github.com/sanity-io/plugin-kit)
+with default configuration for build & watch scripts.
+
+See [Testing a plugin in Sanity Studio](https://github.com/sanity-io/plugin-kit#testing-a-plugin-in-sanity-studio)
+on how to run this plugin with hotreload in the studio.
+
+### Release new version
+
+Run ["CI & Release" workflow](https://github.com/sanity-io/sanity-plugin-iframe-pane/actions/workflows/main.yml).
+Make sure to select the studio-v3 branch and check "Release new version".
+
+Semantic release will only release on configured branches, so it is safe to run release on any branch.

package/lib/cjs/index.js

@@ -0,0 +1,204 @@
+var $k7rGe$reactjsxruntime = require("react/jsx-runtime");
+var $k7rGe$react = require("react");
+var $k7rGe$sanityui = require("@sanity/ui");
+var $k7rGe$sanityicons = require("@sanity/icons");
+var $k7rGe$usehooksts = require("usehooks-ts");
+
+function $parcel$defineInteropFlag(a) {
+  Object.defineProperty(a, '__esModule', {value: true, configurable: true});
+}
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+
+$parcel$defineInteropFlag(module.exports);
+
+$parcel$export(module.exports, "default", () => $244e63ca53592e4d$export$2e2bcd8739ae039);
+
+
+
+
+
+const $f4b318483f84cb22$var$sizes = {
+    desktop: {
+        width: `100%`,
+        height: `100%`,
+        maxHeight: `100%`
+    },
+    mobile: {
+        width: 414,
+        height: `100%`,
+        maxHeight: 736
+    }
+};
+const $f4b318483f84cb22$var$DEFAULT_SIZE = `desktop`;
+function $f4b318483f84cb22$var$Iframe(props) {
+    const { document: sanityDocument , options: options  } = props;
+    const { url: url , defaultSize: defaultSize = $f4b318483f84cb22$var$DEFAULT_SIZE , reload: reload  } = options;
+    const [displayUrl, setDisplayUrl] = (0, $k7rGe$react.useState)(url && typeof url === "string" ? url : ``);
+    const [iframeSize, setIframeSize] = (0, $k7rGe$react.useState)($f4b318483f84cb22$var$sizes?.[defaultSize] ? defaultSize : $f4b318483f84cb22$var$DEFAULT_SIZE);
+    const input = (0, $k7rGe$react.useRef)(null);
+    const iframe = (0, $k7rGe$react.useRef)(null);
+    const { displayed: displayed  } = sanityDocument;
+    const [, copy] = (0, $k7rGe$usehooksts.useCopyToClipboard)();
+    function handleCopy() {
+        if (!input?.current?.value) return;
+        copy(input.current.value);
+    }
+    function handleReload() {
+        if (!iframe?.current) return;
+        // Funky way to reload an iframe without CORS issuies
+        // eslint-disable-next-line no-self-assign
+        iframe.current.src = iframe.current.src;
+    }
+    // Reload on new revisions
+    (0, $k7rGe$react.useEffect)(()=>{
+        if (reload?.revision) handleReload();
+    }, [
+        displayed._rev,
+        reload?.revision
+    ]);
+    // Set initial URL and refresh on new revisions
+    (0, $k7rGe$react.useEffect)(()=>{
+        const getUrl = async ()=>{
+            const resolveUrl = typeof url === "function" ? await url(displayed) : ``;
+            // Only update state if URL has changed
+            if (resolveUrl !== displayUrl && resolveUrl && typeof resolveUrl === "string") setDisplayUrl(resolveUrl);
+        };
+        if (typeof url === "function") getUrl();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        displayed._rev
+    ]);
+    if (!displayUrl || typeof displayUrl !== "string") return /*#__PURE__*/ (0, $k7rGe$reactjsxruntime.jsx)((0, $k7rGe$sanityui.ThemeProvider), {
+        children: /*#__PURE__*/ (0, $k7rGe$reactjsxruntime.jsx)((0, $k7rGe$sanityui.Flex), {
+            padding: 5,
+            align: "center",
+            justify: "center",
+            children: /*#__PURE__*/ (0, $k7rGe$reactjsxruntime.jsx)((0, $k7rGe$sanityui.Spinner), {})
+        })
+    });
+    return /*#__PURE__*/ (0, $k7rGe$reactjsxruntime.jsxs)((0, $k7rGe$sanityui.ThemeProvider), {
+        children: [
+            /*#__PURE__*/ (0, $k7rGe$reactjsxruntime.jsx)("textarea", {
+                style: {
+                    position: `absolute`,
+                    pointerEvents: `none`,
+                    opacity: 0
+                },
+                ref: input,
+                value: displayUrl,
+                readOnly: true,
+                tabIndex: -1
+            }),
+            /*#__PURE__*/ (0, $k7rGe$reactjsxruntime.jsxs)((0, $k7rGe$sanityui.Flex), {
+                direction: "column",
+                style: {
+                    height: `100%`
+                },
+                children: [
+                    /*#__PURE__*/ (0, $k7rGe$reactjsxruntime.jsx)((0, $k7rGe$sanityui.Card), {
+                        padding: 2,
+                        borderBottom: true,
+                        children: /*#__PURE__*/ (0, $k7rGe$reactjsxruntime.jsxs)((0, $k7rGe$sanityui.Flex), {
+                            align: "center",
+                            gap: 2,
+                            children: [
+                                /*#__PURE__*/ (0, $k7rGe$reactjsxruntime.jsx)((0, $k7rGe$sanityui.Flex), {
+                                    align: "center",
+                                    gap: 1,
+                                    children: /*#__PURE__*/ (0, $k7rGe$reactjsxruntime.jsx)((0, $k7rGe$sanityui.Button), {
+                                        fontSize: [
+                                            1
+                                        ],
+                                        padding: 2,
+                                        tone: "primary",
+                                        mode: iframeSize === "mobile" ? "default" : "ghost",
+                                        icon: (0, $k7rGe$sanityicons.MobileDeviceIcon),
+                                        onClick: ()=>setIframeSize(iframeSize === "mobile" ? "desktop" : "mobile")
+                                    })
+                                }),
+                                /*#__PURE__*/ (0, $k7rGe$reactjsxruntime.jsx)((0, $k7rGe$sanityui.Box), {
+                                    flex: 1,
+                                    children: /*#__PURE__*/ (0, $k7rGe$reactjsxruntime.jsx)((0, $k7rGe$sanityui.Text), {
+                                        size: 0,
+                                        textOverflow: "ellipsis",
+                                        children: displayUrl
+                                    })
+                                }),
+                                /*#__PURE__*/ (0, $k7rGe$reactjsxruntime.jsxs)((0, $k7rGe$sanityui.Flex), {
+                                    align: "center",
+                                    gap: 1,
+                                    children: [
+                                        reload?.button ? /*#__PURE__*/ (0, $k7rGe$reactjsxruntime.jsx)((0, $k7rGe$sanityui.Button), {
+                                            fontSize: [
+                                                1
+                                            ],
+                                            padding: 2,
+                                            icon: (0, $k7rGe$sanityicons.UndoIcon),
+                                            title: "Reload",
+                                            "aria-label": "Reload",
+                                            onClick: ()=>handleReload()
+                                        }) : null,
+                                        /*#__PURE__*/ (0, $k7rGe$reactjsxruntime.jsx)((0, $k7rGe$sanityui.Button), {
+                                            fontSize: [
+                                                1
+                                            ],
+                                            icon: (0, $k7rGe$sanityicons.CopyIcon),
+                                            padding: [
+                                                2
+                                            ],
+                                            title: "Copy",
+                                            "aria-label": "Copy",
+                                            onClick: ()=>handleCopy()
+                                        }),
+                                        /*#__PURE__*/ (0, $k7rGe$reactjsxruntime.jsx)((0, $k7rGe$sanityui.Button), {
+                                            fontSize: [
+                                                1
+                                            ],
+                                            icon: (0, $k7rGe$sanityicons.LeaveIcon),
+                                            padding: [
+                                                2
+                                            ],
+                                            text: "Open",
+                                            tone: "primary",
+                                            onClick: ()=>window.open(displayUrl)
+                                        })
+                                    ]
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ (0, $k7rGe$reactjsxruntime.jsx)((0, $k7rGe$sanityui.Card), {
+                        tone: "transparent",
+                        padding: iframeSize === "mobile" ? 2 : 0,
+                        style: {
+                            height: `100%`
+                        },
+                        children: /*#__PURE__*/ (0, $k7rGe$reactjsxruntime.jsx)((0, $k7rGe$sanityui.Flex), {
+                            align: "center",
+                            justify: "center",
+                            style: {
+                                height: `100%`
+                            },
+                            children: /*#__PURE__*/ (0, $k7rGe$reactjsxruntime.jsx)("iframe", {
+                                ref: iframe,
+                                title: "preview",
+                                style: $f4b318483f84cb22$var$sizes[iframeSize],
+                                frameBorder: "0",
+                                src: displayUrl
+                            })
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+}
+var $f4b318483f84cb22$export$2e2bcd8739ae039 = $f4b318483f84cb22$var$Iframe;
+
+
+var $244e63ca53592e4d$export$2e2bcd8739ae039 = (0, $f4b318483f84cb22$export$2e2bcd8739ae039);
+
+
+//# sourceMappingURL=index.js.map

package/lib/cjs/index.js.map

@@ -0,0 +1 @@
+{"mappings":";;;;;;;;;;;;;;;;ACAA;;;;;AAyBA,MAAM,2BAAK,GAAc;IACvB,OAAO,EAAE;QACP,KAAK,EAAE,CAAC,IAAI,CAAC;QACb,MAAM,EAAE,CAAC,IAAI,CAAC;QACd,SAAS,EAAE,CAAC,IAAI,CAAC;KAClB;IACD,MAAM,EAAE;QACN,KAAK,EAAE,GAAG;QACV,MAAM,EAAE,CAAC,IAAI,CAAC;QACd,SAAS,EAAE,GAAG;KACf;CACF,AAAC;AAkBF,MAAM,kCAAY,GAAG,CAAC,OAAO,CAAC,AAAC;AAE/B,SAAS,4BAAM,CAAC,KAAkB,EAAE;IAClC,MAAM,EAAE,QAAQ,EAAE,cAAc,CAAA,WAAE,OAAO,CAAA,EAAE,GAAG,KAAK,AAAC;IACpD,MAAM,OAAE,GAAG,CAAA,eAAE,WAAW,GAAG,kCAAY,WAAE,MAAM,CAAA,EAAE,GAAG,OAAO,AAAC;IAC5D,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,CAAA,GAAA,qBAAQ,CAAA,CAC1C,GAAG,IAAI,OAAO,GAAG,KAAK,QAAQ,GAAG,GAAG,GAAG,CAAC,CAAC,CAC1C,AAAC;IACF,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,CAAA,GAAA,qBAAQ,CAAA,CAC1C,2BAAK,EAAE,CAAC,WAAW,CAAC,GAAG,WAAW,GAAG,kCAAY,CAClD,AAAC;IACF,MAAM,KAAK,GAAG,CAAA,GAAA,mBAAM,CAAA,CAAsB,IAAI,CAAC,AAAC;IAChD,MAAM,MAAM,GAAG,CAAA,GAAA,mBAAM,CAAA,CAAoB,IAAI,CAAC,AAAC;IAC/C,MAAM,aAAE,SAAS,CAAA,EAAE,GAAG,cAAc,AAAC;IACrC,MAAM,GAAG,IAAI,CAAC,GAAG,CAAA,GAAA,oCAAkB,CAAA,EAAE,AAAC;IAEtC,SAAS,UAAU,GAAG;QACpB,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO;QAEnC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;KAC3B;IAED,SAAS,YAAY,GAAG;QACtB,IAAI,CAAC,MAAM,EAAE,OAAO,EAClB,OAAO;QAGT,qDAAqD;QACrD,0CAA0C;QAC1C,MAAM,CAAC,OAAO,CAAC,GAAG,GAAG,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC;KACzC;IAED,0BAA0B;IAC1B,CAAA,GAAA,sBAAS,CAAA,CAAC,IAAM;QACd,IAAI,MAAM,EAAE,QAAQ,EAClB,YAAY,EAAE,CAAC;KAElB,EAAE;QAAC,SAAS,CAAC,IAAI;QAAE,MAAM,EAAE,QAAQ;KAAC,CAAC,CAAC;IAEvC,+CAA+C;IAC/C,CAAA,GAAA,sBAAS,CAAA,CAAC,IAAM;QACd,MAAM,MAAM,GAAG,UAAY;YACzB,MAAM,UAAU,GAAG,OAAO,GAAG,KAAK,UAAU,GAAG,MAAM,GAAG,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,AAAC;YAEzE,uCAAuC;YACvC,IACE,UAAU,KAAK,UAAU,IACzB,UAAU,IACV,OAAO,UAAU,KAAK,QAAQ,EAE9B,aAAa,CAAC,UAAU,CAAC,CAAC;SAE7B,AAAC;QAEF,IAAI,OAAO,GAAG,KAAK,UAAU,EAC3B,MAAM,EAAE,CAAC;IAEX,uDAAuD;KACxD,EAAE;QAAC,SAAS,CAAC,IAAI;KAAC,CAAC,CAAC;IAErB,IAAI,CAAC,UAAU,IAAI,OAAO,UAAU,KAAK,QAAQ,EAC/C,qBACE,gCAAC,CAAA,GAAA,6BAAa,CAAA;kBACZ,cAAA,gCAAC,CAAA,GAAA,oBAAI,CAAA;YAAC,OAAO,EAAE,CAAC;YAAE,KAAK,EAAC,QAAQ;YAAC,OAAO,EAAC,QAAQ;sBAC/C,cAAA,gCAAC,CAAA,GAAA,uBAAO,CAAA,KAAG;UACN;MACO,CAChB;IAGJ,qBACE,iCAAC,CAAA,GAAA,6BAAa,CAAA;;0BACZ,gCAAC,UAAQ;gBACP,KAAK,EAAE;oBAAE,QAAQ,EAAE,CAAC,QAAQ,CAAC;oBAAE,aAAa,EAAE,CAAC,IAAI,CAAC;oBAAE,OAAO,EAAE,CAAC;iBAAE;gBAClE,GAAG,EAAE,KAAK;gBACV,KAAK,EAAE,UAAU;gBACjB,QAAQ;gBACR,QAAQ,EAAE,EAAE;cACZ;0BACF,iCAAC,CAAA,GAAA,oBAAI,CAAA;gBAAC,SAAS,EAAC,QAAQ;gBAAC,KAAK,EAAE;oBAAE,MAAM,EAAE,CAAC,IAAI,CAAC;iBAAE;;kCAChD,gCAAC,CAAA,GAAA,oBAAI,CAAA;wBAAC,OAAO,EAAE,CAAC;wBAAE,YAAY;kCAC5B,cAAA,iCAAC,CAAA,GAAA,oBAAI,CAAA;4BAAC,KAAK,EAAC,QAAQ;4BAAC,GAAG,EAAE,CAAC;;8CACzB,gCAAC,CAAA,GAAA,oBAAI,CAAA;oCAAC,KAAK,EAAC,QAAQ;oCAAC,GAAG,EAAE,CAAC;8CACzB,cAAA,gCAAC,CAAA,GAAA,sBAAM,CAAA;wCACL,QAAQ,EAAE;AAAC,6CAAC;yCAAC;wCACb,OAAO,EAAE,CAAC;wCACV,IAAI,EAAC,SAAS;wCACd,IAAI,EAAE,UAAU,KAAK,QAAQ,GAAG,SAAS,GAAG,OAAO;wCACnD,IAAI,EAAE,CAAA,GAAA,mCAAgB,CAAA;wCACtB,OAAO,EAAE,IACP,aAAa,CAAC,UAAU,KAAK,QAAQ,GAAG,SAAS,GAAG,QAAQ,CAAC;sCAE/D;kCACG;8CACP,gCAAC,CAAA,GAAA,mBAAG,CAAA;oCAAC,IAAI,EAAE,CAAC;8CACV,cAAA,gCAAC,CAAA,GAAA,oBAAI,CAAA;wCAAC,IAAI,EAAE,CAAC;wCAAE,YAAY,EAAC,UAAU;kDACnC,UAAU;sCACN;kCACH;8CACN,iCAAC,CAAA,GAAA,oBAAI,CAAA;oCAAC,KAAK,EAAC,QAAQ;oCAAC,GAAG,EAAE,CAAC;;wCACxB,MAAM,EAAE,MAAM,iBACb,gCAAC,CAAA,GAAA,sBAAM,CAAA;4CACL,QAAQ,EAAE;AAAC,iDAAC;6CAAC;4CACb,OAAO,EAAE,CAAC;4CACV,IAAI,EAAE,CAAA,GAAA,2BAAQ,CAAA;4CACd,KAAK,EAAC,QAAQ;4CACd,YAAU,EAAC,QAAQ;4CACnB,OAAO,EAAE,IAAM,YAAY,EAAE;0CAC7B,GACA,IAAI;sDACR,gCAAC,CAAA,GAAA,sBAAM,CAAA;4CACL,QAAQ,EAAE;AAAC,iDAAC;6CAAC;4CACb,IAAI,EAAE,CAAA,GAAA,2BAAQ,CAAA;4CACd,OAAO,EAAE;AAAC,iDAAC;6CAAC;4CACZ,KAAK,EAAC,MAAM;4CACZ,YAAU,EAAC,MAAM;4CACjB,OAAO,EAAE,IAAM,UAAU,EAAE;0CAC3B;sDACF,gCAAC,CAAA,GAAA,sBAAM,CAAA;4CACL,QAAQ,EAAE;AAAC,iDAAC;6CAAC;4CACb,IAAI,EAAE,CAAA,GAAA,4BAAS,CAAA;4CACf,OAAO,EAAE;AAAC,iDAAC;6CAAC;4CACZ,IAAI,EAAC,MAAM;4CACX,IAAI,EAAC,SAAS;4CACd,OAAO,EAAE,IAAM,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC;0CACtC;;kCACG;;0BACF;sBACF;kCACP,gCAAC,CAAA,GAAA,oBAAI,CAAA;wBACH,IAAI,EAAC,aAAa;wBAClB,OAAO,EAAE,UAAU,KAAK,QAAQ,GAAG,CAAC,GAAG,CAAC;wBACxC,KAAK,EAAE;4BAAE,MAAM,EAAE,CAAC,IAAI,CAAC;yBAAE;kCAEzB,cAAA,gCAAC,CAAA,GAAA,oBAAI,CAAA;4BAAC,KAAK,EAAC,QAAQ;4BAAC,OAAO,EAAC,QAAQ;4BAAC,KAAK,EAAE;gCAAE,MAAM,EAAE,CAAC,IAAI,CAAC;6BAAE;sCAC7D,cAAA,gCAAC,QAAM;gCACL,GAAG,EAAE,MAAM;gCACX,KAAK,EAAC,SAAS;gCACf,KAAK,EAAE,2BAAK,CAAC,UAAU,CAAC;gCACxB,WAAW,EAAC,GAAG;gCACf,GAAG,EAAE,UAAU;8BACf;0BACG;sBACF;;cACF;;MACO,CAChB;CACH;IAED,wCAAsB,GAAP,4BAAM;;AD3MrB;IAEA,wCAA8B,GAAf,CAAA,GAAA,wCAAe,CAAA","sources":["src/index.ts","src/Iframe.tsx"],"sourcesContent":["import IframeComponent, {IframeOptions as IframeOptionsType} from './Iframe'\n\nexport default IframeComponent\n\nexport type IframeOptions = IframeOptionsType\n","import React, { useEffect, useState, useRef } from \"react\";\nimport { SanityDocumentLike } from \"sanity\";\nimport {\n  Box,\n  Flex,\n  Text,\n  Button,\n  ThemeProvider,\n  Card,\n  Spinner,\n} from \"@sanity/ui\";\nimport { UndoIcon, CopyIcon, LeaveIcon, MobileDeviceIcon } from \"@sanity/icons\";\n\nimport { useCopyToClipboard } from \"usehooks-ts\";\n\ntype Size = \"desktop\" | \"mobile\";\n\ntype SizeProps = {\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?: Size;\n  reload?: {\n    revision?: boolean;\n    button?: boolean;\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 { url, defaultSize = DEFAULT_SIZE, reload } = options;\n  const [displayUrl, setDisplayUrl] = useState(\n    url && typeof url === \"string\" ? url : ``\n  );\n  const [iframeSize, setIframeSize] = useState(\n    sizes?.[defaultSize] ? defaultSize : DEFAULT_SIZE\n  );\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\n  // Reload on new revisions\n  useEffect(() => {\n    if (reload?.revision) {\n      handleReload();\n    }\n  }, [displayed._rev, reload?.revision]);\n\n  // Set initial URL and refresh on new revisions\n  useEffect(() => {\n    const getUrl = async () => {\n      const resolveUrl = typeof url === \"function\" ? await url(displayed) : ``;\n\n      // Only update state if URL has changed\n      if (\n        resolveUrl !== displayUrl &&\n        resolveUrl &&\n        typeof resolveUrl === \"string\"\n      ) {\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={() =>\n                  setIframeSize(iframeSize === \"mobile\" ? \"desktop\" : \"mobile\")\n                }\n              />\n            </Flex>\n            <Box flex={1}>\n              <Text size={0} textOverflow=\"ellipsis\">\n                {displayUrl}\n              </Text>\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\n          tone=\"transparent\"\n          padding={iframeSize === \"mobile\" ? 2 : 0}\n          style={{ height: `100%` }}\n        >\n          <Flex align=\"center\" justify=\"center\" style={{ height: `100%` }}>\n            <iframe\n              ref={iframe}\n              title=\"preview\"\n              style={sizes[iframeSize]}\n              frameBorder=\"0\"\n              src={displayUrl}\n            />\n          </Flex>\n        </Card>\n      </Flex>\n    </ThemeProvider>\n  );\n}\n\nexport default Iframe;\n"],"names":[],"version":3,"file":"index.js.map","sourceRoot":"../../"}

package/lib/esm/index.js

@@ -0,0 +1,195 @@
+import {jsx as $gGrEF$jsx, jsxs as $gGrEF$jsxs} from "react/jsx-runtime";
+import {useState as $gGrEF$useState, useRef as $gGrEF$useRef, useEffect as $gGrEF$useEffect} from "react";
+import {ThemeProvider as $gGrEF$ThemeProvider, Flex as $gGrEF$Flex, Spinner as $gGrEF$Spinner, Card as $gGrEF$Card, Button as $gGrEF$Button, Box as $gGrEF$Box, Text as $gGrEF$Text} from "@sanity/ui";
+import {MobileDeviceIcon as $gGrEF$MobileDeviceIcon, UndoIcon as $gGrEF$UndoIcon, CopyIcon as $gGrEF$CopyIcon, LeaveIcon as $gGrEF$LeaveIcon} from "@sanity/icons";
+import {useCopyToClipboard as $gGrEF$useCopyToClipboard} from "usehooks-ts";
+
+
+
+
+
+
+const $b1fbe8f05b2a0ffa$var$sizes = {
+    desktop: {
+        width: `100%`,
+        height: `100%`,
+        maxHeight: `100%`
+    },
+    mobile: {
+        width: 414,
+        height: `100%`,
+        maxHeight: 736
+    }
+};
+const $b1fbe8f05b2a0ffa$var$DEFAULT_SIZE = `desktop`;
+function $b1fbe8f05b2a0ffa$var$Iframe(props) {
+    const { document: sanityDocument , options: options  } = props;
+    const { url: url , defaultSize: defaultSize = $b1fbe8f05b2a0ffa$var$DEFAULT_SIZE , reload: reload  } = options;
+    const [displayUrl, setDisplayUrl] = (0, $gGrEF$useState)(url && typeof url === "string" ? url : ``);
+    const [iframeSize, setIframeSize] = (0, $gGrEF$useState)($b1fbe8f05b2a0ffa$var$sizes?.[defaultSize] ? defaultSize : $b1fbe8f05b2a0ffa$var$DEFAULT_SIZE);
+    const input = (0, $gGrEF$useRef)(null);
+    const iframe = (0, $gGrEF$useRef)(null);
+    const { displayed: displayed  } = sanityDocument;
+    const [, copy] = (0, $gGrEF$useCopyToClipboard)();
+    function handleCopy() {
+        if (!input?.current?.value) return;
+        copy(input.current.value);
+    }
+    function handleReload() {
+        if (!iframe?.current) return;
+        // Funky way to reload an iframe without CORS issuies
+        // eslint-disable-next-line no-self-assign
+        iframe.current.src = iframe.current.src;
+    }
+    // Reload on new revisions
+    (0, $gGrEF$useEffect)(()=>{
+        if (reload?.revision) handleReload();
+    }, [
+        displayed._rev,
+        reload?.revision
+    ]);
+    // Set initial URL and refresh on new revisions
+    (0, $gGrEF$useEffect)(()=>{
+        const getUrl = async ()=>{
+            const resolveUrl = typeof url === "function" ? await url(displayed) : ``;
+            // Only update state if URL has changed
+            if (resolveUrl !== displayUrl && resolveUrl && typeof resolveUrl === "string") setDisplayUrl(resolveUrl);
+        };
+        if (typeof url === "function") getUrl();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        displayed._rev
+    ]);
+    if (!displayUrl || typeof displayUrl !== "string") return /*#__PURE__*/ (0, $gGrEF$jsx)((0, $gGrEF$ThemeProvider), {
+        children: /*#__PURE__*/ (0, $gGrEF$jsx)((0, $gGrEF$Flex), {
+            padding: 5,
+            align: "center",
+            justify: "center",
+            children: /*#__PURE__*/ (0, $gGrEF$jsx)((0, $gGrEF$Spinner), {})
+        })
+    });
+    return /*#__PURE__*/ (0, $gGrEF$jsxs)((0, $gGrEF$ThemeProvider), {
+        children: [
+            /*#__PURE__*/ (0, $gGrEF$jsx)("textarea", {
+                style: {
+                    position: `absolute`,
+                    pointerEvents: `none`,
+                    opacity: 0
+                },
+                ref: input,
+                value: displayUrl,
+                readOnly: true,
+                tabIndex: -1
+            }),
+            /*#__PURE__*/ (0, $gGrEF$jsxs)((0, $gGrEF$Flex), {
+                direction: "column",
+                style: {
+                    height: `100%`
+                },
+                children: [
+                    /*#__PURE__*/ (0, $gGrEF$jsx)((0, $gGrEF$Card), {
+                        padding: 2,
+                        borderBottom: true,
+                        children: /*#__PURE__*/ (0, $gGrEF$jsxs)((0, $gGrEF$Flex), {
+                            align: "center",
+                            gap: 2,
+                            children: [
+                                /*#__PURE__*/ (0, $gGrEF$jsx)((0, $gGrEF$Flex), {
+                                    align: "center",
+                                    gap: 1,
+                                    children: /*#__PURE__*/ (0, $gGrEF$jsx)((0, $gGrEF$Button), {
+                                        fontSize: [
+                                            1
+                                        ],
+                                        padding: 2,
+                                        tone: "primary",
+                                        mode: iframeSize === "mobile" ? "default" : "ghost",
+                                        icon: (0, $gGrEF$MobileDeviceIcon),
+                                        onClick: ()=>setIframeSize(iframeSize === "mobile" ? "desktop" : "mobile")
+                                    })
+                                }),
+                                /*#__PURE__*/ (0, $gGrEF$jsx)((0, $gGrEF$Box), {
+                                    flex: 1,
+                                    children: /*#__PURE__*/ (0, $gGrEF$jsx)((0, $gGrEF$Text), {
+                                        size: 0,
+                                        textOverflow: "ellipsis",
+                                        children: displayUrl
+                                    })
+                                }),
+                                /*#__PURE__*/ (0, $gGrEF$jsxs)((0, $gGrEF$Flex), {
+                                    align: "center",
+                                    gap: 1,
+                                    children: [
+                                        reload?.button ? /*#__PURE__*/ (0, $gGrEF$jsx)((0, $gGrEF$Button), {
+                                            fontSize: [
+                                                1
+                                            ],
+                                            padding: 2,
+                                            icon: (0, $gGrEF$UndoIcon),
+                                            title: "Reload",
+                                            "aria-label": "Reload",
+                                            onClick: ()=>handleReload()
+                                        }) : null,
+                                        /*#__PURE__*/ (0, $gGrEF$jsx)((0, $gGrEF$Button), {
+                                            fontSize: [
+                                                1
+                                            ],
+                                            icon: (0, $gGrEF$CopyIcon),
+                                            padding: [
+                                                2
+                                            ],
+                                            title: "Copy",
+                                            "aria-label": "Copy",
+                                            onClick: ()=>handleCopy()
+                                        }),
+                                        /*#__PURE__*/ (0, $gGrEF$jsx)((0, $gGrEF$Button), {
+                                            fontSize: [
+                                                1
+                                            ],
+                                            icon: (0, $gGrEF$LeaveIcon),
+                                            padding: [
+                                                2
+                                            ],
+                                            text: "Open",
+                                            tone: "primary",
+                                            onClick: ()=>window.open(displayUrl)
+                                        })
+                                    ]
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ (0, $gGrEF$jsx)((0, $gGrEF$Card), {
+                        tone: "transparent",
+                        padding: iframeSize === "mobile" ? 2 : 0,
+                        style: {
+                            height: `100%`
+                        },
+                        children: /*#__PURE__*/ (0, $gGrEF$jsx)((0, $gGrEF$Flex), {
+                            align: "center",
+                            justify: "center",
+                            style: {
+                                height: `100%`
+                            },
+                            children: /*#__PURE__*/ (0, $gGrEF$jsx)("iframe", {
+                                ref: iframe,
+                                title: "preview",
+                                style: $b1fbe8f05b2a0ffa$var$sizes[iframeSize],
+                                frameBorder: "0",
+                                src: displayUrl
+                            })
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+}
+var $b1fbe8f05b2a0ffa$export$2e2bcd8739ae039 = $b1fbe8f05b2a0ffa$var$Iframe;
+
+
+var $df9eabe9bda49ea8$export$2e2bcd8739ae039 = (0, $b1fbe8f05b2a0ffa$export$2e2bcd8739ae039);
+
+
+export {$df9eabe9bda49ea8$export$2e2bcd8739ae039 as default};
+//# sourceMappingURL=index.js.map

package/lib/esm/index.js.map

@@ -0,0 +1 @@
+{"mappings":"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","sources":["src/index.ts","src/Iframe.tsx"],"sourcesContent":["import IframeComponent, {IframeOptions as IframeOptionsType} from './Iframe'\n\nexport default IframeComponent\n\nexport type IframeOptions = IframeOptionsType\n","import React, { useEffect, useState, useRef } from \"react\";\nimport { SanityDocumentLike } from \"sanity\";\nimport {\n  Box,\n  Flex,\n  Text,\n  Button,\n  ThemeProvider,\n  Card,\n  Spinner,\n} from \"@sanity/ui\";\nimport { UndoIcon, CopyIcon, LeaveIcon, MobileDeviceIcon } from \"@sanity/icons\";\n\nimport { useCopyToClipboard } from \"usehooks-ts\";\n\ntype Size = \"desktop\" | \"mobile\";\n\ntype SizeProps = {\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?: Size;\n  reload?: {\n    revision?: boolean;\n    button?: boolean;\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 { url, defaultSize = DEFAULT_SIZE, reload } = options;\n  const [displayUrl, setDisplayUrl] = useState(\n    url && typeof url === \"string\" ? url : ``\n  );\n  const [iframeSize, setIframeSize] = useState(\n    sizes?.[defaultSize] ? defaultSize : DEFAULT_SIZE\n  );\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\n  // Reload on new revisions\n  useEffect(() => {\n    if (reload?.revision) {\n      handleReload();\n    }\n  }, [displayed._rev, reload?.revision]);\n\n  // Set initial URL and refresh on new revisions\n  useEffect(() => {\n    const getUrl = async () => {\n      const resolveUrl = typeof url === \"function\" ? await url(displayed) : ``;\n\n      // Only update state if URL has changed\n      if (\n        resolveUrl !== displayUrl &&\n        resolveUrl &&\n        typeof resolveUrl === \"string\"\n      ) {\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={() =>\n                  setIframeSize(iframeSize === \"mobile\" ? \"desktop\" : \"mobile\")\n                }\n              />\n            </Flex>\n            <Box flex={1}>\n              <Text size={0} textOverflow=\"ellipsis\">\n                {displayUrl}\n              </Text>\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\n          tone=\"transparent\"\n          padding={iframeSize === \"mobile\" ? 2 : 0}\n          style={{ height: `100%` }}\n        >\n          <Flex align=\"center\" justify=\"center\" style={{ height: `100%` }}>\n            <iframe\n              ref={iframe}\n              title=\"preview\"\n              style={sizes[iframeSize]}\n              frameBorder=\"0\"\n              src={displayUrl}\n            />\n          </Flex>\n        </Card>\n      </Flex>\n    </ThemeProvider>\n  );\n}\n\nexport default Iframe;\n"],"names":[],"version":3,"file":"index.js.map","sourceRoot":"../../"}

package/lib/types/index.d.ts

@@ -0,0 +1,21 @@
+import { SanityDocumentLike } from "sanity";
+type Size = "desktop" | "mobile";
+type _IframeOptions1 = {
+    url: string | ((document: SanityDocumentLike) => unknown);
+    defaultSize?: Size;
+    reload?: {
+        revision?: boolean;
+        button?: boolean;
+    };
+};
+type IframeProps = {
+    document: {
+        displayed: SanityDocumentLike;
+    };
+    options: _IframeOptions1;
+};
+declare function Iframe(props: IframeProps): JSX.Element;
+export default IframeComponent;
+export type IframeOptions = _IframeOptions1;
+
+//# sourceMappingURL=index.d.ts.map

package/lib/types/index.d.ts.map

@@ -0,0 +1 @@
+{"mappings":";AAeA,YAAY,SAAS,GAAG,QAAQ,CAAC;AAuBjC,uBAA4B;IAC1B,GAAG,EAAE,MAAM,GAAG,CAAC,CAAC,QAAQ,EAAE,kBAAkB,KAAK,OAAO,CAAC,CAAC;IAC1D,WAAW,CAAC,EAAE,IAAI,CAAC;IACnB,MAAM,CAAC,EAAE;QACP,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,MAAM,CAAC,EAAE,OAAO,CAAC;KAClB,CAAC;CACH,CAAC;AAEF,mBAA0B;IACxB,QAAQ,EAAE;QACR,SAAS,EAAE,kBAAkB,CAAC;KAC/B,CAAC;IACF,OAAO,EAAE,eAAa,CAAC;CACxB,CAAC;AAIF,wBAAgB,KAAK,EAAE,WAAW,eAiJjC;ACvMD,eAAe,eAAe,CAAA;AAE9B,4BAA4B,eAAiB,CAAA","sources":["src/src/Iframe.tsx","src/src/index.ts","src/index.ts"],"sourcesContent":[null,null,"import IframeComponent, {IframeOptions as IframeOptionsType} from './Iframe'\n\nexport default IframeComponent\n\nexport type IframeOptions = IframeOptionsType\n"],"names":[],"version":3,"file":"index.d.ts.map","sourceRoot":"../../"}

package/package.json

@@ -1,42 +1,78 @@
 {
   "name": "sanity-plugin-iframe-pane",
-  "version": "1.1.4",
+  "version": "2.0.1-v3-studio.1",
   "description": "Display any URL in a View Pane, along with helpful buttons to Copy the URL or open in a new tab",
-  "main": "lib/Iframe.js",
+  "author": "Simeon Griggs <simeon@sanity.io>",
+  "license": "MIT",
+  "source": "./src/index.ts",
+  "main": "./lib/cjs/index.js",
+  "module": "./lib/esm/index.js",
+  "types": "./lib/types/index.d.ts",
+  "exports": {
+    ".": {
+      "require": "./lib/cjs/index.js",
+      "default": "./lib/esm/index.js"
+    }
+  },
+  "files": [
+    "src",
+    "lib",
+    "v2-incompatible.js",
+    "sanity.json"
+  ],
   "scripts": {
-    "build": "sanipack build",
-    "watch": "sanipack build --watch",
-    "prepublishOnly": "sanipack build && sanipack verify",
+    "clean": "rimraf lib",
     "lint": "eslint .",
-    "lint:fix": "eslint . --fix"
+    "prebuild": "npm run clean && plugin-kit verify-package --silent",
+    "build": "parcel build --no-cache",
+    "watch": "parcel watch",
+    "link-watch": "plugin-kit link-watch",
+    "prepublishOnly": "npm run build",
+    "prepare": "husky install"
   },
   "repository": {
     "type": "git",
-    "url": "git+ssh://git@github.com/SimeonGriggs/sanity-plugin-iframe-pane.git"
+    "url": "git@github.com:sanity-io/sanity-plugin-iframe-pane.git"
+  },
+  "engines": {
+    "node": ">=14.0.0"
   },
-  "keywords": [
-    "sanity",
-    "sanity-plugin"
-  ],
-  "author": "Simeon Griggs <simeon@sanity.io>",
-  "license": "MIT",
   "dependencies": {
-    "@sanity/icons": "^1.2.1",
-    "@sanity/ui": "^0.36.12"
+    "@sanity/icons": "^1.3.1",
+    "@sanity/incompatible-plugin": "^1.0.4",
+    "@sanity/ui": "^1.0.0-beta.31",
+    "usehooks-ts": "^2.6.0"
   },
   "devDependencies": {
-    "@sanity/eslint-config-studio": "^2.0.0",
-    "eslint": "8.19.0",
+    "@commitlint/cli": "^17.1.2",
+    "@commitlint/config-conventional": "^17.1.0",
+    "@parcel/packager-ts": "^2.6.2",
+    "@parcel/transformer-typescript-types": "^2.6.2",
+    "@sanity/plugin-kit": "^1.1.0-ecosystem-preset.9",
+    "@sanity/semantic-release-preset": "^2.0.2",
+    "@typescript-eslint/eslint-plugin": "^5.41.0",
+    "@typescript-eslint/parser": "^5.41.0",
+    "eslint": "^8.26.0",
     "eslint-config-prettier": "^8.5.0",
-    "eslint-config-sanity": "6.0.0",
+    "eslint-config-sanity": "^6.0.0",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.30.1",
-    "prettier": "2.4.1",
-    "sanity": "^2.29.3",
-    "sanipack": "2.0.1",
-    "typescript": "^4.7.4"
+    "eslint-plugin-react": "^7.31.10",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "husky": "^8.0.1",
+    "lint-staged": "^13.0.3",
+    "parcel": "~2.6.0",
+    "prettier": "^2.7.1",
+    "react": "^18.0.0",
+    "rimraf": "^3.0.2",
+    "sanity": "dev-preview || 3.0.0-dev-preview.22",
+    "typescript": "~4.7.0"
   },
   "peerDependencies": {
-    "react": "^17.0.2"
-  }
+    "react": "^18.0.0",
+    "sanity": "dev-preview || 3.0.0-dev-preview.22"
+  },
+  "bugs": {
+    "url": "https://github.com/sanity-io/sanity-plugin-iframe-pane/issues"
+  },
+  "homepage": "https://github.com/sanity-io/sanity-plugin-iframe-pane#readme"
 }

package/sanity.json

@@ -1,7 +1,8 @@
 {
-  "paths": {
-    "source": "./src",
-    "compiled": "./lib"
-  },
-  "parts": []
-}
+  "parts": [
+    {
+      "implements": "part:@sanity/base/sanity-root",
+      "path": "./v2-incompatible.js"
+    }
+  ]
+}

package/src/Iframe.tsx

@@ -1,118 +1,149 @@
-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 useCopyToClipboard from './hooks/useCopytoClipboard'
-
-const sizes = {
-  desktop: {backgroundColor: `white`, width: `100%`, height: `100%`, maxHeight: `100%`},
-  mobile: {backgroundColor: `white`, width: 414, height: `100%`, maxHeight: 736},
-}
+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 { useCopyToClipboard } from "usehooks-ts";
+
+type Size = "desktop" | "mobile";
+
+type SizeProps = {
+  [key in Size]: {
+    width: string | number;
+    height: string | number;
+    maxHeight: string | number;
+  };
+};
+
+const sizes: SizeProps = {
+  desktop: {
+    width: `100%`,
+    height: `100%`,
+    maxHeight: `100%`,
+  },
+  mobile: {
+    width: 414,
+    height: `100%`,
+    maxHeight: 736,
+  },
+};
 
 export type IframeOptions = {
-  url: string | ((document: SanityDocumentLike) => unknown)
-  defaultSize?: 'desktop' | 'mobile'
-  reload: {
-    revision: boolean | number
-    button: boolean
-  }
-  attributes?: Partial<{
-    allow: string
-    referrerPolicy: string
-    sandbox: string
-  }>
-}
+  url: string | ((document: SanityDocumentLike) => unknown);
+  defaultSize?: Size;
+  reload?: {
+    revision?: boolean;
+    button?: boolean;
+  };
+};
 
 export type IframeProps = {
   document: {
-    displayed: SanityDocumentLike
-  }
-  options: IframeOptions
-}
+    displayed: SanityDocumentLike;
+  };
+  options: IframeOptions;
+};
+
+const DEFAULT_SIZE = `desktop`;
 
 function Iframe(props: IframeProps) {
-  const {document: sanityDocument, options} = props
-  const {url, defaultSize = `desktop`, reload, attributes = {}} = options
-  const [displayUrl, setDisplayUrl] = useState(typeof url === 'string' ? url : ``)
-  const [iframeSize, setIframeSize] = useState(defaultSize)
-  const input = useRef()
-  const iframe = useRef()
-  const {displayed} = sanityDocument
-  const [, copy] = useCopyToClipboard()
+  const { document: sanityDocument, options } = props;
+  const { url, defaultSize = DEFAULT_SIZE, reload } = options;
+  const [displayUrl, setDisplayUrl] = useState(
+    url && typeof url === "string" ? url : ``
+  );
+  const [iframeSize, setIframeSize] = useState(
+    sizes?.[defaultSize] ? defaultSize : DEFAULT_SIZE
+  );
+  const input = useRef<HTMLTextAreaElement>(null);
+  const iframe = useRef<HTMLIFrameElement>(null);
+  const { displayed } = sanityDocument;
+  const [, copy] = useCopyToClipboard();
 
   function handleCopy() {
-    if (!input?.current?.value) return
+    if (!input?.current?.value) return;
 
-    copy(input.current.value)
+    copy(input.current.value);
   }
 
   function handleReload() {
     if (!iframe?.current) {
-      return
+      return;
     }
 
     // Funky way to reload an iframe without CORS issuies
     // eslint-disable-next-line no-self-assign
-    iframe.current.src = iframe.current.src
+    iframe.current.src = iframe.current.src;
   }
 
   // Reload on new revisions
   useEffect(() => {
-    if (reload?.revision || reload?.revision == 0) {
-      setTimeout(() => {
-        handleReload()
-      }, Number(reload?.revision))
+    if (reload?.revision) {
+      handleReload();
     }
-  }, [displayed._rev, reload?.revision])
+  }, [displayed._rev, reload?.revision]);
 
   // Set initial URL and refresh on new revisions
   useEffect(() => {
     const getUrl = async () => {
-      const resolveUrl = typeof url === 'function' ? await url(displayed) : ``
+      const resolveUrl = typeof url === "function" ? await url(displayed) : ``;
 
       // Only update state if URL has changed
-      if (resolveUrl !== displayUrl) {
-        setDisplayUrl(resolveUrl)
+      if (
+        resolveUrl !== displayUrl &&
+        resolveUrl &&
+        typeof resolveUrl === "string"
+      ) {
+        setDisplayUrl(resolveUrl);
       }
-    }
+    };
 
-    if (typeof url === 'function') {
-      getUrl()
+    if (typeof url === "function") {
+      getUrl();
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [displayed._rev])
+  }, [displayed._rev]);
 
-  if (!displayUrl || typeof displayUrl !== 'string') {
+  if (!displayUrl || typeof displayUrl !== "string") {
     return (
       <ThemeProvider>
-        <Flex padding={5} items="center" justify="center">
+        <Flex padding={5} align="center" justify="center">
           <Spinner />
         </Flex>
       </ThemeProvider>
-    )
+    );
   }
 
   return (
     <ThemeProvider>
       <textarea
-        style={{position: `absolute`, pointerEvents: `none`, opacity: 0}}
+        style={{ position: `absolute`, pointerEvents: `none`, opacity: 0 }}
         ref={input}
         value={displayUrl}
         readOnly
         tabIndex={-1}
       />
-      <Flex direction="column" style={{height: `100%`}}>
-        <Card padding={2} borderBottom={1}>
+      <Flex direction="column" style={{ height: `100%` }}>
+        <Card padding={2} borderBottom>
           <Flex align="center" gap={2}>
             <Flex align="center" gap={1}>
               <Button
                 fontSize={[1]}
                 padding={2}
                 tone="primary"
-                mode={iframeSize === 'mobile' ? 'default' : 'ghost'}
+                mode={iframeSize === "mobile" ? "default" : "ghost"}
                 icon={MobileDeviceIcon}
-                onClick={() => setIframeSize(iframeSize === 'mobile' ? 'desktop' : 'mobile')}
+                onClick={() =>
+                  setIframeSize(iframeSize === "mobile" ? "desktop" : "mobile")
+                }
               />
             </Flex>
             <Box flex={1}>
@@ -150,21 +181,24 @@ function Iframe(props: IframeProps) {
             </Flex>
           </Flex>
         </Card>
-        <Card tone="transparent" padding={iframeSize === 'mobile' ? 2 : 0} style={{height: `100%`}}>
-          <Flex align="center" justify="center" style={{height: `100%`}}>
+        <Card
+          tone="transparent"
+          padding={iframeSize === "mobile" ? 2 : 0}
+          style={{ height: `100%` }}
+        >
+          <Flex align="center" justify="center" style={{ height: `100%` }}>
             <iframe
               ref={iframe}
               title="preview"
               style={sizes[iframeSize]}
               frameBorder="0"
               src={displayUrl}
-              {...attributes}
             />
           </Flex>
         </Card>
       </Flex>
     </ThemeProvider>
-  )
+  );
 }
 
-export default Iframe
+export default Iframe;

package/src/index.ts

@@ -0,0 +1,5 @@
+import IframeComponent, {IframeOptions as IframeOptionsType} from './Iframe'
+
+export default IframeComponent
+
+export type IframeOptions = IframeOptionsType

package/v2-incompatible.js

@@ -0,0 +1,11 @@
+const {showIncompatiblePluginDialog} = require('@sanity/incompatible-plugin')
+const {name, version, sanityExchangeUrl} = require('./package.json')
+
+export default showIncompatiblePluginDialog({
+  name: name,
+  versions: {
+    v3: version,
+    v2: undefined,
+  },
+  sanityExchangeUrl,
+})

package/.babelrc

@@ -1,3 +0,0 @@
-{
-  "extends": "sanipack/babel"
-}

package/lib/Iframe.js

@@ -1,193 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _ui = require("@sanity/ui");
-var _icons = require("@sanity/icons");
-var _useCopytoClipboard = _interopRequireDefault(require("./hooks/useCopytoClipboard"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
-function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-var sizes = {
-  desktop: {
-    backgroundColor: "white",
-    width: "100%",
-    height: "100%",
-    maxHeight: "100%"
-  },
-  mobile: {
-    backgroundColor: "white",
-    width: 414,
-    height: "100%",
-    maxHeight: 736
-  }
-};
-function Iframe(props) {
-  var sanityDocument = props.document,
-    options = props.options;
-  var url = options.url,
-    _options$defaultSize = options.defaultSize,
-    defaultSize = _options$defaultSize === void 0 ? "desktop" : _options$defaultSize,
-    reload = options.reload,
-    _options$attributes = options.attributes,
-    attributes = _options$attributes === void 0 ? {} : _options$attributes;
-  var _useState = (0, _react.useState)(typeof url === 'string' ? url : ""),
-    _useState2 = _slicedToArray(_useState, 2),
-    displayUrl = _useState2[0],
-    setDisplayUrl = _useState2[1];
-  var _useState3 = (0, _react.useState)(defaultSize),
-    _useState4 = _slicedToArray(_useState3, 2),
-    iframeSize = _useState4[0],
-    setIframeSize = _useState4[1];
-  var input = (0, _react.useRef)();
-  var iframe = (0, _react.useRef)();
-  var displayed = sanityDocument.displayed;
-  var _useCopyToClipboard = (0, _useCopytoClipboard.default)(),
-    _useCopyToClipboard2 = _slicedToArray(_useCopyToClipboard, 2),
-    copy = _useCopyToClipboard2[1];
-  function handleCopy() {
-    var _input$current;
-    if (!(input !== null && input !== void 0 && (_input$current = input.current) !== null && _input$current !== void 0 && _input$current.value)) return;
-    copy(input.current.value);
-  }
-  function handleReload() {
-    if (!(iframe !== null && iframe !== void 0 && iframe.current)) {
-      return;
-    }
-
-    // Funky way to reload an iframe without CORS issuies
-    // eslint-disable-next-line no-self-assign
-    iframe.current.src = iframe.current.src;
-  }
-
-  // Reload on new revisions
-  (0, _react.useEffect)(() => {
-    if (reload !== null && reload !== void 0 && reload.revision || (reload === null || reload === void 0 ? void 0 : reload.revision) == 0) {
-      setTimeout(() => {
-        handleReload();
-      }, Number(reload === null || reload === void 0 ? void 0 : reload.revision));
-    }
-  }, [displayed._rev, reload === null || reload === void 0 ? void 0 : reload.revision]);
-
-  // Set initial URL and refresh on new revisions
-  (0, _react.useEffect)(() => {
-    var getUrl = /*#__PURE__*/function () {
-      var _ref = _asyncToGenerator(function* () {
-        var resolveUrl = typeof url === 'function' ? yield url(displayed) : "";
-
-        // Only update state if URL has changed
-        if (resolveUrl !== displayUrl) {
-          setDisplayUrl(resolveUrl);
-        }
-      });
-      return function getUrl() {
-        return _ref.apply(this, arguments);
-      };
-    }();
-    if (typeof url === 'function') {
-      getUrl();
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [displayed._rev]);
-  if (!displayUrl || typeof displayUrl !== 'string') {
-    return /*#__PURE__*/_react.default.createElement(_ui.ThemeProvider, null, /*#__PURE__*/_react.default.createElement(_ui.Flex, {
-      padding: 5,
-      items: "center",
-      justify: "center"
-    }, /*#__PURE__*/_react.default.createElement(_ui.Spinner, null)));
-  }
-  return /*#__PURE__*/_react.default.createElement(_ui.ThemeProvider, null, /*#__PURE__*/_react.default.createElement("textarea", {
-    style: {
-      position: "absolute",
-      pointerEvents: "none",
-      opacity: 0
-    },
-    ref: input,
-    value: displayUrl,
-    readOnly: true,
-    tabIndex: -1
-  }), /*#__PURE__*/_react.default.createElement(_ui.Flex, {
-    direction: "column",
-    style: {
-      height: "100%"
-    }
-  }, /*#__PURE__*/_react.default.createElement(_ui.Card, {
-    padding: 2,
-    borderBottom: 1
-  }, /*#__PURE__*/_react.default.createElement(_ui.Flex, {
-    align: "center",
-    gap: 2
-  }, /*#__PURE__*/_react.default.createElement(_ui.Flex, {
-    align: "center",
-    gap: 1
-  }, /*#__PURE__*/_react.default.createElement(_ui.Button, {
-    fontSize: [1],
-    padding: 2,
-    tone: "primary",
-    mode: iframeSize === 'mobile' ? 'default' : 'ghost',
-    icon: _icons.MobileDeviceIcon,
-    onClick: () => setIframeSize(iframeSize === 'mobile' ? 'desktop' : 'mobile')
-  })), /*#__PURE__*/_react.default.createElement(_ui.Box, {
-    flex: 1
-  }, /*#__PURE__*/_react.default.createElement(_ui.Text, {
-    size: 0,
-    textOverflow: "ellipsis"
-  }, displayUrl)), /*#__PURE__*/_react.default.createElement(_ui.Flex, {
-    align: "center",
-    gap: 1
-  }, reload !== null && reload !== void 0 && reload.button ? /*#__PURE__*/_react.default.createElement(_ui.Button, {
-    fontSize: [1],
-    padding: 2,
-    icon: _icons.UndoIcon,
-    title: "Reload",
-    "aria-label": "Reload",
-    onClick: () => handleReload()
-  }) : null, /*#__PURE__*/_react.default.createElement(_ui.Button, {
-    fontSize: [1],
-    icon: _icons.CopyIcon,
-    padding: [2],
-    title: "Copy",
-    "aria-label": "Copy",
-    onClick: () => handleCopy()
-  }), /*#__PURE__*/_react.default.createElement(_ui.Button, {
-    fontSize: [1],
-    icon: _icons.LeaveIcon,
-    padding: [2],
-    text: "Open",
-    tone: "primary",
-    onClick: () => window.open(displayUrl)
-  })))), /*#__PURE__*/_react.default.createElement(_ui.Card, {
-    tone: "transparent",
-    padding: iframeSize === 'mobile' ? 2 : 0,
-    style: {
-      height: "100%"
-    }
-  }, /*#__PURE__*/_react.default.createElement(_ui.Flex, {
-    align: "center",
-    justify: "center",
-    style: {
-      height: "100%"
-    }
-  }, /*#__PURE__*/_react.default.createElement("iframe", _extends({
-    ref: iframe,
-    title: "preview",
-    style: sizes[iframeSize],
-    frameBorder: "0",
-    src: displayUrl
-  }, attributes))))));
-}
-var _default = Iframe;
-exports.default = _default;
-//# sourceMappingURL=Iframe.js.map

package/lib/Iframe.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Iframe.js","names":["sizes","desktop","backgroundColor","width","height","maxHeight","mobile","Iframe","props","sanityDocument","document","options","url","defaultSize","reload","attributes","useState","displayUrl","setDisplayUrl","iframeSize","setIframeSize","input","useRef","iframe","displayed","useCopyToClipboard","copy","handleCopy","current","value","handleReload","src","useEffect","revision","setTimeout","Number","_rev","getUrl","resolveUrl","position","pointerEvents","opacity","MobileDeviceIcon","button","UndoIcon","CopyIcon","LeaveIcon","window","open"],"sources":["../src/Iframe.tsx"],"sourcesContent":["import React, {useEffect, useState, useRef} from 'react'\nimport {SanityDocumentLike} from 'sanity'\nimport {Box, Flex, Text, Button, ThemeProvider, Card, Spinner} from '@sanity/ui'\nimport {UndoIcon, CopyIcon, LeaveIcon, MobileDeviceIcon} from '@sanity/icons'\n\nimport useCopyToClipboard from './hooks/useCopytoClipboard'\n\nconst sizes = {\n  desktop: {backgroundColor: `white`, width: `100%`, height: `100%`, maxHeight: `100%`},\n  mobile: {backgroundColor: `white`, width: 414, height: `100%`, maxHeight: 736},\n}\n\nexport type IframeOptions = {\n  url: string | ((document: SanityDocumentLike) => unknown)\n  defaultSize?: 'desktop' | 'mobile'\n  reload: {\n    revision: boolean | number\n    button: boolean\n  }\n  attributes?: Partial<{\n    allow: string\n    referrerPolicy: string\n    sandbox: string\n  }>\n}\n\nexport type IframeProps = {\n  document: {\n    displayed: SanityDocumentLike\n  }\n  options: IframeOptions\n}\n\nfunction Iframe(props: IframeProps) {\n  const {document: sanityDocument, options} = props\n  const {url, defaultSize = `desktop`, reload, attributes = {}} = options\n  const [displayUrl, setDisplayUrl] = useState(typeof url === 'string' ? url : ``)\n  const [iframeSize, setIframeSize] = useState(defaultSize)\n  const input = useRef()\n  const iframe = useRef()\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\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      const resolveUrl = typeof url === 'function' ? await url(displayed) : ``\n\n      // Only update state if URL has changed\n      if (resolveUrl !== displayUrl) {\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} items=\"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={1}>\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              <Text size={0} textOverflow=\"ellipsis\">\n                {displayUrl}\n              </Text>\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%`}}>\n            <iframe\n              ref={iframe}\n              title=\"preview\"\n              style={sizes[iframeSize]}\n              frameBorder=\"0\"\n              src={displayUrl}\n              {...attributes}\n            />\n          </Flex>\n        </Card>\n      </Flex>\n    </ThemeProvider>\n  )\n}\n\nexport default Iframe\n"],"mappings":";;;;;;AAAA;AAEA;AACA;AAEA;AAA2D;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAE3D,IAAMA,KAAK,GAAG;EACZC,OAAO,EAAE;IAACC,eAAe,SAAS;IAAEC,KAAK,QAAQ;IAAEC,MAAM,QAAQ;IAAEC,SAAS;EAAQ,CAAC;EACrFC,MAAM,EAAE;IAACJ,eAAe,SAAS;IAAEC,KAAK,EAAE,GAAG;IAAEC,MAAM,QAAQ;IAAEC,SAAS,EAAE;EAAG;AAC/E,CAAC;AAuBD,SAASE,MAAM,CAACC,KAAkB,EAAE;EAClC,IAAiBC,cAAc,GAAaD,KAAK,CAA1CE,QAAQ;IAAkBC,OAAO,GAAIH,KAAK,CAAhBG,OAAO;EACxC,IAAOC,GAAG,GAAsDD,OAAO,CAAhEC,GAAG;IAAA,uBAAsDD,OAAO,CAA3DE,WAAW;IAAXA,WAAW;IAAcC,MAAM,GAAqBH,OAAO,CAAlCG,MAAM;IAAA,sBAAqBH,OAAO,CAA1BI,UAAU;IAAVA,UAAU,oCAAG,CAAC,CAAC;EAC5D,gBAAoC,IAAAC,eAAQ,EAAC,OAAOJ,GAAG,KAAK,QAAQ,GAAGA,GAAG,KAAK,CAAC;IAAA;IAAzEK,UAAU;IAAEC,aAAa;EAChC,iBAAoC,IAAAF,eAAQ,EAACH,WAAW,CAAC;IAAA;IAAlDM,UAAU;IAAEC,aAAa;EAChC,IAAMC,KAAK,GAAG,IAAAC,aAAM,GAAE;EACtB,IAAMC,MAAM,GAAG,IAAAD,aAAM,GAAE;EACvB,IAAOE,SAAS,GAAIf,cAAc,CAA3Be,SAAS;EAChB,0BAAiB,IAAAC,2BAAkB,GAAE;IAAA;IAA5BC,IAAI;EAEb,SAASC,UAAU,GAAG;IAAA;IACpB,IAAI,EAACN,KAAK,aAALA,KAAK,iCAALA,KAAK,CAAEO,OAAO,2CAAd,eAAgBC,KAAK,GAAE;IAE5BH,IAAI,CAACL,KAAK,CAACO,OAAO,CAACC,KAAK,CAAC;EAC3B;EAEA,SAASC,YAAY,GAAG;IACtB,IAAI,EAACP,MAAM,aAANA,MAAM,eAANA,MAAM,CAAEK,OAAO,GAAE;MACpB;IACF;;IAEA;IACA;IACAL,MAAM,CAACK,OAAO,CAACG,GAAG,GAAGR,MAAM,CAACK,OAAO,CAACG,GAAG;EACzC;;EAEA;EACA,IAAAC,gBAAS,EAAC,MAAM;IACd,IAAIlB,MAAM,aAANA,MAAM,eAANA,MAAM,CAAEmB,QAAQ,IAAI,CAAAnB,MAAM,aAANA,MAAM,uBAANA,MAAM,CAAEmB,QAAQ,KAAI,CAAC,EAAE;MAC7CC,UAAU,CAAC,MAAM;QACfJ,YAAY,EAAE;MAChB,CAAC,EAAEK,MAAM,CAACrB,MAAM,aAANA,MAAM,uBAANA,MAAM,CAAEmB,QAAQ,CAAC,CAAC;IAC9B;EACF,CAAC,EAAE,CAACT,SAAS,CAACY,IAAI,EAAEtB,MAAM,aAANA,MAAM,uBAANA,MAAM,CAAEmB,QAAQ,CAAC,CAAC;;EAEtC;EACA,IAAAD,gBAAS,EAAC,MAAM;IACd,IAAMK,MAAM;MAAA,6BAAG,aAAY;QACzB,IAAMC,UAAU,GAAG,OAAO1B,GAAG,KAAK,UAAU,SAASA,GAAG,CAACY,SAAS,CAAC,KAAK;;QAExE;QACA,IAAIc,UAAU,KAAKrB,UAAU,EAAE;UAC7BC,aAAa,CAACoB,UAAU,CAAC;QAC3B;MACF,CAAC;MAAA,gBAPKD,MAAM;QAAA;MAAA;IAAA,GAOX;IAED,IAAI,OAAOzB,GAAG,KAAK,UAAU,EAAE;MAC7ByB,MAAM,EAAE;IACV;IACA;EACF,CAAC,EAAE,CAACb,SAAS,CAACY,IAAI,CAAC,CAAC;EAEpB,IAAI,CAACnB,UAAU,IAAI,OAAOA,UAAU,KAAK,QAAQ,EAAE;IACjD,oBACE,6BAAC,iBAAa,qBACZ,6BAAC,QAAI;MAAC,OAAO,EAAE,CAAE;MAAC,KAAK,EAAC,QAAQ;MAAC,OAAO,EAAC;IAAQ,gBAC/C,6BAAC,WAAO,OAAG,CACN,CACO;EAEpB;EAEA,oBACE,6BAAC,iBAAa,qBACZ;IACE,KAAK,EAAE;MAACsB,QAAQ,YAAY;MAAEC,aAAa,QAAQ;MAAEC,OAAO,EAAE;IAAC,CAAE;IACjE,GAAG,EAAEpB,KAAM;IACX,KAAK,EAAEJ,UAAW;IAClB,QAAQ;IACR,QAAQ,EAAE,CAAC;EAAE,EACb,eACF,6BAAC,QAAI;IAAC,SAAS,EAAC,QAAQ;IAAC,KAAK,EAAE;MAACb,MAAM;IAAQ;EAAE,gBAC/C,6BAAC,QAAI;IAAC,OAAO,EAAE,CAAE;IAAC,YAAY,EAAE;EAAE,gBAChC,6BAAC,QAAI;IAAC,KAAK,EAAC,QAAQ;IAAC,GAAG,EAAE;EAAE,gBAC1B,6BAAC,QAAI;IAAC,KAAK,EAAC,QAAQ;IAAC,GAAG,EAAE;EAAE,gBAC1B,6BAAC,UAAM;IACL,QAAQ,EAAE,CAAC,CAAC,CAAE;IACd,OAAO,EAAE,CAAE;IACX,IAAI,EAAC,SAAS;IACd,IAAI,EAAEe,UAAU,KAAK,QAAQ,GAAG,SAAS,GAAG,OAAQ;IACpD,IAAI,EAAEuB,uBAAiB;IACvB,OAAO,EAAE,MAAMtB,aAAa,CAACD,UAAU,KAAK,QAAQ,GAAG,SAAS,GAAG,QAAQ;EAAE,EAC7E,CACG,eACP,6BAAC,OAAG;IAAC,IAAI,EAAE;EAAE,gBACX,6BAAC,QAAI;IAAC,IAAI,EAAE,CAAE;IAAC,YAAY,EAAC;EAAU,GACnCF,UAAU,CACN,CACH,eACN,6BAAC,QAAI;IAAC,KAAK,EAAC,QAAQ;IAAC,GAAG,EAAE;EAAE,GACzBH,MAAM,aAANA,MAAM,eAANA,MAAM,CAAE6B,MAAM,gBACb,6BAAC,UAAM;IACL,QAAQ,EAAE,CAAC,CAAC,CAAE;IACd,OAAO,EAAE,CAAE;IACX,IAAI,EAAEC,eAAS;IACf,KAAK,EAAC,QAAQ;IACd,cAAW,QAAQ;IACnB,OAAO,EAAE,MAAMd,YAAY;EAAG,EAC9B,GACA,IAAI,eACR,6BAAC,UAAM;IACL,QAAQ,EAAE,CAAC,CAAC,CAAE;IACd,IAAI,EAAEe,eAAS;IACf,OAAO,EAAE,CAAC,CAAC,CAAE;IACb,KAAK,EAAC,MAAM;IACZ,cAAW,MAAM;IACjB,OAAO,EAAE,MAAMlB,UAAU;EAAG,EAC5B,eACF,6BAAC,UAAM;IACL,QAAQ,EAAE,CAAC,CAAC,CAAE;IACd,IAAI,EAAEmB,gBAAU;IAChB,OAAO,EAAE,CAAC,CAAC,CAAE;IACb,IAAI,EAAC,MAAM;IACX,IAAI,EAAC,SAAS;IACd,OAAO,EAAE,MAAMC,MAAM,CAACC,IAAI,CAAC/B,UAAU;EAAE,EACvC,CACG,CACF,CACF,eACP,6BAAC,QAAI;IAAC,IAAI,EAAC,aAAa;IAAC,OAAO,EAAEE,UAAU,KAAK,QAAQ,GAAG,CAAC,GAAG,CAAE;IAAC,KAAK,EAAE;MAACf,MAAM;IAAQ;EAAE,gBACzF,6BAAC,QAAI;IAAC,KAAK,EAAC,QAAQ;IAAC,OAAO,EAAC,QAAQ;IAAC,KAAK,EAAE;MAACA,MAAM;IAAQ;EAAE,gBAC5D;IACE,GAAG,EAAEmB,MAAO;IACZ,KAAK,EAAC,SAAS;IACf,KAAK,EAAEvB,KAAK,CAACmB,UAAU,CAAE;IACzB,WAAW,EAAC,GAAG;IACf,GAAG,EAAEF;EAAW,GACZF,UAAU,EACd,CACG,CACF,CACF,CACO;AAEpB;AAAC,eAEcR,MAAM;AAAA"}

package/lib/hooks/useCopytoClipboard.js

@@ -1,50 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = require("react");
-function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
-function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-// Return success
-
-function useCopyToClipboard() {
-  var _useState = (0, _react.useState)(null),
-    _useState2 = _slicedToArray(_useState, 2),
-    copiedText = _useState2[0],
-    setCopiedText = _useState2[1];
-  var copy = /*#__PURE__*/function () {
-    var _ref = _asyncToGenerator(function* (text) {
-      var _navigator;
-      if (!((_navigator = navigator) !== null && _navigator !== void 0 && _navigator.clipboard)) {
-        console.warn('Clipboard not supported');
-        return false;
-      }
-
-      // Try to save to clipboard then save it in the state if worked
-      try {
-        yield navigator.clipboard.writeText(text);
-        setCopiedText(text);
-        return true;
-      } catch (error) {
-        console.warn('Copy failed', error);
-        setCopiedText(null);
-        return false;
-      }
-    });
-    return function copy(_x) {
-      return _ref.apply(this, arguments);
-    };
-  }();
-  return [copiedText, copy];
-}
-var _default = useCopyToClipboard;
-exports.default = _default;
-//# sourceMappingURL=useCopytoClipboard.js.map

package/lib/hooks/useCopytoClipboard.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useCopytoClipboard.js","names":["useCopyToClipboard","useState","copiedText","setCopiedText","copy","text","navigator","clipboard","console","warn","writeText","error"],"sources":["../../src/hooks/useCopytoClipboard.ts"],"sourcesContent":["import {useState} from 'react'\n\ntype CopiedValue = string | null\ntype CopyFn = (text: string) => Promise<boolean> // Return success\n\nfunction useCopyToClipboard(): [CopiedValue, CopyFn] {\n  const [copiedText, setCopiedText] = useState<CopiedValue>(null)\n\n  const copy: CopyFn = 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\nexport default useCopyToClipboard\n"],"mappings":";;;;;;AAAA;AAA8B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGmB;;AAEjD,SAASA,kBAAkB,GAA0B;EACnD,gBAAoC,IAAAC,eAAQ,EAAc,IAAI,CAAC;IAAA;IAAxDC,UAAU;IAAEC,aAAa;EAEhC,IAAMC,IAAY;IAAA,6BAAG,WAAOC,IAAI,EAAK;MAAA;MACnC,IAAI,gBAACC,SAAS,uCAAT,WAAWC,SAAS,GAAE;QACzBC,OAAO,CAACC,IAAI,CAAC,yBAAyB,CAAC;QACvC,OAAO,KAAK;MACd;;MAEA;MACA,IAAI;QACF,MAAMH,SAAS,CAACC,SAAS,CAACG,SAAS,CAACL,IAAI,CAAC;QACzCF,aAAa,CAACE,IAAI,CAAC;QACnB,OAAO,IAAI;MACb,CAAC,CAAC,OAAOM,KAAK,EAAE;QACdH,OAAO,CAACC,IAAI,CAAC,aAAa,EAAEE,KAAK,CAAC;QAClCR,aAAa,CAAC,IAAI,CAAC;QACnB,OAAO,KAAK;MACd;IACF,CAAC;IAAA,gBAhBKC,IAAY;MAAA;IAAA;EAAA,GAgBjB;EAED,OAAO,CAACF,UAAU,EAAEE,IAAI,CAAC;AAC3B;AAAC,eAEcJ,kBAAkB;AAAA"}

package/src/hooks/useCopytoClipboard.ts

@@ -1,30 +0,0 @@
-import {useState} from 'react'
-
-type CopiedValue = string | null
-type CopyFn = (text: string) => Promise<boolean> // Return success
-
-function useCopyToClipboard(): [CopiedValue, CopyFn] {
-  const [copiedText, setCopiedText] = useState<CopiedValue>(null)
-
-  const copy: CopyFn = async (text) => {
-    if (!navigator?.clipboard) {
-      console.warn('Clipboard not supported')
-      return false
-    }
-
-    // Try to save to clipboard then save it in the state if worked
-    try {
-      await navigator.clipboard.writeText(text)
-      setCopiedText(text)
-      return true
-    } catch (error) {
-      console.warn('Copy failed', error)
-      setCopiedText(null)
-      return false
-    }
-  }
-
-  return [copiedText, copy]
-}
-
-export default useCopyToClipboard