Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | import React, {useEffect, useState} from 'react';
import type {ICommanderViewerProps} from './registry.js';
function stringify(value: unknown): string {
if (value === undefined || value === null) return '';
if (typeof value === 'string') return value;
try {
return JSON.stringify(value, null, 2);
} catch {
return String(value);
}
}
/**
* JsonViewer — pretty JSON/text leaf viewer.
* Covers manifests (YAML shown as-is), secrets, documents and messages whose
* payload is serializable, plus any raw text content.
*/
export function JsonViewer({node, fetch, data, className}: ICommanderViewerProps) {
const [fetched, setFetched] = useState<unknown>(undefined);
useEffect(() => {
if (!fetch || data !== undefined) return;
let cancelled = false;
void fetch().then(result => {
if (!cancelled) setFetched(result);
});
return () => {
cancelled = true;
};
}, [data, fetch]);
const content = data !== undefined ? data : (fetched ?? node);
return (
<pre
className={`blong-viewer blong-viewer-json ${className ?? ''}`}
style={{
margin: 0,
padding: '0.75rem',
overflow: 'auto',
fontSize: '0.85rem',
lineHeight: 1.4,
whiteSpace: 'pre-wrap',
wordBreak: 'break-word',
background: 'var(--surface-overlay)',
borderRadius: 'var(--border-radius)',
}}
>
{stringify(content)}
</pre>
);
}
|