json-joy
Version:
Collection of libraries for building collaborative editing apps.
39 lines (38 loc) • 1.29 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.CaretFrame = void 0;
const tslib_1 = require("tslib");
// biome-ignore lint: lint/style/useImportType
const React = tslib_1.__importStar(require("react"));
const nano_theme_1 = require("nano-theme");
const height = 1.8;
const blockClass = (0, nano_theme_1.rule)({
pos: 'relative',
z: 100,
w: '0px',
h: '100%',
va: 'bottom',
});
const overClass = (0, nano_theme_1.rule)({
pos: 'absolute',
z: 101,
b: `${height}em`,
l: 0,
isolation: 'isolate',
transform: 'translateX(calc(-50% + 0px))',
});
const underClass = (0, nano_theme_1.rule)({
pos: 'absolute',
z: 102,
t: `${height}em`,
l: 0,
isolation: 'isolate',
transform: 'translateX(calc(-50% + 0px))',
});
const CaretFrame = ({ over, under, children }) => {
return (React.createElement("span", { className: blockClass },
children,
!!over && (React.createElement("span", { className: overClass, contentEditable: false, style: { '--jsonjoy-peritext-editable': 'no' } }, over)),
!!under && (React.createElement("span", { className: underClass, contentEditable: false, style: { '--jsonjoy-peritext-editable': 'no' } }, under))));
};
exports.CaretFrame = CaretFrame;