json-joy
Version:
Collection of libraries for building collaborative editing apps.
52 lines (51 loc) • 1.77 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.RenderFocus = void 0;
const tslib_1 = require("tslib");
// biome-ignore lint: React is used for JSX
const React = tslib_1.__importStar(require("react"));
const nano_theme_1 = require("nano-theme");
const constants_1 = require("./constants");
const react_1 = require("../../web/react");
const hooks_1 = require("../../web/react/hooks");
const width = 0.14;
const animationTime = '1s';
const animation = (0, nano_theme_1.keyframes)({
'from,to': {
bg: constants_1.DefaultRendererColors.ActiveCursor,
},
'50%': {
bg: 'transparent',
},
});
const blockClass = (0, nano_theme_1.rule)({
pos: 'relative',
pe: 'none',
us: 'none',
w: '0px',
h: '100%',
va: 'bottom',
});
const innerClass = (0, nano_theme_1.drule)({
an: `${animationTime} ${animation} step-end infinite`,
pos: 'absolute',
w: `calc(max(${width}em, 2px))`,
t: '-.175em',
h: '1.45em',
bg: constants_1.DefaultRendererColors.ActiveCursor,
'mix-blend-mode': 'multiply',
});
const RenderFocus = ({ left, italic, children }) => {
const { dom } = (0, react_1.usePeritext)();
const focus = (0, hooks_1.useSyncStoreOpt)(dom?.cursor.focus) || false;
const style = focus ? {} : { background: constants_1.DefaultRendererColors.InactiveCursor, animation: 'none' };
if (italic) {
style.rotate = '11deg';
}
return (React.createElement("span", { className: blockClass },
children,
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 })));
};
exports.RenderFocus = RenderFocus;