sanity-plugin-iframe-pane 1.1.0 → 2.0.0

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,5 +1,8 @@
 # sanity-plugin-iframe-pane
 
+> NOTE
+> This is for the Studio v3 version of the plugin
+
 Display any URL in a View Pane, along with helpful buttons to Copy the URL or open in a new tab.
 
 Accepts either a string or an async function to resolve a URL based on the current document.
@@ -9,7 +12,13 @@ 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-v3
+```
+
+or
+
+```
+yarn add sanity-plugin-iframe-pane-v3
 ```
 
 This is designed to be used as a [Component inside of a View](https://www.sanity.io/docs/structure-builder-reference#c0c8284844b7).

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":"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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/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":";;;;;;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,eAAQ,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,eAAQ,CAAA,CAC1C,2BAAK,EAAE,CAAC,WAAW,CAAC,GAAG,WAAW,GAAG,kCAAY,CAClD,AAAC;IACF,MAAM,KAAK,GAAG,CAAA,GAAA,aAAM,CAAA,CAAsB,IAAI,CAAC,AAAC;IAChD,MAAM,MAAM,GAAG,CAAA,GAAA,aAAM,CAAA,CAAoB,IAAI,CAAC,AAAC;IAC/C,MAAM,aAAE,SAAS,CAAA,EAAE,GAAG,cAAc,AAAC;IACrC,MAAM,GAAG,IAAI,CAAC,GAAG,CAAA,GAAA,yBAAkB,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,gBAAS,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,gBAAS,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,gBAAC,CAAA,GAAA,oBAAa,CAAA;kBACZ,cAAA,gBAAC,CAAA,GAAA,WAAI,CAAA;YAAC,OAAO,EAAE,CAAC;YAAE,KAAK,EAAC,QAAQ;YAAC,OAAO,EAAC,QAAQ;sBAC/C,cAAA,gBAAC,CAAA,GAAA,cAAO,CAAA,KAAG;UACN;MACO,CAChB;IAGJ,qBACE,iBAAC,CAAA,GAAA,oBAAa,CAAA;;0BACZ,gBAAC,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,iBAAC,CAAA,GAAA,WAAI,CAAA;gBAAC,SAAS,EAAC,QAAQ;gBAAC,KAAK,EAAE;oBAAE,MAAM,EAAE,CAAC,IAAI,CAAC;iBAAE;;kCAChD,gBAAC,CAAA,GAAA,WAAI,CAAA;wBAAC,OAAO,EAAE,CAAC;wBAAE,YAAY;kCAC5B,cAAA,iBAAC,CAAA,GAAA,WAAI,CAAA;4BAAC,KAAK,EAAC,QAAQ;4BAAC,GAAG,EAAE,CAAC;;8CACzB,gBAAC,CAAA,GAAA,WAAI,CAAA;oCAAC,KAAK,EAAC,QAAQ;oCAAC,GAAG,EAAE,CAAC;8CACzB,cAAA,gBAAC,CAAA,GAAA,aAAM,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,uBAAgB,CAAA;wCACtB,OAAO,EAAE,IACP,aAAa,CAAC,UAAU,KAAK,QAAQ,GAAG,SAAS,GAAG,QAAQ,CAAC;sCAE/D;kCACG;8CACP,gBAAC,CAAA,GAAA,UAAG,CAAA;oCAAC,IAAI,EAAE,CAAC;8CACV,cAAA,gBAAC,CAAA,GAAA,WAAI,CAAA;wCAAC,IAAI,EAAE,CAAC;wCAAE,YAAY,EAAC,UAAU;kDACnC,UAAU;sCACN;kCACH;8CACN,iBAAC,CAAA,GAAA,WAAI,CAAA;oCAAC,KAAK,EAAC,QAAQ;oCAAC,GAAG,EAAE,CAAC;;wCACxB,MAAM,EAAE,MAAM,iBACb,gBAAC,CAAA,GAAA,aAAM,CAAA;4CACL,QAAQ,EAAE;AAAC,iDAAC;6CAAC;4CACb,OAAO,EAAE,CAAC;4CACV,IAAI,EAAE,CAAA,GAAA,eAAQ,CAAA;4CACd,KAAK,EAAC,QAAQ;4CACd,YAAU,EAAC,QAAQ;4CACnB,OAAO,EAAE,IAAM,YAAY,EAAE;0CAC7B,GACA,IAAI;sDACR,gBAAC,CAAA,GAAA,aAAM,CAAA;4CACL,QAAQ,EAAE;AAAC,iDAAC;6CAAC;4CACb,IAAI,EAAE,CAAA,GAAA,eAAQ,CAAA;4CACd,OAAO,EAAE;AAAC,iDAAC;6CAAC;4CACZ,KAAK,EAAC,MAAM;4CACZ,YAAU,EAAC,MAAM;4CACjB,OAAO,EAAE,IAAM,UAAU,EAAE;0CAC3B;sDACF,gBAAC,CAAA,GAAA,aAAM,CAAA;4CACL,QAAQ,EAAE;AAAC,iDAAC;6CAAC;4CACb,IAAI,EAAE,CAAA,GAAA,gBAAS,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,gBAAC,CAAA,GAAA,WAAI,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,gBAAC,CAAA,GAAA,WAAI,CAAA;4BAAC,KAAK,EAAC,QAAQ;4BAAC,OAAO,EAAC,QAAQ;4BAAC,KAAK,EAAE;gCAAE,MAAM,EAAE,CAAC,IAAI,CAAC;6BAAE;sCAC7D,cAAA,gBAAC,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,wCAA+B,GAAhB,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/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,CAAC;AAE/B,4BAA4B,eAAiB,CAAC","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,65 @@
 {
   "name": "sanity-plugin-iframe-pane",
-  "version": "1.1.0",
+  "version": "2.0.0",
   "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"
   },
-  "repository": {
-    "type": "git",
-    "url": "git+ssh://git@github.com/SimeonGriggs/sanity-plugin-iframe-pane.git"
+  "repository": {},
+  "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": "^0.0.1-studio-v3.1",
+    "@sanity/ui": "^0.37.12",
+    "usehooks-ts": "^2.6.0"
   },
   "devDependencies": {
-    "@sanity/eslint-config-studio": "^2.0.0",
-    "eslint": "8.19.0",
+    "@parcel/packager-ts": "^2.6.2",
+    "@parcel/transformer-typescript-types": "^2.6.2",
+    "@sanity/plugin-kit": "^0.1.0-v3-studio.1",
+    "@typescript-eslint/eslint-plugin": "^5.30.7",
+    "@typescript-eslint/parser": "^5.30.7",
+    "eslint": "^8.20.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",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "parcel": "^2.6.2",
+    "prettier": "^2.7.1",
+    "react": "^17.0.0 || ^18.0.0",
+    "rimraf": "^3.0.2",
+    "sanity": "2.29.5-purple-unicorn.856",
     "typescript": "^4.7.4"
   },
   "peerDependencies": {
-    "react": "^17.0.2"
+    "react": "^17.0.0 || ^18.0.0",
+    "sanity": "purple-unicorn"
   }
 }

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,111 +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
-    button: boolean
-  }
-}
+  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} = options
-  const [displayUrl, setDisplayUrl] = useState(typeof url === 'string' ? url : ``)
-  const [iframeSize, setIframeSize] = useState(sizes?.[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) {
-      handleReload()
+      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}>
@@ -143,8 +181,12 @@ 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"
@@ -156,7 +198,7 @@ function Iframe(props: IframeProps) {
         </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,215 +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 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;
-
-  var _useState = (0, _react.useState)(typeof url === 'string' ? url : ""),
-      _useState2 = _slicedToArray(_useState, 2),
-      displayUrl = _useState2[0],
-      setDisplayUrl = _useState2[1];
-
-  var _useState3 = (0, _react.useState)(sizes === null || sizes === void 0 ? void 0 : sizes[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) {
-      handleReload();
-    }
-  }, [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", {
-    ref: iframe,
-    title: "preview",
-    style: sizes[iframeSize],
-    frameBorder: "0",
-    src: displayUrl
-  })))));
-}
-
-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","useState","displayUrl","setDisplayUrl","iframeSize","setIframeSize","input","useRef","iframe","displayed","useCopyToClipboard","copy","handleCopy","current","value","handleReload","src","useEffect","revision","_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\n    button: boolean\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} = options\n  const [displayUrl, setDisplayUrl] = useState(typeof url === 'string' ? url : ``)\n  const [iframeSize, setIframeSize] = useState(sizes?.[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) {\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 (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            />\n          </Flex>\n        </Card>\n      </Flex>\n    </ThemeProvider>\n  )\n}\n\nexport default Iframe\n"],"mappings":"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"}

package/lib/hooks/useCopytoClipboard.js

@@ -1,64 +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;;;;;;;;;;;;;;;;;;AAGiD;AAEjD,SAASA,kBAAT,GAAqD;EACnD,gBAAoC,IAAAC,eAAA,EAAsB,IAAtB,CAApC;EAAA;EAAA,IAAOC,UAAP;EAAA,IAAmBC,aAAnB;;EAEA,IAAMC,IAAY;IAAA,6BAAG,WAAOC,IAAP,EAAgB;MAAA;;MACnC,IAAI,gBAACC,SAAD,uCAAC,WAAWC,SAAZ,CAAJ,EAA2B;QACzBC,OAAO,CAACC,IAAR,CAAa,yBAAb;QACA,OAAO,KAAP;MACD,CAJkC,CAMnC;;;MACA,IAAI;QACF,MAAMH,SAAS,CAACC,SAAV,CAAoBG,SAApB,CAA8BL,IAA9B,CAAN;QACAF,aAAa,CAACE,IAAD,CAAb;QACA,OAAO,IAAP;MACD,CAJD,CAIE,OAAOM,KAAP,EAAc;QACdH,OAAO,CAACC,IAAR,CAAa,aAAb,EAA4BE,KAA5B;QACAR,aAAa,CAAC,IAAD,CAAb;QACA,OAAO,KAAP;MACD;IACF,CAhBiB;;IAAA,gBAAZC,IAAY;MAAA;IAAA;EAAA,GAAlB;;EAkBA,OAAO,CAACF,UAAD,EAAaE,IAAb,CAAP;AACD;;eAEcJ,kB"}

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