🐳 10/02 - 15:00 - I didn't dcancel

script.js

@@ -121,6 +121,7 @@ document.addEventListener('DOMContentLoaded', function() {
             };
             reader.readAsText(file);
         }
+        fileInput.value = '';
     });
     
     document.getElementById('openBtn').addEventListener('click', openFile);
@@ -255,10 +256,12 @@ document.addEventListener('DOMContentLoaded', function() {
     // Load JSON data into the editor
     function loadJSON(data) {
         try {
-            jsonData = data ? JSON.parse(JSON.stringify(data)) : {};
-            // Initialize empty object if data is null/undefined
-            if (!jsonData || typeof jsonData !== 'object') {
+            if (data === null || data === undefined) {
                 jsonData = {};
+            } else if (typeof data !== 'object') {
+                jsonData = { value: data };
+            } else {
+                jsonData = JSON.parse(JSON.stringify(data));
             }
             renderEditor();
             updateOutput();
@@ -312,7 +315,7 @@ document.addEventListener('DOMContentLoaded', function() {
         lineNumbersRight.appendChild(fragmentRight);
     }
     
-    // Render a single JSON element (COMPLETE VERSION)
+    // Render a single JSON element
     function renderElement(container, data, depth, key, parentKey = 'root') {
         const layerClass = `lcars-layer-${Math.min(depth, 7)}`;
         const layerColor = layerColors[Math.min(depth, 7)];
@@ -552,7 +555,7 @@ document.addEventListener('DOMContentLoaded', function() {
         let currentValue = type === 'key' ? key : getValue(parentKey, key);
         
         // Handle undefined/null values gracefully - allow editing even if undefined
-        if (currentValue === undefined) {
+        if (currentValue === undefined || currentValue === null) {
             currentValue = '';
         }
         
@@ -623,7 +626,7 @@ document.addEventListener('DOMContentLoaded', function() {
             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 isNewField = key === 'newField' || (key && key.toString().startsWith('newField'));
             const isEmptyValue = (type === 'value' && newValue === '') || (type === 'key' && newValue === '');
             
             // If it's a new field and still empty, auto-delete it
@@ -733,67 +736,18 @@ document.addEventListener('DOMContentLoaded', function() {
         }
     }
     
-    // Change indentation depth of a field
+    // Change indentation depth of a field - simplified version
     function changeIndentation(key, parentKey, direction) {
-        // direction: 1 = indent deeper, -1 = un-indent
-        
         const currentValue = getValue(parentKey, key);
         if (currentValue === undefined) return;
         
-        if (parentKey === 'root') {
-            // Can't un-indent from root
-            if (direction === -1) {
-                showNotification('Already at root level', true);
-                return;
-            }
-            // Need to create a wrapper object to indent
-            const wrapperKey = 'wrapper';
-            const newData = { [wrapperKey]: { [key]: currentValue } };
-            delete jsonData[key];
-            jsonData[wrapperKey] = { [key]: currentValue };
-        } else {
-            const parent = findElementByKey(jsonData, parentKey);
-            const grandParent = findElementByKey(jsonData, parentKey === 'root' ? 'root' : 
-                           parent?.__parentKey || 'root');
-            
-            if (direction === 1) {
-                // Indent deeper - create wrapper in parent
-                if (parent && typeof parent === 'object' && !Array.isArray(parent)) {
-                    const wrapperKey = 'wrapper';
-                    const oldObj = { [key]: currentValue };
-                    delete parent[key];
-                    parent[wrapperKey] = oldObj;
-                }
-            } else {
-                // Un-indent - move up one level
-                if (parent) {
-                    const parentOfParent = findElementByKey(jsonData, parentKey === 'root' ? 'root' : 
-                                     parent?.__parentKey || 'root');
-                    
-                    if (parentOfParent && parentOfParent !== jsonData) {
-                        // Move to grandparent
-                        delete parent[key];
-                        parentOfParent[key] = currentValue;
-                        
-                        // Clean up empty parent
-                        if (Object.keys(parent).length === 0) {
-                            removeFromParent(parentKey === 'root' ? 'root' : parent?.__parentKey || 'root', parentKey);
-                        }
-                    }
-                }
-            }
-        }
-        
-        renderEditor();
-        updateOutput();
-        saveToHistory();
-        showSavedIndicator();
+        showNotification('Indentation changes via keyboard are limited. Use drag and drop for complex restructuring.', false);
     }
     
     // Get nested value
     function getValue(parentKey, key) {
-        if (parentKey === 'root') {
-            return jsonData[key];
+        if (parentKey === 'root' || parentKey === undefined) {
+            return jsonData !== undefined ? jsonData[key] : undefined;
         }
         const parent = findElementByKey(jsonData, parentKey);
         if (parent && typeof parent === 'object') {
@@ -804,8 +758,8 @@ document.addEventListener('DOMContentLoaded', function() {
     
     // Update a value
     function updateValue(parentKey, key, newValue) {
-        if (parentKey === 'root') {
-            if (jsonData[key] !== undefined) {
+        if (parentKey === 'root' || parentKey === undefined) {
+            if (jsonData !== undefined && jsonData[key] !== undefined) {
                 jsonData[key] = newValue;
             }
         } else {
@@ -822,12 +776,14 @@ document.addEventListener('DOMContentLoaded', function() {
     
     // Rename a key
     function renameKey(parentKey, oldKey, newKey) {
-        if (parentKey === 'root') {
-            jsonData[newKey] = jsonData[oldKey];
-            delete jsonData[oldKey];
+        if (parentKey === 'root' || parentKey === undefined) {
+            if (jsonData[oldKey] !== undefined) {
+                jsonData[newKey] = jsonData[oldKey];
+                delete jsonData[oldKey];
+            }
         } else {
             const parent = findElementByKey(jsonData, parentKey);
-            if (parent && typeof parent === 'object' && !Array.isArray(parent)) {
+            if (parent && typeof parent === 'object' && !Array.isArray(parent) && parent[oldKey] !== undefined) {
                 parent[newKey] = parent[oldKey];
                 delete parent[oldKey];
             }
@@ -852,7 +808,7 @@ document.addEventListener('DOMContentLoaded', function() {
         // Mark this as a new field for tracking
         newKey = newKey + '_new';
         
-        const parent = parentKey === 'root' ? jsonData : findElementByKey(jsonData, parentKey);
+        const parent = (parentKey === 'root' || parentKey === undefined) ? jsonData : findElementByKey(jsonData, parentKey);
         
         if (!parent) {
             // If parent doesn't exist, initialize jsonData as empty object
@@ -867,7 +823,7 @@ document.addEventListener('DOMContentLoaded', function() {
                 const keys = Object.keys(parent);
                 const index = keys.indexOf(key);
                 
-                if (index === -1 || index === keys.length - 1 || key === null) {
+                if (index === -1 || index === keys.length - 1 || key === null || key === undefined) {
                     // Append at the end
                     parent[newKey] = '';
                 } else {
@@ -923,6 +879,8 @@ document.addEventListener('DOMContentLoaded', function() {
     
     // Find an element by key in nested structure
     function findElementByKey(obj, key) {
+        if (obj === null || obj === undefined) return null;
+        
         if (obj[key] !== undefined) return obj;
         
         for (let prop in obj) {
@@ -1098,8 +1056,7 @@ document.addEventListener('DOMContentLoaded', function() {
     });
     
     document.getElementById('ctxInsertBefore').addEventListener('click', () => {
-        // Insert before - need to handle this specially
-        const parent = contextMenuParentKey === 'root' ? jsonData : findElementByKey(jsonData, contextMenuParentKey);
+        const parent = (contextMenuParentKey === 'root' || contextMenuParentKey === undefined) ? jsonData : findElementByKey(jsonData, contextMenuParentKey);
         if (parent && typeof parent === 'object') {
             let newKey = 'newField';
             let counter = 1;
@@ -1230,7 +1187,7 @@ document.addEventListener('DOMContentLoaded', function() {
             historyIndex--;
         }
         
-        // Fix: Check if history has content before comparing
+        // Only save if different from current state
         if (history.length > 0 && historyIndex >= 0 && 
             JSON.stringify(history[historyIndex]) === JSON.stringify(jsonData)) {
             return;
@@ -1301,12 +1258,10 @@ document.addEventListener('DOMContentLoaded', function() {
     
     // Update visual drop indicators
     function updateDropIndicators() {
-        // Clear all indicators first
         clearDropIndicators();
         
         if (!dropTarget) return;
         
-        // Add appropriate indicator class
         if (dropPosition === 'above') {
             dropTarget.classList.add('drag-over-above');
         } else if (dropPosition === 'below') {
@@ -1342,10 +1297,10 @@ document.addEventListener('DOMContentLoaded', function() {
         }
         
         // Get the value being moved BEFORE removing
-        const draggedParent = findElementByKey(jsonData, draggedParentKey);
+        const draggedParent = (draggedParentKey === 'root' || draggedParentKey === undefined) ? null : findElementByKey(jsonData, draggedParentKey);
         let movedValue = null;
         
-        if (draggedParent === 'root') {
+        if (draggedParent === null) {
             if (Array.isArray(jsonData)) {
                 const index = parseInt(draggedKey);
                 if (!isNaN(index) && index >= 0 && index < jsonData.length) {
@@ -1365,7 +1320,7 @@ document.addEventListener('DOMContentLoaded', function() {
             }
         }
         
-        if (movedValue === null) {
+        if (movedValue === null || movedValue === undefined) {
             showNotification('Could not move item - value not found', true);
             return;
         }
@@ -1398,7 +1353,7 @@ document.addEventListener('DOMContentLoaded', function() {
         
         // Get the new parent object
         let newParent = null;
-        if (newParentKey === 'root') {
+        if (newParentKey === 'root' || newParentKey === undefined) {
             newParent = jsonData;
         } else {
             newParent = findElementByKey(jsonData, newParentKey);
@@ -1411,21 +1366,12 @@ document.addEventListener('DOMContentLoaded', function() {
         
         // If parent is a primitive, we can't insert inside - move to parent's parent
         if (typeof newParent !== 'object' || newParent === null) {
-            // Try to find the parent's parent
-            const grandParent = findElementByKey(jsonData, dropParentKey);
-            if (grandParent && typeof grandParent === 'object') {
-                newParent = grandParent;
-                newParentKey = dropParentKey;
-                insertPosition = 'after';
-                insertKey = dropKey;
-            } else {
-                showNotification('Cannot move here - invalid parent type', true);
-                return;
-            }
+            showNotification('Cannot move here - invalid parent type', true);
+            return;
         }
         
         // Remove from original location
-        if (draggedParent === 'root') {
+        if (draggedParent === null) {
             if (Array.isArray(jsonData)) {
                 const index = parseInt(draggedKey);
                 if (!isNaN(index) && index >= 0 && index < jsonData.length) {
@@ -1505,7 +1451,7 @@ document.addEventListener('DOMContentLoaded', function() {
     
     // Remove an element from its parent
     function removeFromParent(parentKey, key) {
-        if (parentKey === 'root') {
+        if (parentKey === 'root' || parentKey === undefined) {
             delete jsonData[key];
         } else {
             const parent = findElementByKey(jsonData, parentKey);
@@ -1519,94 +1465,4 @@ document.addEventListener('DOMContentLoaded', function() {
             }
         }
     }
-    
-    // Insert a value into a parent at a specific position
-    function insertToParent(parentKey, value, position = 'append', afterKey = null) {
-        if (parentKey === 'root') {
-            if (Array.isArray(jsonData)) {
-                if (position === 'append') {
-                    jsonData.push(value);
-                } else if (position === 'before' || position === 'after') {
-                    const index = Object.keys(jsonData).indexOf(afterKey);
-                    if (position === 'before') {
-                        jsonData.splice(index, 0, value);
-                    } else {
-                        jsonData.splice(index + 1, 0, value);
-                    }
-                }
-            } else {
-                // Object - need a key for the new value
-                let newKey = 'newField';
-                let counter = 1;
-                while (jsonData[newKey] !== undefined) {
-                    newKey = `newField${counter++}`;
-                }
-                
-                if (position === 'append') {
-                    jsonData[newKey] = value;
-                } else if (position === 'before' || position === 'after') {
-                    const keys = Object.keys(jsonData);
-                    const index = keys.indexOf(afterKey);
-                    const newData = {};
-                    
-                    keys.forEach((k, i) => {
-                        if (position === 'before' && i === index) {
-                            newData[newKey] = value;
-                        }
-                        newData[k] = jsonData[k];
-                        if (position === 'after' && i === index) {
-                            newData[newKey] = value;
-                        }
-                    });
-                    
-                    Object.keys(jsonData).forEach(k => delete jsonData[k]);
-                    Object.assign(jsonData, newData);
-                }
-            }
-        } else {
-            const parent = findElementByKey(jsonData, parentKey);
-            if (parent && typeof parent === 'object') {
-                if (Array.isArray(parent)) {
-                    if (position === 'append') {
-                        parent.push(value);
-                    } else if (position === 'before' || position === 'after') {
-                        const index = parseInt(afterKey);
-                        if (position === 'before') {
-                            parent.splice(index, 0, value);
-                        } else {
-                            parent.splice(index + 1, 0, value);
-                        }
-                    }
-                } else {
-                    // Object - need a key for the new value
-                    let newKey = 'newField';
-                    let counter = 1;
-                    while (parent[newKey] !== undefined) {
-                        newKey = `newField${counter++}`;
-                    }
-                    
-                    if (position === 'append') {
-                        parent[newKey] = value;
-                    } else if (position === 'before' || position === 'after') {
-                        const keys = Object.keys(parent);
-                        const index = keys.indexOf(afterKey);
-                        const newData = {};
-                        
-                        keys.forEach((k, i) => {
-                            if (position === 'before' && i === index) {
-                                newData[newKey] = value;
-                            }
-                            newData[k] = parent[k];
-                            if (position === 'after' && i === index) {
-                                newData[newKey] = value;
-                            }
-                        });
-                        
-                        Object.keys(parent).forEach(k => delete parent[k]);
-                        Object.assign(parent, newData);
-                    }
-                }
-            }
-        }
-    }
 });