json-joy
Version:
Collection of libraries for building collaborative editing apps.
47 lines (46 loc) • 1.51 kB
JavaScript
// biome-ignore lint: React is used for JSX
import * as React from 'react';
import { rule, drule, keyframes } from 'nano-theme';
import { DefaultRendererColors } from './constants';
import { usePeritext } from '../../web/react';
import { useSyncStoreOpt } from '../../web/react/hooks';
const width = 0.14;
const animationTime = '1s';
const animation = keyframes({
'from,to': {
bg: DefaultRendererColors.ActiveCursor,
},
'50%': {
bg: 'transparent',
},
});
const blockClass = rule({
pos: 'relative',
d: 'inline-block',
pe: 'none',
us: 'none',
w: '0px',
h: '100%',
va: 'center',
});
const innerClass = drule({
an: `${animationTime} ${animation} step-end infinite`,
pos: 'absolute',
w: `calc(max(${width}em, 3px))`,
t: '-1.1em',
h: '1.45em',
bg: DefaultRendererColors.ActiveCursor,
'mix-blend-mode': 'multiply',
});
export const RenderFocus = ({ left, italic, children }) => {
const { dom } = usePeritext();
const focus = useSyncStoreOpt(dom?.cursor.focus) || false;
const style = focus ? {} : { background: DefaultRendererColors.InactiveCursor, animation: 'none' };
if (italic) {
style.rotate = '11deg';
}
return (React.createElement("span", { className: blockClass },
React.createElement("span", { className: innerClass({
bdrad: left ? `0 ${width * 0.5}em ${width * 0.5}em 0` : `${width * 0.5}em 0 0 ${width * 0.5}em`,
}), style: style }, children)));
};