@blocklet/pages-kit-block-studio 0.1.5 → 0.1.8
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.
|
@@ -170,10 +170,24 @@ ${content.trim()}`;
|
|
|
170
170
|
<meta http-equiv="X-Content-Type-Options" content="nosniff">
|
|
171
171
|
<meta http-equiv="Referrer-Policy" content="no-referrer">
|
|
172
172
|
<meta http-equiv="Permissions-Policy" content="accelerometer=(), camera=(), geolocation=(), gyroscope=(), magnetometer=(), microphone=(), payment=(), usb=()">`;
|
|
173
|
+
const autoHeightScript = `<script>
|
|
174
|
+
(function() {
|
|
175
|
+
if ('ResizeObserver' in window) {
|
|
176
|
+
const resizeObserver = new ResizeObserver(() => {
|
|
177
|
+
const height = document.documentElement.scrollHeight;
|
|
178
|
+
window.parent.postMessage({ height }, '*');
|
|
179
|
+
});
|
|
180
|
+
|
|
181
|
+
resizeObserver.observe(document.documentElement);
|
|
182
|
+
}
|
|
183
|
+
})();
|
|
184
|
+
</script>`;
|
|
173
185
|
// 将处理后的相对路径引入的 CSS 和 JS 注入到 HTML 中
|
|
174
186
|
const htmlContent = htmlWithoutRelativeImport
|
|
175
187
|
.replace('<head>', `<head>${securityHeaders}`)
|
|
176
188
|
.replace('</head>', `${cssContents.map((css) => `<style>${css.trim()}</style>`).join('\n')}
|
|
189
|
+
|
|
190
|
+
${autoHeightScript}
|
|
177
191
|
</head>`)
|
|
178
192
|
.replace('</body>', `
|
|
179
193
|
${jsContents.map((js) => `<script>${js}</script>`).join('\n')}
|
|
@@ -192,11 +206,12 @@ ${content.trim()}`;
|
|
|
192
206
|
}
|
|
193
207
|
function generateComponent(content, _isDev = true) {
|
|
194
208
|
const htmlContent = content.html;
|
|
195
|
-
const { name } = content;
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
209
|
+
// const { name } = content;
|
|
210
|
+
return `import React, { useEffect, useRef } from 'react';
|
|
211
|
+
|
|
212
|
+
const htmlContent = \`
|
|
213
|
+
${htmlContent}
|
|
214
|
+
\`;
|
|
200
215
|
|
|
201
216
|
export default function HtmlPreview() {
|
|
202
217
|
const iframeRef = useRef(null);
|
|
@@ -205,28 +220,28 @@ export default function HtmlPreview() {
|
|
|
205
220
|
const iframe = iframeRef.current;
|
|
206
221
|
if (!iframe) return;
|
|
207
222
|
|
|
208
|
-
const
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
iframe.addEventListener('load', () => {
|
|
217
|
-
resizeObserver.observe(iframe.contentDocument.documentElement);
|
|
218
|
-
});
|
|
223
|
+
const handleMessage = (event) => {
|
|
224
|
+
if (event.source === iframe.contentWindow) {
|
|
225
|
+
const height = event.data.height;
|
|
226
|
+
if (height) {
|
|
227
|
+
iframe.style.height = height + 'px';
|
|
228
|
+
}
|
|
229
|
+
}
|
|
230
|
+
};
|
|
219
231
|
|
|
220
|
-
|
|
232
|
+
window.addEventListener('message', handleMessage);
|
|
233
|
+
return () => window.removeEventListener('message', handleMessage);
|
|
221
234
|
}, []);
|
|
222
235
|
|
|
223
|
-
return
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
236
|
+
return (
|
|
237
|
+
<iframe
|
|
238
|
+
ref={iframeRef}
|
|
239
|
+
style={{ border: 'none', width: '100%', height: '0px', maxHeight: '100vh' }}
|
|
240
|
+
sandbox="allow-scripts"
|
|
241
|
+
title="HtmlPreview"
|
|
242
|
+
srcDoc={htmlContent}
|
|
243
|
+
/>
|
|
244
|
+
);
|
|
230
245
|
}`;
|
|
231
246
|
}
|
|
232
247
|
function initHtmlPreviewTransformPlugin() {
|