445 lines
19 KiB
TypeScript
445 lines
19 KiB
TypeScript
import React, { useEffect, useRef, useState } from 'react';
|
|
import { motion, AnimatePresence } from 'motion/react';
|
|
import { ArrowLeft, Download, FileText, CheckCircle2, ExternalLink, Loader2, ZoomIn, ZoomOut } from 'lucide-react';
|
|
import { PaperSize } from '../types';
|
|
import { StyleOption } from '../types';
|
|
import { getPreviewCss } from '../services/templateRenderer';
|
|
import { generateDocxDocument } from '../utils/docxConverter';
|
|
import ExportOptionsModal from './ExportOptionsModal';
|
|
import { open } from '@tauri-apps/plugin-shell';
|
|
import { save } from '@tauri-apps/plugin-dialog';
|
|
import { writeFile } from '@tauri-apps/plugin-fs';
|
|
import { useKeyboardNavigation } from '../hooks/useKeyboardNavigation';
|
|
|
|
interface PreviewProps {
|
|
htmlContent: string;
|
|
onBack: () => void;
|
|
paperSize: PaperSize;
|
|
selectedStyleId?: string | null;
|
|
inputFileName?: string;
|
|
uiZoom: number;
|
|
onZoomChange: (zoom: number) => void;
|
|
templates: StyleOption[];
|
|
}
|
|
|
|
// Zoom Control Component
|
|
const ZoomControl: React.FC<{ zoom: number; onZoomChange: (zoom: number) => void }> = ({ zoom, onZoomChange }) => {
|
|
const decreaseZoom = () => onZoomChange(Math.max(50, zoom - 10));
|
|
const increaseZoom = () => onZoomChange(Math.min(200, zoom + 10));
|
|
|
|
return (
|
|
<div className="flex items-center gap-2 bg-zinc-900/80 rounded-lg border border-zinc-800 px-2 py-1">
|
|
<motion.button
|
|
onClick={decreaseZoom}
|
|
whileHover={{ scale: 1.1 }}
|
|
whileTap={{ scale: 0.9 }}
|
|
className="p-2 min-w-[44px] min-h-[44px] flex items-center justify-center text-zinc-400 hover:text-white transition-colors"
|
|
aria-label="Zoom out"
|
|
>
|
|
<ZoomOut size={16} aria-hidden="true" />
|
|
</motion.button>
|
|
<span className="text-xs font-medium text-zinc-300 min-w-[3rem] text-center">{zoom}%</span>
|
|
<motion.button
|
|
onClick={increaseZoom}
|
|
whileHover={{ scale: 1.1 }}
|
|
whileTap={{ scale: 0.9 }}
|
|
className="p-2 min-w-[44px] min-h-[44px] flex items-center justify-center text-zinc-400 hover:text-white transition-colors"
|
|
aria-label="Zoom in"
|
|
>
|
|
<ZoomIn size={16} aria-hidden="true" />
|
|
</motion.button>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// Font download component
|
|
const FontList: React.FC<{ fonts: string[] }> = ({ fonts }) => {
|
|
const [downloadingFont, setDownloadingFont] = useState<string | null>(null);
|
|
const [downloadStatus, setDownloadStatus] = useState<Record<string, string>>({});
|
|
|
|
const downloadFont = async (fontName: string) => {
|
|
setDownloadingFont(fontName);
|
|
setDownloadStatus(prev => ({ ...prev, [fontName]: 'Downloading...' }));
|
|
try {
|
|
const encodedName = encodeURIComponent(fontName);
|
|
const downloadUrl = `https://fonts.google.com/download?family=${encodedName}`;
|
|
await open(downloadUrl);
|
|
setDownloadStatus(prev => ({ ...prev, [fontName]: 'Opened in browser' }));
|
|
setTimeout(() => {
|
|
setDownloadStatus(prev => { const newStatus = { ...prev }; delete newStatus[fontName]; return newStatus; });
|
|
}, 3000);
|
|
} catch (err) {
|
|
setDownloadStatus(prev => ({ ...prev, [fontName]: 'Failed' }));
|
|
} finally {
|
|
setDownloadingFont(null);
|
|
}
|
|
};
|
|
|
|
const openGoogleFonts = async (fontName: string) => {
|
|
try {
|
|
const url = `https://fonts.google.com/specimen/${fontName.replace(/\s+/g, '+')}`;
|
|
await open(url);
|
|
} catch (err) {
|
|
window.open(`https://fonts.google.com/specimen/${fontName.replace(/\s+/g, '+')}`, '_blank');
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="flex items-center gap-2 text-sm text-zinc-400">
|
|
<span className="hidden md:inline">Fonts:</span>
|
|
<div className="flex gap-2 flex-wrap">
|
|
{fonts.map((font, index) => (
|
|
<motion.div key={font} className="relative group" initial={{ opacity: 0, scale: 0.8 }} animate={{ opacity: 1, scale: 1 }} transition={{ delay: index * 0.05 }}>
|
|
<div className="flex items-center gap-1">
|
|
<motion.button
|
|
onClick={() => downloadFont(font)}
|
|
disabled={downloadingFont === font}
|
|
whileHover={{ scale: 1.05 }}
|
|
whileTap={{ scale: 0.95 }}
|
|
aria-label={`Download ${font} font`}
|
|
className="px-2 py-1 bg-zinc-900 border border-zinc-800 hover:border-zinc-600 rounded-l text-zinc-300 hover:text-white transition-all flex items-center gap-1.5 text-xs font-medium"
|
|
>
|
|
{downloadingFont === font ? <Loader2 size={10} className="animate-spin" aria-hidden="true" /> : <Download size={10} aria-hidden="true" />}
|
|
{font}
|
|
</motion.button>
|
|
<motion.button
|
|
onClick={() => openGoogleFonts(font)}
|
|
whileHover={{ scale: 1.05 }}
|
|
whileTap={{ scale: 0.95 }}
|
|
aria-label="View on Google Fonts"
|
|
className="px-1.5 py-1 bg-zinc-900 border border-l-0 border-zinc-800 hover:border-zinc-600 rounded-r text-zinc-400 hover:text-white transition-all"
|
|
>
|
|
<ExternalLink size={10} aria-hidden="true" />
|
|
</motion.button>
|
|
</div>
|
|
{downloadStatus[font] && (
|
|
<motion.div className="absolute top-full left-0 mt-1 px-2 py-1 bg-zinc-800 border border-zinc-700 rounded text-xs whitespace-nowrap z-50" initial={{ opacity: 0, y: -5 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -5 }}>
|
|
{downloadStatus[font]}
|
|
</motion.div>
|
|
)}
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export const Preview: React.FC<PreviewProps> = ({
|
|
htmlContent,
|
|
onBack,
|
|
paperSize,
|
|
selectedStyleId,
|
|
inputFileName = 'document',
|
|
uiZoom,
|
|
onZoomChange,
|
|
templates
|
|
}) => {
|
|
const iframeRef = useRef<HTMLIFrameElement>(null);
|
|
const backButtonRef = useRef<HTMLButtonElement>(null);
|
|
const saveButtonRef = useRef<HTMLButtonElement>(null);
|
|
const [isExporting, setIsExporting] = useState(false);
|
|
const [successMsg, setSuccessMsg] = useState(false);
|
|
const [showExportModal, setShowExportModal] = useState(false);
|
|
const [focusedElement, setFocusedElement] = useState<'back' | 'fonts' | 'save'>('save');
|
|
const [exportError, setExportError] = useState<string | null>(null);
|
|
|
|
// Get current style from templates
|
|
const style = templates.find(s => s.id === selectedStyleId) || templates[0] || null;
|
|
|
|
// Extract used fonts for display
|
|
const usedFonts = style ? Array.from(new Set([
|
|
style.typography?.fonts?.heading || style.wordConfig?.heading1?.font || 'Arial',
|
|
style.typography?.fonts?.body || style.wordConfig?.body?.font || 'Arial'
|
|
])).filter(Boolean) : [];
|
|
|
|
useKeyboardNavigation({
|
|
onEscape: () => onBack(),
|
|
onArrowLeft: () => { if (focusedElement === 'save') { setFocusedElement('back'); backButtonRef.current?.focus(); } },
|
|
onArrowRight: () => { if (focusedElement === 'back') { setFocusedElement('save'); saveButtonRef.current?.focus(); } },
|
|
onEnter: () => { if (focusedElement === 'back') onBack(); else if (focusedElement === 'save' && !isExporting) handleSave(); },
|
|
onCtrlEnter: () => { if (!isExporting) handleSave(); },
|
|
}, [focusedElement, isExporting, onBack]);
|
|
|
|
useEffect(() => {
|
|
setTimeout(() => saveButtonRef.current?.focus(), 100);
|
|
}, []);
|
|
|
|
const handleSave = async () => {
|
|
setShowExportModal(true);
|
|
};
|
|
|
|
const handleExportConfirm = async (useTableHeaders: boolean) => {
|
|
setShowExportModal(false);
|
|
const sid = selectedStyleId || 'swiss-grid';
|
|
await generateDocx(sid, useTableHeaders);
|
|
};
|
|
|
|
const generateDocx = async (styleId: string, useTableHeaders: boolean = false) => {
|
|
setIsExporting(true);
|
|
try {
|
|
const template = templates.find(s => s.id === styleId) || templates[0];
|
|
|
|
// Get base config from wordConfig
|
|
const cfg = template.wordConfig || {
|
|
heading1: { font: 'Arial', size: 24, color: '000000', align: 'left' },
|
|
heading2: { font: 'Arial', size: 18, color: '333333', align: 'left' },
|
|
body: { font: 'Arial', size: 11, color: '000000', align: 'left' },
|
|
accentColor: '000000'
|
|
};
|
|
|
|
// Extract page background from template
|
|
const pageBackground = template.typography?.colors?.background;
|
|
|
|
// Get fonts from template
|
|
const codeFont = template.typography?.fonts?.code || template.typography?.fonts?.body || 'Consolas';
|
|
|
|
// Detect dark theme
|
|
const isDarkTheme = pageBackground ? parseInt(pageBackground, 16) < 0x444444 : false;
|
|
|
|
// DEBUG: Specific markdown constructs for DOCX
|
|
console.log('=== PREVIEW CALLING DOCX (h3, strong, table, ul/ol, li) ===');
|
|
console.log('wordConfig h3:', JSON.stringify({ font: cfg.heading2?.font, size: cfg.body?.size, color: template.elements?.h3?.color }));
|
|
console.log('elements h3:', JSON.stringify(template.elements?.h3));
|
|
console.log('elements strong:', JSON.stringify(template.elements?.strong));
|
|
console.log('elements table:', JSON.stringify(template.elements?.table));
|
|
console.log('elements th:', JSON.stringify(template.elements?.th));
|
|
console.log('elements td:', JSON.stringify(template.elements?.td));
|
|
console.log('elements ul:', JSON.stringify(template.elements?.ul));
|
|
console.log('elements ol:', JSON.stringify(template.elements?.ol));
|
|
console.log('elements li:', JSON.stringify(template.elements?.li));
|
|
console.log('useTableHeaders:', useTableHeaders);
|
|
console.log('=== END PREVIEW CALL ===');
|
|
|
|
const blob = await generateDocxDocument(htmlContent, {
|
|
paperSize,
|
|
heading1: cfg.heading1,
|
|
heading2: cfg.heading2,
|
|
body: cfg.body,
|
|
accentColor: cfg.accentColor,
|
|
pageBackground,
|
|
codeFont,
|
|
isDarkTheme,
|
|
elements: template.elements,
|
|
fonts: template.typography?.fonts,
|
|
palette: template.typography?.colors,
|
|
id: template.id,
|
|
page: template.page,
|
|
useTableHeaders
|
|
});
|
|
|
|
const arrayBuffer = await blob.arrayBuffer();
|
|
const uint8Array = new Uint8Array(arrayBuffer);
|
|
|
|
const defaultName = `${inputFileName}.docx`;
|
|
const savePath = await save({
|
|
defaultPath: defaultName,
|
|
filters: [{ name: 'Word Document', extensions: ['docx'] }]
|
|
});
|
|
|
|
if (savePath) {
|
|
await writeFile(savePath, uint8Array);
|
|
setSuccessMsg(true);
|
|
setTimeout(() => setSuccessMsg(false), 3000);
|
|
}
|
|
} catch (e) {
|
|
console.error("Docx Gen Error", e);
|
|
setExportError("Failed to generate DOCX: " + e);
|
|
} finally {
|
|
setIsExporting(false);
|
|
}
|
|
};
|
|
|
|
// Track blob URL for cleanup
|
|
const blobUrlRef = useRef<string | null>(null);
|
|
|
|
// Render preview whenever dependencies change
|
|
useEffect(() => {
|
|
if (!iframeRef.current || !style) return;
|
|
|
|
// DEBUG: Specific markdown constructs for Preview
|
|
console.log('=== PREVIEW DEBUG (h3, strong, table, ul/ol, li) ===');
|
|
console.log('h3:', JSON.stringify(style.elements?.h3));
|
|
console.log('strong:', JSON.stringify(style.elements?.strong));
|
|
console.log('table:', JSON.stringify(style.elements?.table));
|
|
console.log('th:', JSON.stringify(style.elements?.th));
|
|
console.log('td:', JSON.stringify(style.elements?.td));
|
|
console.log('ul:', JSON.stringify(style.elements?.ul));
|
|
console.log('ol:', JSON.stringify(style.elements?.ol));
|
|
console.log('li:', JSON.stringify(style.elements?.li));
|
|
console.log('=== END PREVIEW DEBUG ===');
|
|
|
|
// Cleanup old blob URL
|
|
if (blobUrlRef.current) {
|
|
URL.revokeObjectURL(blobUrlRef.current);
|
|
blobUrlRef.current = null;
|
|
}
|
|
|
|
// Get CSS from template - this generates from elements structure
|
|
const templateCss = getPreviewCss(style);
|
|
console.log('Generated preview CSS (first 500 chars):', templateCss.substring(0, 500));
|
|
|
|
// Get page background from template
|
|
const pageBg = style.typography?.colors?.background || 'ffffff';
|
|
|
|
// Build the complete CSS - template CSS now includes .page styles
|
|
const allCss = [
|
|
/* Reset styles first */
|
|
'::-webkit-scrollbar { width: 6px !important; height: 6px !important; }',
|
|
'::-webkit-scrollbar-track { background: transparent !important; }',
|
|
'::-webkit-scrollbar-thumb { background: #71717a !important; border-radius: 3px !important; }',
|
|
'* { scrollbar-width: thin; scrollbar-color: #71717a transparent; box-sizing: border-box; }',
|
|
'html, body { margin: 0; padding: 0; min-height: 100%; }',
|
|
|
|
/* Dark outer background */
|
|
'body { background-color: #18181b; padding: 40px 20px; }',
|
|
|
|
/* Template CSS - includes .page styles with fonts, colors, etc. */
|
|
templateCss,
|
|
|
|
/* Page dimensions (not included in template CSS) */
|
|
`.page {`,
|
|
` width: ${paperSize === 'A4' ? '210mm' : '8.5in'};`,
|
|
` min-height: ${paperSize === 'A4' ? '297mm' : '11in'};`,
|
|
` padding: 25mm;`,
|
|
` box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4);`,
|
|
` box-sizing: border-box;`,
|
|
` margin: 0 auto;`,
|
|
`}`,
|
|
|
|
/* Utilities */
|
|
'.page img { max-width: 100%; }'
|
|
].join('\n');
|
|
|
|
// Inject CSS directly as inline style tag
|
|
const html = `
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="${style.googleFontsImport || 'https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap'}" rel="stylesheet">
|
|
<style>
|
|
${allCss}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="page">
|
|
${htmlContent}
|
|
<script>
|
|
console.log('--- STAGE 2: PREVIEW COMPUTED STYLES ---');
|
|
setTimeout(() => {
|
|
['h1', 'h2', 'h3', 'p', 'table', 'th', 'td', 'ul', 'ol', 'li', 'blockquote', 'code', 'pre'].forEach(tag => {
|
|
const el = document.querySelector('.page ' + tag);
|
|
if (el) {
|
|
const style = window.getComputedStyle(el);
|
|
|
|
// Get borders specifically
|
|
const borderTop = style.borderTopWidth + ' ' + style.borderTopStyle + ' ' + style.borderTopColor;
|
|
const borderBottom = style.borderBottomWidth + ' ' + style.borderBottomStyle + ' ' + style.borderBottomColor;
|
|
const borderLeft = style.borderLeftWidth + ' ' + style.borderLeftStyle + ' ' + style.borderLeftColor;
|
|
const borderRight = style.borderRightWidth + ' ' + style.borderRightStyle + ' ' + style.borderRightColor;
|
|
|
|
console.log(\`PREVIEW \${tag.toUpperCase()}: \`, {
|
|
fontFamily: style.fontFamily,
|
|
fontSize: style.fontSize,
|
|
color: style.color,
|
|
backgroundColor: style.backgroundColor,
|
|
fontWeight: style.fontWeight,
|
|
border: \`T:\${borderTop} R:\${borderRight} B:\${borderBottom} L:\${borderLeft}\`,
|
|
padding: style.padding,
|
|
margin: style.margin
|
|
});
|
|
} else {
|
|
console.log(\`PREVIEW \${tag.toUpperCase()}: Not found\`);
|
|
}
|
|
});
|
|
}, 500);
|
|
</script>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
`;
|
|
|
|
// Create blob URL for CSP compliance
|
|
const blob = new Blob([html], { type: 'text/html' });
|
|
const blobUrl = URL.createObjectURL(blob);
|
|
blobUrlRef.current = blobUrl;
|
|
iframeRef.current.src = blobUrl;
|
|
|
|
// Cleanup on unmount
|
|
return () => {
|
|
if (blobUrlRef.current) {
|
|
URL.revokeObjectURL(blobUrlRef.current);
|
|
blobUrlRef.current = null;
|
|
}
|
|
};
|
|
}, [htmlContent, paperSize, selectedStyleId, templates, style]);
|
|
|
|
if (!style) {
|
|
return <div className="h-screen flex items-center justify-center text-white" role="status">Loading...</div>;
|
|
}
|
|
|
|
return (
|
|
<motion.div className="h-screen flex flex-col bg-zinc-950" initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 0.3 }}>
|
|
<motion.div className="sticky top-0 z-50 bg-zinc-950/90 backdrop-blur-md border-b border-zinc-800 p-4" initial={{ y: -20, opacity: 0 }} animate={{ y: 0, opacity: 1 }} transition={{ duration: 0.4, ease: [0.22, 1, 0.36, 1] }}>
|
|
<div className="max-w-7xl mx-auto flex flex-col sm:flex-row justify-between items-center gap-4">
|
|
<motion.button ref={backButtonRef} onClick={onBack} onFocus={() => setFocusedElement('back')} whileHover={{ x: -3 }} whileTap={{ scale: 0.95 }} className="flex items-center gap-2 text-zinc-400 hover:text-white transition-colors outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-zinc-950 rounded-lg px-2 py-1">
|
|
<ArrowLeft size={20} aria-hidden="true" />
|
|
<span>Back to Editor</span>
|
|
</motion.button>
|
|
|
|
<div className="flex flex-col sm:flex-row items-center gap-6">
|
|
<FontList fonts={usedFonts} />
|
|
<div className="h-4 w-px bg-zinc-800 hidden sm:block" />
|
|
<ZoomControl zoom={uiZoom} onZoomChange={onZoomChange} />
|
|
<div className="h-4 w-px bg-zinc-800 hidden sm:block" />
|
|
<div className="flex items-center gap-4">
|
|
<span className="text-zinc-400 text-sm hidden sm:inline">Format: {paperSize}</span>
|
|
<motion.button
|
|
ref={saveButtonRef}
|
|
onClick={handleSave}
|
|
onFocus={() => setFocusedElement('save')}
|
|
disabled={isExporting}
|
|
aria-live="polite"
|
|
whileHover={{ scale: 1.05, boxShadow: '0 0 20px rgba(59, 130, 246, 0.4)' }}
|
|
whileTap={{ scale: 0.95 }}
|
|
className={`flex items-center gap-2 px-5 py-2.5 rounded-lg font-semibold transition-colors shadow-lg ${successMsg ? 'bg-emerald-600 text-white' : 'bg-blue-600 text-white hover:bg-blue-500'} ${isExporting ? 'opacity-50 cursor-wait' : ''}`}
|
|
>
|
|
<AnimatePresence mode="wait">
|
|
{successMsg ? (
|
|
<motion.div key="success" initial={{ scale: 0 }} animate={{ scale: 1 }} exit={{ scale: 0 }} className="flex items-center gap-2">
|
|
<CheckCircle2 size={18} aria-hidden="true" />
|
|
<span>Saved!</span>
|
|
</motion.div>
|
|
) : (
|
|
<motion.div key="default" initial={{ scale: 0 }} animate={{ scale: 1 }} exit={{ scale: 0 }} className="flex items-center gap-2">
|
|
{isExporting ? <Loader2 size={18} className="animate-spin" aria-hidden="true" /> : <FileText size={18} aria-hidden="true" />}
|
|
<span>{isExporting ? 'Generating...' : 'Save Word Doc'}</span>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
</motion.button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
|
|
<div className="flex-grow relative bg-zinc-950 overflow-hidden preview-container">
|
|
<iframe ref={iframeRef} className="w-full h-full border-0 block" title="Report Preview" />
|
|
</div>
|
|
|
|
<ExportOptionsModal
|
|
isOpen={showExportModal}
|
|
onClose={() => setShowExportModal(false)}
|
|
onExport={handleExportConfirm}
|
|
/>
|
|
{exportError && (
|
|
<div role="alert" className="fixed bottom-4 right-4 z-50 p-4 bg-red-900/90 border border-red-800 rounded-xl text-red-200 max-w-md">
|
|
{exportError}
|
|
<button onClick={() => setExportError(null)} className="ml-3 text-red-400 hover:text-white" aria-label="Dismiss error">✕</button>
|
|
</div>
|
|
)}
|
|
</motion.div>
|
|
);
|
|
};
|