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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/lib/index.esm.js +2 -0
  2. package/lib/{esm/index.js.map → index.esm.js.map} +1 -1
  3. package/lib/index.js +2 -0
  4. package/lib/index.js.map +1 -0
  5. package/lib/src/index.d.ts +28 -0
  6. package/package.json +42 -39
  7. package/lib/cjs/index.js +0 -204
  8. package/lib/cjs/index.js.map +0 -1
  9. package/lib/esm/index.js +0 -195
  10. package/lib/types/index.d.ts +0 -21
  11. package/lib/types/index.d.ts.map +0 -1
package/lib/index.esm.js ADDED
@@ -0,0 +1,2 @@
1
+ import{jsx as e,jsxs as i}from"react/jsx-runtime";import{useState as n,useRef as t,useEffect as o}from"react";import{ThemeProvider as r,Flex as l,Spinner as a,Card as d,Button as c,Box as s,Text as p}from"@sanity/ui";import{MobileDeviceIcon as u,UndoIcon as f,CopyIcon as h,LeaveIcon as g}from"@sanity/icons";import{useCopyToClipboard as m}from"usehooks-ts";const y={desktop:{width:"100%",height:"100%",maxHeight:"100%"},mobile:{width:414,height:"100%",maxHeight:736}},v="desktop";function b(b){const{document:x,options:k}=b,{url:w,defaultSize:z=v,reload:C}=k,[S,j]=n(w&&"string"==typeof w?w:""),[O,B]=n((null==y?void 0:y[z])?z:v),H=t(null),R=t(null),{displayed:_}=x,[,E]=m();function I(){(null==R?void 0:R.current)&&(R.current.src=R.current.src)}return o((()=>{(null==C?void 0:C.revision)&&I()}),[_._rev,null==C?void 0:C.revision]),o((()=>{"function"==typeof w&&(async()=>{const e="function"==typeof w?await w(_):"";e!==S&&e&&"string"==typeof e&&j(e)})()}),[_._rev]),S&&"string"==typeof S?i(r,{children:[e("textarea",{style:{position:"absolute",pointerEvents:"none",opacity:0},ref:H,value:S,readOnly:!0,tabIndex:-1}),i(l,{direction:"column",style:{height:"100%"},children:[e(d,{padding:2,borderBottom:!0,children:i(l,{align:"center",gap:2,children:[e(l,{align:"center",gap:1,children:e(c,{fontSize:[1],padding:2,tone:"primary",mode:"mobile"===O?"default":"ghost",icon:u,onClick:()=>B("mobile"===O?"desktop":"mobile")})}),e(s,{flex:1,children:e(p,{size:0,textOverflow:"ellipsis",children:S})}),i(l,{align:"center",gap:1,children:[(null==C?void 0:C.button)?e(c,{fontSize:[1],padding:2,icon:f,title:"Reload","aria-label":"Reload",onClick:()=>I()}):null,e(c,{fontSize:[1],icon:h,padding:[2],title:"Copy","aria-label":"Copy",onClick:()=>{var e;(null==(e=null==H?void 0:H.current)?void 0:e.value)&&E(H.current.value)}}),e(c,{fontSize:[1],icon:g,padding:[2],text:"Open",tone:"primary",onClick:()=>window.open(S)})]})]})}),e(d,{tone:"transparent",padding:"mobile"===O?2:0,style:{height:"100%"},children:e(l,{align:"center",justify:"center",style:{height:"100%"},children:e("iframe",{ref:R,title:"preview",style:y[O],frameBorder:"0",src:S})})})]})]}):e(r,{children:e(l,{padding:5,align:"center",justify:"center",children:e(a,{})})})}export{b as default};
2
+ //# sourceMappingURL=index.esm.js.map
package/lib/{esm/index.js.map → index.esm.js.map} RENAMED
@@ -1 +1 @@
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":"../../"}
1
+ {"version":3,"file":"index.esm.js","sources":["../src/Iframe.tsx"],"sourcesContent":["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":["sizes","desktop","width","height","maxHeight","mobile","DEFAULT_SIZE","Iframe","props","document","sanityDocument","options","url","defaultSize","reload","displayUrl","setDisplayUrl","useState","iframeSize","setIframeSize","input","useRef","iframe","displayed","copy","useCopyToClipboard","handleReload","current","src","useEffect","revision","_rev","async","resolveUrl","getUrl","jsxs","ThemeProvider","children","jsx","style","position","pointerEvents","opacity","ref","value","readOnly","tabIndex","Flex","direction","Card","padding","borderBottom","align","gap","Button","fontSize","tone","mode","icon","MobileDeviceIcon","onClick","Box","flex","Text","size","textOverflow","button","UndoIcon","title","CopyIcon","_a","LeaveIcon","text","window","open","justify","frameBorder","Spinner"],"mappings":"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"}
package/lib/index.js ADDED
@@ -0,0 +1,2 @@
1
+ "use strict";var e=require("react/jsx-runtime"),n=require("react"),i=require("@sanity/ui"),t=require("@sanity/icons"),o=require("usehooks-ts");const r={desktop:{width:"100%",height:"100%",maxHeight:"100%"},mobile:{width:414,height:"100%",maxHeight:736}},l="desktop";module.exports=function(s){const{document:d,options:a}=s,{url:c,defaultSize:u=l,reload:p}=a,[x,h]=n.useState(c&&"string"==typeof c?c:""),[f,g]=n.useState((null==r?void 0:r[u])?u:l),y=n.useRef(null),v=n.useRef(null),{displayed:j}=d,[,m]=o.useCopyToClipboard();function b(){(null==v?void 0:v.current)&&(v.current.src=v.current.src)}return n.useEffect((()=>{(null==p?void 0:p.revision)&&b()}),[j._rev,null==p?void 0:p.revision]),n.useEffect((()=>{"function"==typeof c&&(async()=>{const e="function"==typeof c?await c(j):"";e!==x&&e&&"string"==typeof e&&h(e)})()}),[j._rev]),x&&"string"==typeof x?e.jsxs(i.ThemeProvider,{children:[e.jsx("textarea",{style:{position:"absolute",pointerEvents:"none",opacity:0},ref:y,value:x,readOnly:!0,tabIndex:-1}),e.jsxs(i.Flex,{direction:"column",style:{height:"100%"},children:[e.jsx(i.Card,{padding:2,borderBottom:!0,children:e.jsxs(i.Flex,{align:"center",gap:2,children:[e.jsx(i.Flex,{align:"center",gap:1,children:e.jsx(i.Button,{fontSize:[1],padding:2,tone:"primary",mode:"mobile"===f?"default":"ghost",icon:t.MobileDeviceIcon,onClick:()=>g("mobile"===f?"desktop":"mobile")})}),e.jsx(i.Box,{flex:1,children:e.jsx(i.Text,{size:0,textOverflow:"ellipsis",children:x})}),e.jsxs(i.Flex,{align:"center",gap:1,children:[(null==p?void 0:p.button)?e.jsx(i.Button,{fontSize:[1],padding:2,icon:t.UndoIcon,title:"Reload","aria-label":"Reload",onClick:()=>b()}):null,e.jsx(i.Button,{fontSize:[1],icon:t.CopyIcon,padding:[2],title:"Copy","aria-label":"Copy",onClick:()=>{var e;(null==(e=null==y?void 0:y.current)?void 0:e.value)&&m(y.current.value)}}),e.jsx(i.Button,{fontSize:[1],icon:t.LeaveIcon,padding:[2],text:"Open",tone:"primary",onClick:()=>window.open(x)})]})]})}),e.jsx(i.Card,{tone:"transparent",padding:"mobile"===f?2:0,style:{height:"100%"},children:e.jsx(i.Flex,{align:"center",justify:"center",style:{height:"100%"},children:e.jsx("iframe",{ref:v,title:"preview",style:r[f],frameBorder:"0",src:x})})})]})]}):e.jsx(i.ThemeProvider,{children:e.jsx(i.Flex,{padding:5,align:"center",justify:"center",children:e.jsx(i.Spinner,{})})})};
2
+ //# sourceMappingURL=index.js.map
package/lib/index.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sources":["../src/Iframe.tsx"],"sourcesContent":["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":["sizes","desktop","width","height","maxHeight","mobile","DEFAULT_SIZE","props","document","sanityDocument","options","url","defaultSize","reload","displayUrl","setDisplayUrl","useState","iframeSize","setIframeSize","input","useRef","iframe","displayed","copy","useCopyToClipboard","handleReload","current","src","useEffect","revision","_rev","async","resolveUrl","getUrl","jsxs","ThemeProvider","children","jsx","style","position","pointerEvents","opacity","ref","value","readOnly","tabIndex","Flex","direction","Card","padding","borderBottom","align","gap","Button","fontSize","tone","mode","icon","MobileDeviceIcon","onClick","Box","flex","Text","size","textOverflow","button","UndoIcon","title","CopyIcon","_a","LeaveIcon","text","window","open","justify","frameBorder","Spinner"],"mappings":"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"}
package/lib/src/index.d.ts ADDED
@@ -0,0 +1,28 @@
1
+ /// <reference types="react" />
2
+
3
+ import {SanityDocumentLike} from 'sanity'
4
+
5
+ declare function Iframe(props: IframeProps): JSX.Element
6
+ export default Iframe
7
+
8
+ export declare type IframeOptions = IframeOptions_2
9
+
10
+ declare type IframeOptions_2 = {
11
+ url: string | ((document: SanityDocumentLike) => unknown)
12
+ defaultSize?: Size
13
+ reload?: {
14
+ revision?: boolean
15
+ button?: boolean
16
+ }
17
+ }
18
+
19
+ declare type IframeProps = {
20
+ document: {
21
+ displayed: SanityDocumentLike
22
+ }
23
+ options: IframeOptions_2
24
+ }
25
+
26
+ declare type Size = 'desktop' | 'mobile'
27
+
28
+ export {}
package/package.json CHANGED
@@ -1,19 +1,31 @@
1
1
  {
2
2
  "name": "sanity-plugin-iframe-pane",
3
- "version": "2.0.1-v3-studio.1",
3
+ "version": "2.0.1-v3-studio.3",
4
4
  "description": "Display any URL in a View Pane, along with helpful buttons to Copy the URL or open in a new tab",
5
- "author": "Simeon Griggs <simeon@sanity.io>",
5
+ "homepage": "https://github.com/sanity-io/sanity-plugin-iframe-pane#readme",
6
+ "bugs": {
7
+ "url": "https://github.com/sanity-io/sanity-plugin-iframe-pane/issues"
8
+ },
9
+ "repository": {
10
+ "type": "git",
11
+ "url": "git@github.com:sanity-io/sanity-plugin-iframe-pane.git"
12
+ },
6
13
  "license": "MIT",
7
- "source": "./src/index.ts",
8
- "main": "./lib/cjs/index.js",
9
- "module": "./lib/esm/index.js",
10
- "types": "./lib/types/index.d.ts",
14
+ "author": "Simeon Griggs <simeon@sanity.io>",
11
15
  "exports": {
12
16
  ".": {
13
- "require": "./lib/cjs/index.js",
14
- "default": "./lib/esm/index.js"
15
- }
17
+ "types": "./lib/src/index.d.ts",
18
+ "source": "./src/index.ts",
19
+ "import": "./lib/index.esm.js",
20
+ "require": "./lib/index.js",
21
+ "default": "./lib/index.esm.js"
22
+ },
23
+ "./package.json": "./package.json"
16
24
  },
25
+ "main": "./lib/index.js",
26
+ "module": "./lib/index.esm.js",
27
+ "source": "./src/index.ts",
28
+ "types": "./lib/src/index.d.ts",
17
29
  "files": [
18
30
  "src",
19
31
  "lib",
@@ -21,37 +33,29 @@
21
33
  "sanity.json"
22
34
  ],
23
35
  "scripts": {
36
+ "prebuild": "npm run clean && plugin-kit verify-package --silent && pkg-utils",
37
+ "build": "pkg-utils build --strict",
24
38
  "clean": "rimraf lib",
25
- "lint": "eslint .",
26
- "prebuild": "npm run clean && plugin-kit verify-package --silent",
27
- "build": "parcel build --no-cache",
28
- "watch": "parcel watch",
29
39
  "link-watch": "plugin-kit link-watch",
40
+ "lint": "eslint .",
41
+ "prepare": "husky install",
30
42
  "prepublishOnly": "npm run build",
31
- "prepare": "husky install"
32
- },
33
- "repository": {
34
- "type": "git",
35
- "url": "git@github.com:sanity-io/sanity-plugin-iframe-pane.git"
36
- },
37
- "engines": {
38
- "node": ">=14.0.0"
43
+ "watch": "pkg-utils watch"
39
44
  },
40
45
  "dependencies": {
41
46
  "@sanity/icons": "^1.3.1",
42
47
  "@sanity/incompatible-plugin": "^1.0.4",
43
- "@sanity/ui": "^1.0.0-beta.31",
48
+ "@sanity/ui": "1.0.0-beta.32",
44
49
  "usehooks-ts": "^2.6.0"
45
50
  },
46
51
  "devDependencies": {
47
- "@commitlint/cli": "^17.1.2",
48
- "@commitlint/config-conventional": "^17.1.0",
49
- "@parcel/packager-ts": "^2.6.2",
50
- "@parcel/transformer-typescript-types": "^2.6.2",
51
- "@sanity/plugin-kit": "^1.1.0-ecosystem-preset.9",
52
+ "@commitlint/cli": "^17.2.0",
53
+ "@commitlint/config-conventional": "^17.2.0",
54
+ "@sanity/pkg-utils": "^1.17.2",
55
+ "@sanity/plugin-kit": "^2.1.5",
52
56
  "@sanity/semantic-release-preset": "^2.0.2",
53
- "@typescript-eslint/eslint-plugin": "^5.41.0",
54
- "@typescript-eslint/parser": "^5.41.0",
57
+ "@typescript-eslint/eslint-plugin": "^5.42.0",
58
+ "@typescript-eslint/parser": "^5.42.0",
55
59
  "eslint": "^8.26.0",
56
60
  "eslint-config-prettier": "^8.5.0",
57
61
  "eslint-config-sanity": "^6.0.0",
@@ -60,19 +64,18 @@
60
64
  "eslint-plugin-react-hooks": "^4.6.0",
61
65
  "husky": "^8.0.1",
62
66
  "lint-staged": "^13.0.3",
63
- "parcel": "~2.6.0",
64
67
  "prettier": "^2.7.1",
65
- "react": "^18.0.0",
68
+ "prettier-plugin-packagejson": "^2.3.0",
69
+ "react": "^18",
66
70
  "rimraf": "^3.0.2",
67
- "sanity": "dev-preview || 3.0.0-dev-preview.22",
68
- "typescript": "~4.7.0"
71
+ "sanity": "3.0.0-rc.0",
72
+ "typescript": "^4.8.4"
69
73
  },
70
74
  "peerDependencies": {
71
- "react": "^18.0.0",
72
- "sanity": "dev-preview || 3.0.0-dev-preview.22"
75
+ "react": "^18",
76
+ "sanity": "dev-preview || 3.0.0-rc.0"
73
77
  },
74
- "bugs": {
75
- "url": "https://github.com/sanity-io/sanity-plugin-iframe-pane/issues"
76
- },
77
- "homepage": "https://github.com/sanity-io/sanity-plugin-iframe-pane#readme"
78
+ "engines": {
79
+ "node": ">=14"
80
+ }
78
81
  }
