🐳 12/03 - 06:31 - Create a json view in editor to allow direct editing of contents

editor.html

@@ -146,6 +146,18 @@
                         Grid
                     </button>
                 </div>
+                
+                <!-- View Toggle -->
+                <div class="flex items-center gap-1 bg-indigo-50 rounded-lg p-1 ml-4">
+                    <button onclick="editor.setViewMode('visual')" id="view-visual" class="view-btn active px-3 py-1.5 rounded-md text-sm font-medium text-indigo-700 flex items-center gap-1">
+                        <i data-lucide="eye" class="w-4 h-4"></i>
+                        Visual
+                    </button>
+                    <button onclick="editor.setViewMode('json')" id="view-json" class="view-btn px-3 py-1.5 rounded-md text-sm font-medium text-gray-600 flex items-center gap-1">
+                        <i data-lucide="code" class="w-4 h-4"></i>
+                        JSON
+                    </button>
+                </div>
             </div>
 
             <div class="flex items-center gap-2">
@@ -258,6 +270,8 @@
                 ];
                 this.currentSlide = 0;
                 this.previewIndex = 0;
+                this.viewMode = 'visual';
+                this.jsonError = null;
                 
                 this.init();
             }
@@ -397,10 +411,53 @@
                 `).join('');
             }
 
+            setViewMode(mode) {
+                this.viewMode = mode;
+                document.querySelectorAll('.view-btn').forEach(btn => {
+                    btn.classList.remove('active', 'bg-white', 'shadow-sm', 'text-indigo-700');
+                    btn.classList.add('text-gray-600');
+                });
+                document.getElementById(`view-${mode}`).classList.add('active', 'bg-white', 'shadow-sm', 'text-indigo-700');
+                document.getElementById(`view-${mode}`).classList.remove('text-gray-600');
+                this.renderEditor();
+            }
+
             renderEditor() {
                 const slide = this.slides[this.currentSlide];
                 const form = document.getElementById('edit-form');
                 
+                // JSON View Mode
+                if (this.viewMode === 'json') {
+                    form.innerHTML = `
+                        <div class="space-y-4">
+                            <div class="flex items-center justify-between">
+                                <div>
+                                    <h3 class="text-sm font-semibold text-gray-900">JSON Editor</h3>
+                                    <p class="text-xs text-gray-500 mt-1">Edit the raw JSON data for this slide</p>
+                                </div>
+                                <button onclick="editor.formatJSON()" class="px-3 py-1.5 text-xs font-medium text-indigo-600 bg-indigo-50 rounded-lg hover:bg-indigo-100 transition-colors flex items-center gap-1">
+                                    <i data-lucide="sparkles" class="w-3 h-3"></i>
+                                    Format
+                                </button>
+                            </div>
+                            <div class="relative">
+                                <textarea id="json-editor" 
+                                          oninput="editor.validateJSON(this.value)"
+                                          class="w-full h-96 px-4 py-3 font-mono text-xs leading-relaxed border ${this.jsonError ? 'border-red-300 focus:ring-red-500 focus:border-red-500' : 'border-gray-300 focus:ring-indigo-500 focus:border-indigo-500'} rounded-lg outline-none resize-none"
+                                          spellcheck="false">${JSON.stringify(slide, null, 2)}</textarea>
+                                ${this.jsonError ? `<div class="absolute bottom-3 left-3 right-3 px-3 py-2 bg-red-50 border border-red-200 rounded-lg text-xs text-red-600 flex items-center gap-2"><i data-lucide="alert-circle" class="w-4 h-4"></i>${this.jsonError}</div>` : ''}
+                            </div>
+                            <button onclick="editor.applyJSON()" class="w-full py-3 px-4 bg-indigo-600 text-white rounded-lg font-medium hover:bg-indigo-700 transition-colors flex items-center justify-center gap-2">
+                                <i data-lucide="save" class="w-4 h-4"></i>
+                                Apply Changes
+                            </button>
+                        </div>
+                    `;
+                    lucide.createIcons();
+                    return;
+                }
+                
+                // Visual View Mode
                 let html = `
                     <div class="grid grid-cols-2 gap-4">
                         <div class="col-span-2">
@@ -531,6 +588,71 @@
                 this.updatePreview();
             }
 
+            validateJSON(jsonString) {
+                try {
+                    JSON.parse(jsonString);
+                    this.jsonError = null;
+                    document.getElementById('json-editor').classList.remove('border-red-300', 'focus:ring-red-500', 'focus:border-red-500');
+                    document.getElementById('json-editor').classList.add('border-gray-300', 'focus:ring-indigo-500', 'focus:border-indigo-500');
+                } catch (err) {
+                    this.jsonError = err.message;
+                    document.getElementById('json-editor').classList.add('border-red-300', 'focus:ring-red-500', 'focus:border-red-500');
+                    document.getElementById('json-editor').classList.remove('border-gray-300', 'focus:ring-indigo-500', 'focus:border-indigo-500');
+                }
+                // Re-render to show/hide error message
+                const textarea = document.getElementById('json-editor');
+                const cursorPosition = textarea.selectionStart;
+                this.renderEditor();
+                // Restore cursor position
+                const newTextarea = document.getElementById('json-editor');
+                if (newTextarea) {
+                    newTextarea.focus();
+                    newTextarea.setSelectionRange(cursorPosition, cursorPosition);
+                }
+            }
+
+            formatJSON() {
+                const textarea = document.getElementById('json-editor');
+                try {
+                    const parsed = JSON.parse(textarea.value);
+                    textarea.value = JSON.stringify(parsed, null, 2);
+                    this.jsonError = null;
+                    this.renderEditor();
+                } catch (err) {
+                    this.jsonError = err.message;
+                    this.renderEditor();
+                }
+            }
+
+            applyJSON() {
+                const textarea = document.getElementById('json-editor');
+                try {
+                    const parsed = JSON.parse(textarea.value);
+                    // Preserve the ID
+                    parsed.id = this.slides[this.currentSlide].id;
+                    this.slides[this.currentSlide] = parsed;
+                    this.jsonError = null;
+                    this.renderSlidesList();
+                    this.updatePreview();
+                    // Show success feedback
+                    const btn = document.querySelector('button[onclick="editor.applyJSON()"]');
+                    const originalText = btn.innerHTML;
+                    btn.innerHTML = '<i data-lucide="check" class="w-4 h-4"></i> Saved!';
+                    btn.classList.add('bg-green-600', 'hover:bg-green-700');
+                    btn.classList.remove('bg-indigo-600', 'hover:bg-indigo-700');
+                    lucide.createIcons();
+                    setTimeout(() => {
+                        btn.innerHTML = originalText;
+                        btn.classList.remove('bg-green-600', 'hover:bg-green-700');
+                        btn.classList.add('bg-indigo-600', 'hover:bg-indigo-700');
+                        lucide.createIcons();
+                    }, 2000);
+                } catch (err) {
+                    this.jsonError = err.message;
+                    this.renderEditor();
+                }
+            }
+
             updatePreview() {
                 const slide = this.slides[this.currentSlide];
                 const preview = document.getElementById('slide-preview');