Update api/static/js/admin.js

api/static/js/admin.js

@@ -1,31 +1,24 @@
 // Admin JavaScript for the backend management interface
 
-// Global object to hold Quill instances
-let quillInstances = {};
-
 document.addEventListener('DOMContentLoaded', function() {
     // Initialize theme
     initTheme();
-
+    
     // Setup dashboard functionality
     setupDashboardCards();
-
+    
     // Setup admin forms
     setupMatiereForm();
     setupSousCategorieForm();
-    setupTexteForm(); // Basic setup (e.g., category dropdowns if needed)
-
-    // Setup content block editor specifically for edit_texte.html
-    if (document.getElementById('blocks-container')) {
-        setupContentBlockEditor();
-    }
-
-    // Setup image management (gallery interaction, maybe general upload elsewhere)
-    setupImageGallery(); // Handles selecting from the modal
-    // Note: The specific AJAX upload logic is now mainly in edit_texte.html's script block
-    // but we keep setupImageUploader for potential preview logic or other upload forms.
-    setupImageUploader(); // Sets up preview for the upload form
-
+    setupTexteForm();
+    
+    // Setup content block editor
+    setupContentBlockEditor();
+    
+    // Setup image management
+    setupImageUploader();
+    setupImageGallery();
+    
     // Setup theme toggle
     setupThemeToggle();
 });
