md-editor-rt
Version:
Markdown editor for react, developed in jsx and typescript, dark theme、beautify content by prettier、render articles directly、paste or clip the picture and upload it...
75 lines (74 loc) • 2.54 kB
JavaScript
import { jsx as S, jsxs as k, Fragment as q } from "react/jsx-runtime";
import { useState as A, useRef as c, useCallback as h, cloneElement as I, useEffect as x } from "react";
import { p as E } from "./config.mjs";
const D = `${E}-dropdown-hidden`, z = (n) => {
const { relative: v = "html", onChange: i, disabled: t } = n, [H, f] = A({
overlayClass: D,
overlayStyle: {}
}), o = c({
triggerHover: !1,
overlayHover: !1
}), a = c(null), u = c(null), d = h(() => {
if (t)
return !1;
o.current.triggerHover = !0;
const e = a.current, r = u.current;
if (!e || !r)
return;
const C = e.getBoundingClientRect(), T = e.offsetTop, b = e.offsetLeft, $ = C.height, _ = C.width, p = e.getRootNode(), m = p.querySelector(v)?.scrollLeft || 0, w = p.querySelector(v)?.clientWidth || 0;
let l = b - r.offsetWidth / 2 + _ / 2 - m;
l + r.offsetWidth > m + w && (l = m + w - r.offsetWidth), l < 0 && (l = 0), f((j) => ({
...j,
overlayStyle: {
top: T + $ + "px",
left: l + "px"
}
})), i(!0);
}, [t, i, v]), g = h(() => {
if (t)
return !1;
o.current.overlayHover = !0;
}, [t]), L = c(-1), s = h(
(e) => {
if (t)
return !1;
a.current?.contains(e.target) ? o.current.triggerHover = !1 : o.current.overlayHover = !1, clearTimeout(L.current), L.current = window.setTimeout(() => {
!o.current.overlayHover && !o.current.triggerHover && i(!1);
}, 10);
},
[t, i]
), W = n.children, y = n.overlay, N = I(W, {
ref: a,
key: "cloned-dropdown-trigger"
});
x(() => {
n.visible ? f((e) => ({
...e,
overlayClass: ""
})) : f((e) => ({
...e,
overlayClass: D
}));
}, [n.visible]), x(() => {
const e = a.current, r = u.current;
return e?.addEventListener("mouseenter", d), e?.addEventListener("mouseleave", s), r?.addEventListener("mouseenter", g), r?.addEventListener("mouseleave", s), () => {
e?.removeEventListener("mouseenter", d), e?.removeEventListener("mouseleave", s), r?.removeEventListener("mouseenter", g), r?.removeEventListener("mouseleave", s);
};
}, [s, g, d]);
const R = /* @__PURE__ */ S(
"div",
{
className: `${E}-dropdown ${H.overlayClass}`,
style: H.overlayStyle,
ref: u,
children: /* @__PURE__ */ S("div", { className: `${E}-dropdown-overlay`, children: y instanceof Array ? y[0] : y })
}
);
return /* @__PURE__ */ k(q, { children: [
N,
R
] });
};
export {
z as D
};