json-joy
Version:
Collection of libraries for building collaborative editing apps.
35 lines (34 loc) • 1.65 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.RenderBlock = void 0;
const tslib_1 = require("tslib");
// biome-ignore lint: React is used for JSX
const React = tslib_1.__importStar(require("react"));
const nano_theme_1 = require("nano-theme");
const context_1 = require("./context");
const util_1 = require("../../../json-crdt-extensions/peritext/slice/util");
const DebugLabel_1 = require("../../components/DebugLabel");
const hooks_1 = require("../../web/react/hooks");
const labelContainerClass = (0, nano_theme_1.rule)({
pos: 'absolute',
top: '-8px',
left: '-4px',
us: 'none',
pe: 'none',
});
const RenderBlock = ({ block, hash, children }) => {
const ctx = (0, context_1.useDebugCtx)();
const enabled = (0, hooks_1.useSyncStore)(ctx.state.enabled);
const showSliceOutlines = (0, hooks_1.useSyncStore)(ctx.state.showSliceOutlines);
const showSliceInfo = (0, hooks_1.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_1.DebugLabel, { right: hash.toString(36) }, block.path.map((type) => (0, util_1.formatType)(type)).join('.')))),
showSliceOutlines ? React.createElement("div", { style: { outline: '1px dotted blue' } }, children) : children));
};
exports.RenderBlock = RenderBlock;