@@ -34,6 +27,8 @@ document.addEventListener('DOMContentLoaded', function() {
 function initTheme() {
     const userPreference = localStorage.getItem('theme') || 'light';
     document.documentElement.setAttribute('data-theme', userPreference);
+    
+    // Update theme icon
     updateThemeIcon(userPreference);
 }
 
@@ -41,14 +36,22 @@ function initTheme() {
 function setupThemeToggle() {
     const themeToggle = document.getElementById('theme-toggle');
     if (!themeToggle) return;
-
+    
     themeToggle.addEventListener('click', function() {
         const currentTheme = document.documentElement.getAttribute('data-theme');
         const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+        
+        // Update theme attribute
         document.documentElement.setAttribute('data-theme', newTheme);
+        
+        // Save preference to localStorage
         localStorage.setItem('theme', newTheme);
+        
+        // Update icon
         updateThemeIcon(newTheme);
-        saveThemePreference(newTheme); // Optional: Inform server
+        
+        // Send theme preference to server
+        saveThemePreference(newTheme);
     });
 }
 
@@ -56,53 +59,46 @@ function setupThemeToggle() {
 function updateThemeIcon(theme) {
     const themeToggle = document.getElementById('theme-toggle');
     if (!themeToggle) return;
-    const icon = themeToggle.querySelector('i');
-    if (!icon) return;
-
+    
+    // Update icon based on theme
     if (theme === 'dark') {
-        icon.classList.remove('fa-moon');
-        icon.classList.add('fa-sun');
+        themeToggle.innerHTML = '<i class="fas fa-sun"></i>';
         themeToggle.setAttribute('title', 'Activer le mode clair');
     } else {
-        icon.classList.remove('fa-sun');
-        icon.classList.add('fa-moon');
+        themeToggle.innerHTML = '<i class="fas fa-moon"></i>';
         themeToggle.setAttribute('title', 'Activer le mode sombre');
     }
 }
 
-// Save theme preference to server (Optional)
+// Save theme preference to server
 function saveThemePreference(theme) {
-    // Example using fetch API - adjust URL and method as needed
-    /*
-    fetch('/set_theme_preference', { // Replace with your actual endpoint
+    const formData = new FormData();
+    formData.append('theme', theme);
+    
+    fetch('/set_theme', {
         method: 'POST',
-        headers: {
-            'Content-Type': 'application/json',
-            // Add CSRF token header if needed
-            // 'X-CSRFToken': getCsrfToken()
-        },
-        body: JSON.stringify({ theme: theme })
+        body: formData
     })
     .then(response => response.json())
     .then(data => {
-        if(data.success) console.log('Theme preference saved on server.');
-        else console.error('Failed to save theme preference on server.');
+        console.log('Theme preference saved:', data);
     })
     .catch(error => {
         console.error('Error saving theme preference:', error);
     });
-    */
 }
 
 // Setup dashboard cards with hover effects
 function setupDashboardCards() {
     const dashboardCards = document.querySelectorAll('.admin-card');
+    
     dashboardCards.forEach(card => {
         card.addEventListener('mouseenter', function() {
             this.style.transform = 'translateY(-5px)';
             this.style.boxShadow = 'var(--hover-shadow)';
-            // Keep transition consistent (defined in CSS is better)
+            this.style.transition = 'transform 0.3s ease, box-shadow 0.3s ease';
         });
+        
         card.addEventListener('mouseleave', function() {
             this.style.transform = 'translateY(0)';
             this.style.boxShadow = 'var(--shadow)';
@@ -110,714 +106,571 @@ function setupDashboardCards() {
     });
 }
 
-// Setup matiere form functionality (if on matiere page)
+// Setup matiere form functionality
 function setupMatiereForm() {
+    // Show edit form when edit button is clicked
     const editButtons = document.querySelectorAll('.edit-matiere-btn');
     editButtons.forEach(button => {
         button.addEventListener('click', function() {
             const matiereId = this.getAttribute('data-id');
             const matiereName = this.getAttribute('data-name');
             const matiereColor = this.getAttribute('data-color');
-
+            
             const editForm = document.getElementById('edit-matiere-form');
-            const addSection = document.getElementById('add-matiere-section');
-            const editSection = document.getElementById('edit-matiere-section');
-
-            if (editForm && addSection && editSection) {
-                editForm.querySelector('input[name="matiere_id"]').value = matiereId;
-                editForm.querySelector('input[name="nom"]').value = matiereName;
+            if (editForm) {
+                const idInput = editForm.querySelector('input[name="matiere_id"]');
+                const nameInput = editForm.querySelector('input[name="nom"]');
                 const colorInput = editForm.querySelector('input[name="color_code"]');
+                
+                idInput.value = matiereId;
+                nameInput.value = matiereName;
                 colorInput.value = matiereColor;
-                 // Trigger input event to update preview if color picker exists
-                 if(colorInput) colorInput.dispatchEvent(new Event('input'));
-
-
-                addSection.classList.add('d-none');
-                editSection.classList.remove('d-none');
-                editSection.scrollIntoView({ behavior: 'smooth' });
+                
+                // Show the edit form
+                document.getElementById('add-matiere-section').classList.add('d-none');
+                document.getElementById('edit-matiere-section').classList.remove('d-none');
+                
+                // Scroll to edit form
+                editForm.scrollIntoView({ behavior: 'smooth' });
             }
         });
     });
-
+    
+    // Cancel edit button
     const cancelEditButton = document.getElementById('cancel-edit-matiere');
     if (cancelEditButton) {
         cancelEditButton.addEventListener('click', function(e) {
             e.preventDefault();
-            document.getElementById('add-matiere-section')?.classList.remove('d-none');
-            document.getElementById('edit-matiere-section')?.classList.add('d-none');
+            document.getElementById('add-matiere-section').classList.remove('d-none');
+            document.getElementById('edit-matiere-section').classList.add('d-none');
         });
     }
-
-    // Color picker preview logic
+    
+    // Color picker preview
     const colorPickers = document.querySelectorAll('input[type="color"]');
     colorPickers.forEach(picker => {
-        const previewId = picker.id + '-preview'; // Assuming a convention like id="color" and preview span id="color-preview"
-        let preview = document.getElementById(previewId);
-        if (!preview) { // Create preview dynamically if not present
-             preview = document.createElement('span');
-             preview.className = 'color-preview';
-             preview.id = previewId;
-             preview.style.display = 'inline-block';
-             preview.style.width = '24px';
-             preview.style.height = '24px';
-             preview.style.borderRadius = '4px';
-             preview.style.marginLeft = '10px';
-             preview.style.verticalAlign = 'middle';
-             preview.style.border = '1px solid var(--border-color)';
-             picker.parentNode.insertBefore(preview, picker.nextSibling);
-        }
-
         picker.addEventListener('input', function() {
+            // Find adjacent preview element or create one
+            let preview = this.nextElementSibling;
+            if (!preview || !preview.classList.contains('color-preview')) {
+                preview = document.createElement('span');
+                preview.className = 'color-preview';
+                preview.style.display = 'inline-block';
+                preview.style.width = '24px';
+                preview.style.height = '24px';
+                preview.style.borderRadius = '50%';
+                preview.style.marginLeft = '10px';
+                this.parentNode.insertBefore(preview, this.nextSibling);
+            }
+            
             preview.style.backgroundColor = this.value;
         });
-        // Initialize preview color
-        preview.style.backgroundColor = picker.value;
+        
+        // Trigger once to initialize
+        const event = new Event('input');
+        picker.dispatchEvent(event);
     });
 }
 
-// Setup sous categorie form functionality (if on sous_categorie page)
+// Setup sous categorie form functionality
 function setupSousCategorieForm() {
+    // Show edit form when edit button is clicked
     const editButtons = document.querySelectorAll('.edit-sous-categorie-btn');
     editButtons.forEach(button => {
         button.addEventListener('click', function() {
             const sousCategorieId = this.getAttribute('data-id');
             const sousCategorieName = this.getAttribute('data-name');
             const matiereId = this.getAttribute('data-matiere-id');
-
+            
             const editForm = document.getElementById('edit-sous-categorie-form');
-             const addSection = document.getElementById('add-sous-categorie-section');
-            const editSection = document.getElementById('edit-sous-categorie-section');
-
-            if (editForm && addSection && editSection) {
-                editForm.querySelector('input[name="sous_categorie_id"]').value = sousCategorieId;
-                editForm.querySelector('input[name="nom"]').value = sousCategorieName;
-                editForm.querySelector('select[name="matiere_id"]').value = matiereId;
-
-                addSection.classList.add('d-none');
-                editSection.classList.remove('d-none');
-                editSection.scrollIntoView({ behavior: 'smooth' });
+            if (editForm) {
+                const idInput = editForm.querySelector('input[name="sous_categorie_id"]');
+                const nameInput = editForm.querySelector('input[name="nom"]');
+                const matiereSelect = editForm.querySelector('select[name="matiere_id"]');
+                
+                idInput.value = sousCategorieId;
+                nameInput.value = sousCategorieName;
+                matiereSelect.value = matiereId;
+                
+                // Show the edit form
+                document.getElementById('add-sous-categorie-section').classList.add('d-none');
+                document.getElementById('edit-sous-categorie-section').classList.remove('d-none');
+                
+                // Scroll to edit form
+                editForm.scrollIntoView({ behavior: 'smooth' });
             }
         });
     });
-
+    
+    // Cancel edit button
     const cancelEditButton = document.getElementById('cancel-edit-sous-categorie');
     if (cancelEditButton) {
         cancelEditButton.addEventListener('click', function(e) {
             e.preventDefault();
-            document.getElementById('add-sous-categorie-section')?.classList.remove('d-none');
-            document.getElementById('edit-sous-categorie-section')?.classList.add('d-none');
+            document.getElementById('add-sous-categorie-section').classList.remove('d-none');
+            document.getElementById('edit-sous-categorie-section').classList.add('d-none');
         });
     }
-
-    // Filter logic if present
+    
+    // Matiere select filter
     const matiereFilterSelect = document.getElementById('matiere-filter');
     if (matiereFilterSelect) {
         matiereFilterSelect.addEventListener('change', function() {
             const selectedMatiereId = this.value;
-            const tableBody = document.querySelector('.table tbody'); // Adjust selector if needed
-            if (!tableBody) return;
-            const sousCategorieRows = tableBody.querySelectorAll('tr'); // Assuming each row represents a sous-categorie
-
+            const sousCategorieRows = document.querySelectorAll('.sous-categorie-row');
+            
             sousCategorieRows.forEach(row => {
-                // Check if the row has a data attribute identifying the matiere
-                 const rowMatiereId = row.getAttribute('data-matiere-id');
-                 if (rowMatiereId) {
-                     if (selectedMatiereId === '' || rowMatiereId === selectedMatiereId) {
-                         row.style.display = ''; // Show row
-                     } else {
-                         row.style.display = 'none'; // Hide row
-                     }
-                 }
+                if (selectedMatiereId === '' || row.getAttribute('data-matiere-id') === selectedMatiereId) {
+                    row.style.display = '';
+                } else {
+                    row.style.display = 'none';
+                }
             });
         });
-         // Trigger change on load to apply initial filter if a value is pre-selected
-         matiereFilterSelect.dispatchEvent(new Event('change'));
     }
 }
 
-// Setup general texte form functionality (e.g., dynamic dropdowns if creating new text)
+// Setup texte form functionality
 function setupTexteForm() {
-    // Example: If there's a matiere dropdown that populates sous-categories on a *creation* page
-    const matiereSelect = document.getElementById('matiere-select'); // Adjust ID if different
-    const sousCategorieSelect = document.getElementById('sous-categorie-select'); // Adjust ID
-
-    if (matiereSelect && sousCategorieSelect) {
+    // Matiere select change - populate sous-categories
+    const matiereSelect = document.getElementById('matiere-select');
+    if (matiereSelect) {
         matiereSelect.addEventListener('change', function() {
             const matiereId = this.value;
-            // Clear current sous-categorie options (except the default placeholder)
-            sousCategorieSelect.innerHTML = '<option value="">Sélectionnez une sous-catégorie</option>';
-            sousCategorieSelect.disabled = true;
-
-            if (matiereId) {
+            const sousCategorieSelect = document.getElementById('sous-categorie-select');
+            
+            if (matiereId && sousCategorieSelect) {
+                // Clear current options
+                sousCategorieSelect.innerHTML = '<option value="">Sélectionnez une sous-catégorie</option>';
+                
                 // Fetch sous-categories for the selected matiere
-                fetch(`/api/get_sous_categories/${matiereId}`) // Adjust API endpoint
-                    .then(response => {
-                        if (!response.ok) {
-                            throw new Error('Network response was not ok');
-                        }
-                        return response.json();
-                    })
+                fetch(`/get_sous_categories/${matiereId}`)
+                    .then(response => response.json())
                     .then(data => {
-                         if (data && data.length > 0) {
-                             data.forEach(sc => {
-                                 const option = document.createElement('option');
-                                 option.value = sc.id;
-                                 option.textContent = sc.nom;
-                                 sousCategorieSelect.appendChild(option);
-                             });
-                             sousCategorieSelect.disabled = false;
-                         } else {
-                             // Handle case with no sous-categories
-                             const option = document.createElement('option');
-                             option.textContent = 'Aucune sous-catégorie trouvée';
-                             option.disabled = true;
-                             sousCategorieSelect.appendChild(option);
-                         }
+                        data.forEach(sousCategorie => {
+                            const option = document.createElement('option');
+                            option.value = sousCategorie.id;
+                            option.textContent = sousCategorie.nom;
+                            sousCategorieSelect.appendChild(option);
+                        });
                     })
                     .catch(error => {
                         console.error('Error loading sous-categories:', error);
-                        // Optionally display an error message to the user
-                         const option = document.createElement('option');
-                         option.textContent = 'Erreur de chargement';
-                         option.disabled = true;
-                         sousCategorieSelect.appendChild(option);
                     });
             }
         });
-        // Trigger change on load if a matiere is pre-selected
-        if(matiereSelect.value) {
-           matiereSelect.dispatchEvent(new Event('change'));
-        }
     }
 }
 
-// --- Content Block Editor Specific Functions ---
-
+// Setup content block editor
 function setupContentBlockEditor() {
     const blocksContainer = document.getElementById('blocks-container');
     const addBlockButton = document.getElementById('add-block-button');
     const saveBlocksButton = document.getElementById('save-blocks-button');
-
-    if (!blocksContainer) return; // Only run if the container exists
-
-    // Initialize SortableJS for drag-and-drop
+    
+    if (!blocksContainer) return;
+    
+    // Add new block
+    if (addBlockButton) {
+        addBlockButton.addEventListener('click', function() {
+            addContentBlock();
+        });
+    }
+    
+    // Make blocks sortable
     if (window.Sortable) {
         new Sortable(blocksContainer, {
             animation: 150,
-            handle: '.block-handle', // Class for the drag handle element
-            ghostClass: 'block-ghost', // Class applied to the ghost element
-            onEnd: function(evt) {
-                updateBlockOrder(); // Renumber blocks after drag
+            handle: '.block-handle',
+            ghostClass: 'block-ghost',
+            onEnd: function() {
+                // Update order numbers
+                updateBlockOrder();
             }
         });
-    } else {
-        console.warn('SortableJS not loaded. Drag and drop for blocks disabled.');
-    }
-
-    // Add new block button listener
-    if (addBlockButton) {
-        addBlockButton.addEventListener('click', function() {
-            addContentBlock(); // Add an empty block
-        });
     }
-
-    // Save blocks button listener
+    
+    // Save blocks
     if (saveBlocksButton) {
         saveBlocksButton.addEventListener('click', function() {
-            saveContentBlocks(); // Gather data and submit the form
+            saveContentBlocks();
         });
     }
-
-    // Setup controls and Quill for existing blocks on page load
+    
+    // Add event listeners for existing blocks
     setupExistingBlockControls();
 }
 
-// Initialize Quill Editor on a given container
-function initializeQuillEditor(container, hiddenInput, initialContent = '') {
-    if (!container || !hiddenInput) {
-        console.error("Quill initialization failed: Container or hidden input missing.");
-        return;
-    }
-
-    const blockId = container.id.replace('quill-editor-', '');
-
-    // Prevent re-initialization
-    if (quillInstances[blockId]) {
-        console.warn(`Quill instance for block ${blockId} already exists.`);
-        return quillInstances[blockId]; // Return existing instance
-    }
-
-    try {
-        const quill = new Quill(container, {
-            theme: 'snow', // Use the 'snow' theme (matches the CSS)
-            modules: {
-                toolbar: [
-                    [{ 'header': [1, 2, 3, 4, false] }],
-                    ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
-                    [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
-                    [{ 'list': 'ordered'}, { 'list': 'bullet' }],
-                    [{ 'script': 'sub'}, { 'script': 'super' }],      // superscript/subscript
-                    [{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent
-                    [{ 'direction': 'rtl' }],                         // text direction
-                    [{ 'align': [] }],
-                    ['link'], // Add link button // Removed 'image' and 'video' as they are handled per block
-                    ['blockquote', 'code-block'],
-                    ['clean']                                         // remove formatting button
-                ]
-            },
-            placeholder: 'Saisissez le contenu du bloc ici...',
+// Setup controls for existing blocks
+function setupExistingBlockControls() {
+    // Setup delete buttons
+    const deleteButtons = document.querySelectorAll('.delete-block-btn');
+    deleteButtons.forEach(button => {
+        button.addEventListener('click', function() {
+            if (confirm('Êtes-vous sûr de vouloir supprimer ce bloc ?')) {
+                const blockEditor = this.closest('.block-editor');
+                blockEditor.remove();
+                updateBlockOrder();
+            }
         });
-
-        // Set initial content if provided. Use dangerouslyPasteHTML for raw HTML.
-        if (initialContent && initialContent.trim() !== '<p><br></p>') { // Avoid pasting empty paragraph
-            quill.clipboard.dangerouslyPasteHTML(0, initialContent);
-        }
-
-        // Update hidden input whenever text changes
-        quill.on('text-change', (delta, oldDelta, source) => {
-            // Get HTML content from Quill. Handles empty case too.
-            let htmlContent = quill.root.innerHTML;
-            // Quill often leaves an empty paragraph tag (<p><br></p>) when cleared. Treat it as empty.
-            if (htmlContent === '<p><br></p>') {
-                htmlContent = '';
+    });
+    
+    // Setup image position selects
+    const positionSelects = document.querySelectorAll('.image-position-select');
+    positionSelects.forEach(select => {
+        select.addEventListener('change', function() {
+            updateBlockImagePreview(this.closest('.block-editor'));
+        });
+    });
+    
+    // Setup image selection buttons
+    const imageSelectButtons = document.querySelectorAll('.select-image-btn');
+    imageSelectButtons.forEach(button => {
+        button.addEventListener('click', function() {
+            const blockEditor = this.closest('.block-editor');
+            const galleryModal = document.getElementById('image-gallery-modal');
+            
+            if (galleryModal) {
+                // Set current block ID as data attribute for the modal
+                galleryModal.setAttribute('data-target-block', blockEditor.getAttribute('data-block-id'));
+                
+                // Show the modal
+                const modal = new bootstrap.Modal(galleryModal);
+                modal.show();
+            }
+        });
+    });
+    
+    // Setup image remove buttons
+    const removeImageButtons = document.querySelectorAll('.remove-image-btn');
+    removeImageButtons.forEach(button => {
+        button.addEventListener('click', function() {
+            const blockEditor = this.closest('.block-editor');
+            const imageIdInput = blockEditor.querySelector('.block-image-id');
+            const imagePreview = blockEditor.querySelector('.image-preview');
+            
+            if (imageIdInput) {
+                imageIdInput.value = '';
+            }
+            
+            if (imagePreview) {
+                imagePreview.src = '';
+                imagePreview.style.display = 'none';
+            }
+            
+            // Hide remove button
+            this.style.display = 'none';
+            
+            // Show select button
+            const selectButton = blockEditor.querySelector('.select-image-btn');
+            if (selectButton) {
+                selectButton.style.display = 'inline-block';
             }
-            hiddenInput.value = htmlContent;
         });
-
-        quillInstances[blockId] = quill; // Store the instance
-        console.log(`Quill initialized for block ${blockId}`);
-        return quill;
-
-    } catch (error) {
-        console.error(`Error initializing Quill for block ${blockId}:`, error);
-        container.innerHTML = `<div class="alert alert-danger">Erreur d'initialisation de l'éditeur pour ce bloc. Contenu brut :</div><textarea class="form-control" rows="3" disabled>${initialContent}</textarea>`;
-        // Still update the hidden input with the original content for safety
-        hiddenInput.value = initialContent;
-        return null;
-    }
-}
-
-
-// Setup controls for existing blocks on page load
-function setupExistingBlockControls() {
-    const blockEditors = document.querySelectorAll('#blocks-container .block-editor');
-
-    blockEditors.forEach((blockEditor, index) => {
-        const blockId = blockEditor.getAttribute('data-block-id');
-        if (!blockId) {
-            console.error("Block editor found without data-block-id attribute.", blockEditor);
-            return; // Skip this block
-        }
-
-        // Initialize Quill for this block
-        const editorContainer = blockEditor.querySelector(`#quill-editor-${blockId}`);
-        const hiddenInput = blockEditor.querySelector(`#block-${blockId}-content`);
-        if (editorContainer && hiddenInput) {
-            initializeQuillEditor(editorContainer, hiddenInput, hiddenInput.value); // Pass initial content from hidden input
-        } else {
-             console.error(`Could not find editor container or hidden input for block ${blockId}`);
-        }
-
-        // Setup Delete Button
-        const deleteButton = blockEditor.querySelector('.delete-block-btn');
-        if (deleteButton) {
-            deleteButton.addEventListener('click', function() {
-                if (confirm('Êtes-vous sûr de vouloir supprimer ce bloc ? Cette action est irréversible.')) {
-                    // Clean up Quill instance before removing the element
-                    if (quillInstances[blockId]) {
-                        delete quillInstances[blockId]; // Remove reference
-                        console.log(`Quill instance for block ${blockId} cleaned up.`);
-                    }
-                    blockEditor.remove();
-                    updateBlockOrder(); // Renumber remaining blocks
-                }
-            });
-        } else {
-             console.warn(`Delete button not found for block ${blockId}`);
-        }
-
-        // Setup Image Selection Button
-        const selectButton = blockEditor.querySelector('.select-image-btn');
-        if (selectButton) {
-            selectButton.addEventListener('click', function() {
-                const galleryModalElement = document.getElementById('image-gallery-modal');
-                if (galleryModalElement) {
-                    // Store the target block ID on the modal before showing
-                    galleryModalElement.setAttribute('data-target-block', blockId);
-                    // Use Bootstrap's JS to show the modal
-                    const galleryModal = bootstrap.Modal.getOrCreateInstance(galleryModalElement);
-                    galleryModal.show();
-                } else {
-                    alert("Erreur : La galerie d'images n'a pas pu être trouvée.");
-                }
-            });
-        } else {
-             console.warn(`Select image button not found for block ${blockId}`);
-        }
-
-        // Setup Image Removal Button
-        const removeButton = blockEditor.querySelector('.remove-image-btn');
-        if (removeButton) {
-            removeButton.addEventListener('click', function() {
-                const imageIdInput = blockEditor.querySelector('.block-image-id');
-                const imagePreview = blockEditor.querySelector('.image-preview');
-
-                if (imageIdInput) imageIdInput.value = ''; // Clear the hidden ID
-                if (imagePreview) {
-                    imagePreview.src = '';
-                    imagePreview.style.display = 'none'; // Hide preview
-                    imagePreview.alt = 'Preview';
-                }
-
-                // Toggle button visibility
-                this.style.display = 'none'; // Hide remove button
-                const selectBtn = blockEditor.querySelector('.select-image-btn');
-                if(selectBtn) selectBtn.style.display = 'inline-block'; // Show select button
-
-                // Hide position controls (handled by specific function in edit_texte.html)
-                const event = new CustomEvent('imageRemoved', { bubbles: true, detail: { blockEditor: blockEditor } });
-                 blockEditor.dispatchEvent(event);
-            });
-        } else {
-            console.warn(`Remove image button not found for block ${blockId}`);
-        }
-
-         // Setup Image Position Select (if needed, though primary logic might be in HTML script)
-        const positionSelect = blockEditor.querySelector('.image-position-select');
-         if (positionSelect) {
-             positionSelect.addEventListener('change', function() {
-                 // Optional: Add JS logic here if needed, e.g., apply preview classes
-                 console.log(`Block ${blockId} image position changed to: ${this.value}`);
-             });
-         }
     });
-
-     updateBlockOrder(); // Ensure initial numbering is correct
 }
 
-
 // Add a new content block to the editor
 function addContentBlock(data = null) {
     const blocksContainer = document.getElementById('blocks-container');
     if (!blocksContainer) return;
-
-    const blockCount = blocksContainer.children.length;
-    const newBlockIndex = blockCount + 1;
-    const blockId = 'new-block-' + Date.now(); // Unique ID for new blocks
-
-    // Default values if data is not provided
-    const initialData = {
-        id: blockId, // Use the generated temporary ID
-        title: data?.title || '',
-        content: data?.content || '', // Default empty content for Quill
-        image: data?.image || null, // { id: ..., src: ..., alt: ... }
-        image_position: data?.image_position || 'left'
-    };
-
-    // Create block HTML using template literals
+    
+    // Generate a unique ID for the block
+    const blockId = 'block-' + Date.now();
+    
+    // Create block HTML
     const blockHtml = `
-        <div class="block-editor mb-4" data-block-id="${initialData.id}">
+        <div class="block-editor" data-block-id="${blockId}">
             <div class="block-editor-header">
                 <div class="d-flex align-items-center">
                     <span class="block-handle"><i class="fas fa-grip-vertical"></i></span>
-                    <h3 class="block-editor-title">Bloc #${newBlockIndex}</h3>
+                    <h3 class="block-editor-title">Bloc #${blocksContainer.children.length + 1}</h3>
                 </div>
                 <div class="block-editor-actions">
-                    <button type="button" class="btn btn-danger btn-sm delete-block-btn" title="Supprimer ce bloc">
+                    <button type="button" class="btn btn-danger btn-sm delete-block-btn">
                         <i class="fas fa-trash"></i>
                     </button>
                 </div>
             </div>
-            <div class="form-group mb-3">
-                <label for="block-${initialData.id}-title">Titre du bloc (optionnel)</label>
-                <input type="text" class="form-control block-title" id="block-${initialData.id}-title" value="${initialData.title}">
+            <div class="form-group">
+                <label for="${blockId}-title">Titre du bloc (optionnel)</label>
+                <input type="text" class="form-control block-title" id="${blockId}-title" value="${data?.title || ''}">
             </div>
-            <div class="form-group mb-3">
-                <label for="quill-editor-${initialData.id}">Contenu du bloc</label>
-                <!-- Quill editor container -->
-                <div id="quill-editor-${initialData.id}" class="block-content-editor"></div>
-                <!-- Hidden input to store Quill's HTML content -->
-                <input type="hidden" class="block-content-hidden" id="block-${initialData.id}-content" value="${initialData.content}">
+            <div class="form-group">
+                <label for="${blockId}-content">Contenu du bloc</label>
+                <textarea class="form-control block-content" id="${blockId}-content" rows="5">${data?.content || ''}</textarea>
             </div>
             <div class="form-group">
-                <label>Image (optionnel)</label>
+                <label>Image</label>
                 <div class="d-flex align-items-center mb-2">
-                    <button type="button" class="btn btn-primary btn-sm select-image-btn" style="${initialData.image ? 'display:none;' : ''}">
+                    <button type="button" class="btn btn-primary btn-sm select-image-btn" style="${data?.image ? 'display:none;' : ''}">
                         <i class="fas fa-image"></i> Sélectionner une image
                     </button>
-                    <button type="button" class="btn btn-warning btn-sm remove-image-btn ml-2" style="${initialData.image ? '' : 'display:none;'}">
+                    <button type="button" class="btn btn-warning btn-sm remove-image-btn ml-2" style="${data?.image ? '' : 'display:none;'}">
                         <i class="fas fa-times"></i> Retirer l'image
                     </button>
                 </div>
-                <input type="hidden" class="block-image-id" value="${initialData.image?.id || ''}">
-
-                <div class="block-image-container">
-                    <img src="${initialData.image?.src || ''}" alt="${initialData.image?.alt || 'Prévisualisation'}" class="image-preview" style="${initialData.image ? '' : 'display:none;'}">
-                </div>
-
-                <div class="form-group mt-3 image-position-controls ${initialData.image ? '' : 'd-none'}">
-                    <label for="block-${initialData.id}-image-position">Position de l'image</label>
-                    <select class="form-control image-position-select" id="block-${initialData.id}-image-position">
-                        <option value="left" ${initialData.image_position === 'left' ? 'selected' : ''}>Gauche</option>
-                        <option value="right" ${initialData.image_position === 'right' ? 'selected' : ''}>Droite</option>
-                        <option value="top" ${initialData.image_position === 'top' ? 'selected' : ''}>Haut</option>
+                <input type="hidden" class="block-image-id" value="${data?.image?.id || ''}">
+                <img src="${data?.image?.src || ''}" alt="Preview" class="image-preview mb-2" style="${data?.image ? '' : 'display:none;'}">
+                <div class="form-group">
+                    <label for="${blockId}-image-position">Position de l'image</label>
+                    <select class="form-control image-position-select" id="${blockId}-image-position">
+                        <option value="left" ${data?.image_position === 'left' ? 'selected' : ''}>Gauche</option>
+                        <option value="right" ${data?.image_position === 'right' ? 'selected' : ''}>Droite</option>
+                        <option value="top" ${data?.image_position === 'top' ? 'selected' : ''}>Haut</option>
                     </select>
                 </div>
             </div>
         </div>
     `;
-
-    // Add the block HTML to the container
+    
+    // Add the block to the container
     blocksContainer.insertAdjacentHTML('beforeend', blockHtml);
-
-    // Get the newly added block element
-    const newBlockElement = blocksContainer.lastElementChild;
-
-    // Initialize Quill for the new block
-    const editorContainer = newBlockElement.querySelector(`#quill-editor-${initialData.id}`);
-    const hiddenInput = newBlockElement.querySelector(`#block-${initialData.id}-content`);
-    if(editorContainer && hiddenInput) {
-       initializeQuillEditor(editorContainer, hiddenInput, initialData.content);
-    } else {
-         console.error(`Failed to find editor elements for new block ${initialData.id}`);
-    }
-
-
-    // Add event listeners for the new block's controls (delete, select image, remove image)
-    // Delegate event listeners might be more efficient, but direct binding is simpler here
-
+    
+    // Setup event listeners for the new block
+    const newBlock = blocksContainer.lastElementChild;
+    
     // Delete button
-    const deleteButton = newBlockElement.querySelector('.delete-block-btn');
+    const deleteButton = newBlock.querySelector('.delete-block-btn');
     if (deleteButton) {
         deleteButton.addEventListener('click', function() {
-             if (confirm('Êtes-vous sûr de vouloir supprimer ce bloc ?')) {
-                 // Clean up Quill instance
-                 if (quillInstances[initialData.id]) {
-                     delete quillInstances[initialData.id];
-                     console.log(`Quill instance for block ${initialData.id} cleaned up.`);
-                 }
-                 newBlockElement.remove();
-                 updateBlockOrder();
-             }
+            if (confirm('Êtes-vous sûr de vouloir supprimer ce bloc ?')) {
+                newBlock.remove();
+                updateBlockOrder();
+            }
         });
     }
-
-    // Select image button
-    const selectButton = newBlockElement.querySelector('.select-image-btn');
-    if (selectButton) {
-        selectButton.addEventListener('click', function() {
-             const galleryModalElement = document.getElementById('image-gallery-modal');
-             if (galleryModalElement) {
-                 galleryModalElement.setAttribute('data-target-block', initialData.id);
-                 const galleryModal = bootstrap.Modal.getOrCreateInstance(galleryModalElement);
-                 galleryModal.show();
-             } else {
-                  alert("Erreur : La galerie d'images n'a pas pu être trouvée.");
-             }
+    
+    // Image position select
+    const positionSelect = newBlock.querySelector('.image-position-select');
+    if (positionSelect) {
+        positionSelect.addEventListener('change', function() {
+            updateBlockImagePreview(newBlock);
         });
     }
-
-    // Remove image button
-    const removeButton = newBlockElement.querySelector('.remove-image-btn');
-     if (removeButton) {
-         removeButton.addEventListener('click', function() {
-             const imageIdInput = newBlockElement.querySelector('.block-image-id');
-             const imagePreview = newBlockElement.querySelector('.image-preview');
-
-             if (imageIdInput) imageIdInput.value = '';
-             if (imagePreview) {
-                 imagePreview.src = '';
-                 imagePreview.style.display = 'none';
-                 imagePreview.alt = 'Preview';
-             }
-
-             this.style.display = 'none'; // Hide remove button
-             const selectBtn = newBlockElement.querySelector('.select-image-btn');
-             if (selectBtn) selectBtn.style.display = 'inline-block'; // Show select button
-
-             // Hide position controls
-              const event = new CustomEvent('imageRemoved', { bubbles: true, detail: { blockEditor: newBlockElement } });
-              newBlockElement.dispatchEvent(event);
-         });
-     }
-
-
+    
+    // Image selection button
+    const imageSelectButton = newBlock.querySelector('.select-image-btn');
+    if (imageSelectButton) {
+        imageSelectButton.addEventListener('click', function() {
+            const galleryModal = document.getElementById('image-gallery-modal');
+            
+            if (galleryModal) {
+                // Set current block ID as data attribute for the modal
+                galleryModal.setAttribute('data-target-block', blockId);
+                
+                // Show the modal
+                const modal = new bootstrap.Modal(galleryModal);
+                modal.show();
+            }
+        });
+    }
+    
+    // Image remove button
+    const removeImageButton = newBlock.querySelector('.remove-image-btn');
+    if (removeImageButton) {
+        removeImageButton.addEventListener('click', function() {
+            const imageIdInput = newBlock.querySelector('.block-image-id');
+            const imagePreview = newBlock.querySelector('.image-preview');
+            
+            if (imageIdInput) {
+                imageIdInput.value = '';
+            }
+            
+            if (imagePreview) {
+                imagePreview.src = '';
+                imagePreview.style.display = 'none';
+            }
+            
+            // Hide remove button
+            removeImageButton.style.display = 'none';
+            
+            // Show select button
+            if (imageSelectButton) {
+                imageSelectButton.style.display = 'inline-block';
+            }
+        });
+    }
+    
     // Scroll to the new block
-    newBlockElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    newBlock.scrollIntoView({ behavior: 'smooth' });
 }
 
-
-// Update block order numbers in the UI titles
+// Update block order numbers in the UI
 function updateBlockOrder() {
-    const blocks = document.querySelectorAll('#blocks-container .block-editor');
+    const blocks = document.querySelectorAll('.block-editor');
     blocks.forEach((block, index) => {
         const titleEl = block.querySelector('.block-editor-title');
         if (titleEl) {
             titleEl.textContent = `Bloc #${index + 1}`;
         }
     });
-    console.log("Block order updated.");
 }
 
-// Save content blocks by gathering data and submitting the form
+// Update image preview based on position
+function updateBlockImagePreview(blockEditor) {
+    // This function would apply CSS classes to show how the image position 
+    // will look in the frontend
+    const positionSelect = blockEditor.querySelector('.image-position-select');
+    const imagePreview = blockEditor.querySelector('.image-preview');
+    
+    if (!positionSelect || !imagePreview || imagePreview.style.display === 'none') {
+        return;
+    }
+    
+    const position = positionSelect.value;
+    
+    // Remove existing position classes
+    imagePreview.classList.remove('position-left', 'position-right', 'position-top');
+    
+    // Add the selected position class
+    imagePreview.classList.add(`position-${position}`);
+    
+    // Apply some simple styling to demonstrate the position
+    switch (position) {
+        case 'left':
+            imagePreview.style.float = 'left';
+            imagePreview.style.marginRight = '15px';
+            imagePreview.style.marginBottom = '10px';
+            imagePreview.style.width = '30%';
+            break;
+        case 'right':
+            imagePreview.style.float = 'right';
+            imagePreview.style.marginLeft = '15px';
+            imagePreview.style.marginBottom = '10px';
+            imagePreview.style.width = '30%';
+            break;
+        case 'top':
+            imagePreview.style.float = 'none';
+            imagePreview.style.marginRight = '0';
+            imagePreview.style.marginLeft = '0';
+            imagePreview.style.marginBottom = '15px';
+            imagePreview.style.width = '100%';
+            break;
+    }
+}
+
+// Save content blocks
 function saveContentBlocks() {
     const blocksContainer = document.getElementById('blocks-container');
     const blocksDataInput = document.getElementById('blocks-data');
-    const blocksForm = document.getElementById('blocks-form');
-
-    if (!blocksContainer || !blocksDataInput || !blocksForm) {
-         console.error("Cannot save blocks: Missing container, data input, or form element.");
-         alert("Erreur : Impossible de sauvegarder les blocs. Éléments de formulaire manquants.");
-         return;
-    }
-
-    const blockElements = blocksContainer.querySelectorAll('.block-editor');
+    
+    if (!blocksContainer || !blocksDataInput) return;
+    
+    const blocks = blocksContainer.querySelectorAll('.block-editor');
     const blocksData = [];
-
-    console.log(`Gathering data for ${blockElements.length} blocks...`);
-
-    blockElements.forEach((blockElement, index) => {
-        const blockId = blockElement.getAttribute('data-block-id');
-        const titleInput = blockElement.querySelector('.block-title');
-        const hiddenContentInput = blockElement.querySelector('.block-content-hidden');
-        const imageIdInput = blockElement.querySelector('.block-image-id');
-        const imagePositionSelect = blockElement.querySelector('.image-position-select');
-
-        let content = '';
-        // Crucially, get the latest content from Quill instance if available
-        if (quillInstances[blockId]) {
-            content = quillInstances[blockId].root.innerHTML;
-             // Treat empty Quill editor as empty string
-             if (content === '<p><br></p>') {
-                content = '';
-             }
-             // Ensure hidden input is also synced before submission (belt and suspenders)
-             if (hiddenContentInput) hiddenContentInput.value = content;
-        } else if (hiddenContentInput) {
-            // Fallback to hidden input if Quill instance is missing (error condition)
-            content = hiddenContentInput.value;
-             console.warn(`Quill instance missing for block ${blockId}. Using hidden input value.`);
-        } else {
-             console.error(`Cannot get content for block ${blockId}: No Quill instance and no hidden input.`);
-        }
-
-        const blockDataItem = {
-            // Include the original block ID if it's not a new one,
-            // otherwise, the backend should know how to handle blocks without a numeric ID
-            id: blockId.startsWith('new-block-') ? null : blockId,
-            temp_id: blockId.startsWith('new-block-') ? blockId : null, // Send temp ID for new blocks if needed
-            title: titleInput ? titleInput.value.trim() : '',
+    
+    blocks.forEach((block, index) => {
+        const blockId = block.getAttribute('data-block-id');
+        const title = block.querySelector('.block-title').value;
+        const content = block.querySelector('.block-content').value;
+        const imageId = block.querySelector('.block-image-id').value;
+        const imagePosition = block.querySelector('.image-position-select').value;
+        
+        blocksData.push({
+            id: blockId,
+            title: title,
             content: content,
-            image_id: imageIdInput ? (imageIdInput.value || null) : null, // Send null if empty
-            image_position: imagePositionSelect ? imagePositionSelect.value : 'left',
-            order: index // Set the order based on current position
-        };
-        blocksData.push(blockDataItem);
+            image_id: imageId,
+            image_position: imagePosition,
+            order: index
+        });
     });
-
-    // Set the JSON data in the hidden input field
+    
+    // Set the blocks data as JSON in the hidden input
     blocksDataInput.value = JSON.stringify(blocksData);
-
-    console.log("Blocks data prepared:", blocksDataInput.value);
-
+    
     // Submit the form
-    // Add loading indicator?
-    const saveButton = document.getElementById('save-blocks-button');
-    if(saveButton) {
-       saveButton.disabled = true;
-       saveButton.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Sauvegarde...';
+    const form = document.getElementById('blocks-form');
+    if (form) {
+        form.submit();
     }
-
-    blocksForm.submit();
 }
 
-// --- Image Management Functions ---
-
-// Setup image uploader preview (for the form in edit_texte.html)
+// Setup image uploader
 function setupImageUploader() {
-    const imageFileInput = document.getElementById('image-file'); // ID from edit_texte.html form
-    const imagePreview = document.getElementById('upload-image-preview'); // ID from edit_texte.html form
-
+    const imageUploadForm = document.getElementById('image-upload-form');
+    const imageFileInput = document.getElementById('image-file');
+    const imagePreview = document.getElementById('upload-image-preview');
+    
     if (imageFileInput && imagePreview) {
         imageFileInput.addEventListener('change', function() {
             if (this.files && this.files[0]) {
                 const reader = new FileReader();
+                
                 reader.onload = function(e) {
                     imagePreview.src = e.target.result;
-                    imagePreview.style.display = 'block'; // Show preview
+                    imagePreview.style.display = 'block';
                 };
+                
                 reader.readAsDataURL(this.files[0]);
-            } else {
-                 // Clear preview if no file selected
-                 imagePreview.src = '#';
-                 imagePreview.style.display = 'none';
+            }
+        });
+    }
+    
+    if (imageUploadForm) {
+        imageUploadForm.addEventListener('submit', function(e) {
+            const fileInput = this.querySelector('#image-file');
+            
+            if (!fileInput.files || fileInput.files.length === 0) {
+                e.preventDefault();
+                alert('Veuillez sélectionner une image.');
             }
         });
     }
 }
 
-// Setup image gallery modal interaction
+// Setup image gallery
 function setupImageGallery() {
-    const galleryModalElement = document.getElementById('image-gallery-modal');
-    if (!galleryModalElement) return;
-
-    const galleryContent = galleryModalElement.querySelector('#image-gallery-content'); // Container for images
-
-    // Use event delegation on the modal body for image clicks
-    galleryModalElement.addEventListener('click', function(event) {
-        const galleryItem = event.target.closest('.gallery-item');
-        if (!galleryItem) return; // Clicked outside an item
-
-        const imageId = galleryItem.getAttribute('data-image-id');
-        const imageElement = galleryItem.querySelector('img');
-        const imageSrc = imageElement ? imageElement.src : '';
-        const imageAlt = imageElement ? imageElement.alt : '';
-
-        // Get the ID of the block that opened the modal
-        const targetBlockId = galleryModalElement.getAttribute('data-target-block');
-
-        if (!targetBlockId) {
-            console.error("Target block ID not found on modal.");
-            return;
-        }
-
-        // Find the target block editor element
-        const blockEditor = document.querySelector(`.block-editor[data-block-id="${targetBlockId}"]`);
-
-        if (blockEditor && imageId && imageSrc) {
-            // Update the block's image ID input
-            const imageIdInput = blockEditor.querySelector('.block-image-id');
-            if (imageIdInput) imageIdInput.value = imageId;
-
-            // Update the block's image preview
-            const imagePreview = blockEditor.querySelector('.image-preview');
-            if (imagePreview) {
-                imagePreview.src = imageSrc;
-                imagePreview.alt = imageAlt || 'Prévisualisation';
-                imagePreview.style.display = 'block'; // Ensure preview is visible
-            }
-
-            // Toggle visibility of select/remove buttons
-            const selectButton = blockEditor.querySelector('.select-image-btn');
-            const removeButton = blockEditor.querySelector('.remove-image-btn');
-            if (selectButton) selectButton.style.display = 'none';
-            if (removeButton) removeButton.style.display = 'inline-block';
-
-            // Show position controls (handled by specific function in edit_texte.html)
-             const customEvent = new CustomEvent('imageSelected', { bubbles: true, detail: { blockEditor: blockEditor } });
-             blockEditor.dispatchEvent(customEvent);
-
-
-            // Close the modal
-            const galleryModalInstance = bootstrap.Modal.getInstance(galleryModalElement);
-            if (galleryModalInstance) {
-                galleryModalInstance.hide();
+    // Handle image selection from gallery
+    const galleryItems = document.querySelectorAll('.gallery-item');
+    
+    galleryItems.forEach(item => {
+        item.addEventListener('click', function() {
+            const imageId = this.getAttribute('data-image-id');
+            const imageSrc = this.querySelector('img').src;
+            const galleryModal = document.getElementById('image-gallery-modal');
+            
+            if (galleryModal) {
+                const targetBlockId = galleryModal.getAttribute('data-target-block');
+                const blockEditor = document.querySelector(`.block-editor[data-block-id="${targetBlockId}"]`);
+                
+                if (blockEditor) {
+                    // Update the image ID input
+                    const imageIdInput = blockEditor.querySelector('.block-image-id');
+                    if (imageIdInput) {
+                        imageIdInput.value = imageId;
+                    }
+                    
+                    // Update the image preview
+                    const imagePreview = blockEditor.querySelector('.image-preview');
+                    if (imagePreview) {
+                        imagePreview.src = imageSrc;
+                        imagePreview.style.display = 'block';
+                    }
+                    
+                    // Hide select button and show remove button
+                    const selectButton = blockEditor.querySelector('.select-image-btn');
+                    const removeButton = blockEditor.querySelector('.remove-image-btn');
+                    
+                    if (selectButton) {
+                        selectButton.style.display = 'none';
+                    }
+                    
+                    if (removeButton) {
+                        removeButton.style.display = 'inline-block';
+                    }
+                    
+                    // Update image preview position
+                    updateBlockImagePreview(blockEditor);
+                }
+                
+                // Close the modal
+                const modal = bootstrap.Modal.getInstance(galleryModal);
+                if (modal) {
+                    modal.hide();
+                }
             }
-        } else {
-             console.error(`Failed to update block ${targetBlockId}. Block editor or image data missing.`);
-        }
+        });
     });
-
-    // Optional: Add logic here to dynamically load gallery images via AJAX if needed
-    // E.g., on modal 'show.bs.modal' event
-}
+}