package/lib/cjs/index.js DELETED
@@ -1,204 +0,0 @@
1
- var $k7rGe$reactjsxruntime = require("react/jsx-runtime");
2
- var $k7rGe$react = require("react");
3
- var $k7rGe$sanityui = require("@sanity/ui");
4
- var $k7rGe$sanityicons = require("@sanity/icons");
5
- var $k7rGe$usehooksts = require("usehooks-ts");
6
-
7
- function $parcel$defineInteropFlag(a) {
8
- Object.defineProperty(a, '__esModule', {value: true, configurable: true});
9
- }
10
- function $parcel$export(e, n, v, s) {
11
- Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
12
- }
13
-
14
- $parcel$defineInteropFlag(module.exports);
15
-
16
- $parcel$export(module.exports, "default", () => $244e63ca53592e4d$export$2e2bcd8739ae039);
17
-
18
-
19
-
20
-
21
-
22
- const $f4b318483f84cb22$var$sizes = {
23
- desktop: {
24
- width: `100%`,
25
- height: `100%`,
26
- maxHeight: `100%`
27
- },
28
- mobile: {
29
- width: 414,
30
- height: `100%`,
31
- maxHeight: 736
32
- }
33
- };
34
- const $f4b318483f84cb22$var$DEFAULT_SIZE = `desktop`;
35
- function $f4b318483f84cb22$var$Iframe(props) {
36
- const { document: sanityDocument , options: options } = props;
37
- const { url: url , defaultSize: defaultSize = $f4b318483f84cb22$var$DEFAULT_SIZE , reload: reload } = options;
38
- const [displayUrl, setDisplayUrl] = (0, $k7rGe$react.useState)(url && typeof url === "string" ? url : ``);
39
- const [iframeSize, setIframeSize] = (0, $k7rGe$react.useState)($f4b318483f84cb22$var$sizes?.[defaultSize] ? defaultSize : $f4b318483f84cb22$var$DEFAULT_SIZE);
40
- const input = (0, $k7rGe$react.useRef)(null);
41
- const iframe = (0, $k7rGe$react.useRef)(null);
42
- const { displayed: displayed } = sanityDocument;
43
- const [, copy] = (0, $k7rGe$usehooksts.useCopyToClipboard)();
44
- function handleCopy() {
45
- if (!input?.current?.value) return;
46
- copy(input.current.value);
47
- }
48
- function handleReload() {
49
- if (!iframe?.current) return;
50
- // Funky way to reload an iframe without CORS issuies
51
- // eslint-disable-next-line no-self-assign
52
- iframe.current.src = iframe.current.src;
53
- }
54
- // Reload on new revisions
55
- (0, $k7rGe$react.useEffect)(()=>{
56
- if (reload?.revision) handleReload();
57
- }, [
58
- displayed._rev,
59
- reload?.revision
60
- ]);
61
- // Set initial URL and refresh on new revisions
62
- (0, $k7rGe$react.useEffect)(()=>{
63
- const getUrl = async ()=>{
64
- const resolveUrl = typeof url === "function" ? await url(displayed) : ``;
65
- // Only update state if URL has changed
66
- if (resolveUrl !== displayUrl && resolveUrl && typeof resolveUrl === "string") setDisplayUrl(resolveUrl);
67
- };
68
- if (typeof url === "function") getUrl();
69
- // eslint-disable-next-line react-hooks/exhaustive-deps
70
- }, [
71
- displayed._rev
72
- ]);
73
- if (!displayUrl || typeof displayUrl !== "string") return /*#__PURE__*/ (0, $k7rGe$reactjsxruntime.jsx)((0, $k7rGe$sanityui.ThemeProvider), {
74
- children: /*#__PURE__*/ (0, $k7rGe$reactjsxruntime.jsx)((0, $k7rGe$sanityui.Flex), {
75
- padding: 5,
76
- align: "center",
77
- justify: "center",
78
- children: /*#__PURE__*/ (0, $k7rGe$reactjsxruntime.jsx)((0, $k7rGe$sanityui.Spinner), {})
79
- })
80
- });
81
- return /*#__PURE__*/ (0, $k7rGe$reactjsxruntime.jsxs)((0, $k7rGe$sanityui.ThemeProvider), {
82
- children: [
83
- /*#__PURE__*/ (0, $k7rGe$reactjsxruntime.jsx)("textarea", {
84
- style: {
85
- position: `absolute`,
86
- pointerEvents: `none`,
87
- opacity: 0
88
- },
89
- ref: input,
90
- value: displayUrl,
91
- readOnly: true,
92
- tabIndex: -1
93
- }),
94
- /*#__PURE__*/ (0, $k7rGe$reactjsxruntime.jsxs)((0, $k7rGe$sanityui.Flex), {
95
- direction: "column",
96
- style: {
97
- height: `100%`
98
- },
99
- children: [
100
- /*#__PURE__*/ (0, $k7rGe$reactjsxruntime.jsx)((0, $k7rGe$sanityui.Card), {
101
- padding: 2,
102
- borderBottom: true,
103
- children: /*#__PURE__*/ (0, $k7rGe$reactjsxruntime.jsxs)((0, $k7rGe$sanityui.Flex), {
104
- align: "center",
105
- gap: 2,
106
- children: [
107
- /*#__PURE__*/ (0, $k7rGe$reactjsxruntime.jsx)((0, $k7rGe$sanityui.Flex), {
108
- align: "center",
109
- gap: 1,
110
- children: /*#__PURE__*/ (0, $k7rGe$reactjsxruntime.jsx)((0, $k7rGe$sanityui.Button), {
111
- fontSize: [
112
- 1
113
- ],
114
- padding: 2,
115
- tone: "primary",
116
- mode: iframeSize === "mobile" ? "default" : "ghost",
117
- icon: (0, $k7rGe$sanityicons.MobileDeviceIcon),
118
- onClick: ()=>setIframeSize(iframeSize === "mobile" ? "desktop" : "mobile")
119
- })
120
- }),
121
- /*#__PURE__*/ (0, $k7rGe$reactjsxruntime.jsx)((0, $k7rGe$sanityui.Box), {
122
- flex: 1,
123
- children: /*#__PURE__*/ (0, $k7rGe$reactjsxruntime.jsx)((0, $k7rGe$sanityui.Text), {
124
- size: 0,
125
- textOverflow: "ellipsis",
126
- children: displayUrl
127
- })
128
- }),
129
- /*#__PURE__*/ (0, $k7rGe$reactjsxruntime.jsxs)((0, $k7rGe$sanityui.Flex), {
130
- align: "center",
131
- gap: 1,
132
- children: [
133
- reload?.button ? /*#__PURE__*/ (0, $k7rGe$reactjsxruntime.jsx)((0, $k7rGe$sanityui.Button), {
134
- fontSize: [
135
- 1
136
- ],
137
- padding: 2,
138
- icon: (0, $k7rGe$sanityicons.UndoIcon),
139
- title: "Reload",
140
- "aria-label": "Reload",
141
- onClick: ()=>handleReload()
142
- }) : null,
143
- /*#__PURE__*/ (0, $k7rGe$reactjsxruntime.jsx)((0, $k7rGe$sanityui.Button), {
144
- fontSize: [
145
- 1
146
- ],
147
- icon: (0, $k7rGe$sanityicons.CopyIcon),
148
- padding: [
149
- 2
150
- ],
151
- title: "Copy",
152
- "aria-label": "Copy",
153
- onClick: ()=>handleCopy()
154
- }),
155
- /*#__PURE__*/ (0, $k7rGe$reactjsxruntime.jsx)((0, $k7rGe$sanityui.Button), {
156
- fontSize: [
157
- 1
158
- ],
159
- icon: (0, $k7rGe$sanityicons.LeaveIcon),
160
- padding: [
161
- 2
162
- ],
163
- text: "Open",
164
- tone: "primary",
165
- onClick: ()=>window.open(displayUrl)
166
- })
167
- ]
168
- })
169
- ]
170
- })
171
- }),
172
- /*#__PURE__*/ (0, $k7rGe$reactjsxruntime.jsx)((0, $k7rGe$sanityui.Card), {
173
- tone: "transparent",
174
- padding: iframeSize === "mobile" ? 2 : 0,
175
- style: {
176
- height: `100%`
177
- },
178
- children: /*#__PURE__*/ (0, $k7rGe$reactjsxruntime.jsx)((0, $k7rGe$sanityui.Flex), {
179
- align: "center",
180
- justify: "center",
181
- style: {
182
- height: `100%`
183
- },
184
- children: /*#__PURE__*/ (0, $k7rGe$reactjsxruntime.jsx)("iframe", {
185
- ref: iframe,
186
- title: "preview",
187
- style: $f4b318483f84cb22$var$sizes[iframeSize],
188
- frameBorder: "0",
189
- src: displayUrl
190
- })
191
- })
192
- })
193
- ]
194
- })
195
- ]
196
- });
197
- }
198
- var $f4b318483f84cb22$export$2e2bcd8739ae039 = $f4b318483f84cb22$var$Iframe;
199
-
200
-
201
- var $244e63ca53592e4d$export$2e2bcd8739ae039 = (0, $f4b318483f84cb22$export$2e2bcd8739ae039);
202
-
203
-
204
- //# sourceMappingURL=index.js.map
package/lib/cjs/index.js.map DELETED
@@ -1 +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 DELETED
@@ -1,195 +0,0 @@
1
- import {jsx as $gGrEF$jsx, jsxs as $gGrEF$jsxs} from "react/jsx-runtime";
2
- import {useState as $gGrEF$useState, useRef as $gGrEF$useRef, useEffect as $gGrEF$useEffect} from "react";
3
- 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";
4
- import {MobileDeviceIcon as $gGrEF$MobileDeviceIcon, UndoIcon as $gGrEF$UndoIcon, CopyIcon as $gGrEF$CopyIcon, LeaveIcon as $gGrEF$LeaveIcon} from "@sanity/icons";
5
- import {useCopyToClipboard as $gGrEF$useCopyToClipboard} from "usehooks-ts";
6
-
7
-
8
-
9
-
10
-
11
-
12
- const $b1fbe8f05b2a0ffa$var$sizes = {
13
- desktop: {
14
- width: `100%`,
15
- height: `100%`,
16
- maxHeight: `100%`
17
- },
18
- mobile: {
19
- width: 414,
20
- height: `100%`,
21
- maxHeight: 736
22
- }
23
- };
24
- const $b1fbe8f05b2a0ffa$var$DEFAULT_SIZE = `desktop`;
25
- function $b1fbe8f05b2a0ffa$var$Iframe(props) {
26
- const { document: sanityDocument , options: options } = props;
27
- const { url: url , defaultSize: defaultSize = $b1fbe8f05b2a0ffa$var$DEFAULT_SIZE , reload: reload } = options;
28
- const [displayUrl, setDisplayUrl] = (0, $gGrEF$useState)(url && typeof url === "string" ? url : ``);
29
- const [iframeSize, setIframeSize] = (0, $gGrEF$useState)($b1fbe8f05b2a0ffa$var$sizes?.[defaultSize] ? defaultSize : $b1fbe8f05b2a0ffa$var$DEFAULT_SIZE);
30
- const input = (0, $gGrEF$useRef)(null);
31
- const iframe = (0, $gGrEF$useRef)(null);
32
- const { displayed: displayed } = sanityDocument;
33
- const [, copy] = (0, $gGrEF$useCopyToClipboard)();
34
- function handleCopy() {
35
- if (!input?.current?.value) return;
36
- copy(input.current.value);
37
- }
38
- function handleReload() {
39
- if (!iframe?.current) return;
40
- // Funky way to reload an iframe without CORS issuies
41
- // eslint-disable-next-line no-self-assign
42
- iframe.current.src = iframe.current.src;
43
- }
44
- // Reload on new revisions
45
- (0, $gGrEF$useEffect)(()=>{
46
- if (reload?.revision) handleReload();
47
- }, [
48
- displayed._rev,
49
- reload?.revision
50
- ]);
51
- // Set initial URL and refresh on new revisions
52
- (0, $gGrEF$useEffect)(()=>{
53
- const getUrl = async ()=>{
54
- const resolveUrl = typeof url === "function" ? await url(displayed) : ``;
55
- // Only update state if URL has changed
56
- if (resolveUrl !== displayUrl && resolveUrl && typeof resolveUrl === "string") setDisplayUrl(resolveUrl);
57
- };
58
- if (typeof url === "function") getUrl();
59
- // eslint-disable-next-line react-hooks/exhaustive-deps
60
- }, [
61
- displayed._rev
62
- ]);
63
- if (!displayUrl || typeof displayUrl !== "string") return /*#__PURE__*/ (0, $gGrEF$jsx)((0, $gGrEF$ThemeProvider), {
64
- children: /*#__PURE__*/ (0, $gGrEF$jsx)((0, $gGrEF$Flex), {
65
- padding: 5,
66
- align: "center",
67
- justify: "center",
68
- children: /*#__PURE__*/ (0, $gGrEF$jsx)((0, $gGrEF$Spinner), {})
69
- })
70
- });
71
- return /*#__PURE__*/ (0, $gGrEF$jsxs)((0, $gGrEF$ThemeProvider), {
72
- children: [
73
- /*#__PURE__*/ (0, $gGrEF$jsx)("textarea", {
74
- style: {
75
- position: `absolute`,
76
- pointerEvents: `none`,
77
- opacity: 0
78
- },
79
- ref: input,
80
- value: displayUrl,
81
- readOnly: true,
82
- tabIndex: -1
83
- }),
84
- /*#__PURE__*/ (0, $gGrEF$jsxs)((0, $gGrEF$Flex), {
85
- direction: "column",
86
- style: {
87
- height: `100%`
88
- },
89
- children: [
90
- /*#__PURE__*/ (0, $gGrEF$jsx)((0, $gGrEF$Card), {
91
- padding: 2,
92
- borderBottom: true,
93
- children: /*#__PURE__*/ (0, $gGrEF$jsxs)((0, $gGrEF$Flex), {
94
- align: "center",
95
- gap: 2,
96
- children: [
97
- /*#__PURE__*/ (0, $gGrEF$jsx)((0, $gGrEF$Flex), {
98
- align: "center",
99
- gap: 1,
100
- children: /*#__PURE__*/ (0, $gGrEF$jsx)((0, $gGrEF$Button), {
101
- fontSize: [
102
- 1
103
- ],
104
- padding: 2,
105
- tone: "primary",
106
- mode: iframeSize === "mobile" ? "default" : "ghost",
107
- icon: (0, $gGrEF$MobileDeviceIcon),
108
- onClick: ()=>setIframeSize(iframeSize === "mobile" ? "desktop" : "mobile")
109
- })
110
- }),
111
- /*#__PURE__*/ (0, $gGrEF$jsx)((0, $gGrEF$Box), {
112
- flex: 1,
113
- children: /*#__PURE__*/ (0, $gGrEF$jsx)((0, $gGrEF$Text), {
114
- size: 0,
115
- textOverflow: "ellipsis",
116
- children: displayUrl
117
- })
118
- }),
119
- /*#__PURE__*/ (0, $gGrEF$jsxs)((0, $gGrEF$Flex), {
120
- align: "center",
121
- gap: 1,
122
- children: [
123
- reload?.button ? /*#__PURE__*/ (0, $gGrEF$jsx)((0, $gGrEF$Button), {
124
- fontSize: [
125
- 1
126
- ],
127
- padding: 2,
128
- icon: (0, $gGrEF$UndoIcon),
129
- title: "Reload",
130
- "aria-label": "Reload",
131
- onClick: ()=>handleReload()
132
- }) : null,
133
- /*#__PURE__*/ (0, $gGrEF$jsx)((0, $gGrEF$Button), {
134
- fontSize: [
135
- 1
136
- ],
137
- icon: (0, $gGrEF$CopyIcon),
138
- padding: [
139
- 2
140
- ],
141
- title: "Copy",
142
- "aria-label": "Copy",
143
- onClick: ()=>handleCopy()
144
- }),
145
- /*#__PURE__*/ (0, $gGrEF$jsx)((0, $gGrEF$Button), {
146
- fontSize: [
147
- 1
148
- ],
149
- icon: (0, $gGrEF$LeaveIcon),
150
- padding: [
151
- 2
152
- ],
153
- text: "Open",
154
- tone: "primary",
155
- onClick: ()=>window.open(displayUrl)
156
- })
157
- ]
158
- })
159
- ]
160
- })
161
- }),
162
- /*#__PURE__*/ (0, $gGrEF$jsx)((0, $gGrEF$Card), {
163
- tone: "transparent",
164
- padding: iframeSize === "mobile" ? 2 : 0,
165
- style: {
166
- height: `100%`
167
- },
168
- children: /*#__PURE__*/ (0, $gGrEF$jsx)((0, $gGrEF$Flex), {
169
- align: "center",
170
- justify: "center",
171
- style: {
172
- height: `100%`
173
- },
174
- children: /*#__PURE__*/ (0, $gGrEF$jsx)("iframe", {
175
- ref: iframe,
176
- title: "preview",
177
- style: $b1fbe8f05b2a0ffa$var$sizes[iframeSize],
178
- frameBorder: "0",
179
- src: displayUrl
180
- })
181
- })
182
- })
183
- ]
184
- })
185
- ]
186
- });
187
- }
188
- var $b1fbe8f05b2a0ffa$export$2e2bcd8739ae039 = $b1fbe8f05b2a0ffa$var$Iframe;
189
-
190
-
191
- var $df9eabe9bda49ea8$export$2e2bcd8739ae039 = (0, $b1fbe8f05b2a0ffa$export$2e2bcd8739ae039);
192
-
193
-
194
- export {$df9eabe9bda49ea8$export$2e2bcd8739ae039 as default};
195
- //# sourceMappingURL=index.js.map
package/lib/types/index.d.ts DELETED
@@ -1,21 +0,0 @@
1
- import { SanityDocumentLike } from "sanity";
2
- type Size = "desktop" | "mobile";
3
- type _IframeOptions1 = {
4
- url: string | ((document: SanityDocumentLike) => unknown);
5
- defaultSize?: Size;
6
- reload?: {
7
- revision?: boolean;
8
- button?: boolean;
9
- };
10
- };
11
- type IframeProps = {
12
- document: {
13
- displayed: SanityDocumentLike;
14
- };
15
- options: _IframeOptions1;
16
- };
17
- declare function Iframe(props: IframeProps): JSX.Element;
18
- export default IframeComponent;
19
- export type IframeOptions = _IframeOptions1;
20
-
21
- //# sourceMappingURL=index.d.ts.map
package/lib/types/index.d.ts.map DELETED
@@ -1 +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":"../../"}