Dynamic Content Editor
Relevant source files
The following files were used as context for generating this wiki page:
The Dynamic Content Editor is a centralized administrative module designed to manage the visual and informational aspects of a wedding invitation application. It provides a real-time interface for organizers to modify event details, gallery images, gift registries, and the overall aesthetic theme without manual code changes.
This system acts as a bridge between the administrative panel and the public invitation view. Changes made within the editor are persisted via local storage and propagated throughout the application using React Context, ensuring that the InvitationPage reflects the most current information immediately upon saving.
Sources: src/pages/AdminPage.jsx:106-114, src/pages/InvitationPage.jsx:15-25
Architecture and Data Flow
The Dynamic Content Editor operates on a provider-consumer architecture. The ContentContext and ThemeContext serve as the single source of truth for all editable data.
Data Synchronization Flow
The flow begins with user input in the ContentEditor or ThemeEditor. These components invoke methods from their respective contexts to update the state. The updated state is then synchronized to localStorage and consumed by the invitation components.
The diagram above illustrates how changes in the administrative editors flow through the context providers to reach both persistence layers and the end-user invitation view.
Sources: src/context/ContentContext.jsx:48-52, src/context/ThemeContext.jsx:186-218
Content Management Modules
The ContentEditor is organized into several functional tabs, each targeting a specific section of the invitation.
Editor Sections and Functionality
| Section | Key Fields / Functionality | Component / Hook |
|---|---|---|
| Hero (Portada) | Groom/Bride names, Wedding date, Welcome message, Background image upload. | ContentEditor.jsx, useFileUpload |
| Events (Eventos) | CRUD for multiple events (Ceremony, Reception, etc.) including time, venue, and address. | ContentForm, EventForm |
| Location (Ubicación) | Interactive map coordination, venue name, address, and directions. | LocationPicker (Lazy loaded) |
| Gallery (Galería) | Bulk image uploading and image removal. | useFileUpload |
| Gifts (Regalos) | Registry message and bank account CRUD (Bank name, CLABE, Card number). | AccountForm |
Sources: src/components/admin/ContentEditor.jsx:48-56, src/components/admin/ContentEditor.jsx:178-360
Event CRUD Logic
The system handles multiple event types through a standardized form. Users can add new events or modify existing ones using the addEvent and updateEvent functions provided by the ContentContext.
This sequence shows the lifecycle of an event object from user input to persistence.
Sources: src/context/ContentContext.jsx:87-108
Theme and Visual Customization
The ThemeEditor provides deep integration with the application's styling system by mapping UI controls directly to CSS variables.
Theme Presets
The system includes predefined themes like "Classic Gold", "Romantic Pink", and "Elegant Black". Applying a preset overwrites the current theme state with a full configuration object containing colors, fonts, and animation settings.
// Example of a Theme Preset structure
romantic: {
name: 'Rosa Romántico',
primary: '#E91E63',
secondary: '#FFF0F5',
fontHeading: 'Playfair Display',
borderRadius: 'rounded',
animationIntensity: 'normal'
}
Sources: src/context/ThemeContext.jsx:19-32, src/components/admin/ThemeEditor.jsx:136-152
Style Variable Injection
The ThemeContext uses a useEffect hook to inject selected values directly into the document root as CSS variables. This ensures that Tailwind CSS classes (e.g., bg-theme-primary) update dynamically without a page reload.
Technical Implementation Details
Asset Management
The editor utilizes a custom useFileUpload hook to handle background images and gallery assets. It supports single and multiple file selection, converting files to base64 strings for storage within the content object.
- Max File Size: Typically 5MB-10MB depending on the section.
- Storage: Images are stored as
data:URIs within theweddingContentJSON object in local storage.
Sources: src/components/admin/ContentEditor.jsx:68-88, src/context/ContentContext.jsx:66-85
Form Components
The ContentEditor uses internal sub-components like EventForm and AccountForm to manage local state before committing changes to the global context. This prevents partial data from being saved during the editing process.
const EventForm = ({ event, onSave, onCancel }) => {
const [formData, setFormData] = useState(event || {
type: 'ceremony',
title: '',
time: '',
venue: '',
address: '',
description: ''
})
// ... render inputs and handle onSave(formData)
}
Sources: src/components/admin/ContentEditor.jsx:92-156
Summary
The Dynamic Content Editor is the core administrative feature of the project, enabling non-technical users to fully customize the wedding invitation. By leveraging React Context for state synchronization and CSS variables for real-time styling, it provides a seamless "What You See Is What You Get" (WYSIWYG) experience for managing event logistics, digital registries, and visual themes.