md-editor-rt/lib/es/chunks/index4.mjs

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...

import { jsx as D, jsxs as I, Fragment as B } from "react/jsx-runtime";
import { useState as F, useRef as a, useCallback as h, cloneElement as O, useEffect as W } from "react";
import { p as E } from "./config.mjs";
const N = `${E}-dropdown-hidden`, K = (o) => {
  const { relative: f = "html", onChange: i, disabled: r } = o, [H, u] = F({
    overlayClass: N,
    overlayStyle: {}
  }), n = a({
    triggerHover: !1,
    overlayHover: !1
  }), c = a(null), d = a(null), v = h(() => {
    var S, x;
    if (r)
      return !1;
    n.current.triggerHover = !0;
    const e = c.current, t = d.current;
    if (!e || !t)
      return;
    const C = e.getBoundingClientRect(), $ = e.offsetTop, j = e.offsetLeft, k = C.height, q = C.width, p = e.getRootNode(), y = ((S = p.querySelector(f)) == null ? void 0 : S.scrollLeft) || 0, w = ((x = p.querySelector(f)) == null ? void 0 : x.clientWidth) || 0;
    let l = j - t.offsetWidth / 2 + q / 2 - y;
    l + t.offsetWidth > y + w && (l = y + w - t.offsetWidth), l < 0 && (l = 0), u((A) => ({
      ...A,
      overlayStyle: {
        top: $ + k + "px",
        left: l + "px"
      }
    })), i(!0);
  }, [r, i, f]), m = h(() => {
    if (r)
      return !1;
    n.current.overlayHover = !0;
  }, [r]), L = a(-1), s = h(
    (e) => {
      var t;
      if (r)
        return !1;
      (t = c.current) != null && t.contains(e.target) ? n.current.triggerHover = !1 : n.current.overlayHover = !1, clearTimeout(L.current), L.current = window.setTimeout(() => {
        !n.current.overlayHover && !n.current.triggerHover && i(!1);
      }, 10);
    },
    [r, i]
  ), R = o.children, g = o.overlay, T = O(R, {
    ref: c,
    key: "cloned-dropdown-trigger"
  });
  W(() => {
    o.visible ? u((e) => ({
      ...e,
      overlayClass: ""
    })) : u((e) => ({
      ...e,
      overlayClass: N
    }));
  }, [o.visible]), W(() => {
    const e = c.current, t = d.current;
    return e == null || e.addEventListener("mouseenter", v), e == null || e.addEventListener("mouseleave", s), t == null || t.addEventListener("mouseenter", m), t == null || t.addEventListener("mouseleave", s), () => {
      e == null || e.removeEventListener("mouseenter", v), e == null || e.removeEventListener("mouseleave", s), t == null || t.removeEventListener("mouseenter", m), t == null || t.removeEventListener("mouseleave", s);
    };
  }, [s, m, v]);
  const b = /* @__PURE__ */ D(
    "div",
    {
      className: `${E}-dropdown ${H.overlayClass}`,
      style: H.overlayStyle,
      ref: d,
      children: /* @__PURE__ */ D("div", { className: `${E}-dropdown-overlay`, children: g instanceof Array ? g[0] : g })
    }
  );
  return /* @__PURE__ */ I(B, { children: [
    T,
    b
  ] });
};
export {
  K as D
};