@blocklet/pages-kit-block-studio 0.1.5 → 0.1.7
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,10 @@ ${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
|
-
return `import { createElement, useEffect, useRef } from 'react';
|
|
209
|
+
// const { name } = content;
|
|
210
|
+
return `import React, { useEffect, useRef } from 'react';
|
|
211
|
+
|
|
212
|
+
const htmlContent = ${htmlContent};
|
|
200
213
|
|
|
201
214
|
export default function HtmlPreview() {
|
|
202
215
|
const iframeRef = useRef(null);
|
|
@@ -205,28 +218,28 @@ export default function HtmlPreview() {
|
|
|
205
218
|
const iframe = iframeRef.current;
|
|
206
219
|
if (!iframe) return;
|
|
207
220
|
|
|
208
|
-
const
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
iframe.addEventListener('load', () => {
|
|
217
|
-
resizeObserver.observe(iframe.contentDocument.documentElement);
|
|
218
|
-
});
|
|
221
|
+
const handleMessage = (event) => {
|
|
222
|
+
if (event.source === iframe.contentWindow) {
|
|
223
|
+
const height = event.data.height;
|
|
224
|
+
if (height) {
|
|
225
|
+
iframe.style.height = height + 'px';
|
|
226
|
+
}
|
|
227
|
+
}
|
|
228
|
+
};
|
|
219
229
|
|
|
220
|
-
|
|
230
|
+
window.addEventListener('message', handleMessage);
|
|
231
|
+
return () => window.removeEventListener('message', handleMessage);
|
|
221
232
|
}, []);
|
|
222
233
|
|
|
223
|
-
return
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
234
|
+
return (
|
|
235
|
+
<iframe
|
|
236
|
+
ref={iframeRef}
|
|
237
|
+
style={{ border: 'none', width: '100%', height: '0px', maxHeight: '100vh' }}
|
|
238
|
+
sandbox="allow-scripts"
|
|
239
|
+
title="HtmlPreview"
|
|
240
|
+
srcDoc={htmlContent}
|
|
241
|
+
/>
|
|
242
|
+
);
|
|
230
243
|
}`;
|
|
231
244
|
}
|
|
232
245
|
function initHtmlPreviewTransformPlugin() {
|