json-joy
Version:
Collection of libraries for building collaborative editing apps.
33 lines (32 loc) • 1.25 kB
JavaScript
import * as React from 'react';
import { rule } from 'nano-theme';
import { useBehaviorSubject } from 'nice-ui/lib/hooks/useBehaviorSubject';
import { useToolbarPlugin } from '../../context';
import { AutoExpandableToolbar } from './AutoExpandableToolbar';
import { compare } from '../../../../../json-crdt-patch';
const blockClass = rule({
d: 'block',
pos: 'relative',
});
const topLeftOverlay = rule({
d: 'block',
pos: 'absolute',
t: '-8px',
l: '-72px',
});
const topRightOverlay = rule({
d: 'block',
pos: 'absolute',
t: '-36px',
r: '-16px',
});
export const LeafBlockFrame = ({ block, children }) => {
const { toolbar } = useToolbarPlugin();
const activeLeafBlockId = useBehaviorSubject(toolbar.activeLeafBlockId$);
const menu = React.useMemo(() => toolbar.leafBlockSmallMenu({ block }), [toolbar, block]);
const isBlockActive = !!activeLeafBlockId && 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, { menu: menu, more: { small: true } })))));
};