json-joy
Version:
Collection of libraries for building collaborative editing apps.
40 lines (39 loc) • 1.76 kB
JavaScript
import * as React from 'react';
import { rule } from 'nano-theme';
import { CaretToolbar } from 'nice-ui/lib/4-card/Toolbar/ToolbarMenu/CaretToolbar';
import { useToolbarPlugin } from './context';
import { useSyncStore, useSyncStoreOpt, useTimeout } from '../../web/react/hooks';
const height = 1.8;
const blockClass = rule({
pos: 'relative',
w: '0px',
h: '100%',
va: 'bottom',
});
const overClass = rule({
pos: 'absolute',
b: `${height}em`,
l: 0,
isolation: 'isolate',
us: 'none',
transform: 'translateX(calc(-50% + 0px))',
});
export const RenderFocus = ({ children }) => {
const { toolbar } = useToolbarPlugin();
const showInlineToolbar = toolbar.showInlineToolbar;
const [showInlineToolbarValue, toolbarVisibilityChangeTime] = useSyncStore(showInlineToolbar);
const enableAfterCoolDown = useTimeout(500, [toolbarVisibilityChangeTime]);
const isScrubbing = useSyncStoreOpt(toolbar.surface.dom?.cursor.mouseDown) || false;
// const focus = useSyncStoreOpt(toolbar.surface.dom?.cursor.focus) || false;
// const blurTimeout = useTimeout(300, [focus]);
const handleClose = React.useCallback(() => {
// toolbar.surface.dom?.focus();
// // if (showInlineToolbar.value) showInlineToolbar.next(false);
}, []);
let toolbarElement = null;
if (showInlineToolbarValue && !isScrubbing)
toolbarElement = (React.createElement(CaretToolbar, { disabled: !enableAfterCoolDown /* || (!focus && blurTimeout) */, menu: toolbar.getSelectionMenu(), onPopupClose: handleClose }));
return (React.createElement("span", { className: blockClass },
children,
React.createElement("span", { className: overClass, contentEditable: false }, toolbarElement)));
};