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

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