json-joy
Version:
Collection of libraries for building collaborative editing apps.
33 lines • 2.07 kB
JavaScript
import * as React from 'react';
import { CaretToolbar } from 'nice-ui/lib/4-card/Toolbar/ToolbarMenu/CaretToolbar';
import { useToolbarPlugin } from '../../context';
import { useSyncStore, useSyncStoreOpt, useTimeout } from '../../../../web/react/hooks';
import { CaretFrame } from '../util/CaretFrame';
import { FormattingsNewPane } from '../../formatting/FormattingsNewPane';
import { BottomPanePortal } from '../util/BottomPanePortal';
import { TopPanePortal } from '../util/TopPanePortal';
export const RenderFocus = ({ children, cursor }) => {
const { toolbar, surface } = useToolbarPlugin();
const showInlineToolbar = toolbar.showInlineToolbar;
const [showInlineToolbarValue, toolbarVisibilityChangeTime] = useSyncStore(showInlineToolbar);
const enableAfterCoolDown = useTimeout(300, [toolbarVisibilityChangeTime]);
const isScrubbing = useSyncStoreOpt(surface.dom?.cursor.mouseDown) || false;
const formatting = 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, null,
React.createElement(CaretToolbar, { disabled: !enableAfterCoolDown /* || (!focus && blurTimeout) */, menu: toolbar.getSelectionMenu(), onPopupClose: handleClose })));
if (!!formatting && showInlineToolbarValue && !isScrubbing && toolbar.txt.editor.mainCursor() === cursor) {
under = (React.createElement(BottomPanePortal, null,
React.createElement(FormattingsNewPane, { formatting: formatting, onSave: () => formatting.save() })));
}
return (React.createElement(CaretFrame, { over: over, under: under }, children));
};
//# sourceMappingURL=RenderFocus.js.map