🐳 10/02 - 13:55 - The buttons and menu bar items still donlt wokr

script.js

@@ -0,0 +1,775 @@
+document.addEventListener('DOMContentLoaded', function() {
+    // Sample JSON data
+    const sampleJSON = {
+        "name": "John Doe",
+        "age": 30,
+        "isStudent": false,
+        "address": {
+            "street": "123 Main St",
+            "city": "Anytown",
+            "zipcode": "12345"
+        },
+        "hobbies": [
+            "reading",
+            "swimming",
+            "coding"
+        ],
+        "contact": {
+            "email": "john@example.com",
+            "phone": "555-1234"
+        }
+    };
+    
+    // DOM elements
+    const jsonEditor = document.getElementById('jsonEditor');
+    const jsonOutput = document.getElementById('jsonOutput');
+    const notification = document.getElementById('notification');
+    const copyBtn = document.getElementById('copyBtn');
+    const downloadBtn = document.getElementById('downloadBtn');
+    const applyCodeBtn = document.getElementById('applyCodeBtn');
+    const validationStatus = document.getElementById('validationStatus');
+    
+    // Create saved indicator
+    const savedIndicator = document.createElement('div');
+    savedIndicator.className = 'saved-indicator';
+    savedIndicator.innerHTML = '<i class="fas fa-check-circle mr-2"></i>Saved';
+    document.body.appendChild(savedIndicator);
+    
+    let isApplyingChanges = false;
+    
+    // Current state
+    let jsonData = {};
+    let history = [];
+    let historyIndex = -1;
+    const MAX_HISTORY = 50;
+    
+    // Track all editable fields for TAB navigation
+    let editableFields = [];
+    let currentFieldIndex = -1;
+    
+    // Layer colors for visual distinction
+    const layerColors = [
+        '#ef4444', '#f97316', '#eab308', '#22c55e',
+        '#06b6d4', '#3b82f6', '#8b5cf6', '#ec4899'
+    ];
+    
+    // Initialize with sample data
+    loadJSON(sampleJSON);
+    
+    // Create hidden file input for opening files
+    const fileInput = document.createElement('input');
+    fileInput.type = 'file';
+    fileInput.accept = 'application/json,.json';
+    fileInput.style.display = 'none';
+    document.body.appendChild(fileInput);
+    
+    // ==================== NEW JSON FUNCTION ====================
+    function newJSON() {
+        const newEmpty = {
+            "newField": "value"
+        };
+        loadJSON(newEmpty);
+        showNotification('New JSON created');
+    }
+    
+    document.getElementById('newBtn').addEventListener('click', newJSON);
+    document.getElementById('newBtn2').addEventListener('click', newJSON);
+    
+    // ==================== OPEN FILE FUNCTION ====================
+    function openFile() {
+        fileInput.click();
+    }
+    
+    fileInput.addEventListener('change', (event) => {
+        const file = event.target.files[0];
+        if (file) {
+            const reader = new FileReader();
+            reader.onload = (e) => {
+                try {
+                    const data = JSON.parse(e.target.result);
+                    loadJSON(data);
+                    showNotification('File loaded successfully!');
+                } catch (error) {
+                    showNotification('Error loading file: Invalid JSON');
+                }
+            };
+            reader.readAsText(file);
+        }
+    });
+    
+    document.getElementById('openBtn').addEventListener('click', openFile);
+    document.getElementById('openBtn2').addEventListener('click', openFile);
+    
+    // ==================== SAVE FILE FUNCTION ====================
+    function saveFile() {
+        const blob = new Blob([jsonOutput.value], { type: 'application/json' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = 'data.json';
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+        showNotification('JSON file saved!');
+    }
+    
+    document.getElementById('saveBtn').addEventListener('click', saveFile);
+    document.getElementById('saveBtn2').addEventListener('click', saveFile);
+    
+    // ==================== COPY FUNCTION ====================
+    copyBtn.addEventListener('click', () => {
+        jsonOutput.select();
+        document.execCommand('copy');
+        showNotification('JSON copied to clipboard!');
+    });
+    
+    document.getElementById('copyBtnMenu').addEventListener('click', () => {
+        jsonOutput.select();
+        document.execCommand('copy');
+        showNotification('JSON copied to clipboard!');
+    });
+    
+    // ==================== DOWNLOAD FUNCTION ====================
+    downloadBtn.addEventListener('click', () => {
+        saveFile();
+    });
+    
+    // ==================== UNDO/REDO FUNCTIONS ====================
+    function undo() {
+        if (historyIndex > 0) {
+            historyIndex--;
+            jsonData = JSON.parse(JSON.stringify(history[historyIndex]));
+            renderEditor();
+            updateOutput();
+            showNotification('Undo successful');
+        }
+    }
+    
+    function redo() {
+        if (historyIndex < history.length - 1) {
+            historyIndex++;
+            jsonData = JSON.parse(JSON.stringify(history[historyIndex]));
+            renderEditor();
+            updateOutput();
+            showNotification('Redo successful');
+        }
+    }
+    
+    // Menu undo/redo
+    document.getElementById('undoBtn').addEventListener('click', undo);
+    document.getElementById('redoBtn').addEventListener('click', redo);
+    
+    // Toolbar undo/redo
+    document.getElementById('undoBtn2').addEventListener('click', undo);
+    document.getElementById('redoBtn2').addEventListener('click', redo);
+    
+    // ==================== FORMAT FUNCTION ====================
+    function formatJSON() {
+        updateOutput();
+        showNotification('JSON formatted');
+    }
+    
+    document.getElementById('formatBtn').addEventListener('click', formatJSON);
+    document.getElementById('formatBtn2').addEventListener('click', formatJSON);
+    
+    // ==================== VALIDATE FUNCTION ====================
+    function validateJSON() {
+        try {
+            JSON.parse(jsonOutput.value);
+            showNotification('JSON is valid!');
+        } catch (e) {
+            showNotification('Invalid JSON: ' + e.message);
+        }
+    }
+    
+    document.getElementById('validateBtn').addEventListener('click', validateJSON);
+    document.getElementById('validateBtn2').addEventListener('click', validateJSON);
+    
+    // ==================== SAMPLE JSON FUNCTION ====================
+    document.getElementById('sampleBtn').addEventListener('click', () => {
+        loadJSON(sampleJSON);
+        showNotification('Sample JSON loaded');
+    });
+    
+    // ==================== INSTRUCTIONS FUNCTION ====================
+    document.getElementById('instructionsBtn').addEventListener('click', () => {
+        showNotification('Click on any key or value to edit. Use Tab to navigate, Shift+Enter to add new fields.');
+    });
+    
+    // ==================== CUT/PASTE/DEFAULT FUNCTIONS ====================
+    document.getElementById('cutBtnMenu').addEventListener('click', () => {
+        jsonOutput.select();
+        document.execCommand('copy');
+        document.execCommand('delete');
+        showNotification('Cut to clipboard');
+    });
+    
+    document.getElementById('pasteBtnMenu').addEventListener('click', () => {
+        navigator.clipboard.readText().then(text => {
+            try {
+                const data = JSON.parse(text);
+                loadJSON(data);
+                showNotification('JSON pasted and loaded');
+            } catch (e) {
+                jsonOutput.value += text;
+                showNotification('Text pasted');
+            }
+        }).catch(() => {
+            showNotification('Unable to access clipboard');
+        });
+    });
+    
+    document.getElementById('preferencesBtn').addEventListener('click', () => {
+        showNotification('Preferences coming soon!');
+    });
+    
+    // ==================== CORE EDITOR FUNCTIONS ====================
+    
+    // Load JSON data into the editor
+    function loadJSON(data) {
+        jsonData = JSON.parse(JSON.stringify(data));
+        renderEditor();
+        updateOutput();
+        saveToHistory();
+    }
+    
+    // Render the JSON editor
+    function renderEditor() {
+        jsonEditor.innerHTML = '';
+        editableFields = [];
+        currentFieldIndex = -1;
+        renderElement(jsonEditor, jsonData, 0, 'root');
+    }
+    
+    // Render a single JSON element (COMPLETE VERSION)
+    function renderElement(container, data, depth, key, parentKey = 'root') {
+        const layerClass = `lcars-layer-${Math.min(depth, 7)}`;
+        const layerColor = layerColors[Math.min(depth, 7)];
+        
+        if (typeof data === 'object' && data !== null) {
+            // Object or Array - render opening bracket and children
+            const wrapper = document.createElement('div');
+            wrapper.className = `json-item relative ${layerClass}`;
+            wrapper.dataset.key = key;
+            wrapper.dataset.parent = parentKey;
+            wrapper.dataset.depth = depth;
+            wrapper.dataset.layer = Math.min(depth, 7);
+            
+            // Layer indicator line (LCARS style)
+            const layerIndicator = document.createElement('div');
+            layerIndicator.className = 'layer-indicator';
+            layerIndicator.style.left = `${depth * 24}px`;
+            layerIndicator.style.background = layerColor;
+            layerIndicator.style.boxShadow = `2px 0 8px ${layerColor}`;
+            wrapper.appendChild(layerIndicator);
+            
+            const content = document.createElement('div');
+            content.className = 'json-item-content flex items-start py-1';
+            content.style.marginLeft = `${depth * 24 + 12}px`;
+            
+            // Key (for objects, not arrays)
+            if (!Array.isArray(data) && key !== 'root') {
+                const keySpan = document.createElement('span');
+                keySpan.className = 'json-key';
+                keySpan.textContent = `"${key}"`;
+                keySpan.style.color = '#93c5fd';
+                content.appendChild(keySpan);
+                
+                const colon = document.createElement('span');
+                colon.textContent = ': ';
+                colon.className = 'text-slate-500';
+                content.appendChild(colon);
+                
+                // Make key editable
+                keySpan.style.cursor = 'pointer';
+                keySpan.addEventListener('click', (e) => {
+                    e.stopPropagation();
+                    makeEditable(keySpan, 'key', key, parentKey);
+                });
+            }
+            
+            // Value or children
+            if (Array.isArray(data)) {
+                // Array
+                const bracket = document.createElement('span');
+                bracket.className = `json-bracket bracket-layer-${Math.min(depth, 7)}`;
+                bracket.textContent = '[';
+                content.appendChild(bracket);
+                
+                wrapper.appendChild(content);
+                container.appendChild(wrapper);
+                
+                // Render array items
+                data.forEach((item, index) => {
+                    renderElement(container, item, depth + 1, index, key);
+                });
+                
+                // Closing bracket
+                const closingWrapper = document.createElement('div');
+                closingWrapper.className = `json-item relative ${layerClass}`;
+                closingWrapper.dataset.key = 'closing';
+                closingWrapper.dataset.parent = key;
+                closingWrapper.dataset.depth = depth;
+                closingWrapper.dataset.layer = Math.min(depth, 7);
+                
+                const closingLayerIndicator = document.createElement('div');
+                closingLayerIndicator.className = 'layer-indicator';
+                closingLayerIndicator.style.left = `${depth * 24}px`;
+                closingWrapper.appendChild(closingLayerIndicator);
+                
+                const closingContent = document.createElement('div');
+                closingContent.className = 'json-item-content flex items-start py-1';
+                closingContent.style.marginLeft = `${depth * 24 + 12}px`;
+                const closingBracket = document.createElement('span');
+                closingBracket.className = `json-bracket bracket-layer-${Math.min(depth, 7)}`;
+                closingBracket.textContent = ']';
+                closingContent.appendChild(closingBracket);
+                closingWrapper.appendChild(closingContent);
+                container.appendChild(closingWrapper);
+            } else {
+                // Object
+                const bracket = document.createElement('span');
+                bracket.className = `json-bracket bracket-layer-${Math.min(depth, 7)}`;
+                bracket.textContent = '{';
+                content.appendChild(bracket);
+                
+                wrapper.appendChild(content);
+                container.appendChild(wrapper);
+                
+                // Render object properties
+                Object.keys(data).forEach(propKey => {
+                    renderElement(container, data[propKey], depth + 1, propKey, key);
+                });
+                
+                // Closing bracket
+                const closingWrapper = document.createElement('div');
+                closingWrapper.className = `json-item relative ${layerClass}`;
+                closingWrapper.dataset.key = 'closing';
+                closingWrapper.dataset.parent = key;
+                closingWrapper.dataset.depth = depth;
+                closingWrapper.dataset.layer = Math.min(depth, 7);
+                
+                const closingLayerIndicator = document.createElement('div');
+                closingLayerIndicator.className = 'layer-indicator';
+                closingLayerIndicator.style.left = `${depth * 24}px`;
+                closingWrapper.appendChild(closingLayerIndicator);
+                
+                const closingContent = document.createElement('div');
+                closingContent.className = 'json-item-content flex items-start py-1';
+                closingContent.style.marginLeft = `${depth * 24 + 12}px`;
+                const closingBracket = document.createElement('span');
+                closingBracket.className = `json-bracket bracket-layer-${Math.min(depth, 7)}`;
+                closingBracket.textContent = '}';
+                closingContent.appendChild(closingBracket);
+                closingWrapper.appendChild(closingContent);
+                container.appendChild(closingWrapper);
+            }
+        } else {
+            // Primitive value (string, number, boolean, null)
+            const wrapper = document.createElement('div');
+            wrapper.className = `json-item relative ${layerClass}`;
+            wrapper.dataset.key = key;
+            wrapper.dataset.parent = parentKey;
+            wrapper.dataset.depth = depth;
+            wrapper.dataset.layer = Math.min(depth, 7);
+            
+            // Layer indicator line
+            const layerIndicator = document.createElement('div');
+            layerIndicator.className = 'layer-indicator';
+            layerIndicator.style.left = `${depth * 24}px`;
+            layerIndicator.style.background = layerColor;
+            layerIndicator.style.boxShadow = `2px 0 8px ${layerColor}`;
+            wrapper.appendChild(layerIndicator);
+            
+            const content = document.createElement('div');
+            content.className = 'json-item-content flex items-start py-1';
+            content.style.marginLeft = `${depth * 24 + 12}px`;
+            
+            // Key
+            if (key !== 'root') {
+                const keySpan = document.createElement('span');
+                keySpan.className = 'json-key';
+                keySpan.textContent = `"${key}"`;
+                keySpan.style.color = '#93c5fd';
+                content.appendChild(keySpan);
+                
+                const colon = document.createElement('span');
+                colon.textContent = ': ';
+                colon.className = 'text-slate-500';
+                content.appendChild(colon);
+                
+                // Make key editable
+                keySpan.style.cursor = 'pointer';
+                keySpan.addEventListener('click', (e) => {
+                    e.stopPropagation();
+                    makeEditable(keySpan, 'key', key, parentKey);
+                });
+            }
+            
+            // Value
+            const valueSpan = document.createElement('span');
+            valueSpan.className = 'json-value';
+            if (typeof data === 'string') {
+                valueSpan.textContent = `"${data}"`;
+                valueSpan.style.color = '#6ee7b7';
+            } else if (typeof data === 'number') {
+                valueSpan.textContent = data;
+                valueSpan.style.color = '#f472b6';
+            } else if (typeof data === 'boolean') {
+                valueSpan.textContent = data;
+                valueSpan.style.color = '#fbbf24';
+            } else if (data === null) {
+                valueSpan.textContent = 'null';
+                valueSpan.style.color = '#94a3b8';
+            }
+            content.appendChild(valueSpan);
+            
+            // Make value editable
+            valueSpan.style.cursor = 'pointer';
+            valueSpan.addEventListener('click', (e) => {
+                e.stopPropagation();
+                makeEditable(valueSpan, 'value', key, parentKey);
+            });
+            
+            wrapper.appendChild(content);
+            container.appendChild(wrapper);
+        }
+    }
+    
+    // Make an element editable
+    function makeEditable(span, type, key, parentKey) {
+        const currentValue = type === 'key' ? key : getValue(parentKey, key);
+        let displayValue = type === 'key' ? currentValue : JSON.stringify(currentValue);
+        
+        // Remove quotes from display for editing
+        if (displayValue.startsWith('"') && displayValue.endsWith('"')) {
+            displayValue = displayValue.slice(1, -1);
+        }
+        
+        const input = document.createElement('input');
+        input.type = 'text';
+        input.value = displayValue;
+        input.className = `editable-field ${type}-input`;
+        
+        // Replace span with input
+        span.parentNode.replaceChild(input, span);
+        input.focus();
+        input.select();
+        
+        // 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) {
+                    renameKey(parentKey, key, newValue);
+                }
+            } else {
+                // Update the value
+                const parsedValue = parseValue(newValue);
+                if (JSON.stringify(parsedValue) !== JSON.stringify(currentValue)) {
+                    updateValue(parentKey, key, parsedValue);
+                }
+            }
+        };
+        
+        input.addEventListener('blur', saveEdit);
+        input.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter') {
+                e.preventDefault();
+                input.blur();
+            } else if (e.key === 'Tab') {
+                e.preventDefault();
+                const direction = e.shiftKey ? -1 : 1;
+                navigateFields(direction);
+            } else if (e.shiftKey && e.key === 'Enter') {
+                e.preventDefault();
+                saveEdit();
+                insertNewField({ key, parentKey });
+            }
+        });
+    }
+    
+    // Navigate to next/previous editable field
+    function navigateFields(direction) {
+        // Find all editable spans
+        const keys = jsonEditor.querySelectorAll('.json-key');
+        const values = jsonEditor.querySelectorAll('.json-value');
+        const allFields = [];
+        
+        keys.forEach(k => allFields.push({ element: k, type: 'key' }));
+        values.forEach(v => allFields.push({ element: v, type: 'value' }));
+        
+        let currentIndex = -1;
+        for (let i = 0; i < allFields.length; i++) {
+            if (document.activeElement === allFields[i].element || 
+                document.activeElement.parentNode === allFields[i].element.parentNode) {
+                currentIndex = i;
+                break;
+            }
+        }
+        
+        let nextIndex = currentIndex + direction;
+        if (nextIndex < 0) nextIndex = allFields.length - 1;
+        if (nextIndex >= allFields.length) nextIndex = 0;
+        
+        if (allFields[nextIndex]) {
+            allFields[nextIndex].element.click();
+        }
+    }
+    
+    // Get nested value
+    function getValue(parentKey, key) {
+        if (parentKey === 'root') {
+            return jsonData[key];
+        }
+        const parent = findElementByKey(jsonData, parentKey);
+        if (parent && typeof parent === 'object') {
+            return parent[key];
+        }
+        return undefined;
+    }
+    
+    // Update a value
+    function updateValue(parentKey, key, newValue) {
+        if (parentKey === 'root') {
+            jsonData[key] = newValue;
+        } else {
+            const parent = findElementByKey(jsonData, parentKey);
+            if (parent && typeof parent === 'object') {
+                parent[key] = newValue;
+            }
+        }
+        renderEditor();
+        updateOutput();
+        saveToHistory();
+        showSavedIndicator();
+    }
+    
+    // Rename a key
+    function renameKey(parentKey, oldKey, newKey) {
+        if (parentKey === 'root') {
+            jsonData[newKey] = jsonData[oldKey];
+            delete jsonData[oldKey];
+        } else {
+            const parent = findElementByKey(jsonData, parentKey);
+            if (parent && typeof parent === 'object' && !Array.isArray(parent)) {
+                parent[newKey] = parent[oldKey];
+                delete parent[oldKey];
+            }
+        }
+        renderEditor();
+        updateOutput();
+        saveToHistory();
+        showSavedIndicator();
+    }
+    
+    // Insert a new field after the current one
+    function insertNewField(currentFieldData) {
+        const { key, parentKey } = currentFieldData;
+        
+        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) {
+                newData[newKey] = '';
+            }
+            
+            jsonData = newData;
+        } else {
+            const parent = findElementByKey(jsonData, parentKey);
+            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) {
+                    newData[newKey] = '';
+                }
+                
+                Object.keys(parent).forEach(k => delete parent[k]);
+                Object.assign(parent, newData);
+            }
+        }
+        
+        renderEditor();
+        updateOutput();
+        saveToHistory();
+        showSavedIndicator();
+    }
+    
+    // Parse a value from string to appropriate type
+    function parseValue(value) {
+        if (value === 'true') return true;
+        if (value === 'false') return false;
+        if (value === 'null') return null;
+        if (!isNaN(value) && value.trim() !== '' && !isNaN(Number(value))) {
+            return Number(value);
+        }
+        return value;
+    }
+    
+    // Show saved indicator
+    function showSavedIndicator() {
+        savedIndicator.classList.add('show');
+        setTimeout(() => {
+            savedIndicator.classList.remove('show');
+        }, 1500);
+    }
+    
+    // Find an element by key in nested structure
+    function findElementByKey(obj, key) {
+        if (obj[key] !== undefined) return obj;
+        
+        for (let prop in obj) {
+            if (typeof obj[prop] === 'object' && obj[prop] !== null) {
+                const result = findElementByKey(obj[prop], key);
+                if (result) return result;
+            }
+        }
+        
+        return null;
+    }
+    
+    // Update JSON output
+    function updateOutput() {
+        if (isApplyingChanges) return;
+        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>';
+        } 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>';
+        }
+    }
+    
+    // Apply changes from code editor to visual editor
+    function applyCodeChanges() {
+        if (!jsonOutput.value.trim()) return false;
+        try {
+            const newData = JSON.parse(jsonOutput.value);
+            isApplyingChanges = true;
+            jsonData = JSON.parse(JSON.stringify(newData));
+            renderEditor();
+            updateOutput();
+            saveToHistory();
+            isApplyingChanges = false;
+            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
+    jsonOutput.addEventListener('input', () => {
+        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>';
+        } 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>';
+        }
+    });
+    
+    // Apply button click
+    applyCodeBtn.addEventListener('click', applyCodeChanges);
+    
+    // Auto-apply on Ctrl+Enter or Cmd+Enter
+    jsonOutput.addEventListener('keydown', (e) => {
+        if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
+            e.preventDefault();
+            applyCodeChanges();
+        }
+    });
+    
+    // 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();
+        const pasteHandler = (text) => {
+            try {
+                const data = JSON.parse(text);
+                loadJSON(data);
+                showNotification('JSON pasted and loaded successfully');
+            } catch (parseError) {
+                const start = jsonOutput.selectionStart;
+                const end = jsonOutput.selectionEnd;
+                const currentValue = jsonOutput.value;
+                jsonOutput.value = currentValue.substring(0, start) + text + currentValue.substring(end);
+            }
+        };
+        
+        navigator.clipboard.readText().then(text => {
+            pasteHandler(text);
+        }).catch(err => {
+            const text = (e.originalEvent || e).clipboardData.getData('text/plain');
+            pasteHandler(text);
+        });
+    });
+    
+    // Show notification
+    function showNotification(message) {
+        const notificationContent = notification.querySelector('p');
+        notificationContent.textContent = message;
+        notification.classList.add('show');
+        
+        setTimeout(() => {
+            notification.classList.remove('show');
+        }, 3000);
+    }
+    
+    // Save to history for undo/redo
+    function saveToHistory() {
+        if (historyIndex < history.length - 1) {
+            history = history.slice(0, historyIndex + 1);
+        }
+        
+        if (history.length >= MAX_HISTORY) {
+            history.shift();
+            historyIndex--;
+        }
+        
+        if (history.length > 0 && JSON.stringify(history[historyIndex]) === JSON.stringify(jsonData)) {
+            return;
+        }
+        
+        history.push(JSON.parse(JSON.stringify(jsonData)));
+        historyIndex = history.length - 1;
+    }
+});