prism-react-editor
Version:
Lightweight, extensible code editor component for React apps
48 lines (47 loc) • 1.89 kB
JavaScript
"use client";
import { useMemo, useCallback, useLayoutEffect } from "react";
import { k as createTemplate, q as addOverlay } from "./local-Cq-4Fajb.js";
import { createPortal } from "react-dom";
const template = /* @__PURE__ */ createTemplate(
"<div class=pce-tooltip style=z-index:5;top:auto;display:flex;overflow-x:clip><div>"
);
const show = (editor, container, spacerStyle, above) => {
let cursor = editor.extensions.cursor;
if (cursor) {
let { left, right, top, bottom, height } = cursor.getPosition();
container.parentNode || addOverlay(editor, container);
spacerStyle.width = (editor.props.rtl ? right : left) + "px";
let placeAbove = !above == top > bottom && (above ? top : bottom) < container.clientHeight ? !above : above;
container.style[placeAbove ? "bottom" : "top"] = height + (placeAbove ? bottom : top) + "px";
container.style[placeAbove ? "top" : "bottom"] = "auto";
}
};
const useReactTooltip = (editor, element, fixedWidth = true) => {
const container = useMemo(template, []);
const spacerStyle = container.firstChild.style;
spacerStyle.flexShrink = fixedWidth ? "" : "0";
return [
useCallback(show.bind(editor, editor, container, spacerStyle), []),
useCallback(() => container.remove(), []),
createPortal(element, container)
];
};
const useTooltip = (editor, element, fixedWidth = true) => {
const container = useMemo(template, []);
const spacerStyle = container.firstChild.style;
useLayoutEffect(() => {
container.append(element);
return () => element.remove();
}, [element]);
spacerStyle.flexShrink = fixedWidth ? "" : "0";
element.style.flexShrink = fixedWidth ? "0" : "";
return [
useCallback(show.bind(editor, editor, container, spacerStyle), []),
useCallback(() => container.remove(), [])
];
};
export {
useReactTooltip,
useTooltip
};
//# sourceMappingURL=tooltips.js.map