ajout de l'éditeur de texte à la description du roman

admin/story-edit.php

@@ -105,9 +105,8 @@ function generateSlug($title) {
 
             <div class="form-group">
                 <label for="description">Description</label>
-                <textarea id="description" name="description" rows="4" required><?= 
-                    htmlspecialchars($story['description'] ?? '') 
-                ?></textarea>
+                <input type="hidden" id="description" name="description" required>
+                <div id="descriptionEditor"></div>
             </div>
 
             <div class="form-group">
@@ -158,5 +157,89 @@ function generateSlug($title) {
     <script src="https://cdn.quilljs.com/1.3.6/quill.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
     <script src="../assets/js/story-edit.js"></script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            // Configuration de l'éditeur de description - identique à l'éditeur de chapitres
+            const descriptionEditor = new Quill('#descriptionEditor', {
+                theme: 'snow',
+                modules: {
+                    toolbar: {
+                        container: [
+                            [{ 'header': [1, 2, 3, false] }],
+                            ['bold', 'italic', 'underline', 'strike'],
+                            [{ 'color': [] }, { 'background': [] }],
+                            [{ 'font': [] }],
+                            [{ 'align': [] }],
+                            ['blockquote', 'code-block'],
+                            [{ 'list': 'ordered'}, { 'list': 'bullet' }],
+                            [{ 'script': 'sub'}, { 'script': 'super' }],
+                            [{ 'indent': '-1'}, { 'indent': '+1' }],
+                            [{ 'direction': 'rtl' }],
+                            ['link', 'image', 'video'],
+                            ['divider'],
+                            ['clean']
+                        ],
+                        handlers: {
+                            image: function() {
+                                const input = document.createElement('input');
+                                input.setAttribute('type', 'file');
+                                input.setAttribute('accept', 'image/*');
+                                input.click();
+
+                                input.onchange = async () => {
+                                    const file = input.files[0];
+                                    if (file) {
+                                        const formData = new FormData();
+                                        formData.append('image', file);
+                                        formData.append('storyId', storyId);
+
+                                        try {
+                                            const response = await fetch('api/upload-image.php', {
+                                                method: 'POST',
+                                                body: formData
+                                            });
+
+                                            if (!response.ok) throw new Error('Upload failed');
+
+                                            const result = await response.json();
+                                            if (result.success) {
+                                                const range = descriptionEditor.getSelection(true);
+                                                descriptionEditor.insertEmbed(range.index, 'image', result.url);
+                                                descriptionEditor.setSelection(range.index + 1);
+                                            } else {
+                                                showNotification(result.error || 'Erreur lors de l\'upload', 'error');
+                                            }
+                                        } catch (error) {
+                                            console.error('Error:', error);
+                                            showNotification('Erreur lors de l\'upload de l\'image', 'error');
+                                        }
+                                    }
+                                };
+                            }
+                        }
+                    },
+                    keyboard: {
+                        bindings: {
+                            tab: false,
+                            'indent backwards': false
+                        }
+                    }
+                },
+                placeholder: 'Commencez à écrire la description du roman...'
+            });
+
+            // Initialiser le contenu si on édite un roman existant
+            <?php if (isset($story['description'])): ?>
+            descriptionEditor.root.innerHTML = <?= json_encode($story['description']) ?>;
+            <?php endif; ?>
+
+            // Mettre à jour le champ caché avant la soumission
+            const form = document.querySelector('form');
+            form.addEventListener('submit', function() {
+                const description = document.querySelector('#description');
+                description.value = descriptionEditor.root.innerHTML;
+            });
+        });
+        </script>
 </body>
 </html>

assets/css/forms.css

@@ -72,4 +72,36 @@
     width: 100%;
     max-width: 400px;
     border: 1px solid var(--border-color);
+}
+
+/* Éditeur de la description du roman */
+#descriptionEditor {
+    height: 300px;
+    margin-bottom: var(--spacing-md);
+}
+
+#descriptionEditor .ql-container {
+    height: calc(300px - 42px);
+}
+
+#descriptionEditor .ql-toolbar.ql-snow,
+#descriptionEditor .ql-container.ql-snow {
+    border-color: var(--border-color);
+}
+
+#descriptionEditor .ql-toolbar.ql-snow {
+    background: var(--bg-secondary);
+    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
+}
+
+#descriptionEditor .ql-container.ql-snow {
+    background: var(--input-bg);
+    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
+}
+
+#descriptionEditor .ql-editor img {
+    max-width: 100% !important;
+    height: auto;
+    display: block;
+    margin: var(--spacing-md) 0;
 }