- Move SlideEditor to dedicated slide-editor directory structure - Break down monolithic 471-line component into smaller, focused modules: - SlideEditor.tsx (127 lines) - main component using composition - useSlideEditor.ts (235 lines) - custom hook for state management - ContentEditor.tsx - focused content editing component - SlidePreviewModal.tsx - modal for fullscreen preview - Consolidate CSS from 838+132 lines to 731 lines with: - Comprehensive CSS variables system for consistent theming - Remove duplicate .slide-preview-wrapper rules and conflicts - Clean aspect ratio handling with clear separation of contexts - Follow project standards: direct imports, error boundaries, under 200 lines per component - Maintain all existing functionality while improving code organization 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
17 lines
609 B
TypeScript
17 lines
609 B
TypeScript
import type { SlideLayout } from '../../types/theme.ts';
|
|
|
|
// Helper function to render template with actual content
|
|
export const renderTemplateWithContent = (layout: SlideLayout, content: Record<string, string>): string => {
|
|
let rendered = layout.htmlTemplate;
|
|
|
|
// Replace content placeholders
|
|
Object.entries(content).forEach(([slotId, value]) => {
|
|
const placeholder = new RegExp(`\\{\\{${slotId}\\}\\}`, 'g');
|
|
rendered = rendered.replace(placeholder, value || '');
|
|
});
|
|
|
|
// Clean up any remaining placeholders
|
|
rendered = rendered.replace(/\{\{[^}]+\}\}/g, '');
|
|
|
|
return rendered;
|
|
}; |