sanity-plugin-iframe-pane 1.0.14 → 1.0.15

package/lib/Iframe.js

@@ -99,12 +99,16 @@ function Iframe(_ref) {
     if (reload !== null && reload !== void 0 && reload.revision) {
       handleReload();
     }
-  }, [displayed === null || displayed === void 0 ? void 0 : displayed._rev]);
+  }, [displayed._rev]); // Set initial URL and refresh on new revisions
+
   (0, _react.useEffect)(() => {
     var getUrl = /*#__PURE__*/function () {
       var _ref2 = _asyncToGenerator(function* () {
-        var resolveUrl = yield url(displayed);
-        setDisplayUrl(resolveUrl);
+        var resolveUrl = yield url(displayed); // Only update state if URL has changed
+
+        if (resolveUrl !== displayUrl) {
+          setDisplayUrl(resolveUrl);
+        }
       });
 
       return function getUrl() {
@@ -112,8 +116,10 @@ function Iframe(_ref) {
       };
     }();
 
-    if (!displayUrl && displayed !== null && displayed !== void 0 && displayed._id) getUrl();
-  }, [displayed]);
+    if (typeof url !== 'string') {
+      getUrl();
+    }
+  }, [displayed._rev]);
 
   if (!displayUrl || typeof displayUrl !== 'string') {
     return /*#__PURE__*/_react.default.createElement(_ui.ThemeProvider, null, /*#__PURE__*/_react.default.createElement(_ui.Flex, {

package/lib/Iframe.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Iframe.js"],"names":["sizes","desktop","backgroundColor","width","height","maxHeight","mobile","Iframe","sanityDocument","document","options","url","defaultSize","reload","displayUrl","setDisplayUrl","iframeSize","setIframeSize","input","iframe","displayed","value","copy","handleCopy","current","handleReload","src","revision","_rev","getUrl","resolveUrl","_id","position","pointerEvents","opacity","MobileDeviceIcon","button","UndoIcon","CopyIcon","LeaveIcon","window","open","propTypes","PropTypes","shape","string","isRequired","slug","oneOfType","func"],"mappings":"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","sourcesContent":["import React, {useEffect, useState, useRef} from 'react'\nimport PropTypes from 'prop-types'\nimport {Box, Flex, Text, Button, ThemeProvider, Card, Spinner} from '@sanity/ui'\nimport {UndoIcon, CopyIcon, LeaveIcon, MobileDeviceIcon} from '@sanity/icons'\nimport { useCopyToClipboard } from 'usehooks-ts'\n\nconst sizes = {\n  desktop: {backgroundColor: `white`, width: `100%`, height: `100%`, maxHeight: `100%`},\n  mobile: {backgroundColor: `white`, width: 414, height: `100%`, maxHeight: 736},\n}\nfunction Iframe({document: sanityDocument, options}) {\n  const {url, defaultSize, reload} = options\n  const [displayUrl, setDisplayUrl] = useState(typeof url === 'string' ? url : ``)\n  const [iframeSize, setIframeSize] = useState(\n    defaultSize && sizes?.[defaultSize] ? defaultSize : `desktop`\n  )\n  const input = useRef()\n  const iframe = useRef()\n  const {displayed} = sanityDocument\n  const [value, 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    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])\n\n  useEffect(() => {\n    const getUrl = async () => {\n      const resolveUrl = await url(displayed)\n\n      setDisplayUrl(resolveUrl)\n    }\n\n    if (!displayUrl && displayed?._id) getUrl()\n  }, [displayed])\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                  // text=\"Reload\"\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                // text=\"Copy\"\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\nIframe.propTypes = {\n  document: PropTypes.shape({\n    displayed: PropTypes.shape({\n      _id: PropTypes.string.isRequired,\n      slug: PropTypes.shape({\n        current: PropTypes.string,\n      }),\n    }),\n  }),\n  options: PropTypes.shape({\n    url: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),\n  }),\n}\n\nexport default Iframe\n"],"file":"Iframe.js"}
+{"version":3,"sources":["../src/Iframe.js"],"names":["sizes","desktop","backgroundColor","width","height","maxHeight","mobile","Iframe","sanityDocument","document","options","url","defaultSize","reload","displayUrl","setDisplayUrl","iframeSize","setIframeSize","input","iframe","displayed","value","copy","handleCopy","current","handleReload","src","revision","_rev","getUrl","resolveUrl","position","pointerEvents","opacity","MobileDeviceIcon","button","UndoIcon","CopyIcon","LeaveIcon","window","open","propTypes","PropTypes","shape","_id","string","isRequired","slug","oneOfType","func"],"mappings":"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","sourcesContent":["import React, {useEffect, useState, useRef} from 'react'\nimport PropTypes from 'prop-types'\nimport {Box, Flex, Text, Button, ThemeProvider, Card, Spinner} from '@sanity/ui'\nimport {UndoIcon, CopyIcon, LeaveIcon, MobileDeviceIcon} from '@sanity/icons'\nimport {useCopyToClipboard} from 'usehooks-ts'\n\nconst sizes = {\n  desktop: {backgroundColor: `white`, width: `100%`, height: `100%`, maxHeight: `100%`},\n  mobile: {backgroundColor: `white`, width: 414, height: `100%`, maxHeight: 736},\n}\nfunction Iframe({document: sanityDocument, options}) {\n  const {url, defaultSize, reload} = options\n  const [displayUrl, setDisplayUrl] = useState(typeof url === 'string' ? url : ``)\n  const [iframeSize, setIframeSize] = useState(\n    defaultSize && sizes?.[defaultSize] ? defaultSize : `desktop`\n  )\n  const input = useRef()\n  const iframe = useRef()\n  const {displayed} = sanityDocument\n  const [value, 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    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])\n\n  // Set initial URL and refresh on new revisions\n  useEffect(() => {\n    const getUrl = async () => {\n      const resolveUrl = 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 !== 'string') {\n      getUrl()\n    }\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                  // text=\"Reload\"\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                // text=\"Copy\"\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\nIframe.propTypes = {\n  document: PropTypes.shape({\n    displayed: PropTypes.shape({\n      _id: PropTypes.string.isRequired,\n      slug: PropTypes.shape({\n        current: PropTypes.string,\n      }),\n    }),\n  }),\n  options: PropTypes.shape({\n    url: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),\n  }),\n}\n\nexport default Iframe\n"],"file":"Iframe.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sanity-plugin-iframe-pane",
-  "version": "1.0.14",
+  "version": "1.0.15",
   "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",
   "scripts": {

package/src/Iframe.js

@@ -2,7 +2,7 @@ import React, {useEffect, useState, useRef} from 'react'
 import PropTypes from 'prop-types'
 import {Box, Flex, Text, Button, ThemeProvider, Card, Spinner} from '@sanity/ui'
 import {UndoIcon, CopyIcon, LeaveIcon, MobileDeviceIcon} from '@sanity/icons'
-import { useCopyToClipboard } from 'usehooks-ts'
+import {useCopyToClipboard} from 'usehooks-ts'
 
 const sizes = {
   desktop: {backgroundColor: `white`, width: `100%`, height: `100%`, maxHeight: `100%`},
@@ -39,17 +39,23 @@ function Iframe({document: sanityDocument, options}) {
     if (reload?.revision) {
       handleReload()
     }
-  }, [displayed?._rev])
+  }, [displayed._rev])
 
+  // Set initial URL and refresh on new revisions
   useEffect(() => {
     const getUrl = async () => {
       const resolveUrl = await url(displayed)
 
-      setDisplayUrl(resolveUrl)
+      // Only update state if URL has changed
+      if (resolveUrl !== displayUrl) {
+        setDisplayUrl(resolveUrl)
+      }
     }
 
-    if (!displayUrl && displayed?._id) getUrl()
-  }, [displayed])
+    if (typeof url !== 'string') {
+      getUrl()
+    }
+  }, [displayed._rev])
 
   if (!displayUrl || typeof displayUrl !== 'string') {
     return (