🐳 10/02 - 14:18 - 1. Can you also please add subtle but clear (ie. use the same colour, different shade of it) line numbers on the left hand side AND far right hand side, and X,Y character coordinate

index.html

@@ -104,8 +104,15 @@
                             <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">Single-click to edit • Tab to navigate • Shift+Enter for new field</span>
                         </div>
-                        <div id="jsonEditor" class="json-editor border rounded-lg p-2 font-mono min-h-[600px] max-h-[700px] overflow-auto">
-                            <!-- JSON content will be rendered here -->
+                        <div class="relative json-editor border rounded-lg min-h-[600px] max-h-[700px] overflow-auto">
+                            <!-- Left line numbers -->
+                            <div id="lineNumbersLeft" class="absolute left-0 top-0 bottom-0 w-10 bg-slate-800 text-slate-500 text-xs font-mono text-right pr-2 select-none overflow-hidden z-10 pt-2"></div>
+                            <!-- Right line numbers -->
+                            <div id="lineNumbersRight" class="absolute right-0 top-0 bottom-0 w-10 bg-slate-800 text-slate-500 text-xs font-mono text-left pl-2 select-none overflow-hidden z-10 pt-2"></div>
+                            <!-- JSON content -->
+                            <div id="jsonEditor" class="pl-10 pr-10 py-2 font-mono">
+                                <!-- JSON content will be rendered here -->
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -178,6 +185,11 @@
                 </div>
             </div>
         </div>
+        
+        <!-- Coordinates display - fixed position -->
+        <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>
     </div>
 
     <script src="script.js"></script>

script.js

