🐳 10/02 - 13:09 - The output rendering on the bottom should let me edit--though I think it needws to be side by side to be useful; either side-by-side both views or select the jsonic-ified easier-to-

index.html

@@ -328,34 +328,45 @@
                 </div>
             </div>
             
-            <div class="p-4 flex flex-col md:flex-row gap-4">
-                <div class="w-full">
-                    <div class="bg-slate-700 rounded-lg p-4 mb-4">
-                        <h2 class="text-lg font-semibold text-slate-200 mb-2">JSON Editor</h2>
-                        <div id="jsonEditor" class="json-editor border rounded-lg p-4 font-mono min-h-[400px] relative">
-                            <!-- JSON content will be rendered here -->
+            <div class="p-4 flex flex-col lg:flex-row gap-4">
+                <!-- Left Panel - Visual JSON Editor -->
+                <div class="w-full lg:w-1/2">
+                    <div class="bg-slate-700 rounded-lg p-4 h-full">
+                        <div class="flex justify-between items-center mb-3">
+                            <h2 class="text-lg font-semibold text-slate-200">Visual Editor</h2>
+                            <span class="text-xs text-slate-400 bg-slate-800 px-2 py-1 rounded">Double-click to edit</span>
                         </div>
-                    </div>
-                    
-                    <div class="bg-gray-50 rounded-lg p-4">
-                        <h2 class="text-lg font-semibold text-gray-700 mb-2">JSON Output</h2>
-                        <textarea id="jsonOutput" class="w-full h-40 font-mono text-sm p-3 border rounded-lg bg-white" readonly></textarea>
-                        <div class="mt-2 flex justify-between">
-                            <button id="copyBtn" class="btn bg-gray-200 hover:bg-gray-300 px-4 py-2 rounded-lg">
-                                <i class="fas fa-copy"></i> Copy JSON
-                            </button>
-                            <button id="downloadBtn" class="btn bg-primary hover:bg-secondary text-white px-4 py-2 rounded-lg">
-                                <i class="fas fa-download"></i> Download
-                            </button>
+                        <div id="jsonEditor" class="json-editor border rounded-lg p-4 font-mono min-h-[500px] max-h-[600px] overflow-auto">
+                            <!-- JSON content will be rendered here -->
                         </div>
                     </div>
                 </div>
                 
-                <div class="w-full md:w-1/2">
+                <!-- Right Panel - JSON Code Editor -->
+                <div class="w-full lg:w-1/2">
                     <div class="bg-gray-50 rounded-lg p-4 h-full">
-                        <h2 class="text-lg font-semibold text-gray-700 mb-2">Preview</h2>
-                        <div class="bg-white border rounded-lg p-4 h-[400px] overflow-y-auto">
-                            <p class="text-gray-600">JSON structure will be displayed here in view mode.</p>
+                        <div class="flex justify-between items-center mb-3">
+                            <h2 class="text-lg font-semibold text-gray-700">Code Editor</h2>
+                            <div class="flex gap-2">
+                                <button id="applyCodeBtn" class="btn bg-green-500 hover:bg-green-600 text-white px-3 py-1 rounded-lg text-sm">
+                                    <i class="fas fa-check mr-1"></i> Apply
+                                </button>
+                            </div>
+                        </div>
+                        <textarea id="jsonOutput" class="w-full h-[500px] max-h-[600px] font-mono text-sm p-3 border rounded-lg bg-white focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none"></textarea>
+                        <div class="mt-3 flex flex-wrap gap-2 justify-between">
+                            <div class="flex gap-2">
+                                <button id="copyBtn" class="btn bg-gray-200 hover:bg-gray-300 px-3 py-2 rounded-lg text-sm">
+                                    <i class="fas fa-copy mr-1"></i> Copy
+                                </button>
+                                <button id="downloadBtn" class="btn bg-primary hover:bg-secondary text-white px-3 py-2 rounded-lg text-sm">
+                                    <i class="fas fa-download mr-1"></i> Download
+                                </button>
+                            </div>
+                            <div id="validationStatus" class="flex items-center gap-2 text-sm">
+                                <i class="fas fa-check-circle text-green-500"></i>
+                                <span class="text-green-600">Valid JSON</span>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -431,6 +442,9 @@
             const notification = document.getElementById('notification');
             const copyBtn = document.getElementById('copyBtn');
             const downloadBtn = document.getElementById('downloadBtn');
+            const applyCodeBtn = document.getElementById('applyCodeBtn');
+            const validationStatus = document.getElementById('validationStatus');
+            let isApplyingChanges = false;
             
             // Current state
             let jsonData = {};
