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