import { useMemo } from 'react';
import { useFileStore } from '@/stores/fileStore';
import { useEditorStore } from '@/stores/editorStore';
export function useLivePreview() {
const baseFiles = useFileStore((s) => s.files);
const openFiles = useEditorStore((s) => s.openFiles);
// Merge: start with file store, then overlay any open editor buffers
const files = useMemo(() => {
const merged = { ...baseFiles };
for (const [path, file] of Object.entries(openFiles)) {
merged[path] = typeof file === 'string' ? file : file.content;
}
return merged;
}, [baseFiles, openFiles]);
const srcdoc = useMemo(() => {
const htmlFile = files['index.html'] || Object.entries(files).find(([k]) => k.endsWith('.html'))?.[1];
if (!htmlFile) return 'No HTML file found. Create an index.html to see a preview.
';
let html = htmlFile;
// Inline CSS
const cssLinkRegex = /]+href=["']([^"']+\.css)["'][^>]*>/gi;
html = html.replace(cssLinkRegex, (_match, href) => {
const cssContent = files[href];
return cssContent ? `` : '';
});
// Inline JS
const scriptRegex = /]+src=["']([^"']+\.js)["'][^>]*><\/script>/gi;
html = html.replace(scriptRegex, (_match, src) => {
const jsContent = files[src];
return jsContent ? `