json-joy
Version:
Collection of libraries for building collaborative editing apps.
41 lines (40 loc) • 1.87 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.RenderInline = void 0;
const tslib_1 = require("tslib");
// biome-ignore lint: React is used for JSX
const React = tslib_1.__importStar(require("react"));
const context_1 = require("./context");
const DebugLabel_1 = require("../../components/DebugLabel");
const json_crdt_extensions_1 = require("../../../json-crdt-extensions");
const hooks_1 = require("../../web/react/hooks");
const RenderInline = (props) => {
const { children, inline } = props;
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);
const keys = Object.keys(inline.attr());
const tags = [];
const length = keys.length;
let hasCursor = false;
for (let i = 0; i < length; i++) {
let tag = keys[i];
if (typeof tag === 'string' && Number(tag) + '' === tag)
tag = Number(tag);
if (tag === -1 /* SliceTypeCon.Cursor */) {
hasCursor = true;
continue;
}
tag = json_crdt_extensions_1.SliceTypeName[tag] ?? tag + '';
tag = '<' + tag + '>';
tags.push(tag);
}
if (!enabled)
return children;
return (React.createElement("span", { style: { outline: showSliceOutlines ? '1px dotted red' : undefined, position: 'relative' } },
showSliceInfo && tags.length > 0 && (React.createElement("span", { contentEditable: false, style: { position: 'absolute', top: -6, left: -3, userSelect: 'none', pointerEvents: 'none' } },
React.createElement(DebugLabel_1.DebugLabel, { small: true }, tags.join(', ')))),
children));
};
exports.RenderInline = RenderInline;