🐳 10/02 - 14:33 - 1. '...ALWAYS been editored!' I invented the word 'editored' in the subtitle--not 'edited'2. Scrolling down scrlls the line numbers correctly up, but then introduces numberless line

index.html

@@ -26,7 +26,7 @@
     <div class="max-w-7xl mx-auto">
         <header class="mb-8 text-center">
             <h1 class="text-3xl md:text-4xl font-bold text-slate-100 mb-2">Visual JSON Editor</h1>
-            <p class="text-slate-300">The way JSON should <i class="italic font-semibold">ALWAYS</i> been edited!</p>
+            <p class="text-slate-300">The way JSON should <i class="italic font-semibold">ALWAYS</i> been editored!</p>
         </header>
 
         <!-- Menu Bar -->
@@ -190,6 +190,26 @@
         <div id="coordinates" class="fixed top-20 right-4 bg-slate-800 text-slate-300 px-3 py-2 rounded-lg text-xs font-mono shadow-lg z-50 opacity-80 hover:opacity-100 transition-opacity">
             <span id="coordLine">Line: 0</span> | <span id="coordChar">Char: 0</span> | <span id="coordDepth">Depth: 0</span>
         </div>
+        
+        <!-- Context menu -->
+        <div id="contextMenu" class="context-menu">
+            <div class="context-menu-item" id="ctxInsertAfter">
+                <i class="fas fa-plus"></i> Insert Line After
+            </div>
+            <div class="context-menu-item" id="ctxInsertBefore">
+                <i class="fas fa-arrow-up"></i> Insert Line Before
+            </div>
+            <div class="context-menu-divider"></div>
+            <div class="context-menu-item" id="ctxCopyKey">
+                <i class="fas fa-copy"></i> Copy Key
+            </div>
+            <div class="context-menu-item" id="ctxCopyValue">
+                <i class="fas fa-copy"></i> Copy Value
+            </div>
+            <div class="context-menu-item" id="ctxDelete">
+                <i class="fas fa-trash"></i> Delete
+            </div>
+        </div>
     </div>
 
     <script src="script.js"></script>

script.js

