fin

templates/admin_edit_article.html

@@ -6,14 +6,14 @@
 <link rel="stylesheet" type="text/css" href="https://unpkg.com/trix@2.0.8/dist/trix.css">
 <style>
     /* Admin Editor Styles */
-    .admin-editor {
-        max-width: 1000px;
-        margin: 0 auto;
-        padding: var(--spacing-lg);
-        background: var(--bg-card);
-        border-radius: var(--card-radius);
-        box-shadow: var(--shadow-md);
-    }
+    .admin-editor {
+        max-width: 1000px;
+        margin: 0 auto;
+        padding: var(--spacing-lg);
+        background: var(--bg-card);
+        border-radius: 8px;
+        box-shadow: var(--shadow-md);
+    }
 
     .editor-header {
         display: flex;
@@ -45,15 +45,15 @@
         font-weight: 500;
     }
 
-    .form-control {
-        width: 100%;
-        padding: 0.75rem 1rem;
-        border: 1px solid var(--border-color);
-        border-radius: var(--btn-radius);
-        background: var(--bg);
-        color: var(--text);
-        transition: all var(--transition-fast);
-    }
+    .form-control {
+        width: 100%;
+        padding: 0.75rem 1rem;
+        border: 1px solid var(--border-color);
+        border-radius: 8px;
+        background: var(--bg);
+        color: var(--text);
+        transition: all var(--transition-fast);
+    }
 
     .form-control:focus {
         outline: none;
@@ -61,15 +61,15 @@
         box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
     }
 
-    trix-editor {
-        min-height: 300px;
-        border: 1px solid var(--border-color);
-        border-radius: var(--btn-radius);
-        background: var(--bg);
-        color: var(--text);
-        padding: var(--spacing-md);
-        margin-bottom: var(--spacing-lg);
-    }
+    trix-editor {
+        min-height: 300px;
+        border: 1px solid var(--border-color);
+        border-radius: 8px;
+        background: var(--bg);
+        color: var(--text);
+        padding: var(--spacing-md);
+        margin-bottom: var(--spacing-lg);
+    }
 
     trix-editor:focus {
         outline: none;
@@ -77,12 +77,12 @@
         box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
     }
 
-    .preview-section {
-        margin-top: var(--spacing-xl);
-        padding: var(--spacing-lg);
-        background: var(--bg-alt);
-        border-radius: var(--card-radius);
-    }
+    .preview-section {
+        margin-top: var(--spacing-xl);
+        padding: var(--spacing-lg);
+        background: var(--bg-alt);
+        border-radius: 8px;
+    }
 
     .preview-header {
         margin-bottom: var(--spacing-md);
@@ -90,12 +90,12 @@
         border-bottom: 1px solid var(--border-color);
     }
 
-    .preview-content {
-        background: var(--bg);
-        padding: var(--spacing-lg);
-        border-radius: var(--card-radius);
-        box-shadow: var(--shadow-sm);
-    }
+    .preview-content {
+        background: var(--bg);
+        padding: var(--spacing-lg);
+        border-radius: 8px;
+        box-shadow: var(--shadow-sm);
+    }
 
     /* Custom file input */
     .file-input-wrapper {
@@ -112,15 +112,15 @@
         cursor: pointer;
     }
 
