sanity-plugin-iframe-pane 1.1.0 → 1.1.2
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.
- package/README.md +7 -3
- package/lib/Iframe.js +5 -3
- package/lib/Iframe.js.map +1 -1
- package/package.json +1 -1
- package/src/Iframe.tsx +6 -4
package/README.md
CHANGED
|
@@ -1,5 +1,9 @@
|
|
|
1
1
|
# sanity-plugin-iframe-pane
|
|
2
2
|
|
|
3
|
+
> NOTE This is for the Studio v2 version of the plugin
|
|
4
|
+
>
|
|
5
|
+
> There is a [Studio v3 specific version in the studio-v3 branch](https://github.com/SimeonGriggs/sanity-plugin-iframe-pane/tree/studio-v3)
|
|
6
|
+
|
|
3
7
|
Display any URL in a View Pane, along with helpful buttons to Copy the URL or open in a new tab.
|
|
4
8
|
|
|
5
9
|
Accepts either a string or an async function to resolve a URL based on the current document.
|
|
@@ -16,7 +20,7 @@ This is designed to be used as a [Component inside of a View](https://www.sanity
|
|
|
16
20
|
|
|
17
21
|
```js
|
|
18
22
|
// ./src/deskStructure.js
|
|
19
|
-
import Iframe from
|
|
23
|
+
import Iframe from "sanity-plugin-iframe-pane";
|
|
20
24
|
|
|
21
25
|
// ...all other list items
|
|
22
26
|
|
|
@@ -32,10 +36,10 @@ S.view
|
|
|
32
36
|
// Optional: Add a reload button, or reload on new document revisions
|
|
33
37
|
reload: {
|
|
34
38
|
button: true, // default `undefined`
|
|
35
|
-
revision: true, // default `undefined
|
|
39
|
+
revision: true, // boolean | number. default `undefined`. If a number is provided, add a delay (in ms) before the automatic reload on document revision
|
|
36
40
|
},
|
|
37
41
|
})
|
|
38
|
-
.title(
|
|
42
|
+
.title("Preview");
|
|
39
43
|
```
|
|
40
44
|
|
|
41
45
|
## License
|
package/lib/Iframe.js
CHANGED
|
@@ -63,7 +63,7 @@ function Iframe(props) {
|
|
|
63
63
|
displayUrl = _useState2[0],
|
|
64
64
|
setDisplayUrl = _useState2[1];
|
|
65
65
|
|
|
66
|
-
var _useState3 = (0, _react.useState)(
|
|
66
|
+
var _useState3 = (0, _react.useState)(defaultSize),
|
|
67
67
|
_useState4 = _slicedToArray(_useState3, 2),
|
|
68
68
|
iframeSize = _useState4[0],
|
|
69
69
|
setIframeSize = _useState4[1];
|
|
@@ -95,8 +95,10 @@ function Iframe(props) {
|
|
|
95
95
|
|
|
96
96
|
|
|
97
97
|
(0, _react.useEffect)(() => {
|
|
98
|
-
if (reload !== null && reload !== void 0 && reload.revision) {
|
|
99
|
-
|
|
98
|
+
if (reload !== null && reload !== void 0 && reload.revision || reload.revision == 0) {
|
|
99
|
+
setTimeout(() => {
|
|
100
|
+
handleReload();
|
|
101
|
+
}, Number(reload === null || reload === void 0 ? void 0 : reload.revision));
|
|
100
102
|
}
|
|
101
103
|
}, [displayed._rev, reload === null || reload === void 0 ? void 0 : reload.revision]); // Set initial URL and refresh on new revisions
|
|
102
104
|
|
package/lib/Iframe.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"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(
|
|
1
|
+
{"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","setTimeout","Number","_rev","getUrl","resolveUrl","position","pointerEvents","opacity","MobileDeviceIcon","button","UndoIcon","CopyIcon","LeaveIcon","window","open"],"sources":["../src/Iframe.tsx"],"sourcesContent":["import React, {useEffect, useState, useRef} from 'react'\nimport {SanityDocumentLike} from 'sanity'\nimport {Box, Flex, Text, Button, ThemeProvider, Card, Spinner} from '@sanity/ui'\nimport {UndoIcon, CopyIcon, LeaveIcon, MobileDeviceIcon} from '@sanity/icons'\n\nimport useCopyToClipboard from './hooks/useCopytoClipboard'\n\nconst sizes = {\n desktop: {backgroundColor: `white`, width: `100%`, height: `100%`, maxHeight: `100%`},\n mobile: {backgroundColor: `white`, width: 414, height: `100%`, maxHeight: 736},\n}\n\nexport type IframeOptions = {\n url: string | ((document: SanityDocumentLike) => unknown)\n defaultSize?: 'desktop' | 'mobile'\n reload: {\n revision: boolean | number\n button: boolean\n }\n}\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(defaultSize)\n const input = useRef()\n const iframe = useRef()\n const {displayed} = sanityDocument\n const [, copy] = useCopyToClipboard()\n\n function handleCopy() {\n if (!input?.current?.value) return\n\n copy(input.current.value)\n }\n\n function handleReload() {\n if (!iframe?.current) {\n return\n }\n\n // Funky way to reload an iframe without CORS issuies\n // eslint-disable-next-line no-self-assign\n iframe.current.src = iframe.current.src\n }\n\n // Reload on new revisions\n useEffect(() => {\n if (reload?.revision || reload.revision == 0) {\n setTimeout(() => {\n handleReload()\n }, Number(reload?.revision))\n }\n }, [displayed._rev, reload?.revision])\n\n // Set initial URL and refresh on new revisions\n useEffect(() => {\n const getUrl = async () => {\n const resolveUrl = typeof url === 'function' ? await url(displayed) : ``\n\n // Only update state if URL has changed\n if (resolveUrl !== displayUrl) {\n setDisplayUrl(resolveUrl)\n }\n }\n\n if (typeof url === 'function') {\n getUrl()\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [displayed._rev])\n\n if (!displayUrl || typeof displayUrl !== 'string') {\n return (\n <ThemeProvider>\n <Flex padding={5} items=\"center\" justify=\"center\">\n <Spinner />\n </Flex>\n </ThemeProvider>\n )\n }\n\n return (\n <ThemeProvider>\n <textarea\n style={{position: `absolute`, pointerEvents: `none`, opacity: 0}}\n ref={input}\n value={displayUrl}\n readOnly\n tabIndex={-1}\n />\n <Flex direction=\"column\" style={{height: `100%`}}>\n <Card padding={2} borderBottom={1}>\n <Flex align=\"center\" gap={2}>\n <Flex align=\"center\" gap={1}>\n <Button\n fontSize={[1]}\n padding={2}\n tone=\"primary\"\n mode={iframeSize === 'mobile' ? 'default' : 'ghost'}\n icon={MobileDeviceIcon}\n onClick={() => setIframeSize(iframeSize === 'mobile' ? 'desktop' : 'mobile')}\n />\n </Flex>\n <Box flex={1}>\n <Text size={0} textOverflow=\"ellipsis\">\n {displayUrl}\n </Text>\n </Box>\n <Flex align=\"center\" gap={1}>\n {reload?.button ? (\n <Button\n fontSize={[1]}\n padding={2}\n icon={UndoIcon}\n title=\"Reload\"\n aria-label=\"Reload\"\n onClick={() => handleReload()}\n />\n ) : null}\n <Button\n fontSize={[1]}\n icon={CopyIcon}\n padding={[2]}\n title=\"Copy\"\n aria-label=\"Copy\"\n onClick={() => handleCopy()}\n />\n <Button\n fontSize={[1]}\n icon={LeaveIcon}\n padding={[2]}\n text=\"Open\"\n tone=\"primary\"\n onClick={() => window.open(displayUrl)}\n />\n </Flex>\n </Flex>\n </Card>\n <Card tone=\"transparent\" padding={iframeSize === 'mobile' ? 2 : 0} style={{height: `100%`}}>\n <Flex align=\"center\" justify=\"center\" style={{height: `100%`}}>\n <iframe\n ref={iframe}\n title=\"preview\"\n style={sizes[iframeSize]}\n frameBorder=\"0\"\n src={displayUrl}\n />\n </Flex>\n </Card>\n </Flex>\n </ThemeProvider>\n )\n}\n\nexport default Iframe\n"],"mappings":"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"}
|
package/package.json
CHANGED
package/src/Iframe.tsx
CHANGED
|
@@ -14,7 +14,7 @@ export type IframeOptions = {
|
|
|
14
14
|
url: string | ((document: SanityDocumentLike) => unknown)
|
|
15
15
|
defaultSize?: 'desktop' | 'mobile'
|
|
16
16
|
reload: {
|
|
17
|
-
revision: boolean
|
|
17
|
+
revision: boolean | number
|
|
18
18
|
button: boolean
|
|
19
19
|
}
|
|
20
20
|
}
|
|
@@ -30,7 +30,7 @@ function Iframe(props: IframeProps) {
|
|
|
30
30
|
const {document: sanityDocument, options} = props
|
|
31
31
|
const {url, defaultSize = `desktop`, reload} = options
|
|
32
32
|
const [displayUrl, setDisplayUrl] = useState(typeof url === 'string' ? url : ``)
|
|
33
|
-
const [iframeSize, setIframeSize] = useState(
|
|
33
|
+
const [iframeSize, setIframeSize] = useState(defaultSize)
|
|
34
34
|
const input = useRef()
|
|
35
35
|
const iframe = useRef()
|
|
36
36
|
const {displayed} = sanityDocument
|
|
@@ -54,8 +54,10 @@ function Iframe(props: IframeProps) {
|
|
|
54
54
|
|
|
55
55
|
// Reload on new revisions
|
|
56
56
|
useEffect(() => {
|
|
57
|
-
if (reload?.revision) {
|
|
58
|
-
|
|
57
|
+
if (reload?.revision || reload.revision == 0) {
|
|
58
|
+
setTimeout(() => {
|
|
59
|
+
handleReload()
|
|
60
|
+
}, Number(reload?.revision))
|
|
59
61
|
}
|
|
60
62
|
}, [displayed._rev, reload?.revision])
|
|
61
63
|
|