json-joy
Version:
Collection of libraries for building collaborative editing apps.
30 lines (29 loc) • 1.36 kB
JavaScript
// biome-ignore lint: React is used for JSX
import * as React from 'react';
import { rule } from 'nano-theme';
import { useDebugCtx } from './context';
import { formatType } from '../../../json-crdt-extensions/peritext/slice/util';
import { DebugLabel } from '../../components/DebugLabel';
import { useSyncStore } from '../../web/react/hooks';
const labelContainerClass = rule({
pos: 'absolute',
top: '-8px',
left: '-4px',
us: 'none',
pe: 'none',
});
export const RenderBlock = ({ block, hash, children }) => {
const ctx = useDebugCtx();
const enabled = useSyncStore(ctx.state.enabled);
const showSliceOutlines = useSyncStore(ctx.state.showSliceOutlines);
const showSliceInfo = useSyncStore(ctx.state.showSliceInfo);
if (!enabled)
return children;
const isRoot = block.tag() === '';
if (isRoot)
return children;
return (React.createElement("div", { style: { position: 'relative' } },
showSliceInfo && (React.createElement("div", { contentEditable: false, className: labelContainerClass, onMouseDown: (e) => e.preventDefault() },
React.createElement(DebugLabel, { right: hash.toString(36) }, block.path.map((type) => formatType(type)).join('.')))),
showSliceOutlines ? React.createElement("div", { style: { outline: '1px dotted blue' } }, children) : children));
};