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 | 1x 1x 1x | import React from 'react';
import type {ICommanderViewerProps} from './registry.js';
import {useViewerContent} from './util.js';
/**
* DocumentViewer — MongoDB / JSON document leaf viewer.
* Pretty-prints the document and shows a compact field summary.
*/
export function DocumentViewer({node, fetch, data, className}: ICommanderViewerProps) {
const content = useViewerContent(node, fetch, data);
const fieldCount =
content && typeof content === 'object' && !Array.isArray(content)
? Object.keys(content as Record<string, unknown>).length
: 0;
return (
<div className={`blong-viewer blong-viewer-document ${className ?? ''}`}>
{fieldCount > 0 && (
<div
style={{
padding: '0.4rem 0.75rem',
fontSize: '0.75rem',
color: 'var(--text-color-secondary)',
borderBottom: '1px solid var(--surface-border)',
}}
>
{fieldCount} field{fieldCount === 1 ? '' : 's'}
</div>
)}
<pre
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)',
}}
>
{JSON.stringify(content ?? {}, null, 2)}
</pre>
</div>
);
}
|