@@ -659,7 +425,7 @@ function App() {
JSON
setActiveTab('viewer')}
+ onClick={handleViewerTabClick}
className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
activeTab === 'viewer'
? 'border-blue-500 text-blue-600 dark:text-blue-400 bg-gray-50 dark:bg-gray-700'
@@ -756,30 +522,41 @@ function App() {
>
-
handleSearch(e.target.value, caseSensitive)}
- onKeyDown={(e) => {
- if (e.key === 'Enter') {
- if (e.shiftKey) {
- handleNavigateToPrevMatch();
- } else {
- handleNavigateToNextMatch();
- }
- e.preventDefault();
- } else if (e.key === 'F3') {
- if (e.shiftKey) {
- handleNavigateToPrevMatch();
- } else {
- handleNavigateToNextMatch();
+
+ handleSearch('', caseSensitive)}
+ className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
+ title="Clear search"
+ >
+
+ )}
+
setCaseSensitive(!caseSensitive)}
className={`px-3 py-2 text-sm rounded transition-colors ${
@@ -791,13 +568,6 @@ function App() {
>
Aa
-
handleSearch('', caseSensitive)}
- className="px-3 py-2 text-sm bg-gray-200 dark:bg-gray-600 text-gray-700 dark:text-gray-300 rounded hover:bg-gray-300 dark:hover:bg-gray-500 transition-colors"
- title="Clear search - Remove search query and show all nodes"
- >
- Clear
-
{searchQuery && searchMatchIndices.length > 0 && (
<>
@@ -833,6 +603,9 @@ function App() {
isLoading={isLoading}
error={error}
initialValue={inputText}
+ onError={setError}
+ onChange={setInputText}
+ errorDetails={errorDetails}
/>
)}
@@ -849,6 +622,18 @@ function App() {
{jsonData ? (
+ {/* Tree Header */}
+
+ JSON Tree
+
+ Fullscreen
+
+
{/* Tree Content - Independent Scroll */}
@@ -898,8 +683,153 @@ function App() {
)}
-
+ {/* Footer */}
+
+
+
+ {/* Logo, Company Name and Social Links */}
+
+
+
+
+ NonStop io Technologies Pvt. Ltd.
+
+
+
+
+
+
+ {/* Visit Counter with Creative Label - Center */}
+
+
+ Helped
+
+
+
+ developers parse JSON
+
+
+
+ {/* Report Issues - Right */}
+
+
+
+
+ {/* Fullscreen Tree Container */}
+
+ {isFullscreen && (
+
+ {/* Fullscreen Header */}
+
+
JSON Tree - Fullscreen View
+
+
+
+
+ {/* Fullscreen Tree Content */}
+
+ {jsonData ? (
+
+ ) : (
+
+
+
+
No JSON data loaded
+
Use the JSON tab or toolbar buttons to load JSON
+
+
+ )}
+
+
+ )}
+
+
+
+
);
}
-export default App;
\ No newline at end of file
+export default App;
diff --git a/src/components/JsonInput.tsx b/src/components/JsonInput.tsx
index 5d2f648..b454655 100644
--- a/src/components/JsonInput.tsx
+++ b/src/components/JsonInput.tsx
@@ -7,16 +7,28 @@ interface JsonInputProps {
isLoading?: boolean;
error?: string;
initialValue?: string;
+ onError?: (error: string) => void;
+ onChange?: (text: string) => void;
+ errorDetails?: {
+ line?: number;
+ column?: number;
+ position?: number;
+ };
}
export const JsonInput: React.FC
= ({
onJsonSubmit,
isLoading = false,
error,
- initialValue = ''
+ initialValue = '',
+ onError,
+ onChange,
+ errorDetails
}) => {
const [jsonText, setJsonText] = useState(initialValue);
const [isDragOver, setIsDragOver] = useState(false);
+ const [isJumpingToError, setIsJumpingToError] = useState(false);
+ const [hasAutoJumped, setHasAutoJumped] = useState(false);
const fileInputRef = useRef(null);
const textareaRef = useRef(null);
@@ -24,6 +36,170 @@ export const JsonInput: React.FC = ({
setJsonText(initialValue);
}, [initialValue]);
+ // Reset auto-jump flag when error changes or is cleared
+ useEffect(() => {
+ if (!error) {
+ setHasAutoJumped(false);
+ }
+ }, [error]);
+
+ const handleJumpToError = useCallback(async () => {
+ if (!textareaRef.current || !errorDetails || !jsonText) {
+ console.log('Cannot position cursor - missing refs or data:', {
+ hasTextarea: !!textareaRef.current,
+ hasErrorDetails: !!errorDetails,
+ hasJsonText: !!jsonText
+ });
+ return;
+ }
+
+ setIsJumpingToError(true);
+
+ try {
+ // Add a small delay to show the loading state
+ await new Promise(resolve => setTimeout(resolve, 300));
+
+ const textarea = textareaRef.current;
+ let cursorPosition = 0;
+
+ console.log('🎯 Jumping to error:', errorDetails);
+ console.log('📝 Text length:', jsonText.length);
+
+ // Calculate cursor position based on available error details
+ if (errorDetails.position !== undefined) {
+ cursorPosition = Math.min(errorDetails.position, jsonText.length);
+ console.log('📍 Using direct position:', errorDetails.position, 'clamped to:', cursorPosition);
+ } else if (errorDetails.line !== undefined && errorDetails.column !== undefined) {
+ const lines = jsonText.split('\n');
+ const targetLine = errorDetails.line - 1;
+
+ console.log('📊 Calculating from line/column:', errorDetails.line, errorDetails.column);
+ console.log('📋 Total lines:', lines.length, 'Target line index:', targetLine);
+
+ if (targetLine >= 0 && targetLine < lines.length) {
+ for (let i = 0; i < targetLine; i++) {
+ cursorPosition += lines[i].length + 1;
+ }
+ const targetColumn = Math.min(errorDetails.column - 1, lines[targetLine].length);
+ cursorPosition += Math.max(0, targetColumn);
+
+ console.log('🧮 Calculated position:', cursorPosition, 'from line', targetLine, 'column', targetColumn);
+ console.log('📄 Line content:', JSON.stringify(lines[targetLine]));
+ }
+ }
+
+ console.log('✅ Final cursor position:', cursorPosition);
+
+ if (cursorPosition > jsonText.length) {
+ cursorPosition = jsonText.length;
+ }
+
+ // Calculate selection range for the error
+ let selectionStart = cursorPosition;
+ let selectionEnd = cursorPosition;
+
+ if (error && error.toLowerCase().includes('unterminated string')) {
+ // Find the start of the string by looking backwards for the opening quote
+ let startQuotePos = cursorPosition - 1;
+ while (startQuotePos > 0 && jsonText[startQuotePos] !== '"') {
+ startQuotePos--;
+ }
+ selectionStart = startQuotePos;
+
+ // Select to end of line or next quote
+ let endPos = cursorPosition;
+ while (endPos < jsonText.length && jsonText[endPos] !== '\n') {
+ endPos++;
+ }
+ selectionEnd = endPos;
+ } else if (error && (error.toLowerCase().includes('trailing comma') || error.toLowerCase().includes('remove the trailing comma'))) {
+ // For trailing comma errors, select the comma
+ selectionStart = cursorPosition;
+ selectionEnd = cursorPosition + 1;
+ } else if (error && (error.toLowerCase().includes('unexpected character') || error.toLowerCase().includes('invalid character'))) {
+ // For invalid character errors, select the invalid character
+ selectionStart = cursorPosition;
+ selectionEnd = Math.min(cursorPosition + 1, jsonText.length);
+ } else if (error && error.toLowerCase().includes('missing comma')) {
+ // For missing comma errors, select the line that needs the comma
+ const lines = jsonText.split('\n');
+ if (errorDetails.line && errorDetails.line > 0) {
+ const lineIndex = errorDetails.line - 1;
+ if (lineIndex < lines.length) {
+ // Calculate the start of the line
+ let lineStart = 0;
+ for (let i = 0; i < lineIndex; i++) {
+ lineStart += lines[i].length + 1;
+ }
+ selectionStart = lineStart;
+ selectionEnd = lineStart + lines[lineIndex].length;
+ }
+ }
+ } else {
+ // For other errors, select a word or small range around the error
+ // Find word boundaries
+ const wordBoundaries = /[\s,{}[\]:"]/;
+
+ // Find start of word
+ selectionStart = cursorPosition;
+ while (selectionStart > 0 && !wordBoundaries.test(jsonText[selectionStart - 1])) {
+ selectionStart--;
+ }
+
+ // Find end of word
+ selectionEnd = cursorPosition;
+ while (selectionEnd < jsonText.length && !wordBoundaries.test(jsonText[selectionEnd])) {
+ selectionEnd++;
+ }
+
+ // If no word found, select a small range
+ if (selectionStart === selectionEnd) {
+ selectionStart = Math.max(0, cursorPosition - 5);
+ selectionEnd = Math.min(jsonText.length, cursorPosition + 5);
+ }
+ }
+
+ // Focus and select the error text
+ textarea.focus();
+ textarea.setSelectionRange(selectionStart, selectionEnd);
+
+ // Scroll to position
+ if (errorDetails.line) {
+ const lineHeight = parseInt(getComputedStyle(textarea).lineHeight) || 20;
+ const scrollPosition = Math.max(0, (errorDetails.line - 3) * lineHeight);
+ textarea.scrollTop = scrollPosition;
+ }
+
+ console.log('✅ Jumped to error position:', cursorPosition);
+ console.log('🎯 Selected text from:', selectionStart, 'to', selectionEnd);
+
+ trackEvent('error_cursor_positioned', {
+ errorLine: errorDetails.line,
+ errorColumn: errorDetails.column,
+ errorPosition: errorDetails.position,
+ calculatedPosition: cursorPosition
+ });
+
+ } catch (error) {
+ console.error('❌ Error jumping to position:', error);
+ } finally {
+ setIsJumpingToError(false);
+ }
+ }, [errorDetails, jsonText, error]);
+
+ // Automatically jump to error when error details are available
+ useEffect(() => {
+ if (errorDetails && (errorDetails.line || errorDetails.column || errorDetails.position !== undefined) && !hasAutoJumped) {
+ // Add a small delay to ensure the text has been rendered
+ const timeoutId = setTimeout(() => {
+ handleJumpToError();
+ setHasAutoJumped(true);
+ }, 100);
+
+ return () => clearTimeout(timeoutId);
+ }
+ }, [errorDetails, handleJumpToError, hasAutoJumped]);
+
const handleTextSubmit = useCallback(() => {
if (jsonText.trim()) {
onJsonSubmit(jsonText.trim(), true); // Pass true to indicate tab switch should happen
@@ -34,7 +210,10 @@ export const JsonInput: React.FC = ({
}, [jsonText, onJsonSubmit]);
const handleFileRead = useCallback((file: File) => {
- if (file.size > 1024 * 1024) { // 1MB limit
+ const maxSize = 5 * 1024 * 1024; // 5MB limit
+ if (file.size > maxSize) {
+ const errorMsg = `File size (${(file.size / 1024 / 1024).toFixed(2)}MB) exceeds the maximum allowed size of 5MB`;
+ onError?.(errorMsg);
trackEvent('error_encountered', {
errorType: 'file_too_large',
fileSize: file.size
@@ -47,6 +226,7 @@ export const JsonInput: React.FC = ({
const content = e.target?.result as string;
if (content) {
setJsonText(content);
+ onChange?.(content);
onJsonSubmit(content, true); // Pass true to indicate tab switch should happen
trackEvent('file_uploaded', {
fileSize: content.length,
@@ -62,7 +242,7 @@ export const JsonInput: React.FC = ({
});
};
reader.readAsText(file);
- }, [onJsonSubmit]);
+ }, [onJsonSubmit, onError, onChange]);
const handleFileSelect = useCallback((e: React.ChangeEvent) => {
const file = e.target.files?.[0];
@@ -113,20 +293,22 @@ export const JsonInput: React.FC = ({
const droppedText = e.dataTransfer.getData('text/plain');
if (droppedText && !jsonFile) {
setJsonText(droppedText);
+ onChange?.(droppedText);
onJsonSubmit(droppedText, true); // Pass true to indicate tab switch should happen
trackEvent('json_pasted', {
fileSize: droppedText.length,
source: 'drag_drop'
});
}
- }, [handleFileRead, onJsonSubmit]);
+ }, [handleFileRead, onJsonSubmit, onChange]);
const handleClear = useCallback(() => {
setJsonText('');
+ onChange?.('');
if (textareaRef.current) {
textareaRef.current.focus();
}
- }, []);
+ }, [onChange]);
const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
@@ -135,6 +317,7 @@ export const JsonInput: React.FC = ({
}
}, [handleTextSubmit]);
+
const triggerFileInput = useCallback(() => {
fileInputRef.current?.click();
}, []);
@@ -161,7 +344,11 @@ export const JsonInput: React.FC = ({
- 
+ [](https://reactjs.org/)
+ [](https://www.typescriptlang.org/)
+ [](https://tailwindcss.com/)
+
+ 
+ 
+