Improve ObjectEditor and PostmanTable UI/UX

- Enhanced JSON parsing with smart error handling for trailing commas - Fixed StructuredEditor array handling - array indices now non-editable - Improved PostmanTable styling: removed border radius, solid thead background - Enhanced icon spacing and alignment for better visual hierarchy - Added copy feedback system with green check icons (2500ms duration) - Restructured MindmapView node layout with dedicated action column - Added HTML rendering toggle for PostmanTable similar to MindmapView - Implemented consistent copy functionality across components - Removed debug console.log statements for cleaner codebase
2025-09-24 14:05:10 +07:00
parent 57655410ab
commit 21d0406ece
6 changed files with 306 additions and 201 deletions
--- a/src/components/MindmapView.js
+++ b/src/components/MindmapView.js
@@ -21,6 +21,7 @@ import {
  FileText,
  Zap,
  Copy,
+  Check,
  Eye,
  Code,
  Maximize,
@@ -34,6 +35,7 @@ import {
 // Custom node component for different data types
 const CustomNode = ({ data, selected }) => {
  const [renderHtml, setRenderHtml] = React.useState(true);
+  const [isCopied, setIsCopied] = React.useState(false);
  
  // Check if value contains HTML
  const isHtmlContent = data.value && typeof data.value === 'string' && 
@@ -44,8 +46,13 @@ const CustomNode = ({ data, selected }) => {
    if (data.value) {
      try {
        await navigator.clipboard.writeText(String(data.value));
+        setIsCopied(true);
+        setTimeout(() => setIsCopied(false), 2500);
      } catch (err) {
        console.error('Failed to copy:', err);
+        // Still show feedback even if copy failed
+        setIsCopied(true);
+        setTimeout(() => setIsCopied(false), 2500);
      }
    }
  };
@@ -131,21 +138,12 @@ const CustomNode = ({ data, selected }) => {
      )}
      
      <div className="flex items-start space-x-2 group">
-        <div className="flex-shrink-0 flex flex-col items-center space-y-1">
-          <div className="mt-0.5">
-            {getIcon()}
-          </div>
-          {/* Copy button positioned below icon */}
-          {data.value && (
-            <button
-              onClick={copyValue}
-              className="bg-blue-500 hover:bg-blue-600 text-white rounded-full p-1 opacity-80 hover:opacity-100 transition-all shadow-md"
-              title="Copy value to clipboard"
-            >
-              <Copy className="h-2.5 w-2.5" />
-            </button>
-          )}
+        {/* Icon - First flex item */}
+        <div className="flex-shrink-0 mt-0.5">
+          {getIcon()}
        </div>
+        
+        {/* Content - Second flex item */}
        <div className="flex-1 min-w-0">
          <div className="font-medium text-xs break-words">
            {data.label}
@@ -170,6 +168,28 @@ const CustomNode = ({ data, selected }) => {
            </div>
          )}
        </div>
+        
+        {/* Actions - Third flex item */}
+        <div className="flex-shrink-0 flex flex-col items-center space-y-1">
+          {data.value && (
+            <button
+              onClick={copyValue}
+              className={`rounded-full p-1 opacity-80 hover:opacity-100 transition-all shadow-md ${
+                isCopied 
+                  ? 'bg-green-500 hover:bg-green-600' 
+                  : 'bg-blue-500 hover:bg-blue-600'
+              } text-white`}
+              title={isCopied ? "Copied!" : "Copy value to clipboard"}
+            >
+              {isCopied ? (
+                <Check className="h-2.5 w-2.5" />
+              ) : (
+                <Copy className="h-2.5 w-2.5" />
+              )}
+            </button>
+          )}
+          {/* Future action buttons can be added here */}
+        </div>
      </div>
      
      {/* Output handle (right side) */}
--- a/src/components/PostmanTable.js
+++ b/src/components/PostmanTable.js
@@ -1,8 +1,10 @@
 import React, { useState } from 'react';
-import { ChevronLeft, Braces, List, Type, Hash, ToggleLeft, Minus } from 'lucide-react';
+import { ChevronLeft, Braces, List, Type, Hash, ToggleLeft, Minus, Eye, Code, Copy, Check } from 'lucide-react';

 const PostmanTable = ({ data, title = "JSON Data" }) => {
  const [currentPath, setCurrentPath] = useState([]);
+  const [renderHtml, setRenderHtml] = useState(true);
+  const [copiedItems, setCopiedItems] = useState(new Set());

  // Get current data based on path
  const getCurrentData = () => {
@@ -44,6 +46,49 @@ const PostmanTable = ({ data, title = "JSON Data" }) => {

  const headers = getArrayHeaders();

+  // Check if value contains HTML
+  const isHtmlContent = (value) => {
+    return value && typeof value === 'string' && 
+           (value.includes('<') && value.includes('>')) &&
+           /<[^>]+>/.test(value);
+  };
+
+  // Copy value to clipboard
+  const copyToClipboard = async (value, itemId) => {
+    try {
+      const textValue = typeof value === 'string' ? value : JSON.stringify(value, null, 2);
+      await navigator.clipboard.writeText(textValue);
+      
+      // Show feedback
+      setCopiedItems(prev => new Set([...prev, itemId]));
+      setTimeout(() => {
+        setCopiedItems(prev => {
+          const newSet = new Set(prev);
+          newSet.delete(itemId);
+          return newSet;
+        });
+      }, 2500);
+    } catch (err) {
+      // Fallback for older browsers
+      const textArea = document.createElement('textarea');
+      textArea.value = typeof value === 'string' ? value : JSON.stringify(value, null, 2);
+      document.body.appendChild(textArea);
+      textArea.select();
+      document.execCommand('copy');
+      document.body.removeChild(textArea);
+      
+      // Show feedback for fallback too
+      setCopiedItems(prev => new Set([...prev, itemId]));
+      setTimeout(() => {
+        setCopiedItems(prev => {
+          const newSet = new Set(prev);
+          newSet.delete(itemId);
+          return newSet;
+        });
+      }, 2500);
+    }
+  };
+
  // Handle row click - navigate to item details
  const handleRowClick = (index, key = null) => {
    if (isArrayView) {
@@ -87,11 +132,32 @@ const PostmanTable = ({ data, title = "JSON Data" }) => {
    return parts;
  };

-  // Format value for display
+  // Format value for display in table (truncated)
  const formatValue = (value) => {
    if (value === null) return 'null';
    if (value === undefined) return 'undefined';
-    if (typeof value === 'string') return value;
+    if (typeof value === 'string') {
+      // Truncate long strings for table display
+      if (value.length > 100) {
+        return value.substring(0, 100) + '...';
+      }
+      // Replace newlines with spaces for single-line display
+      return value.replace(/\n/g, ' ').replace(/\s+/g, ' ');
+    }
+    if (typeof value === 'boolean') return value.toString();
+    if (typeof value === 'number') return value.toString();
+    if (typeof value === 'object') {
+      if (Array.isArray(value)) return `Array(${value.length})`;
+      return `Object(${Object.keys(value).length})`;
+    }
+    return String(value);
+  };
+
+  // Format value for display in details view (full text)
+  const formatFullValue = (value) => {
+    if (value === null) return 'null';
+    if (value === undefined) return 'undefined';
+    if (typeof value === 'string') return value; // Show full string without truncation
    if (typeof value === 'boolean') return value.toString();
    if (typeof value === 'number') return value.toString();
    if (typeof value === 'object') {
@@ -154,19 +220,69 @@ const PostmanTable = ({ data, title = "JSON Data" }) => {
  };


-  // Render value with appropriate styling
+  // Render value with appropriate styling (for table view)
  const renderValue = (value) => {
    const typeStyle = getTypeStyle(value);
    const formattedValue = formatValue(value);
    
    return (
-      <span className={`inline-flex items-center space-x-1 px-2 py-1 rounded-full text-xs font-medium ${typeStyle.color}`}>
+      <span className={`inline-flex items-center space-x-1 px-2 py-1 rounded text-xs font-medium ${typeStyle.color}`}>
        {typeStyle.icon}
        <span>{formattedValue}</span>
      </span>
    );
  };

+  // Render value with full text (for detail view)
+  const renderFullValue = (value) => {
+    const typeStyle = getTypeStyle(value);
+    const formattedValue = formatFullValue(value);
+    const hasHtml = isHtmlContent(value);
+    
+    return (
+      <div className="relative">
+        <span className={`inline-flex items-start space-x-2 px-2 py-1 rounded text-xs font-medium ${typeStyle.color}`}>
+          <span className="flex-shrink-0 mt-0.5">{typeStyle.icon}</span>
+          <span className="whitespace-pre-wrap break-words flex-1">
+            {hasHtml && renderHtml ? (
+              <div dangerouslySetInnerHTML={{ __html: String(value) }} />
+            ) : (
+              formattedValue
+            )}
+          </span>
+        </span>
+        
+        {/* HTML Toggle Buttons */}
+        {hasHtml && (
+          <div className="absolute -top-1 -right-1 flex">
+            <button
+              onClick={() => setRenderHtml(true)}
+              className={`px-1.5 py-0.5 text-xs rounded-l ${
+                renderHtml 
+                  ? 'bg-blue-500 text-white' 
+                  : 'bg-gray-200 text-gray-600 hover:bg-gray-300 dark:bg-gray-600 dark:text-gray-300 dark:hover:bg-gray-500'
+              }`}
+              title="Render HTML"
+            >
+              <Eye className="h-3 w-3" />
+            </button>
+            <button
+              onClick={() => setRenderHtml(false)}
+              className={`px-1.5 py-0.5 text-xs rounded-r ${
+                !renderHtml 
+                  ? 'bg-blue-500 text-white' 
+                  : 'bg-gray-200 text-gray-600 hover:bg-gray-300 dark:bg-gray-600 dark:text-gray-300 dark:hover:bg-gray-500'
+              }`}
+              title="Show Raw HTML"
+            >
+              <Code className="h-3 w-3" />
+            </button>
+          </div>
+        )}
+      </div>
+    );
+  };
+
  // Get value type
  const getValueType = (value) => {
    if (value === null) return 'null';
@@ -175,7 +291,7 @@ const PostmanTable = ({ data, title = "JSON Data" }) => {
  };

  return (
-    <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
+    <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 overflow-hidden">
      {/* Header with Breadcrumb */}
      <div className="bg-gray-50 dark:bg-gray-700 px-4 py-3 border-b border-gray-200 dark:border-gray-600">
        <div className="flex items-center justify-between">
@@ -220,7 +336,7 @@ const PostmanTable = ({ data, title = "JSON Data" }) => {
        {isArrayView ? (
          // Horizontal table for arrays
          <table className="w-full">
-            <thead className="bg-gray-50 dark:bg-gray-700 sticky top-0">
+            <thead className="bg-gray-50 dark:bg-gray-700 sticky top-0 z-10">
              <tr>
                <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider w-12">
                  #
@@ -263,7 +379,7 @@ const PostmanTable = ({ data, title = "JSON Data" }) => {
        ) : isObjectView ? (
          // Vertical key-value table for objects
          <table className="w-full">
-            <thead className="bg-gray-50 dark:bg-gray-700 sticky top-0">
+            <thead className="bg-gray-50 dark:bg-gray-700 sticky top-0 z-10">
              <tr>
                <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider w-1/3">
                  Key
@@ -271,6 +387,9 @@ const PostmanTable = ({ data, title = "JSON Data" }) => {
                <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                  Value
                </th>
+                <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider w-16">
+                  
+                </th>
              </tr>
            </thead>
            <tbody className="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
@@ -290,7 +409,23 @@ const PostmanTable = ({ data, title = "JSON Data" }) => {
                      {key}
                    </td>
                    <td className="px-4 py-3 text-sm">
-                      {renderValue(value)}
+                      {renderFullValue(value)}
+                    </td>
+                    <td className="px-4 py-3 text-sm">
+                      <button
+                        onClick={(e) => {
+                          e.stopPropagation(); // Prevent row click
+                          copyToClipboard(value, `${currentPath.join('.')}.${key}`);
+                        }}
+                        className="p-1 hover:bg-gray-100 dark:hover:bg-gray-600 rounded transition-colors"
+                        title={copiedItems.has(`${currentPath.join('.')}.${key}`) ? "Copied!" : "Copy value"}
+                      >
+                        {copiedItems.has(`${currentPath.join('.')}.${key}`) ? (
+                          <Check className="h-3 w-3 text-green-500" />
+                        ) : (
+                          <Copy className="h-3 w-3 text-gray-500 dark:text-gray-400" />
+                        )}
+                      </button>
                    </td>
                  </tr>
                );
@@ -301,8 +436,8 @@ const PostmanTable = ({ data, title = "JSON Data" }) => {
          // Fallback for primitive values
          <div className="p-4">
            <div className="text-center text-gray-500 dark:text-gray-400">
-              <div className="text-lg font-mono text-gray-900 dark:text-gray-100">
-                {formatValue(currentData)}
+              <div className="text-lg font-mono text-gray-900 dark:text-gray-100 whitespace-pre-wrap break-words">
+                {formatFullValue(currentData)}
              </div>
              <div className="text-sm mt-2">
                Type: {getValueType(currentData)}
--- a/src/components/StructuredEditor.js
+++ b/src/components/StructuredEditor.js
@@ -4,6 +4,7 @@ import { Plus, Minus, ChevronDown, ChevronRight, Type, Hash, ToggleLeft, List, B
 const StructuredEditor = ({ onDataChange, initialData = {} }) => {
  const [data, setData] = useState(initialData);
  const [expandedNodes, setExpandedNodes] = useState(new Set(['root']));
+  const [fieldTypes, setFieldTypes] = useState({}); // Track intended types for fields
  const isInternalUpdate = useRef(false);

  // Update internal data when initialData prop changes (but not from internal updates)
@@ -14,11 +15,6 @@ const StructuredEditor = ({ onDataChange, initialData = {} }) => {
      return;
    }
    
-    console.log('📥 EXTERNAL DATA CHANGED:', { 
-      keys: Object.keys(initialData), 
-      hasData: Object.keys(initialData).length > 0,
-      data: initialData 
-    });
    setData(initialData);
    // Expand root node if there's data
    if (Object.keys(initialData).length > 0) {
@@ -27,7 +23,6 @@ const StructuredEditor = ({ onDataChange, initialData = {} }) => {
  }, [initialData]);

  const updateData = (newData) => {
-    console.log('📊 INTERNAL DATA UPDATE:', { keys: Object.keys(newData), totalProps: JSON.stringify(newData).length });
    isInternalUpdate.current = true; // Mark as internal update
    setData(newData);
    onDataChange(newData);
@@ -44,8 +39,6 @@ const StructuredEditor = ({ onDataChange, initialData = {} }) => {
  };

  const addProperty = (obj, path) => {
-    console.log('🔧 ADD PROPERTY - Before:', { path, dataKeys: Object.keys(data), objKeys: Object.keys(obj) });
-    
    const pathParts = path.split('.');
    const newData = { ...data };
    let current = newData;
@@ -60,8 +53,6 @@ const StructuredEditor = ({ onDataChange, initialData = {} }) => {
    const newKey = `property${keys.length + 1}`;
    current[newKey] = '';
    
-    console.log('🔧 ADD PROPERTY - After:', { path, newKey, dataKeys: Object.keys(newData), targetKeys: Object.keys(current) });
-    
    updateData(newData);
    setExpandedNodes(new Set([...expandedNodes, path]));
  };
@@ -86,8 +77,6 @@ const StructuredEditor = ({ onDataChange, initialData = {} }) => {
  };

  const removeProperty = (key, parentPath) => {
-    console.log('🗑️ REMOVE PROPERTY:', { key, parentPath });
-    
    const pathParts = parentPath.split('.');
    const newData = { ...data };
    let current = newData;
@@ -97,6 +86,12 @@ const StructuredEditor = ({ onDataChange, initialData = {} }) => {
      current = current[pathParts[i]];
    }
    
+    // Remove field type tracking for the removed property
+    const removedPath = parentPath === 'root' ? `root.${key}` : `${parentPath}.${key}`;
+    const newFieldTypes = { ...fieldTypes };
+    delete newFieldTypes[removedPath];
+    setFieldTypes(newFieldTypes);
+    
    // Delete the property/item from the parent
    if (Array.isArray(current)) {
      // For arrays, remove by index and reindex
@@ -110,21 +105,12 @@ const StructuredEditor = ({ onDataChange, initialData = {} }) => {
    if (parentPath === 'root' && Object.keys(newData).length === 0) {
      // Add an empty property to maintain initial state, like TableEditor maintains at least one row
      newData[''] = '';
-      console.log('🔄 ADDED INITIAL EMPTY PROPERTY - Last root property was deleted');
    }
    
-    console.log('🗑️ REMOVE PROPERTY - After:', { 
-      parentPath, 
-      remainingKeys: Array.isArray(current) ? current.length : Object.keys(current),
-      totalRootKeys: Object.keys(newData).length
-    });
-    
    updateData(newData);
  };

  const updateValue = (value, path) => {
-    console.log('✏️ UPDATE VALUE:', { path, value, currentType: typeof getValue(path) });
-    
    const pathParts = path.split('.');
    const newData = { ...data };
    let current = newData;
@@ -172,13 +158,10 @@ const StructuredEditor = ({ onDataChange, initialData = {} }) => {
      }
    }
    
-    console.log('✏️ UPDATE VALUE - Result:', { path, newValue: current[key], newType: typeof current[key] });
    updateData(newData);
  };

  const changeType = (newType, path) => {
-    console.log('🔄 CHANGE TYPE:', { path, newType, currentValue: getValue(path) });
-    
    const pathParts = path.split('.');
    const newData = { ...data };
    let current = newData;
@@ -190,6 +173,11 @@ const StructuredEditor = ({ onDataChange, initialData = {} }) => {
    const key = pathParts[pathParts.length - 1];
    const currentValue = current[key];
    
+    // Track the intended type for this field
+    const newFieldTypes = { ...fieldTypes };
+    newFieldTypes[path] = newType;
+    setFieldTypes(newFieldTypes);
+    
    // Try to preserve value when changing types if possible
    switch (newType) {
      case 'string':
@@ -227,19 +215,10 @@ const StructuredEditor = ({ onDataChange, initialData = {} }) => {
        current[key] = '';
    }
    
-    console.log('🔄 CHANGE TYPE - Result:', { path, newValue: current[key], actualType: typeof current[key] });
    updateData(newData);
    setExpandedNodes(new Set([...expandedNodes, path]));
  };

-  const getValue = (path) => {
-    const pathParts = path.split('.');
-    let current = data;
-    for (let i = 1; i < pathParts.length; i++) {
-      current = current[pathParts[i]];
-    }
-    return current;
-  };

  // Helper function to display string values with proper unescaping
  const getDisplayValue = (value) => {
@@ -277,6 +256,16 @@ const StructuredEditor = ({ onDataChange, initialData = {} }) => {
      return; // Don't rename if key already exists
    }
    
+    // Update field type tracking for renamed key
+    const oldPath = path;
+    const newPath = path.replace(new RegExp(`\\.${oldKey}$`), `.${newKey}`);
+    const newFieldTypes = { ...fieldTypes };
+    if (newFieldTypes[oldPath]) {
+      newFieldTypes[newPath] = newFieldTypes[oldPath];
+      delete newFieldTypes[oldPath];
+      setFieldTypes(newFieldTypes);
+    }
+    
    // Rename the key
    const value = current[oldKey];
    delete current[oldKey];
@@ -354,13 +343,19 @@ const StructuredEditor = ({ onDataChange, initialData = {} }) => {
    const canExpand = typeof value === 'object' && value !== null;
    
    // Check if parent is an array by looking at the parent path
-    const isArrayItem = parentPath !== 'root' && (() => {
-      const parentPathParts = parentPath.split('.');
-      let current = data;
-      for (let i = 1; i < parentPathParts.length; i++) {
-        current = current[parentPathParts[i]];
+    const isArrayItem = (() => {
+      if (parentPath === 'root') {
+        // If parent is root, check if root data is an array
+        return Array.isArray(data);
+      } else {
+        // Navigate to parent and check if it's an array
+        const parentPathParts = parentPath.split('.');
+        let current = data;
+        for (let i = 1; i < parentPathParts.length; i++) {
+          current = current[parentPathParts[i]];
+        }
+        return Array.isArray(current);
      }
-      return Array.isArray(current);
    })();

    return (
@@ -436,11 +431,11 @@ const StructuredEditor = ({ onDataChange, initialData = {} }) => {
                  </span>
                </div>
              ) : (
-                typeof value === 'string' && value.includes('\n') ? (
+                (fieldTypes[path] === 'longtext' || (typeof value === 'string' && value.includes('\n'))) ? (
                  <textarea
                    value={getDisplayValue(value)}
                    onChange={(e) => updateValue(e.target.value, path)}
-                    className="flex-1 px-2 py-1 text-sm border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 min-w-0 resize-y"
+                    className="flex-1 px-2 py-1 text-sm border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 min-w-0 resize-y items"
                    placeholder="Long text value"
                    rows={3}
                  />
@@ -463,12 +458,14 @@ const StructuredEditor = ({ onDataChange, initialData = {} }) => {
            <div className="flex items-center space-x-2 sm:space-x-2">
              <select
                value={
-                  value === null ? 'null' :
-                  value === undefined ? 'string' :
-                  typeof value === 'string' ? (value.includes('\n') ? 'longtext' : 'string') :
-                  typeof value === 'number' ? 'number' :
-                  typeof value === 'boolean' ? 'boolean' :
-                  Array.isArray(value) ? 'array' : 'object'
+                  fieldTypes[path] || (
+                    value === null ? 'null' :
+                    value === undefined ? 'string' :
+                    typeof value === 'string' ? (value.includes('\n') ? 'longtext' : 'string') :
+                    typeof value === 'number' ? 'number' :
+                    typeof value === 'boolean' ? 'boolean' :
+                    Array.isArray(value) ? 'array' : 'object'
+                  )
                }
                onChange={(e) => changeType(e.target.value, path)}
                className="px-2 py-1 text-xs border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 min-w-0"
--- a/src/pages/ObjectEditor.js
+++ b/src/pages/ObjectEditor.js
@@ -335,23 +335,67 @@ const ObjectEditor = () => {
    }
  };

+  // Smart JSON parser that tolerates common mistakes
+  const parseJsonSmart = (input) => {
+    // First try normal JSON parsing
+    try {
+      return JSON.parse(input);
+    } catch (originalError) {
+      // Try to fix common issues
+      let fixedInput = input.trim();
+      
+      // Fix trailing commas in objects and arrays
+      fixedInput = fixedInput
+        .replace(/,(\s*[}\]])/g, '$1')  // Remove trailing commas before } or ]
+        .replace(/,(\s*$)/g, '');       // Remove trailing comma at end
+      
+      // Try parsing the fixed version
+      try {
+        return JSON.parse(fixedInput);
+      } catch (fixedError) {
+        // If still fails, throw original error with helpful message
+        const errorMessage = originalError.message;
+        
+        // Provide specific error reasons
+        if (errorMessage.includes('Unexpected token')) {
+          if (errorMessage.includes('Unexpected token ,')) {
+            throw new Error('Invalid JSON: Unexpected comma. Check for trailing commas in objects or arrays.');
+          } else if (errorMessage.includes('Unexpected token }')) {
+            throw new Error('Invalid JSON: Unexpected closing brace. Check for missing quotes or commas.');
+          } else if (errorMessage.includes('Unexpected token ]')) {
+            throw new Error('Invalid JSON: Unexpected closing bracket. Check for missing quotes or commas.');
+          } else {
+            throw new Error(`Invalid JSON: ${errorMessage}`);
+          }
+        } else if (errorMessage.includes('Unexpected end of JSON input')) {
+          throw new Error('Invalid JSON: Incomplete JSON structure. Check for missing closing braces or brackets.');
+        } else if (errorMessage.includes('Unexpected string')) {
+          throw new Error('Invalid JSON: Unexpected string. Check for missing commas between properties.');
+        } else {
+          throw new Error(`Invalid JSON: ${errorMessage}`);
+        }
+      }
+    }
+  };
+
  // Auto-detect input format
  const detectInputFormat = (input) => {
-    if (!input.trim()) return { format: '', valid: false, data: null };
+    if (!input.trim()) return { format: '', valid: false, data: null, error: null };

-    // Try JSON first
+    // Try JSON first (with smart parsing)
    try {
-      const jsonData = JSON.parse(input);
-      return { format: 'JSON', valid: true, data: jsonData };
-    } catch {}
-
-    // Try PHP serialize
-    try {
-      const serializedData = phpUnserialize(input);
-      return { format: 'PHP Serialized', valid: true, data: serializedData };
-    } catch {}
-
-    return { format: 'Unknown', valid: false, data: null };
+      const jsonData = parseJsonSmart(input);
+      return { format: 'JSON', valid: true, data: jsonData, error: null };
+    } catch (jsonError) {
+      // Try PHP serialize
+      try {
+        const serializedData = phpUnserialize(input);
+        return { format: 'PHP Serialized', valid: true, data: serializedData, error: null };
+      } catch (phpError) {
+        // Return JSON error since it's more likely what user intended
+        return { format: 'Unknown', valid: false, data: null, error: jsonError.message };
+      }
+    }
  };

  // Handle input text change
@@ -362,12 +406,13 @@ const ObjectEditor = () => {
    setInputValid(detection.valid);
    
    if (detection.valid) {
-      console.log(' SETTING STRUCTURED DATA:', detection.data);
      setStructuredData(detection.data);
      setError('');
      setCreateNewCompleted(true);
    } else if (value.trim()) {
-      setError('Invalid format. Please enter valid JSON or PHP serialized data.');
+      // Use specific error message if available, otherwise generic message
+      const errorMessage = detection.error || 'Invalid format. Please enter valid JSON or PHP serialized data.';
+      setError(errorMessage);
    } else {
      setError('');
    }
--- a/src/pages/TableEditor.js
+++ b/src/pages/TableEditor.js
@@ -302,10 +302,6 @@ const TableEditor = () => {

  // SQL parsing functions for multi-table support
  const parseMultiTableSQL = (sqlContent) => {
-    console.log(
-      "🔍 parseMultiTableSQL called with content length:",
-      sqlContent.length,
-    );
    const tables = {};
    const lines = sqlContent.split("\n");
    let currentTable = null;
@@ -313,7 +309,6 @@ const TableEditor = () => {
    let insideCreateTable = false;
    let insideInsert = false;

-    console.log("📄 Total lines to process:", lines.length);

    for (let i = 0; i < lines.length; i++) {
      const line = lines[i].trim();
@@ -384,12 +379,7 @@ const TableEditor = () => {
        const valuesMatch = line.match(/VALUES\s*(.+)/i);
        if (valuesMatch) {
          const valuesStr = valuesMatch[1];
-          console.log(
-            "🔍 Found VALUES in multi-table parser:",
-            valuesStr.substring(0, 100) + "...",
-          );
          const rows = parseInsertValues(valuesStr);
-          console.log("📊 parseInsertValues returned", rows.length, "rows");
          tables[currentTable].data.push(...rows);
          tables[currentTable].rowCount += rows.length;
        }
@@ -417,10 +407,6 @@ const TableEditor = () => {
  };

  const parseInsertValues = (valuesStr) => {
-    console.log(
-      "🔍 parseInsertValues called with:",
-      valuesStr.substring(0, 200) + "...",
-    );
    const rows = [];

    // Better parsing: find complete tuples first, then parse values respecting quotes
@@ -463,7 +449,6 @@ const TableEditor = () => {
    }

    tuples.forEach((tuple) => {
-      console.log("📝 Processing tuple:", tuple.substring(0, 100) + "...");

      // Remove outer parentheses
      const innerContent = tuple.replace(/^\(|\)$/g, "").trim();
@@ -509,37 +494,21 @@ const TableEditor = () => {
        values.push(currentValue.trim());
      }

-      console.log("📊 Parsed", values.length, "values from tuple");

      const processedValues = values.map((val) => {
        val = val.trim();
-        console.log(
-          "🔧 Processing value:",
-          val.substring(0, 50) + (val.length > 50 ? "..." : ""),
-        );
        // Remove quotes and handle NULL
        if (val === "NULL") return "";
        if (val.startsWith("'") && val.endsWith("'")) {
          let unquoted = val.slice(1, -1);
-          console.log(
-            "📤 Unquoted value:",
-            unquoted.substring(0, 50) + (unquoted.length > 50 ? "..." : ""),
-          );

          // Handle escaped JSON properly (same logic as main parser)
          if (unquoted.includes('\\"') || unquoted.includes("\\'")) {
-            console.log(
-              "🔧 Value contains escaped quotes, checking if JSON...",
-            );

            // Try to detect if this is escaped JSON
            const isEscapedJson = (str) => {
              const unescaped = str.replace(/\\"/g, '"').replace(/\\'/g, "'");
              const trimmed = unescaped.trim();
-              console.log(
-                "🧪 Testing unescaped value:",
-                trimmed.substring(0, 50) + (trimmed.length > 50 ? "..." : ""),
-              );

              if (
                (trimmed.startsWith("{") && trimmed.endsWith("}")) ||
@@ -547,27 +516,17 @@ const TableEditor = () => {
              ) {
                try {
                  JSON.parse(trimmed);
-                  console.log("✅ Valid JSON detected in parseInsertValues!");
                  return true;
                } catch (e) {
-                  console.log("❌ JSON parse failed:", e.message);
                  return false;
                }
              }
-              console.log("❌ Not JSON format (no brackets)");
              return false;
            };

            // If it's escaped JSON, unescape it
            if (isEscapedJson(unquoted)) {
-              const oldValue = unquoted;
              unquoted = unquoted.replace(/\\"/g, '"').replace(/\\'/g, "'");
-              console.log(
-                "🎯 Unescaped JSON in parseInsertValues from:",
-                oldValue.substring(0, 30),
-                "to:",
-                unquoted.substring(0, 30),
-              );
            } else {
              // Only unescape single quotes for non-JSON strings
              unquoted = unquoted.replace(/''/g, "'");
@@ -577,10 +536,6 @@ const TableEditor = () => {
            unquoted = unquoted.replace(/''/g, "'");
          }

-          console.log(
-            "✅ Final unquoted value:",
-            unquoted.substring(0, 50) + (unquoted.length > 50 ? "..." : ""),
-          );
          return unquoted;
        }
        return val;
@@ -594,7 +549,6 @@ const TableEditor = () => {
      rows.push(rowObj);
    });

-    console.log("📊 parseInsertValues returning", rows.length, "rows");
    return rows;
  };

@@ -733,8 +687,6 @@ const TableEditor = () => {

  // Parse SQL data
  const parseSqlData = (text) => {
-    console.log("🚀 parseSqlData called with text length:", text.length);
-    console.log("📄 First 500 chars:", text.substring(0, 500));
    try {
      // Clean the SQL text - remove comments and unnecessary lines
      const cleanLines = text
@@ -913,19 +865,8 @@ const TableEditor = () => {
              }

              // Clean up the value - handle escaped JSON properly
-              console.log(
-                "🔍 Processing value for row",
-                allRows.length,
-                "column",
-                index,
-                ":",
-                value.substring(0, 100) + (value.length > 100 ? "..." : ""),
-              );

              if (value.includes('\\"') || value.includes("\\'")) {
-                console.log(
-                  "🔧 Value contains escaped quotes, checking if JSON...",
-                );

                // Try to detect if this is escaped JSON
                const isEscapedJson = (str) => {
@@ -934,11 +875,6 @@ const TableEditor = () => {
                    .replace(/\\"/g, '"')
                    .replace(/\\'/g, "'");
                  const trimmed = unescaped.trim();
-                  console.log(
-                    "🧪 Testing unescaped value:",
-                    trimmed.substring(0, 100) +
-                      (trimmed.length > 100 ? "..." : ""),
-                  );

                  if (
                    (trimmed.startsWith("{") && trimmed.endsWith("}")) ||
@@ -946,40 +882,25 @@ const TableEditor = () => {
                  ) {
                    try {
                      JSON.parse(trimmed);
-                      console.log("✅ Valid JSON detected!");
                      return true;
                    } catch (e) {
-                      console.log("❌ JSON parse failed:", e.message);
                      return false;
                    }
                  }
-                  console.log("❌ Not JSON format (no brackets)");
                  return false;
                };

                // If it's escaped JSON, unescape it
                if (isEscapedJson(value)) {
-                  const oldValue = value;
                  value = value.replace(/\\"/g, '"').replace(/\\'/g, "'");
-                  console.log(
-                    "🎯 Unescaped JSON from:",
-                    oldValue.substring(0, 50),
-                    "to:",
-                    value.substring(0, 50),
-                  );
                } else {
                  // Only unescape single quotes for non-JSON strings
                  if (value.includes("\\'")) {
-                    console.log("🔧 Unescaping single quotes only");
                    value = value.replace(/\\'/g, "'");
                  }
                }
              }

-              console.log(
-                "✅ Final value for storage:",
-                value.substring(0, 100) + (value.length > 100 ? "..." : ""),
-              );

              rowData[header.id] = value;
            });
@@ -1048,27 +969,19 @@ const TableEditor = () => {
    }

    const trimmed = inputText.trim();
-    console.log(
-      "🎯 handleTextInput - detecting format for input length:",
-      trimmed.length,
-    );
-    console.log("📝 First 200 chars:", trimmed.substring(0, 200));

    // Try to detect format
    if (trimmed.startsWith("[") && trimmed.endsWith("]")) {
      // JSON array
-      console.log("🔍 Detected JSON array format");
      parseJsonData(trimmed);
    } else if (
      trimmed.toLowerCase().includes("insert into") &&
      trimmed.toLowerCase().includes("values")
    ) {
      // SQL INSERT statements
-      console.log("🔍 Detected SQL INSERT format");
      parseSqlData(trimmed);
    } else {
      // CSV/TSV
-      console.log("🔍 Detected CSV/TSV format");
      parseData(trimmed, useFirstRowAsHeader);
    }
  };
@@ -1133,13 +1046,10 @@ const TableEditor = () => {
  };

  const initializeTablesFromSQL = (sqlContent, fileName = "") => {
-    console.log("🏗️ initializeTablesFromSQL called with fileName:", fileName);
-    console.log("📊 SQL content length:", sqlContent.length);

    const discoveredTables = parseMultiTableSQL(sqlContent);
    const tableNames = Object.keys(discoveredTables);

-    console.log("📋 Discovered tables:", tableNames);

    if (tableNames.length === 0) {
      console.error("❌ No tables found in SQL file");
@@ -1177,7 +1087,6 @@ const TableEditor = () => {
    const file = event.target.files[0];
    if (!file) return;

-    console.log("📁 File upload started:", file.name, "size:", file.size);
    setIsLoading(true);
    setError("");

@@ -1185,15 +1094,11 @@ const TableEditor = () => {
    reader.onload = (e) => {
      try {
        const content = e.target.result;
-        console.log("📄 File content loaded, length:", content.length);
-        console.log("📝 First 300 chars:", content.substring(0, 300));

        // Check if it's SQL file for multi-table support
        if (file.name.toLowerCase().endsWith(".sql")) {
-          console.log("🔍 Detected SQL file, using multi-table parsing");
          initializeTablesFromSQL(content, file.name);
        } else {
-          console.log("🔍 Non-SQL file, using single-table parsing");
          // Fallback to single-table parsing
          parseData(content);
        }
@@ -3291,7 +3196,6 @@ const ObjectEditorModal = ({ modal, onClose, onApply }) => {
  const [error, setError] = useState(initialState.error);

  // Debug log to see what we initialized with
-  // console.log('ObjectEditorModal initialized with:', { structuredData, isValid, error });

  // Update current value when structured data changes
  const handleStructuredDataChange = (newData) => {
@@ -3378,7 +3282,6 @@ const ObjectEditorModal = ({ modal, onClose, onApply }) => {
      );
    }

-    // console.log('Rendering StructuredEditor with data:', structuredData); // Debug log
    return (
      <div className="h-full bg-white dark:bg-gray-800 p-6">
        <StructuredEditor
--- a/src/utils/consentManager.js
+++ b/src/utils/consentManager.js
@@ -45,16 +45,14 @@ export const initConsentMode = () => {
  }

  const isEEA = isEEAUser();
-  const mode = process.env.NODE_ENV !== 'production' ? '[DEV]' : '[PROD]';
  
-  if (isEEA || process.env.NODE_ENV !== 'production') {
-    // EEA users or development: Start with denied, wait for user consent
+  if (isEEA) {
+    // EEA users: Start with denied, wait for user consent
    window.gtag('consent', 'default', {
      ...DEFAULT_CONSENT,
-      region: isEEA ? ['AT', 'BE', 'BG', 'HR', 'CY', 'CZ', 'DK', 'EE', 'FI', 'FR', 'DE', 'GR', 'HU', 'IE', 'IT', 'LV', 'LT', 'LU', 'MT', 'NL', 'PL', 'PT', 'RO', 'SK', 'SI', 'ES', 'SE', 'IS', 'LI', 'NO'] : ['US'],
+      region: ['AT', 'BE', 'BG', 'HR', 'CY', 'CZ', 'DK', 'EE', 'FI', 'FR', 'DE', 'GR', 'HU', 'IE', 'IT', 'LV', 'LT', 'LU', 'MT', 'NL', 'PL', 'PT', 'RO', 'SK', 'SI', 'ES', 'SE', 'IS', 'LI', 'NO'],
      wait_for_update: 500
    });
-    console.log(`🍪 ${mode} Consent Mode v2 initialized - EEA user, consent required`);
  } else {
    // Non-EEA users: Automatically grant all consent
    window.gtag('consent', 'default', {
@@ -62,7 +60,6 @@ export const initConsentMode = () => {
      region: ['US'],
      wait_for_update: 0 // No need to wait
    });
-    console.log(`🍪 ${mode} Consent Mode v2 initialized - Non-EEA user, auto-granted all consent`);
  }
 };

@@ -75,11 +72,8 @@ export const updateConsent = (consentChoices) => {
  // Store consent in localStorage
  localStorage.setItem('consent_preferences', JSON.stringify({
    ...consentChoices,
-    timestamp: Date.now(),
-    version: '2.0'
+    timestamp: Date.now()
  }));
-
-  console.log('🍪 Consent updated:', consentChoices);
 };

 // Get stored consent preferences
@@ -101,20 +95,31 @@ export const getStoredConsent = () => {

 // Check if consent banner should be shown
 export const shouldShowConsentBanner = () => {
-  // In development, always show for testing
-  if (process.env.NODE_ENV !== 'production') {
-    return !getStoredConsent();
+  const isDev = process.env.NODE_ENV !== 'production';
+  const isEEA = isEEAUser();
+  const hasConsent = getStoredConsent();
+  
+  // In development, only show for EEA users (for proper testing)
+  if (isDev) {
+    if (isEEA) {
+      return !hasConsent;
+    } else {
+      // Auto-grant for non-EEA even in development
+      if (!hasConsent) {
+        updateConsent(CONSENT_CONFIGS.ACCEPT_ALL);
+      }
+      return false;
+    }
  }
  
  // In production, only show for EEA users who haven't consented
-  if (isEEAUser()) {
-    return !getStoredConsent();
+  if (isEEA) {
+    return !hasConsent;
  }
  
  // For non-EEA users, automatically grant all consent and never show banner
-  if (!getStoredConsent()) {
+  if (!hasConsent) {
    updateConsent(CONSENT_CONFIGS.ACCEPT_ALL);
-    console.log('🍪 [AUTO] Non-EEA user - automatically granted all consent');
  }
  
  return false; // Never show banner for non-EEA users