@@ -28,6 +28,11 @@ document.addEventListener('DOMContentLoaded', function() {
     const downloadBtn = document.getElementById('downloadBtn');
     const applyCodeBtn = document.getElementById('applyCodeBtn');
     const validationStatus = document.getElementById('validationStatus');
+    const lineNumbersLeft = document.getElementById('lineNumbersLeft');
+    const lineNumbersRight = document.getElementById('lineNumbersRight');
+    const coordLine = document.getElementById('coordLine');
+    const coordChar = document.getElementById('coordChar');
+    const coordDepth = document.getElementById('coordDepth');
     
     // Create saved indicator
     const savedIndicator = document.createElement('div');
@@ -54,6 +59,10 @@ document.addEventListener('DOMContentLoaded', function() {
     let editableFields = [];
     let currentFieldIndex = -1;
     
+    // Line number tracking
+    let currentLine = 0;
+    let lineElements = [];
+    
     // Drag and drop state
     let draggedElement = null;
     let draggedData = null;
@@ -251,9 +260,34 @@ document.addEventListener('DOMContentLoaded', function() {
     // Render the JSON editor
     function renderEditor() {
         jsonEditor.innerHTML = '';
+        lineNumbersLeft.innerHTML = '';
+        lineNumbersRight.innerHTML = '';
         editableFields = [];
         currentFieldIndex = -1;
+        currentLine = 0;
+        lineElements = [];
         renderElement(jsonEditor, jsonData, 0, 'root');
+        updateLineNumbers();
+    }
+    
+    // Update line numbers on both sides
+    function updateLineNumbers() {
+        const items = jsonEditor.querySelectorAll('.json-item');
+        const totalLines = items.length;
+        
+        lineNumbersLeft.innerHTML = '';
+        lineNumbersRight.innerHTML = '';
+        
+        for (let i = 0; i < totalLines; i++) {
+            const lineNum = document.createElement('div');
+            lineNum.className = 'h-5 leading-5';
+            lineNum.textContent = (i + 1).toString();
+            
+            const lineNumRight = lineNum.cloneNode(true);
+            
+            lineNumbersLeft.appendChild(lineNum);
+            lineNumbersRight.appendChild(lineNumRight);
+        }
     }
     
     // Render a single JSON element (COMPLETE VERSION)
@@ -270,6 +304,9 @@ document.addEventListener('DOMContentLoaded', function() {
             wrapper.dataset.depth = depth;
             wrapper.dataset.layer = Math.min(depth, 7);
             wrapper.dataset.type = Array.isArray(data) ? 'array' : 'object';
+            wrapper.dataset.line = currentLine;
+            lineElements.push(wrapper);
+            currentLine++;
             
             // Make primitive items draggable (not opening/closing brackets)
             if (key !== 'root' && key !== 'closing') {
@@ -405,6 +442,9 @@ document.addEventListener('DOMContentLoaded', function() {
             wrapper.dataset.depth = depth;
             wrapper.dataset.layer = Math.min(depth, 7);
             wrapper.dataset.type = 'primitive';
+            wrapper.dataset.line = currentLine;
+            lineElements.push(wrapper);
+            currentLine++;
             
             // Make draggable
             if (key !== 'root') {
@@ -741,6 +781,12 @@ document.addEventListener('DOMContentLoaded', function() {
         }
     }
     
+    // Sync line numbers scroll with editor
+    jsonEditor.parentElement.addEventListener('scroll', function() {
+        lineNumbersLeft.scrollTop = this.scrollTop;
+        lineNumbersRight.scrollTop = this.scrollTop;
+    });
+    
     // Apply changes from code editor to visual editor
     function applyCodeChanges(showMsg = true) {
         if (!jsonOutput.value.trim()) return false;
@@ -968,17 +1014,36 @@ document.addEventListener('DOMContentLoaded', function() {
     
     // Handle the drop operation
     function handleDrop(draggedData, dropTarget, dropPosition) {
-        const { key: draggedKey, parentKey: draggedParentKey } = draggedData;
+        const { key: draggedKey, parentKey: draggedParentKey, depth: draggedDepth } = draggedData;
         const dropKey = dropTarget.dataset.key;
         const dropParentKey = dropTarget.dataset.parent;
         const dropDepth = parseInt(dropTarget.dataset.depth);
         const dropType = dropTarget.dataset.type;
         
-        // Get the value being moved
-        let movedValue = getValue(draggedParentKey, draggedKey);
+        // Don't allow dropping on self
+        if (draggedKey === dropKey && draggedParentKey === dropParentKey) {
+            return;
+        }
         
-        // Remove from original location
-        removeFromParent(draggedParentKey, draggedKey);
+        // Get the value being moved BEFORE removing
+        const draggedParent = findElementByKey(jsonData, draggedParentKey);
+        let movedValue = null;
+        
+        if (draggedParent && typeof draggedParent === 'object') {
+            if (Array.isArray(draggedParent)) {
+                const index = parseInt(draggedKey);
+                if (!isNaN(index) && index >= 0 && index < draggedParent.length) {
+                    movedValue = draggedParent[index];
+                }
+            } else {
+                movedValue = draggedParent[draggedKey];
+            }
+        }
+        
+        if (movedValue === null) {
+            showNotification('Could not move item - value not found', true);
+            return;
+        }
         
         // Determine new parent and position
         let newParentKey = dropParentKey;
@@ -986,17 +1051,14 @@ document.addEventListener('DOMContentLoaded', function() {
         let insertKey = dropKey;
         
         if (dropPosition === 'above') {
-            // Insert before the drop target
             insertPosition = 'before';
             newParentKey = dropParentKey;
             insertKey = dropKey;
         } else if (dropPosition === 'below') {
-            // Insert after the drop target
             insertPosition = 'after';
             newParentKey = dropParentKey;
             insertKey = dropKey;
         } else if (dropPosition === 'inside') {
-            // Insert inside the drop target (as a child)
             newParentKey = dropKey;
             insertPosition = 'append';
             insertKey = null;
@@ -1009,8 +1071,84 @@ document.addEventListener('DOMContentLoaded', function() {
             }
         }
         
+        // Get the new parent object
+        const newParent = findElementByKey(jsonData, newParentKey);
+        
+        if (!newParent || typeof newParent !== 'object') {
+            showNotification('Cannot move here - invalid parent', true);
+            return;
+        }
+        
+        // Remove from original location
+        if (draggedParent === 'root') {
+            if (Array.isArray(jsonData)) {
+                const index = parseInt(draggedKey);
+                if (!isNaN(index) && index >= 0 && index < jsonData.length) {
+                    jsonData.splice(index, 1);
+                }
+            } else {
+                delete jsonData[draggedKey];
+            }
+        } else {
+            if (draggedParent && Array.isArray(draggedParent)) {
+                const index = parseInt(draggedKey);
+                if (!isNaN(index) && index >= 0 && index < draggedParent.length) {
+                    draggedParent.splice(index, 1);
+                }
+            } else if (draggedParent) {
+                delete draggedParent[draggedKey];
+            }
+        }
+        
         // Insert at new location
-        insertToParent(newParentKey, movedValue, insertPosition, insertKey);
+        if (Array.isArray(newParent)) {
+            if (insertPosition === 'append') {
+                newParent.push(movedValue);
+            } else if (insertPosition === 'before' || insertPosition === 'after') {
+                const index = parseInt(insertKey);
+                if (!isNaN(index) && index >= 0) {
+                    const insertIndex = insertPosition === 'after' ? index + 1 : index;
+                    newParent.splice(insertIndex, 0, movedValue);
+                } else {
+                    newParent.push(movedValue);
+                }
+            }
+        } else {
+            // Object - need a key for the new value
+            let newKey = 'newField';
+            let counter = 1;
+            while (newParent[newKey] !== undefined) {
+                newKey = `newField${counter++}`;
+            }
+            
+            if (insertPosition === 'append') {
+                newParent[newKey] = movedValue;
+            } else if (insertPosition === 'before' || insertPosition === 'after') {
+                const keys = Object.keys(newParent);
+                const index = keys.indexOf(insertKey);
+                
+                if (index === -1) {
+                    // Key not found, just append
+                    newParent[newKey] = movedValue;
+                } else {
+                    // Rebuild object with new item in correct position
+                    const newObj = {};
+                    keys.forEach((k, i) => {
+                        if (insertPosition === 'before' && i === index) {
+                            newObj[newKey] = movedValue;
+                        }
+                        newObj[k] = newParent[k];
+                        if (insertPosition === 'after' && i === index) {
+                            newObj[newKey] = movedValue;
+                        }
+                    });
+                    
+                    // Clear old object and assign new one
+                    Object.keys(newParent).forEach(k => delete newParent[k]);
+                    Object.assign(newParent, newObj);
+                }
+            }
+        }
         
         // Re-render and sync
         renderEditor();

style.css

@@ -394,4 +394,35 @@ p {
 .drag-handle:active {
     cursor: grabbing;
     color: rgba(255, 255, 255, 0.6);
+}
+
+/* Line numbers */
+#lineNumbersLeft,
+#lineNumbersRight {
+    border-top: 4px solid #334155;
+    border-bottom: 4px solid #334155;
+}
+
+#lineNumbersLeft {
+    border-right: 1px solid #475569;
+}
+
+#lineNumbersRight {
+    border-left: 1px solid #475569;
+}
+
+/* Coordinates display */
+#coordinates {
+    border: 1px solid #475569;
+    min-width: 150px;
+    text-align: center;
+}
+
+#coordinates span {
+    color: #94a3b8;
+}
+
+#coordinates span::before {
+    color: #60a5fa;
+    margin-right: 2px;
 }