🐳 10/02 - 14:04 - It's not syncing right to left, and not in resal-time letter by letter--so the changes in the left get overwritten and lost

script.js

@@ -43,6 +43,12 @@ document.addEventListener('DOMContentLoaded', function() {
     let historyIndex = -1;
     const MAX_HISTORY = 50;
     
+    // Track editor states to prevent data loss
+    let leftEditorModified = false;
+    let rightEditorModified = false;
+    let rightEditorLastModified = 0;
+    let autoApplyTimeout = null;
+    
     // Track all editable fields for TAB navigation
     let editableFields = [];
     let currentFieldIndex = -1;
@@ -460,18 +466,23 @@ document.addEventListener('DOMContentLoaded', function() {
         // Save on blur or Enter
         const saveEdit = () => {
             const newValue = input.value.trim();
-            input.parentNode.replaceChild(span, span);
             
             if (type === 'key') {
                 // Rename the key
-                if (newValue !== key) {
+                if (newValue !== key && newValue !== '') {
                     renameKey(parentKey, key, newValue);
+                } else {
+                    // Just restore the span without saving
+                    input.parentNode.replaceChild(span, input);
                 }
             } else {
                 // Update the value
                 const parsedValue = parseValue(newValue);
                 if (JSON.stringify(parsedValue) !== JSON.stringify(currentValue)) {
                     updateValue(parentKey, key, parsedValue);
+                } else {
+                    // Just restore the span without saving
+                    input.parentNode.replaceChild(span, input);
                 }
             }
         };
@@ -536,10 +547,12 @@ document.addEventListener('DOMContentLoaded', function() {
     // Update a value
     function updateValue(parentKey, key, newValue) {
         if (parentKey === 'root') {
-            jsonData[key] = newValue;
+            if (jsonData[key] !== undefined) {
+                jsonData[key] = newValue;
+            }
         } else {
             const parent = findElementByKey(jsonData, parentKey);
-            if (parent && typeof parent === 'object') {
+            if (parent && typeof parent === 'object' && parent[key] !== undefined) {
                 parent[key] = newValue;
             }
         }
@@ -570,21 +583,31 @@ document.addEventListener('DOMContentLoaded', function() {
     // Insert a new field after the current one
     function insertNewField(currentFieldData) {
         const { key, parentKey } = currentFieldData;
+        let fieldCounter = 1;
+        let newKey = 'newField';
+        
+        // Generate unique key name
+        while (getValue(parentKey, newKey) !== undefined) {
+            newKey = `newField${fieldCounter++}`;
+        }
         
         if (parentKey === 'root') {
             const keys = Object.keys(jsonData);
             const index = keys.indexOf(key);
-            const newKey = 'newField';
-            
             const newData = {};
-            keys.forEach((k, i) => {
-                newData[k] = jsonData[k];
-                if (i === index) {
-                    newData[newKey] = '';
-                }
-            });
+            
             if (index === -1 || index === keys.length - 1) {
+                // Append at the end
+                Object.assign(newData, jsonData);
                 newData[newKey] = '';
+            } else {
+                // Insert after current
+                keys.forEach((k, i) => {
+                    newData[k] = jsonData[k];
+                    if (i === index) {
+                        newData[newKey] = '';
+                    }
+                });
             }
             
             jsonData = newData;
@@ -593,21 +616,27 @@ document.addEventListener('DOMContentLoaded', function() {
             if (parent && typeof parent === 'object' && !Array.isArray(parent)) {
                 const keys = Object.keys(parent);
                 const index = keys.indexOf(key);
-                const newKey = 'newField';
-                
                 const newData = {};
-                keys.forEach((k, i) => {
-                    newData[k] = parent[k];
-                    if (i === index) {
-                        newData[newKey] = '';
-                    }
-                });
+                
                 if (index === -1 || index === keys.length - 1) {
+                    // Append at the end
+                    Object.assign(newData, parent);
                     newData[newKey] = '';
+                } else {
+                    // Insert after current
+                    keys.forEach((k, i) => {
+                        newData[k] = parent[k];
+                        if (i === index) {
+                            newData[newKey] = '';
+                        }
+                    });
                 }
                 
                 Object.keys(parent).forEach(k => delete parent[k]);
                 Object.assign(parent, newData);
+            } else if (parent && Array.isArray(parent)) {
+                // For arrays, push new empty string
+                parent.push('');
             }
         }
         
@@ -650,14 +679,17 @@ document.addEventListener('DOMContentLoaded', function() {
         return null;
     }
     
-    // Update JSON output
+    // Update JSON output (left → right sync)
     function updateOutput() {
         if (isApplyingChanges) return;
+        leftEditorModified = true;
+        leftEditorLastModified = Date.now();
         try {
             const jsonString = JSON.stringify(jsonData, null, 2);
             jsonOutput.value = jsonString;
             jsonOutput.style.borderColor = '#10b981';
             validationStatus.innerHTML = '<i class="fas fa-check-circle text-green-500"></i><span class="text-green-600">Valid JSON</span>';
+            rightEditorModified = false;
         } 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>';
@@ -665,7 +697,7 @@ document.addEventListener('DOMContentLoaded', function() {
     }
     
     // Apply changes from code editor to visual editor
-    function applyCodeChanges() {
+    function applyCodeChanges(showMsg = true) {
         if (!jsonOutput.value.trim()) return false;
         try {
             const newData = JSON.parse(jsonOutput.value);
@@ -675,22 +707,44 @@ document.addEventListener('DOMContentLoaded', function() {
             updateOutput();
             saveToHistory();
             isApplyingChanges = false;
-            showNotification('Changes applied successfully!');
+            rightEditorModified = false;
+            if (showMsg) {
+                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
+    // Real-time validation and debounced auto-apply
     jsonOutput.addEventListener('input', () => {
+        rightEditorModified = true;
+        rightEditorLastModified = Date.now();
+        
         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>';
+            
+            // Clear previous timeout
+            if (autoApplyTimeout) {
+                clearTimeout(autoApplyTimeout);
+            }
+            
+            // Set debounced auto-apply (1.5 seconds after user stops typing)
+            autoApplyTimeout = setTimeout(() => {
+                // Only auto-apply if left editor hasn't been modified recently
+                const timeSinceLeftModified = Date.now() - (leftEditorLastModified || 0);
+                if (!leftEditorModified || timeSinceLeftModified > 2000) {
+                    if (applyCodeChanges(false)) {
+                        showSavedIndicator();
+                    }
+                }
+            }, 1500);
+            
         } 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>';
@@ -698,27 +752,17 @@ document.addEventListener('DOMContentLoaded', function() {
     });
     
     // Apply button click
-    applyCodeBtn.addEventListener('click', applyCodeChanges);
+    applyCodeBtn.addEventListener('click', () => applyCodeChanges(true));
     
     // Auto-apply on Ctrl+Enter or Cmd+Enter
     jsonOutput.addEventListener('keydown', (e) => {
         if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
             e.preventDefault();
-            applyCodeChanges();
+            e.stopPropagation();
+            applyCodeChanges(true);
         }
     });
     
-    // Auto-apply on blur (when clicking away)
-    jsonOutput.addEventListener('blur', () => {
-        const autoSaveStatus = document.getElementById('autoSaveStatus');
-        if (applyCodeChanges()) {
-            autoSaveStatus.classList.remove('hidden');
-            setTimeout(() => {
-                autoSaveStatus.classList.add('hidden');
-            }, 2000);
-        }
-    }, true);
-    
     // Paste in JSON output pane
     jsonOutput.addEventListener('paste', (e) => {
         e.preventDefault();