@@ -792,15 +806,60 @@
             
             // Update JSON output
             function updateOutput() {
+                if (isApplyingChanges) return;
                 try {
                     jsonOutput.value = JSON.stringify(jsonData, null, 2);
                     jsonOutput.classList.remove('error-highlight');
+                    jsonOutput.style.borderColor = '#d1d5db';
+                    validationStatus.innerHTML = '<i class="fas fa-check-circle text-green-500"></i><span class="text-green-600">Valid JSON</span>';
                 } catch (e) {
                     jsonOutput.value = 'Invalid JSON structure';
                     jsonOutput.classList.add('error-highlight');
+                    jsonOutput.style.borderColor = '#ef4444';
+                    validationStatus.innerHTML = '<i class="fas fa-exclamation-circle text-red-500"></i><span class="text-red-600">Invalid JSON</span>';
+                }
+            }
+            
+            // Apply changes from code editor to visual editor
+            function applyCodeChanges() {
+                try {
+                    const newData = JSON.parse(jsonOutput.value);
+                    isApplyingChanges = true;
+                    loadJSON(newData);
+                    isApplyingChanges = false;
+                    showNotification('Changes applied successfully!');
+                    return true;
+                } catch (e) {
+                    showNotification('Invalid JSON: ' + e.message);
+                    jsonOutput.style.borderColor = '#ef4444';
+                    validationStatus.innerHTML = '<i class="fas fa-exclamation-circle text-red-500"></i><span class="text-red-600">Invalid JSON</span>';
+                    return false;
                 }
             }
             
+            // Real-time validation of code editor
+            jsonOutput.addEventListener('input', () => {
+                try {
+                    JSON.parse(jsonOutput.value);
+                    jsonOutput.style.borderColor = '#10b981';
+                    validationStatus.innerHTML = '<i class="fas fa-check-circle text-green-500"></i><span class="text-green-600">Valid JSON</span>';
+                } catch (e) {
+                    jsonOutput.style.borderColor = '#ef4444';
+                    validationStatus.innerHTML = '<i class="fas fa-exclamation-circle text-red-500"></i><span class="text-red-600">Invalid JSON</span>';
+                }
+            });
+            
+            // Apply button click
+            applyCodeBtn.addEventListener('click', applyCodeChanges);
+            
+            // Auto-apply on Ctrl+Enter or Cmd+Enter
+            jsonOutput.addEventListener('keydown', (e) => {
+                if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
+                    e.preventDefault();
+                    applyCodeChanges();
+                }
+            });
+            
             // Show notification
             function showNotification(message) {
                 const notificationContent = notification.querySelector('p');
@@ -893,33 +952,27 @@
             // Enable pasting in JSON output pane
             jsonOutput.addEventListener('paste', (e) => {
                 e.preventDefault();
-                navigator.clipboard.readText().then(text => {
+                const pasteHandler = (text) => {
                     try {
                         const data = JSON.parse(text);
                         loadJSON(data);
-                        showNotification('JSON pasted successfully');
+                        showNotification('JSON pasted and loaded successfully');
                     } catch (parseError) {
-                        // If not valid JSON, paste as plain text
+                        // Paste as plain text at cursor position
                         const start = jsonOutput.selectionStart;
                         const end = jsonOutput.selectionEnd;
                         const currentValue = jsonOutput.value;
                         jsonOutput.value = currentValue.substring(0, start) + text + currentValue.substring(end);
-                        showNotification('Pasted as plain text');
+                        showNotification('Pasted as plain text (use Apply button to load)');
                     }
+                };
+                
+                navigator.clipboard.readText().then(text => {
+                    pasteHandler(text);
                 }).catch(err => {
-                    // Fallback to clipboardData for older browsers
+                    // Fallback for older browsers
                     const text = (e.originalEvent || e).clipboardData.getData('text/plain');
-                    try {
-                        const data = JSON.parse(text);
-                        loadJSON(data);
-                        showNotification('JSON pasted successfully');
-                    } catch (parseError) {
-                        const start = jsonOutput.selectionStart;
-                        const end = jsonOutput.selectionEnd;
-                        const currentValue = jsonOutput.value;
-                        jsonOutput.value = currentValue.substring(0, start) + text + currentValue.substring(end);
-                        showNotification('Pasted as plain text');
-                    }
+                    pasteHandler(text);
                 });
             });
             
@@ -1009,7 +1062,7 @@
             
             // Instructions button
             document.getElementById('instructionsBtn').addEventListener('click', () => {
-                showNotification('Double-click to edit keys and values');
+                showNotification('Visual: Double-click to edit | Code: Type and click Apply or Ctrl+Enter');
             });
             
             // Sample JSON button