sanity-plugin-iframe-pane 1.0.4 → 1.0.9
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 +3 -1
- package/lib/Iframe.js +67 -33
- package/lib/Iframe.js.map +1 -1
- package/package.json +8 -8
- package/src/Iframe.js +55 -37
package/README.md
CHANGED
|
@@ -23,10 +23,12 @@ import Iframe from 'sanity-plugin-iframe-pane'
|
|
|
23
23
|
S.view
|
|
24
24
|
.component(Iframe)
|
|
25
25
|
.options({
|
|
26
|
-
// Accepts an async function
|
|
26
|
+
// Required: Accepts an async function
|
|
27
27
|
url: (doc) => resolveProductionUrl(doc),
|
|
28
28
|
// OR a string
|
|
29
29
|
url: `https://sanity.io`,
|
|
30
|
+
// Optional: Set the default size,
|
|
31
|
+
defaultSize: `mobile`, // default is `desktop`
|
|
30
32
|
})
|
|
31
33
|
.title('Preview')
|
|
32
34
|
```
|
package/lib/Iframe.js
CHANGED
|
@@ -9,10 +9,10 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
9
9
|
|
|
10
10
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
11
|
|
|
12
|
-
var _fi = require("react-icons/fi");
|
|
13
|
-
|
|
14
12
|
var _ui = require("@sanity/ui");
|
|
15
13
|
|
|
14
|
+
var _icons = require("@sanity/icons");
|
|
15
|
+
|
|
16
16
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
17
17
|
|
|
18
18
|
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); }
|
|
@@ -31,20 +31,41 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
|
|
|
31
31
|
|
|
32
32
|
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; }
|
|
33
33
|
|
|
34
|
-
function _iterableToArrayLimit(arr, i) { var _i = arr
|
|
34
|
+
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; }
|
|
35
35
|
|
|
36
36
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
37
37
|
|
|
38
|
+
var sizes = {
|
|
39
|
+
desktop: {
|
|
40
|
+
backgroundColor: "white",
|
|
41
|
+
width: "100%",
|
|
42
|
+
height: "100%",
|
|
43
|
+
maxHeight: "100%"
|
|
44
|
+
},
|
|
45
|
+
mobile: {
|
|
46
|
+
backgroundColor: "white",
|
|
47
|
+
width: 414,
|
|
48
|
+
height: "100%",
|
|
49
|
+
maxHeight: 736
|
|
50
|
+
}
|
|
51
|
+
};
|
|
52
|
+
|
|
38
53
|
function Iframe(_ref) {
|
|
39
54
|
var sanityDocument = _ref.document,
|
|
40
55
|
options = _ref.options;
|
|
41
|
-
var url = options.url
|
|
56
|
+
var url = options.url,
|
|
57
|
+
defaultSize = options.defaultSize;
|
|
42
58
|
|
|
43
59
|
var _useState = (0, _react.useState)(typeof url === 'string' ? url : ""),
|
|
44
60
|
_useState2 = _slicedToArray(_useState, 2),
|
|
45
61
|
displayUrl = _useState2[0],
|
|
46
62
|
setDisplayUrl = _useState2[1];
|
|
47
63
|
|
|
64
|
+
var _useState3 = (0, _react.useState)(defaultSize && sizes !== null && sizes !== void 0 && sizes[defaultSize] ? defaultSize : "desktop"),
|
|
65
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
66
|
+
iframeSize = _useState4[0],
|
|
67
|
+
setIframeSize = _useState4[1];
|
|
68
|
+
|
|
48
69
|
var input = (0, _react.useRef)();
|
|
49
70
|
var displayed = sanityDocument.displayed;
|
|
50
71
|
|
|
@@ -79,9 +100,7 @@ function Iframe(_ref) {
|
|
|
79
100
|
}, "Loading...");
|
|
80
101
|
}
|
|
81
102
|
|
|
82
|
-
return /*#__PURE__*/_react.default.createElement(_ui.ThemeProvider, {
|
|
83
|
-
theme: _ui.studioTheme
|
|
84
|
-
}, /*#__PURE__*/_react.default.createElement("textarea", {
|
|
103
|
+
return /*#__PURE__*/_react.default.createElement(_ui.ThemeProvider, null, /*#__PURE__*/_react.default.createElement("textarea", {
|
|
85
104
|
style: {
|
|
86
105
|
position: "absolute",
|
|
87
106
|
pointerEvents: "none",
|
|
@@ -96,47 +115,62 @@ function Iframe(_ref) {
|
|
|
96
115
|
style: {
|
|
97
116
|
height: "100%"
|
|
98
117
|
}
|
|
118
|
+
}, /*#__PURE__*/_react.default.createElement(_ui.Card, {
|
|
119
|
+
padding: 2,
|
|
120
|
+
borderBottom: 1
|
|
99
121
|
}, /*#__PURE__*/_react.default.createElement(_ui.Flex, {
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
122
|
+
align: "center",
|
|
123
|
+
gap: 2
|
|
124
|
+
}, /*#__PURE__*/_react.default.createElement(_ui.Flex, {
|
|
125
|
+
align: "center",
|
|
126
|
+
gap: 1
|
|
127
|
+
}, /*#__PURE__*/_react.default.createElement(_ui.Button, {
|
|
128
|
+
fontSize: [1],
|
|
129
|
+
padding: 2,
|
|
130
|
+
tone: "primary",
|
|
131
|
+
mode: iframeSize === 'mobile' ? 'default' : 'ghost',
|
|
132
|
+
icon: _icons.MobileDeviceIcon,
|
|
133
|
+
onClick: () => setIframeSize(iframeSize === 'mobile' ? 'desktop' : 'mobile')
|
|
134
|
+
})), /*#__PURE__*/_react.default.createElement(_ui.Box, {
|
|
135
|
+
flex: 1
|
|
106
136
|
}, /*#__PURE__*/_react.default.createElement(_ui.Text, {
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
137
|
+
size: 0,
|
|
138
|
+
textOverflow: "ellipsis"
|
|
139
|
+
}, displayUrl)), /*#__PURE__*/_react.default.createElement(_ui.Flex, {
|
|
140
|
+
align: "center",
|
|
141
|
+
gap: 1
|
|
142
|
+
}, /*#__PURE__*/_react.default.createElement(_ui.Button, {
|
|
112
143
|
fontSize: [1],
|
|
113
|
-
icon:
|
|
114
|
-
style: {
|
|
115
|
-
marginLeft: "0.5rem"
|
|
116
|
-
},
|
|
144
|
+
icon: _icons.CopyIcon,
|
|
117
145
|
padding: [2],
|
|
118
146
|
text: "Copy",
|
|
119
147
|
tone: "default",
|
|
120
148
|
onClick: () => handleCopy()
|
|
121
149
|
}), /*#__PURE__*/_react.default.createElement(_ui.Button, {
|
|
122
150
|
fontSize: [1],
|
|
123
|
-
icon:
|
|
124
|
-
style: {
|
|
125
|
-
marginLeft: "0.5rem"
|
|
126
|
-
},
|
|
151
|
+
icon: _icons.LeaveIcon,
|
|
127
152
|
padding: [2],
|
|
128
153
|
text: "Open",
|
|
129
154
|
tone: "primary",
|
|
130
155
|
onClick: () => window.open(displayUrl)
|
|
131
|
-
})), /*#__PURE__*/_react.default.createElement(
|
|
132
|
-
|
|
156
|
+
})))), /*#__PURE__*/_react.default.createElement(_ui.Card, {
|
|
157
|
+
tone: "transparent",
|
|
158
|
+
padding: iframeSize === 'mobile' ? 2 : 0,
|
|
133
159
|
style: {
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
160
|
+
height: "100%"
|
|
161
|
+
}
|
|
162
|
+
}, /*#__PURE__*/_react.default.createElement(_ui.Flex, {
|
|
163
|
+
align: "center",
|
|
164
|
+
justify: "center",
|
|
165
|
+
style: {
|
|
166
|
+
height: "100%"
|
|
167
|
+
}
|
|
168
|
+
}, /*#__PURE__*/_react.default.createElement("iframe", {
|
|
169
|
+
title: "preview",
|
|
170
|
+
style: sizes[iframeSize],
|
|
137
171
|
frameBorder: "0",
|
|
138
172
|
src: displayUrl
|
|
139
|
-
})));
|
|
173
|
+
})))));
|
|
140
174
|
}
|
|
141
175
|
|
|
142
176
|
Iframe.propTypes = {
|
|
@@ -149,7 +183,7 @@ Iframe.propTypes = {
|
|
|
149
183
|
})
|
|
150
184
|
}),
|
|
151
185
|
options: _propTypes.default.shape({
|
|
152
|
-
url: _propTypes.default.
|
|
186
|
+
url: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func])
|
|
153
187
|
})
|
|
154
188
|
};
|
|
155
189
|
var _default = Iframe;
|
package/lib/Iframe.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Iframe.js"],"names":["Iframe","sanityDocument","document","options","url","displayUrl","setDisplayUrl","input","displayed","handleCopy","current","select","setSelectionRange","execCommand","getUrl","resolveUrl","_id","padding","
|
|
1
|
+
{"version":3,"sources":["../src/Iframe.js"],"names":["sizes","desktop","backgroundColor","width","height","maxHeight","mobile","Iframe","sanityDocument","document","options","url","defaultSize","displayUrl","setDisplayUrl","iframeSize","setIframeSize","input","displayed","handleCopy","current","select","setSelectionRange","execCommand","getUrl","resolveUrl","_id","padding","position","pointerEvents","opacity","MobileDeviceIcon","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, Stack, ThemeProvider, Card} from '@sanity/ui'\nimport {CopyIcon, LeaveIcon, MobileDeviceIcon} from '@sanity/icons'\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} = 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 {displayed} = sanityDocument\n\n function handleCopy() {\n if (!input?.current) return\n\n input.current.select()\n input.current.setSelectionRange(0, 99999)\n\n // eslint-disable-next-line react/prop-types\n document.execCommand('copy')\n }\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 // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [])\n\n if (!displayUrl || typeof displayUrl !== 'string') {\n return <div style={{padding: `1rem`}}>Loading...</div>\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 <Button\n fontSize={[1]}\n icon={CopyIcon}\n padding={[2]}\n text=\"Copy\"\n tone=\"default\"\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 title=\"preview\" style={sizes[iframeSize]} frameBorder=\"0\" src={displayUrl} />\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
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "sanity-plugin-iframe-pane",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.9",
|
|
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
5
|
"main": "lib/Iframe.js",
|
|
6
6
|
"scripts": {
|
|
@@ -19,20 +19,20 @@
|
|
|
19
19
|
"author": "Simeon Griggs <simeon@sanity.io>",
|
|
20
20
|
"license": "MIT",
|
|
21
21
|
"dependencies": {
|
|
22
|
-
"@sanity/
|
|
23
|
-
"
|
|
24
|
-
"
|
|
22
|
+
"@sanity/icons": "^1.2.1",
|
|
23
|
+
"@sanity/ui": "^0.36.12",
|
|
24
|
+
"prop-types": "15.7.2"
|
|
25
25
|
},
|
|
26
26
|
"devDependencies": {
|
|
27
|
-
"eslint": "7.
|
|
27
|
+
"eslint": "7.32.0",
|
|
28
28
|
"eslint-config-prettier": "8.3.0",
|
|
29
29
|
"eslint-config-sanity": "5.1.0",
|
|
30
|
-
"eslint-plugin-react": "7.
|
|
31
|
-
"prettier": "2.
|
|
30
|
+
"eslint-plugin-react": "7.26.0",
|
|
31
|
+
"prettier": "2.4.1",
|
|
32
32
|
"sanipack": "2.0.1"
|
|
33
33
|
},
|
|
34
34
|
"peerDependencies": {
|
|
35
|
-
"react": "^17.0.
|
|
35
|
+
"react": "^17.0.2"
|
|
36
36
|
},
|
|
37
37
|
"prettier": {
|
|
38
38
|
"semi": false,
|
package/src/Iframe.js
CHANGED
|
@@ -1,11 +1,18 @@
|
|
|
1
1
|
import React, {useEffect, useState, useRef} from 'react'
|
|
2
2
|
import PropTypes from 'prop-types'
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
3
|
+
import {Box, Flex, Text, Button, Stack, ThemeProvider, Card} from '@sanity/ui'
|
|
4
|
+
import {CopyIcon, LeaveIcon, MobileDeviceIcon} from '@sanity/icons'
|
|
5
5
|
|
|
6
|
+
const sizes = {
|
|
7
|
+
desktop: {backgroundColor: `white`, width: `100%`, height: `100%`, maxHeight: `100%`},
|
|
8
|
+
mobile: {backgroundColor: `white`, width: 414, height: `100%`, maxHeight: 736},
|
|
9
|
+
}
|
|
6
10
|
function Iframe({document: sanityDocument, options}) {
|
|
7
|
-
const {url} = options
|
|
11
|
+
const {url, defaultSize} = options
|
|
8
12
|
const [displayUrl, setDisplayUrl] = useState(typeof url === 'string' ? url : ``)
|
|
13
|
+
const [iframeSize, setIframeSize] = useState(
|
|
14
|
+
defaultSize && sizes?.[defaultSize] ? defaultSize : `desktop`
|
|
15
|
+
)
|
|
9
16
|
const input = useRef()
|
|
10
17
|
const {displayed} = sanityDocument
|
|
11
18
|
|
|
@@ -35,7 +42,7 @@ function Iframe({document: sanityDocument, options}) {
|
|
|
35
42
|
}
|
|
36
43
|
|
|
37
44
|
return (
|
|
38
|
-
<ThemeProvider
|
|
45
|
+
<ThemeProvider>
|
|
39
46
|
<textarea
|
|
40
47
|
style={{position: `absolute`, pointerEvents: `none`, opacity: 0}}
|
|
41
48
|
ref={input}
|
|
@@ -44,37 +51,48 @@ function Iframe({document: sanityDocument, options}) {
|
|
|
44
51
|
tabIndex="-1"
|
|
45
52
|
/>
|
|
46
53
|
<Flex direction="column" style={{height: `100%`}}>
|
|
47
|
-
<
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
54
|
+
<Card padding={2} borderBottom={1}>
|
|
55
|
+
<Flex align="center" gap={2}>
|
|
56
|
+
<Flex align="center" gap={1}>
|
|
57
|
+
<Button
|
|
58
|
+
fontSize={[1]}
|
|
59
|
+
padding={2}
|
|
60
|
+
tone="primary"
|
|
61
|
+
mode={iframeSize === 'mobile' ? 'default' : 'ghost'}
|
|
62
|
+
icon={MobileDeviceIcon}
|
|
63
|
+
onClick={() => setIframeSize(iframeSize === 'mobile' ? 'desktop' : 'mobile')}
|
|
64
|
+
/>
|
|
65
|
+
</Flex>
|
|
66
|
+
<Box flex={1}>
|
|
67
|
+
<Text size={0} textOverflow="ellipsis">
|
|
68
|
+
{displayUrl}
|
|
69
|
+
</Text>
|
|
70
|
+
</Box>
|
|
71
|
+
<Flex align="center" gap={1}>
|
|
72
|
+
<Button
|
|
73
|
+
fontSize={[1]}
|
|
74
|
+
icon={CopyIcon}
|
|
75
|
+
padding={[2]}
|
|
76
|
+
text="Copy"
|
|
77
|
+
tone="default"
|
|
78
|
+
onClick={() => handleCopy()}
|
|
79
|
+
/>
|
|
80
|
+
<Button
|
|
81
|
+
fontSize={[1]}
|
|
82
|
+
icon={LeaveIcon}
|
|
83
|
+
padding={[2]}
|
|
84
|
+
text="Open"
|
|
85
|
+
tone="primary"
|
|
86
|
+
onClick={() => window.open(displayUrl)}
|
|
87
|
+
/>
|
|
88
|
+
</Flex>
|
|
89
|
+
</Flex>
|
|
90
|
+
</Card>
|
|
91
|
+
<Card tone="transparent" padding={iframeSize === 'mobile' ? 2 : 0} style={{height: `100%`}}>
|
|
92
|
+
<Flex align="center" justify="center" style={{height: `100%`}}>
|
|
93
|
+
<iframe title="preview" style={sizes[iframeSize]} frameBorder="0" src={displayUrl} />
|
|
94
|
+
</Flex>
|
|
95
|
+
</Card>
|
|
78
96
|
</Flex>
|
|
79
97
|
</ThemeProvider>
|
|
80
98
|
)
|
|
@@ -85,12 +103,12 @@ Iframe.propTypes = {
|
|
|
85
103
|
displayed: PropTypes.shape({
|
|
86
104
|
_id: PropTypes.string.isRequired,
|
|
87
105
|
slug: PropTypes.shape({
|
|
88
|
-
current: PropTypes.string
|
|
106
|
+
current: PropTypes.string,
|
|
89
107
|
}),
|
|
90
108
|
}),
|
|
91
109
|
}),
|
|
92
110
|
options: PropTypes.shape({
|
|
93
|
-
url: PropTypes.
|
|
111
|
+
url: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
|
|
94
112
|
}),
|
|
95
113
|
}
|
|
96
114
|
|