-    .file-input-trigger {
-        display: block;
-        padding: 0.75rem 1rem;
-        border: 2px dashed var(--border-color);
-        border-radius: var(--btn-radius);
-        text-align: center;
-        color: var(--text-light);
-        transition: all var(--transition-fast);
-    }
+    .file-input-trigger {
+        display: block;
+        padding: 0.75rem 1rem;
+        border: 2px dashed var(--border-color);
+        border-radius: 8px;
+        text-align: center;
+        color: var(--text-light);
+        transition: all var(--transition-fast);
+    }
 
     .file-input-wrapper:hover .file-input-trigger {
         border-color: var(--primary-1);
@@ -213,10 +213,11 @@
                         <button type="button" class="trix-button" data-trix-action="x-quote" title="Citation">"</button>
                         <button type="button" class="trix-button trix-button--icon trix-button--icon-link" data-trix-attribute="href" title="Lien">Lien</button>
                     </span>
-                    <span class="trix-button-group">
-                        <button type="button" class="trix-button" data-trix-action="x-align-left" title="Aligner à gauche">←</button>
-                        <button type="button" class="trix-button" data-trix-action="x-align-right" title="Aligner à droite">→</button>
-                    </span>
+                    <span class="trix-button-group">
+                        <button type="button" class="trix-button" data-trix-attribute="textAlign" data-trix-value="left" title="Aligner à gauche">←</button>
+                        <button type="button" class="trix-button" data-trix-attribute="textAlign" data-trix-value="center" title="Centrer">⫸</button>
+                        <button type="button" class="trix-button" data-trix-attribute="textAlign" data-trix-value="right" title="Aligner à droite">→</button>
+                    </span>
                 </div>`;
         };
     });
@@ -378,23 +379,7 @@
         };
     });
 
-    // Handle image alignment
-    document.addEventListener('trix-action-invoke', function(event) {
-        var action = event.actionName || event.detail && event.detail.actionName;
-        if (action === 'x-align-left' || action === 'x-align-right') {
-            var target = event.target || event.detail && event.detail.target;
-            if (!target) return;
-            var editor = target.editor;
-            var selectedRange = editor.getSelectedRange();
-            var doc = editor.getDocument();
-            var attachments = doc.getAttachments();
-            attachments.forEach(function(att) {
-                var range = att.getRange();
-                if (selectedRange[0] <= range[0] && range[1] <= selectedRange[1])
-                    att.setAttribute('class', action === 'x-align-left' ? 'float-left' : 'float-right');
-            });
-        }
-    });
+
 
     // Live preview updates
     function updatePreview() {

templates/admin_new_article.html

@@ -66,16 +66,21 @@
         Trix.config.toolbar.getDefaultHTML = function(){
             return `
                 <div class="trix-button-row">
-                  <span class="trix-button-group trix-button-group--text-tools" data-trix-button-group="text-tools">
-                    <button type="button" class="trix-button trix-button--icon trix-button--icon-bold" data-trix-attribute="bold" title="Gras">Gras</button>
-                    <button type="button" class="trix-button trix-button--icon trix-button--icon-italic" data-trix-attribute="italic" title="Italique">Italique</button>
-                    <button type="button" class="trix-button" data-trix-action="x-heading" title="Titre">H</button>
-                    <button type="button" class="trix-button" data-trix-action="x-quote" title="Citation">"</button>
-                  </span>
-                  <span class="trix-button-group trix-button-group--history-tools" data-trix-button-group="history-tools">
-                    <button type="button" class="trix-button" data-trix-action="undo" title="Annuler">⟲</button>
-                    <button type="button" class="trix-button" data-trix-action="redo" title="Refaire">⟲</button>
-                  </span>
+                  <span class="trix-button-group trix-button-group--text-tools" data-trix-button-group="text-tools">
+                    <button type="button" class="trix-button trix-button--icon trix-button--icon-bold" data-trix-attribute="bold" title="Gras">Gras</button>
+                    <button type="button" class="trix-button trix-button--icon trix-button--icon-italic" data-trix-attribute="italic" title="Italique">Italique</button>
+                    <button type="button" class="trix-button" data-trix-action="x-heading" title="Titre">H</button>
+                    <button type="button" class="trix-button" data-trix-action="x-quote" title="Citation">"</button>
+                  </span>
+                  <span class="trix-button-group">
+                    <button type="button" class="trix-button" data-trix-attribute="textAlign" data-trix-value="left" title="Aligner à gauche">←</button>
+                    <button type="button" class="trix-button" data-trix-attribute="textAlign" data-trix-value="center" title="Centrer">⫸</button>
+                    <button type="button" class="trix-button" data-trix-attribute="textAlign" data-trix-value="right" title="Aligner à droite">→</button>
+                  </span>
+                  <span class="trix-button-group trix-button-group--history-tools" data-trix-button-group="history-tools">
+                    <button type="button" class="trix-button" data-trix-action="undo" title="Annuler">⟲</button>
+                    <button type="button" class="trix-button" data-trix-action="redo" title="Refaire">⟲</button>
+                  </span>
                 </div>`;
         };
     });
@@ -164,19 +169,7 @@
         reader.readAsDataURL(file);
     });
 
-    // alignment helper via custom action hooks
-    document.addEventListener('trix-action-invoke', function(event){
-        var action = event.actionName || event.detail && event.detail.actionName;
-        // some Trix builds use different event payloads; we handle common case above
-        if(action === 'x-align-left' || action === 'x-align-right'){
-            var target = event.target || event.detail && event.detail.target; if(!target) return;
-            var editor = target.editor;
-            var selectedRange = editor.getSelectedRange();
-            var doc = editor.getDocument();
-            var attachments = doc.getAttachments();
-            attachments.forEach(function(att){ var range = att.getRange(); if(selectedRange[0] <= range[0] && range[1] <= selectedRange[1]){ att.setAttribute('class', action === 'x-align-left' ? 'float-left' : 'float-right'); }});
-        }
-    });
+
 
     // Live preview update
     document.addEventListener('trix-change', function(){