🐳 10/02 - 14:38 - omg and the popup confirmation for deletion of a single value or key or line is just extra and dramatic. No confirmation for a single key or value or line deletion please

script.js

@@ -554,17 +554,40 @@ document.addEventListener('DOMContentLoaded', function() {
         const originalText = span.textContent;
         const originalWidth = span.offsetWidth;
         
+        // Create a wrapper div to hold both the hint and input
+        const wrapper = document.createElement('div');
+        wrapper.style.position = 'relative';
+        wrapper.style.display = 'inline-block';
+        
+        // Create the faint hint text
+        const hint = document.createElement('span');
+        hint.textContent = originalText;
+        hint.className = 'editable-hint';
+        hint.style.position = 'absolute';
+        hint.style.left = '0';
+        hint.style.top = '0';
+        hint.style.pointerEvents = 'none';
+        hint.style.opacity = '0.25';
+        hint.style.whiteSpace = 'pre';
+        
         const input = document.createElement('input');
         input.type = 'text';
         input.value = displayValue !== undefined ? displayValue : '';
         input.className = `editable-field ${type}-input`;
+        input.style.position = 'relative';
+        input.style.backgroundColor = 'transparent';
         
         // Calculate appropriate width - minimum 50px or original width + padding
         const calculatedWidth = Math.max(50, originalWidth + 20);
         input.style.width = `${calculatedWidth}px`;
+        hint.style.width = `${calculatedWidth}px`;
+        
+        // Build wrapper: hint behind, input on top
+        wrapper.appendChild(hint);
+        wrapper.appendChild(input);
         
-        // Replace span with input
-        span.parentNode.replaceChild(input, span);
+        // Replace span with wrapper
+        span.parentNode.replaceChild(wrapper, span);
         input.focus();
         input.select();
         
@@ -584,6 +607,19 @@ document.addEventListener('DOMContentLoaded', function() {
         // Save on blur or Enter
         const saveEdit = () => {
             const newValue = input.value.trim();
+            const wrapper = input.parentNode;
+            
+            // Check if this is a newly inserted field that's still empty
+            const isNewField = key === 'newField' || (key && key.startsWith('newField'));
+            const isEmptyValue = (type === 'value' && newValue === '') || (type === 'key' && newValue === '');
+            
+            // If it's a new field and still empty, auto-delete it
+            if (isNewField && isEmptyValue) {
+                removeFromParent(parentKey, key);
+                renderEditor();
+                updateOutput();
+                return;
+            }
             
             if (type === 'key') {
                 // Rename the key
@@ -591,7 +627,7 @@ document.addEventListener('DOMContentLoaded', function() {
                     renameKey(parentKey, key, newValue);
                 } else {
                     // Just restore the span without saving
-                    input.parentNode.replaceChild(span, input);
+                    wrapper.parentNode.replaceChild(span, wrapper);
                 }
             } else {
                 // Update the value
@@ -600,7 +636,7 @@ document.addEventListener('DOMContentLoaded', function() {
                     updateValue(parentKey, key, parsedValue);
                 } else {
                     // Just restore the span without saving
-                    input.parentNode.replaceChild(span, input);
+                    wrapper.parentNode.replaceChild(span, wrapper);
                 }
             }
         };
@@ -620,6 +656,10 @@ document.addEventListener('DOMContentLoaded', function() {
                 insertNewField({ key, parentKey });
             }
         });
+        
+        // Track that we're editing so we don't auto-delete this field
+        const wrapper = input.parentNode;
+        wrapper.dataset.isEditing = 'true';
     }
     
     // Navigate to next/previous editable field
@@ -709,6 +749,9 @@ document.addEventListener('DOMContentLoaded', function() {
             newKey = `newField${fieldCounter++}`;
         }
         
+        // Mark this as a new field for tracking
+        newKey = newKey + '_new';
+        
         if (parentKey === 'root') {
             const keys = Object.keys(jsonData);
             const index = keys.indexOf(key);
@@ -966,6 +1009,9 @@ document.addEventListener('DOMContentLoaded', function() {
                 newKey = `newField${counter++}`;
             }
             
+            // Mark as new field
+            newKey = newKey + '_new';
+            
             if (Array.isArray(parent)) {
                 const index = parseInt(contextMenuKey);
                 if (!isNaN(index) && index >= 0) {
@@ -1017,13 +1063,12 @@ document.addEventListener('DOMContentLoaded', function() {
     });
     
     document.getElementById('ctxDelete').addEventListener('click', () => {
-        if (confirm(`Delete "${contextMenuKey}"?`)) {
-            removeFromParent(contextMenuParentKey, contextMenuKey);
-            renderEditor();
-            updateOutput();
-            saveToHistory();
-            showSavedIndicator();
-        }
+        // No confirmation - just delete
+        removeFromParent(contextMenuParentKey, contextMenuKey);
+        renderEditor();
+        updateOutput();
+        saveToHistory();
+        showSavedIndicator();
         contextMenu.style.display = 'none';
     });
     

style.css

@@ -278,11 +278,13 @@ p {
     min-width: 30px;
     transition: all 0.2s ease;
     outline: none;
+    color: inherit;
 }
 
 .editable-field:focus {
     background: rgba(255,255,255,0.15);
     box-shadow: inset 0 0 0 2px rgba(255,255,255,0.3);
+    color: inherit;
 }
 
 .editable-field.key-input {
@@ -293,6 +295,15 @@ p {
     color: #6ee7b7;
 }
 
+/* Faint hint behind editable field */
+.editable-hint {
+    font-family: inherit;
+    font-size: inherit;
+    color: inherit;
+    user-select: none;
+    z-index: -1;
+}
+
 /* Saved indicator */
 .saved-indicator {
     position: fixed;