collaborative-ui
Version:
React component library for building real-time collaborative editing applications.
72 lines (71 loc) • 2.63 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.JsonBlockText = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const HighlightCode_1 = tslib_1.__importDefault(require("nice-ui/lib/1-inline/HighlightCode"));
const shared_1 = require("@jsonjoy.com/json-pack/lib/cbor/shared");
const JsonEncoder_1 = require("@jsonjoy.com/json-pack/lib/json/JsonEncoder");
const nano_theme_1 = require("nano-theme");
const select_1 = require("../../util/select");
const use_t_1 = require("use-t");
const encoder = new JsonEncoder_1.JsonEncoder(shared_1.encoder.writer);
const css = {
block: (0, nano_theme_1.rule)({
pos: 'relative',
}),
text: (0, nano_theme_1.rule)({
...nano_theme_1.theme.font.mono.mid,
fz: '12px',
pd: '8px 4px 0',
mr: 0,
w: '100%',
ovx: 'auto',
bxz: 'border-box',
code: {
...nano_theme_1.theme.font.mono.mid,
fz: '12px',
},
}),
size: (0, nano_theme_1.rule)({
pos: 'absolute',
b: '-2px',
r: '0px',
pd: '2px 4px',
mr: '-2px',
bxz: 'border-box',
fz: '0.85em',
bdrad: '3px',
us: 'none',
pe: 'none',
}),
};
const JsonBlockText = ({ value, path, plain, tab = 2, wrap }) => {
const [t] = (0, use_t_1.useT)();
const theme = (0, nano_theme_1.useTheme)();
// biome-ignore lint: manual dependency list
const json = React.useMemo(() => {
const selected = (0, select_1.select)(value, path);
const encoded = new TextDecoder().decode(encoder.encode(selected));
return tab ? JSON.stringify(JSON.parse(encoded), null, tab) : encoded;
}, [value, path]);
const style = {
color: theme.g(0.2),
wordWrap: wrap ? 'normal' : undefined,
width: wrap ? '100%' : undefined,
};
let element = !!plain ? React.createElement("code", { style: style }, json) : React.createElement(HighlightCode_1.default, { code: json, lang: 'json' });
if (wrap) {
element = React.createElement("div", { className: css.text }, element);
}
else {
element = React.createElement("pre", { className: css.text }, element);
}
return (React.createElement("div", { className: css.block },
element,
React.createElement("div", { className: css.size, style: { color: theme.g(0, 0.3), background: theme.g(0.98, 0.9) } },
json.length.toLocaleString(),
" ",
t('Unicode codepoints'))));
};
exports.JsonBlockText = JsonBlockText;