// JSON Formatter / Validator — pretty-print, minify, validate, tree view. window.TOOL_HANDLERS['json-formatter'] = function JsonFormatterTool() { const SAMPLE = JSON.stringify({ name: "MiniMagics", version: 2.5, open_source: true, description: "Privacy-first browser tools", categories: ["PDF", "Image", "Converter", "File"], stats: { tools: 52, users: null, rating: 4.9 }, features: [ { id: 1, title: "No uploads", enabled: true }, { id: 2, title: "Dark mode", enabled: false } ] }, null, 2); const [raw, setRaw] = React.useState(SAMPLE); const [parsed, setParsed] = React.useState(null); const [error, setError] = React.useState(null); const [viewMode, setViewMode] = React.useState('formatted'); // 'formatted' | 'tree' const [collapsed, setCollapsed] = React.useState({}); const [copied, setCopied] = React.useState(false); const debounceRef = React.useRef(null); const fileRef = React.useRef(null); // ---- validation with debounce ---- const validate = React.useCallback((text) => { if (!text.trim()) { setParsed(null); setError(null); return; } try { const obj = JSON.parse(text); setParsed(obj); setError(null); } catch (e) { setParsed(null); // try to extract position from message const posMatch = e.message.match(/position\s+(\d+)/i); let line = null, col = null; if (posMatch) { const pos = parseInt(posMatch[1], 10); const before = text.slice(0, pos); line = (before.match(/\n/g) || []).length + 1; col = pos - before.lastIndexOf('\n'); } setError({ message: e.message, line, col }); } }, []); React.useEffect(() => { clearTimeout(debounceRef.current); debounceRef.current = setTimeout(() => validate(raw), 250); return () => clearTimeout(debounceRef.current); }, [raw, validate]); // initial validate React.useEffect(() => { validate(raw); }, []); // ---- actions ---- const handleFormat = () => { if (!parsed) return; const formatted = JSON.stringify(parsed, null, 2); setRaw(formatted); }; const handleMinify = () => { if (!parsed) return; setRaw(JSON.stringify(parsed)); }; const handleCopy = () => { const text = parsed ? JSON.stringify(parsed, null, 2) : raw; navigator.clipboard.writeText(text).then(() => { setCopied(true); setTimeout(() => setCopied(false), 1500); }); }; const handleClear = () => { setRaw(''); setParsed(null); setError(null); setCollapsed({}); }; const handleFile = (e) => { const file = e.target.files?.[0]; if (!file) return; const reader = new FileReader(); reader.onload = () => { setRaw(reader.result); setCollapsed({}); }; reader.readAsText(file); e.target.value = ''; }; // ---- statistics ---- const stats = React.useMemo(() => { if (!parsed) return null; let keyCount = 0; let maxDepth = 0; const walk = (val, depth) => { if (depth > maxDepth) maxDepth = depth; if (val && typeof val === 'object' && !Array.isArray(val)) { const keys = Object.keys(val); keyCount += keys.length; keys.forEach((k) => walk(val[k], depth + 1)); } else if (Array.isArray(val)) { val.forEach((v) => walk(v, depth + 1)); } }; walk(parsed, 0); const rootType = Array.isArray(parsed) ? 'array' : typeof parsed === 'object' && parsed !== null ? 'object' : typeof parsed; return { keyCount, maxDepth, rootType }; }, [parsed]); // ---- syntax highlighting ---- const highlightJson = React.useCallback((text) => { // tokenize JSON string for syntax coloring const escaped = text.replace(/&/g, '&').replace(//g, '>'); return escaped.replace( /("(?:\\.|[^"\\])*")\s*:/g, // keys '$1:' ).replace( /:\s*("(?:\\.|[^"\\])*")/g, // string values ': $1' ).replace( // string values inside arrays (not preceded by colon on same match) /(?<=[\[,]\s*)("(?:\\.|[^"\\])*")/g, '$1' ).replace( /\b(-?\d+\.?\d*(?:[eE][+-]?\d+)?)\b/g, '$1' ).replace( /\b(true|false)\b/g, '$1' ).replace( /\bnull\b/g, 'null' ); }, []); // ---- tree view ---- const toggleCollapse = React.useCallback((path) => { setCollapsed((prev) => ({ ...prev, [path]: !prev[path] })); }, []); // ---- render ---- const formattedHtml = React.useMemo(() => { if (!parsed) return ''; return highlightJson(JSON.stringify(parsed, null, 2)); }, [parsed, highlightJson]); return (
{/* Input area */}