json-joy
Version:
Collection of libraries for building collaborative editing apps.
38 lines (37 loc) • 2.35 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.RenderFocus = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const CaretToolbar_1 = require("nice-ui/lib/4-card/Toolbar/ToolbarMenu/CaretToolbar");
const context_1 = require("../../context");
const hooks_1 = require("../../../../web/react/hooks");
const CaretFrame_1 = require("../util/CaretFrame");
const FormattingsNewPane_1 = require("../../formatting/FormattingsNewPane");
const BottomPanePortal_1 = require("../util/BottomPanePortal");
const TopPanePortal_1 = require("../util/TopPanePortal");
const RenderFocus = ({ children, cursor }) => {
const { toolbar, surface } = (0, context_1.useToolbarPlugin)();
const showInlineToolbar = toolbar.showInlineToolbar;
const [showInlineToolbarValue, toolbarVisibilityChangeTime] = (0, hooks_1.useSyncStore)(showInlineToolbar);
const enableAfterCoolDown = (0, hooks_1.useTimeout)(300, [toolbarVisibilityChangeTime]);
const isScrubbing = (0, hooks_1.useSyncStoreOpt)(surface.dom?.cursor.mouseDown) || false;
const formatting = (0, hooks_1.useSyncStore)(toolbar.newSlice);
// const focus = useSyncStoreOpt(surface.dom?.cursor.focus) || false;
// const blurTimeout = useTimeout(300, [focus]);
const handleClose = React.useCallback(() => {
// surface.dom?.focus();
// // if (showInlineToolbar.value) showInlineToolbar.next(false);
}, []);
let over;
let under;
if (!formatting && showInlineToolbarValue && !isScrubbing && toolbar.txt.editor.mainCursor() === cursor)
over = (React.createElement(TopPanePortal_1.TopPanePortal, null,
React.createElement(CaretToolbar_1.CaretToolbar, { disabled: !enableAfterCoolDown /* || (!focus && blurTimeout) */, menu: toolbar.getSelectionMenu(), onPopupClose: handleClose })));
if (!!formatting && showInlineToolbarValue && !isScrubbing && toolbar.txt.editor.mainCursor() === cursor) {
under = (React.createElement(BottomPanePortal_1.BottomPanePortal, null,
React.createElement(FormattingsNewPane_1.FormattingsNewPane, { formatting: formatting, onSave: () => formatting.save() })));
}
return (React.createElement(CaretFrame_1.CaretFrame, { over: over, under: under }, children));
};
exports.RenderFocus = RenderFocus;