import * as React from 'react';
import { usePeritext } from '../../web/react';
import { useSyncStoreOpt } from '../../web/react/hooks';
import { DefaultRendererColors } from './constants';
const RenderInlineSelection = (props) => {
    const { children, selection } = props;
    const { dom } = usePeritext();
    const focus = useSyncStoreOpt(dom?.cursor.focus) || false;
    const [left, right] = selection;
    const style = {
        backgroundColor: focus ? DefaultRendererColors.ActiveSelection : DefaultRendererColors.InactiveSelection,
        borderRadius: left === 'anchor' ? '.25em 1px 1px .25em' : right === 'anchor' ? '1px .25em .25em 1px' : '1px',
    };
    return React.createElement("span", { style: style }, children);
};
export const RenderInline = (props) => {
    const { inline, children } = props;
    const selection = inline.selection();
    let element = children;
    if (selection) {
        element = (React.createElement(RenderInlineSelection, { ...props, selection: selection }, element));
    }
    return element;
};
//# sourceMappingURL=RenderInline.js.map