json-joy
Version:
Collection of libraries for building collaborative editing apps.
38 lines (37 loc) • 1.61 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.LeafBlockFrame = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const nano_theme_1 = require("nano-theme");
const useBehaviorSubject_1 = require("nice-ui/lib/hooks/useBehaviorSubject");
const context_1 = require("../../context");
const AutoExpandableToolbar_1 = require("./AutoExpandableToolbar");
const json_crdt_patch_1 = require("../../../../../json-crdt-patch");
const blockClass = (0, nano_theme_1.rule)({
d: 'block',
pos: 'relative',
});
const topLeftOverlay = (0, nano_theme_1.rule)({
d: 'block',
pos: 'absolute',
t: '-8px',
l: '-72px',
});
const topRightOverlay = (0, nano_theme_1.rule)({
d: 'block',
pos: 'absolute',
t: '-36px',
r: '-16px',
});
const LeafBlockFrame = ({ block, children }) => {
const { toolbar } = (0, context_1.useToolbarPlugin)();
const activeLeafBlockId = (0, useBehaviorSubject_1.useBehaviorSubject)(toolbar.activeLeafBlockId$);
const menu = React.useMemo(() => toolbar.leafBlockSmallMenu({ block }), [toolbar, block]);
const isBlockActive = !!activeLeafBlockId && (0, json_crdt_patch_1.compare)(activeLeafBlockId, block.marker?.id ?? block.txt.str.id) === 0;
return (React.createElement("div", { className: blockClass },
children,
isBlockActive && (React.createElement("div", { className: topLeftOverlay },
React.createElement(AutoExpandableToolbar_1.AutoExpandableToolbar, { menu: menu, more: { small: true } })))));
};
exports.LeafBlockFrame = LeafBlockFrame;