json-joy
Version:
Collection of libraries for building collaborative editing apps.
34 lines (33 loc) • 1.84 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.FormattingsManagePane = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const useBehaviorSubject_1 = require("nice-ui/lib/hooks/useBehaviorSubject");
const state_1 = require("./state");
const FormattingList_1 = require("./FormattingList");
const FormattingDisplay_1 = require("./FormattingDisplay");
const context_1 = require("../../context");
const context_2 = require("./context");
const FormattingsManagePane = ({ inline }) => {
const { toolbar } = (0, context_1.useToolbarPlugin)();
// biome-ignore lint: too many dependencies
const state = React.useMemo(() => new state_1.FormattingManageState(toolbar, inline), [toolbar, inline?.key()]);
const formattings = (0, useBehaviorSubject_1.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 = (0, useBehaviorSubject_1.useBehaviorSubject)(state.selected$);
if (!formattings.length)
return null;
if (selected || formattings.length === 1) {
return (React.createElement(context_2.context.Provider, { value: state },
React.createElement(FormattingDisplay_1.FormattingDisplay, { formatting: selected || formattings[0], onClose: !selected || formattings.length === 1 ? void 0 : () => state.select(null) })));
}
return (React.createElement(context_2.context.Provider, { value: state },
React.createElement(FormattingList_1.FormattingList, { formattings: formattings, onSelect: state.select })));
};
exports.FormattingsManagePane = FormattingsManagePane;