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',
});
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 } })))));
};
//# sourceMappingURL=index.js.map