json-joy
Version:
Collection of libraries for building collaborative editing apps.
29 lines • 1.53 kB
JavaScript
import * as React from 'react';
import { useBehaviorSubject } from 'nice-ui/lib/hooks/useBehaviorSubject';
import { FormattingManageState } from './state';
import { FormattingList } from './FormattingList';
import { FormattingDisplay } from './FormattingDisplay';
import { useToolbarPlugin } from '../../context';
import { context } from './context';
export const FormattingsManagePane = ({ inline }) => {
const { toolbar } = useToolbarPlugin();
// biome-ignore lint: too many dependencies
const state = React.useMemo(() => new FormattingManageState(toolbar, inline), [toolbar, inline?.key()]);
const formattings = useBehaviorSubject(React.useMemo(() => state.getFormattings$(), [state]));
// biome-ignore lint: manually manage dependencies
React.useLayoutEffect(() => {
if (formattings.length === 1) {
state.select(formattings[0]);
}
}, [formattings]);
const selected = useBehaviorSubject(state.selected$);
if (!formattings.length)
return null;
if (selected || formattings.length === 1) {
return (React.createElement(context.Provider, { value: state },
React.createElement(FormattingDisplay, { formatting: selected || formattings[0], onClose: !selected || formattings.length === 1 ? void 0 : () => state.select(null) })));
}
return (React.createElement(context.Provider, { value: state },
React.createElement(FormattingList, { formattings: formattings, onSelect: state.select })));
};
//# sourceMappingURL=index.js.map