Added Tabs to edit page

twig/javascript/ace.html.twig

@@ -0,0 +1,40 @@
+<!-- Ace Editor -->
+<script>
+// Ace Editor Init (cleaned: removed duplicate setUseWorker, added null checks)
+document.addEventListener('DOMContentLoaded', function() {
+    const bodyTextarea = document.getElementById('body');
+    const bodyEditorEl = document.getElementById('body-editor');
+   
+    if (bodyTextarea && bodyEditorEl && typeof ace !== 'undefined') {  // Check ace loaded
+        try {
+            const editor = ace.edit(bodyEditorEl);
+            editor.session.setValue(bodyTextarea.value || ''); // Load initial HTML
+            editor.session.setMode('ace/mode/html'); // HTML syntax highlighting
+            editor.setTheme('ace/theme/tomorrow_night'); // Dark theme (black bg, green accents)
+            editor.setOptions({
+                fontSize: 14,
+                showPrintMargin: false,
+                wrap: true, // Line wrapping
+                useWorker: false // Disable worker for linting if not needed (faster)
+            });
+            editor.session.setUseWorker(false); // No JS linting in HTML mode
+           
+            // Enable basic autocomplete
+            editor.setOptions({ enableBasicAutocompletion: true });
+           
+            // Sync back to textarea on change
+            editor.session.on('change', function() {
+                bodyTextarea.value = editor.getValue(); // Full HTML string
+            });
+           
+            console.log('Ace loaded! Initial value:', editor.getValue().substring(0, 50) + '...'); // Debug
+        } catch (error) {
+            console.error('Ace init failed:', error);  // Graceful error
+            bodyEditorEl.style.display = 'none';  // Hide div, show plain textarea if needed
+            bodyTextarea.style.display = 'block';
+        }
+    } else {
+        console.warn('Ace elements or lib missing');  // Fallback to plain textarea
+    }
+});
+</script>