(code: string, colorScheme: 'light' | 'dark')
| 25 | } |
| 26 | |
| 27 | function buildSrcdoc(code: string, colorScheme: 'light' | 'dark'): string { |
| 28 | const cleaned = stripBgFromCode(code); |
| 29 | const themeClass = colorScheme; |
| 30 | |
| 31 | const bridge = `<script> |
| 32 | function sendPrompt(t){window.parent.postMessage({type:'sendPrompt',text:t},'*')} |
| 33 | function openLink(u){window.parent.postMessage({type:'openLink',url:u},'*')} |
| 34 | </script>`; |
| 35 | |
| 36 | const headContent = `<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><meta name="color-scheme" content="${colorScheme}"><style>${PREVIEW_DESIGN_SYSTEM}</style>${bridge}`; |
| 37 | |
| 38 | if (/<html[\s>]/i.test(cleaned)) { |
| 39 | let result = cleaned.replace(/<html([^>]*)>/i, `<html class="${themeClass}"$1>`); |
| 40 | if (/<head[\s>]/i.test(result)) { |
| 41 | return result.replace(/<head([^>]*)>/i, `<head$1>${headContent}`); |
| 42 | } |
| 43 | return result.replace(/<html([^>]*)>/i, `<html$1><head>${headContent}</head>`); |
| 44 | } |
| 45 | |
| 46 | return `<!DOCTYPE html><html class="${themeClass}"><head>${headContent}</head><body>${cleaned}</body></html>`; |
| 47 | } |
| 48 | |
| 49 | export const HtmlPreview: React.FC<HtmlPreviewProps> = ({ code, title, onSendPrompt }) => { |
| 50 | const iframeRef = useRef<HTMLIFrameElement>(null); |
no test coverage detected