UNPKG

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
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 };