feat(tree-view): implement context menu for the tree-view (Copy Path/Value, Extract, Remove)

Author: danivek

src/css/styles.css

@@ -548,6 +548,50 @@ body {
   background: var(--color-accent-light);
 }
 
+/* Context Menu */
+.context-menu {
+  position: absolute;
+  background: var(--color-bg-primary);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-lg);
+  padding: var(--space-xs) 0;
+  min-width: 160px;
+  z-index: 2000;
+  font-family: var(--font-primary);
+  font-size: var(--font-size-sm);
+  display: flex;
+  flex-direction: column;
+}
+
+.context-menu-item {
+  padding: var(--space-sm) var(--space-md);
+  color: var(--color-text-primary);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  transition: background 0.15s ease;
+}
+
+.context-menu-item:hover {
+  background: var(--color-bg-hover);
+}
+
+.context-menu-item.danger {
+  color: var(--color-error);
+}
+
+.context-menu-item.danger:hover {
+  background: rgba(239, 68, 68, 0.1);
+}
+
+.context-menu-divider {
+  height: 1px;
+  background: var(--color-border);
+  margin: var(--space-xs) 0;
+}
+
 /* Table View */
 .table-container {
   flex: 1;

src/js/editor/jsonEditor.js

@@ -437,8 +437,8 @@ class JsonEditor {
   }
 
   onContentChange() {
-    this.updateStatusBar();
     this.saveToHistory();
+    this.updateStatusBar();
 
     // Persist content to IndexedDB (Async)
     if (window.StorageUtils) {

src/js/editor/treeView.js

@@ -10,7 +10,12 @@ class TreeView {
     this.init();
   }
 
-  init() {}
+  init() {
+    this.contextMenu = null;
+    document.addEventListener('click', (e) => {
+      this.closeContextMenu();
+    });
+  }
 
   /**
    * Render JSON data as tree
@@ -97,6 +102,28 @@ class TreeView {
       e.stopPropagation();
     });
 
+    // Right-click context menu
+    header.addEventListener('contextmenu', (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      
+      const jsPath = this.getJsPath(currentPathArray);
+      const jsonPointer = this.getJsonPointer(currentPathArray);
+      
+      this.showContextMenu(e.clientX, e.clientY, {
+        jsPath,
+        jsonPointer,
+        value,
+        key,
+        pathArray: currentPathArray
+      });
+      
+      this.container
+        .querySelectorAll('.tree-node-header.selected')
+        .forEach((el) => el.classList.remove('selected'));
+      header.classList.add('selected');
+    });
+
     // Toggle arrow for expandable nodes
     const toggle = document.createElement('span');
     toggle.className = 'tree-toggle' + (isExpanded ? ' expanded' : '');
@@ -252,6 +279,149 @@ class TreeView {
     this.render();
   }
 
+  showContextMenu(x, y, data) {
+    this.closeContextMenu();
+
+    const menu = document.createElement('div');
+    menu.className = 'context-menu';
+    menu.style.left = `${x}px`;
+    menu.style.top = `${y}px`;
+
+    const createItem = (label, icon, onClick, isDanger = false) => {
+      const item = document.createElement('div');
+      item.className = `context-menu-item ${isDanger ? 'danger' : ''}`;
+      item.innerHTML = `<i data-lucide="${icon}" style="width: 14px; height: 14px;"></i> <span>${label}</span>`;
+      item.addEventListener('click', (e) => {
+        e.stopPropagation();
+        this.closeContextMenu();
+        onClick();
+      });
+      return item;
+    };
+
+    const createDivider = () => {
+      const divider = document.createElement('div');
+      divider.className = 'context-menu-divider';
+      return divider;
+    };
+
+    const copyToClipboard = async (text, successMsg) => {
+      try {
+        await navigator.clipboard.writeText(text);
+        if (window.App) App.showToast(successMsg, 'success');
+      } catch (err) {
+        if (window.App) App.showToast('Copy failed', 'error');
+      }
+    };
+
+    // --- Menu Items ---
+    
+    // 1. Copy Key (if not root)
+    if (data.key !== null && data.key !== undefined && data.key !== '') {
+      menu.appendChild(createItem('Copy Key', 'copy', () => copyToClipboard(String(data.key), 'Key copied')));
+    }
+    
+    // 2. Copy Value / Content
+    const valueString = typeof data.value === 'object' ? JSON.stringify(data.value, null, 2) : String(data.value);
+    const valueLabel = typeof data.value === 'object' ? 'Copy Content (JSON)' : 'Copy Value';
+    menu.appendChild(createItem(valueLabel, 'copy', () => copyToClipboard(valueString, 'Content copied')));
+    
+    menu.appendChild(createDivider());
+
+    // 3. Copy Paths
+    menu.appendChild(createItem('Copy JS Path', 'code', () => copyToClipboard(data.jsPath, 'JS Path copied')));
+    menu.appendChild(createItem('Copy JSON Pointer', 'link', () => copyToClipboard(data.jsonPointer, 'JSON Pointer copied')));
+
+    menu.appendChild(createDivider());
+
+    // 4. Extract (Replace content with extracted JSON)
+    if (typeof data.value === 'object') {
+      menu.appendChild(createItem('Extract (Replace content)', 'external-link', () => {
+        if (window.App && this.container) {
+          const editorPanel = this.container.closest('.editor-instance');
+          if (editorPanel) {
+             const instance = App.editors.find(e => e.wrapper === editorPanel);
+             if (instance) {
+               instance.setValue(valueString);
+               App.showToast('Extracted JSON into editor', 'success');
+             }
+          }
+        } else {
+          copyToClipboard(valueString, 'Extracted content copied');
+        }
+      }));
+    }
+
+    // 5. Remove Node
+    // Removing requires updating the actual JSON text and causing a re-render.
+    // It's safest to mutate the parsed object and text editor if in sync, but here we can just delete from this.data and re-render.
+    // However, to sync with Monaco text editor, we need to pass the updated JSON up.
+    if (data.pathArray.length > 0) { // Don't remove root
+       menu.appendChild(createItem('Remove Element', 'trash-2', () => {
+         this.removeNodeAtPath(data.pathArray);
+       }, true));
+    }
+
+    document.body.appendChild(menu);
+    this.contextMenu = menu;
+
+    if (window.lucide) {
+      lucide.createIcons({ root: menu });
+    }
+
+    // Adjust position if it goes off screen
+    const rect = menu.getBoundingClientRect();
+    if (rect.right > window.innerWidth) {
+      menu.style.left = `${window.innerWidth - rect.width - 10}px`;
+    }
+    if (rect.bottom > window.innerHeight) {
+      menu.style.top = `${window.innerHeight - rect.height - 10}px`;
+    }
+  }
+
+  closeContextMenu() {
+    if (this.contextMenu && this.contextMenu.parentNode) {
+      this.contextMenu.parentNode.removeChild(this.contextMenu);
+    }
+    this.contextMenu = null;
+  }
+
+  removeNodeAtPath(pathArray) {
+    if (!pathArray || pathArray.length === 0) return;
+    
+    // Deep clone data to avoid direct mutation issues, or mutate directly
+    // Let's mutate directly for simplicity
+    let current = this.data;
+    for (let i = 0; i < pathArray.length - 1; i++) {
+      current = current[pathArray[i]];
+    }
+    
+    const lastKey = pathArray[pathArray.length - 1];
+    
+    if (Array.isArray(current)) {
+      current.splice(Number(lastKey), 1);
+    } else {
+      delete current[lastKey];
+    }
+    
+    // Re-render tree
+    this.render();
+    
+    // Sync with TextEditor if possible
+    // We dispatch a custom event or check for global App
+    if (window.App && this.container) {
+      // Hacky way to find parent JsonEditor instance to update its text value
+      const editorPanel = this.container.closest('.editor-instance');
+      if (editorPanel) {
+         // App.editors array holds instances
+         const instance = App.editors.find(e => e.wrapper === editorPanel);
+         if (instance) {
+           instance.setValue(JSON.stringify(this.data, null, 2));
+         }
+      }
+    }
+  }
+
   clear() {
     this.data = null;
     this.expandedPaths.clear();