@@ -272,22 +272,31 @@ document.addEventListener('DOMContentLoaded', function() {
     
     // Update line numbers on both sides
     function updateLineNumbers() {
+        // Get all json-item elements (including closing brackets)
         const items = jsonEditor.querySelectorAll('.json-item');
         const totalLines = items.length;
         
         lineNumbersLeft.innerHTML = '';
         lineNumbersRight.innerHTML = '';
         
+        // Create a document fragment for better performance
+        const fragmentLeft = document.createDocumentFragment();
+        const fragmentRight = document.createDocumentFragment();
+        
         for (let i = 0; i < totalLines; i++) {
             const lineNum = document.createElement('div');
-            lineNum.className = 'h-5 leading-5';
+            lineNum.className = 'h-5 leading-5 flex items-center justify-end pr-2';
             lineNum.textContent = (i + 1).toString();
             
             const lineNumRight = lineNum.cloneNode(true);
+            lineNumRight.className = 'h-5 leading-5 flex items-center justify-start pl-2';
             
-            lineNumbersLeft.appendChild(lineNum);
-            lineNumbersRight.appendChild(lineNumRight);
+            fragmentLeft.appendChild(lineNum);
+            fragmentRight.appendChild(lineNumRight);
         }
+        
+        lineNumbersLeft.appendChild(fragmentLeft);
+        lineNumbersRight.appendChild(fragmentRight);
     }
     
     // Render a single JSON element (COMPLETE VERSION)
@@ -541,16 +550,37 @@ document.addEventListener('DOMContentLoaded', function() {
             displayValue = displayValue.slice(1, -1);
         }
         
+        // Store original span text content to calculate width
+        const originalText = span.textContent;
+        const originalWidth = span.offsetWidth;
+        
         const input = document.createElement('input');
         input.type = 'text';
         input.value = displayValue !== undefined ? displayValue : '';
         input.className = `editable-field ${type}-input`;
         
+        // Calculate appropriate width - minimum 50px or original width + padding
+        const calculatedWidth = Math.max(50, originalWidth + 20);
+        input.style.width = `${calculatedWidth}px`;
+        
         // Replace span with input
         span.parentNode.replaceChild(input, span);
         input.focus();
         input.select();
         
+        // Adjust width dynamically as user types
+        input.addEventListener('input', function() {
+            const tempSpan = document.createElement('span');
+            tempSpan.style.font = getComputedStyle(input).font;
+            tempSpan.style.visibility = 'hidden';
+            tempSpan.style.position = 'absolute';
+            tempSpan.textContent = input.value;
+            document.body.appendChild(tempSpan);
+            const newWidth = Math.max(50, tempSpan.offsetWidth + 30);
+            input.style.width = `${newWidth}px`;
+            document.body.removeChild(tempSpan);
+        });
+        
         // Save on blur or Enter
         const saveEdit = () => {
             const newValue = input.value.trim();
@@ -883,6 +913,129 @@ document.addEventListener('DOMContentLoaded', function() {
         });
     });
     
+    // ==================== CONTEXT MENU ====================
+    
+    const contextMenu = document.getElementById('contextMenu');
+    let contextMenuTarget = null;
+    let contextMenuKey = null;
+    let contextMenuParentKey = null;
+    
+    // Show context menu on right-click
+    jsonEditor.addEventListener('contextmenu', (e) => {
+        e.preventDefault();
+        
+        // Find the closest json-item
+        const item = e.target.closest('.json-item');
+        if (!item) return;
+        
+        // Don't show on closing brackets
+        if (item.dataset.key === 'closing') return;
+        
+        contextMenuTarget = item;
+        contextMenuKey = item.dataset.key;
+        contextMenuParentKey = item.dataset.parent;
+        
+        // Position the menu
+        const x = Math.min(e.clientX, window.innerWidth - 200);
+        const y = Math.min(e.clientY, window.innerHeight - 200);
+        contextMenu.style.left = `${x}px`;
+        contextMenu.style.top = `${y}px`;
+        contextMenu.style.display = 'block';
+    });
+    
+    // Hide context menu on click elsewhere
+    document.addEventListener('click', (e) => {
+        if (!contextMenu.contains(e.target)) {
+            contextMenu.style.display = 'none';
+        }
+    });
+    
+    // Context menu actions
+    document.getElementById('ctxInsertAfter').addEventListener('click', () => {
+        insertNewField({ key: contextMenuKey, parentKey: contextMenuParentKey });
+        contextMenu.style.display = 'none';
+    });
+    
+    document.getElementById('ctxInsertBefore').addEventListener('click', () => {
+        // Insert before - need to handle this specially
+        const parent = contextMenuParentKey === 'root' ? jsonData : findElementByKey(jsonData, contextMenuParentKey);
+        if (parent && typeof parent === 'object') {
+            let newKey = 'newField';
+            let counter = 1;
+            while (parent[newKey] !== undefined) {
+                newKey = `newField${counter++}`;
+            }
+            
+            if (Array.isArray(parent)) {
+                const index = parseInt(contextMenuKey);
+                if (!isNaN(index) && index >= 0) {
+                    parent.splice(index, 0, '');
+                }
+            } else {
+                const keys = Object.keys(parent);
+                const index = keys.indexOf(contextMenuKey);
+                if (index !== -1) {
+                    const newData = {};
+                    keys.forEach((k, i) => {
+                        if (i === index) {
+                            newData[newKey] = '';
+                        }
+                        newData[k] = parent[k];
+                    });
+                    Object.keys(parent).forEach(k => delete parent[k]);
+                    Object.assign(parent, newData);
+                }
+            }
+            
+            renderEditor();
+            updateOutput();
+            saveToHistory();
+            showSavedIndicator();
+        }
+        contextMenu.style.display = 'none';
+    });
+    
+    document.getElementById('ctxCopyKey').addEventListener('click', async () => {
+        try {
+            await navigator.clipboard.writeText(contextMenuKey);
+            showNotification('Key copied to clipboard!', false);
+        } catch (err) {
+            showNotification('Failed to copy key', true);
+        }
+        contextMenu.style.display = 'none';
+    });
+    
+    document.getElementById('ctxCopyValue').addEventListener('click', async () => {
+        const value = getValue(contextMenuParentKey, contextMenuKey);
+        try {
+            await navigator.clipboard.writeText(JSON.stringify(value, null, 2));
+            showNotification('Value copied to clipboard!', false);
+        } catch (err) {
+            showNotification('Failed to copy value', true);
+        }
+        contextMenu.style.display = 'none';
+    });
+    
+    document.getElementById('ctxDelete').addEventListener('click', () => {
+        if (confirm(`Delete "${contextMenuKey}"?`)) {
+            removeFromParent(contextMenuParentKey, contextMenuKey);
+            renderEditor();
+            updateOutput();
+            saveToHistory();
+            showSavedIndicator();
+        }
+        contextMenu.style.display = 'none';
+    });
+    
+    // Click on empty space between items to insert line
+    jsonEditor.addEventListener('click', (e) => {
+        // Only if clicking directly on json-editor (not on an item)
+        if (e.target === jsonEditor) {
+            // Insert at root level
+            insertNewField({ key: null, parentKey: 'root' });
+        }
+    });
+    
     // Show notification (success by default)
     function showNotification(message, isError = false) {
         const notificationContent = notification.querySelector('p');

style.css

@@ -425,4 +425,43 @@ p {
 #coordinates span::before {
     color: #60a5fa;
     margin-right: 2px;
+}
+
+/* Context menu */
+.context-menu {
+    position: fixed;
+    background: #334155;
+    border: 1px solid #475569;
+    border-radius: 8px;
+    padding: 4px 0;
+    min-width: 180px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+    z-index: 1000;
+    display: none;
+}
+
+.context-menu-item {
+    padding: 8px 16px;
+    color: #cbd5e1;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 14px;
+}
+
+.context-menu-item:hover {
+    background: #475569;
+}
+
+.context-menu-item i {
+    width: 16px;
+    text-align: center;
+    color: #94a3b8;
+}
+
+.context-menu-divider {
+    height: 1px;
+    background: #475569;
+    margin: 4px 0;
 }