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) • 8.38 kB
JavaScript
;const w=require("react/jsx-runtime"),u=require("react"),j=require("./config.cjs"),U=require("./index3.cjs"),R=require("./event-name.cjs"),z=require("@vavt/util"),Q=`.${j.prefix}-preview > [data-line]`,W=(t,e)=>+getComputedStyle(t).getPropertyValue(e).replace("px",""),X=(t,e)=>{const C=z.debounce(()=>{t.removeEventListener("scroll",o),t.addEventListener("scroll",o),e.removeEventListener("scroll",o),e.addEventListener("scroll",o)},50),o=D=>{const S=t.clientHeight,$=e.clientHeight,g=t.scrollHeight,r=e.scrollHeight,v=(g-S)/(r-$);D.target===t?(e.removeEventListener("scroll",o),e.scrollTo({top:t.scrollTop/v}),C()):(t.removeEventListener("scroll",o),t.scrollTo({top:e.scrollTop*v}),C())};return[()=>{C().finally(()=>{t.dispatchEvent(new Event("scroll"))})},()=>{t.removeEventListener("scroll",o),e.removeEventListener("scroll",o)}]},Y=(t,e,C)=>{const{view:o}=C,D=z.createSmoothScroll(),S=c=>o.lineBlockAt(o.state.doc.line(c+1).from).top,$=c=>o.lineBlockAt(o.state.doc.line(c+1).from).bottom;let g=[],r=[],v=[];const O=()=>{g=[],r=Array.from(e.querySelectorAll(Q)),v=r.map(a=>Number(a.dataset.line));const c=[...v],{lines:p}=o.state.doc;let E=c.shift()||0,n=c.shift()||p;for(let a=0;a<p;a++)a===n&&(E=a,n=c.shift()||p),g.push({start:E,end:n-1})},N=(c,p)=>{let E=1;for(let n=r.length-1;n-1>=0;n--){const a=r[n],f=r[n-1];if(a.offsetTop+a.offsetHeight>p&&f.offsetTop<p){E=Number(f.dataset.line);break}}for(let n=g.length-1;n>=0;n--){const a=$(g[n].end),f=S(g[n].start);if(a>c&&f<=c){E=E<g[n].start?E:g[n].start;break}}return E};let T=0,y=0;const P=()=>{var q,I,V;if(y!==0)return!1;T++;const{scrollDOM:c,contentHeight:p}=o;let E=W(e,"padding-top");const n=o.lineBlockAtHeight(c.scrollTop),{number:a}=o.state.doc.lineAt(n.from),f=g[a-1];if(!f)return!1;let l=1;const i=e.querySelector(`[data-line="${f.start}"]`)||((q=e.firstElementChild)==null?void 0:q.firstElementChild),h=e.querySelector(`[data-line="${f.end+1}"]`)||((I=e.lastElementChild)==null?void 0:I.lastElementChild),A=c.scrollHeight-c.clientHeight,m=e.scrollHeight-e.clientHeight;let H=S(f.start),d=$(f.end),s=i.offsetTop,L=h.offsetTop-s;H===0&&(s=0,i===h?(E=0,d=p-c.offsetHeight,L=m):L=h.offsetTop),l=(c.scrollTop-H)/(d-H);const b=h==((V=e.lastElementChild)==null?void 0:V.lastElementChild)?h.offsetTop+h.clientHeight:h.offsetTop;if(d>=A||b>m){const F=N(A,m);H=S(F),l=(c.scrollTop-H)/(A-H);const B=e.querySelector(`[data-line="${F}"]`);H>0&&B&&(s=B.offsetTop),L=m-s+W(e,"padding-top")}const _=s-E+L*l;D(e,_,()=>{T--})},k=()=>{var b,_,q,I,V,F;if(T!==0)return;y++;const{scrollDOM:c}=o,p=e.scrollTop,E=e.scrollHeight,n=c.scrollHeight-c.clientHeight,a=e.scrollHeight-e.clientHeight;let f=(b=e.firstElementChild)==null?void 0:b.firstElementChild,l=(_=e.firstElementChild)==null?void 0:_.lastElementChild;if(v.length>0){let B=Math.ceil(v[v.length-1]*(p/E)),x=v.findLastIndex(M=>M<=B);x=x===-1?0:x,B=v[x];for(let M=x;M>=0&&M<v.length;)if(r[M].offsetTop>p){if(M-1>=0){M--;continue}B=-1,x=M;break}else{if(M+1<v.length&&r[M+1].offsetTop<p){M++;continue}B=v[M],x=M;break}switch(x){case-1:{f=(q=e.firstElementChild)==null?void 0:q.firstElementChild,l=r[x];break}case v.length-1:{f=r[x],l=(I=e.firstElementChild)==null?void 0:I.lastElementChild;break}default:f=r[x],l=r[x+1===r.length?x:x+1]}}let i=f===((V=e.firstElementChild)==null?void 0:V.firstElementChild)?0:f.offsetTop-W(f,"margin-top"),h=l.offsetTop,A=0;const{start:m,end:H}=g[Number(f.dataset.line||0)];let d=S(m);const s=S(H+1===o.state.doc.lines?H:H+1);let L=0;if(s>n||l.offsetTop+l.offsetHeight>a){const B=N(n,a),x=e.querySelector(`[data-line="${B}"]`);i=x?x.offsetTop-W(x,"margin-top"):i,d=S(B),A=(p-i)/(a-i),L=n-d}else f===((F=e.firstElementChild)==null?void 0:F.firstElementChild)?(f===l&&(h=l.offsetTop+l.offsetHeight+ +getComputedStyle(l).marginBottom.replace("px","")),L=s,A=Math.max(p/h,0)):(A=Math.max((p-i)/(h-i),0),L=s-d);D(t,d+L*A,()=>{y--})},G=c=>{var a;const{scrollDOM:p,contentHeight:E}=o,n=p.clientHeight;if(E<=n||e.firstElementChild.clientHeight<=e.clientHeight||o.state.doc.lines<=((a=g[g.length-1])==null?void 0:a.end))return!1;c.target===t?P():k()};return[()=>{O(),t.addEventListener("scroll",G),e.addEventListener("scroll",G),t.dispatchEvent(new Event("scroll"))},()=>{t.removeEventListener("scroll",G),e.removeEventListener("scroll",G)}]},J=u.createContext({scrollElementRef:void 0,rootNodeRef:void 0}),K=({tocItem:t,mdHeadingId:e,onActive:C,onClick:o,scrollElementOffsetTop:D=0})=>{const{scrollElementRef:S,rootNodeRef:$}=u.useContext(J),g=u.useRef(null);return u.useEffect(()=>{t.active&&C(t,g.current)},[C,t,t.active]),w.jsxs("div",{ref:g,className:U.classnames([`${j.prefix}-catalog-link`,t.active&&`${j.prefix}-catalog-active`]),onClick:r=>{if(r.stopPropagation(),o==null||o(r,t),r.defaultPrevented)return;const v=e(t.text,t.level,t.index),O=$==null?void 0:$.current.getElementById(v),N=S==null?void 0:S.current;if(O&&N){let T=O.offsetParent,y=O.offsetTop;if(N.contains(T))for(;T&&N!=T;)y+=T==null?void 0:T.offsetTop,T=T==null?void 0:T.offsetParent;const P=O.previousElementSibling;let k=0;P||(k=W(O,"margin-top")),N==null||N.scrollTo({top:y-D-k,behavior:"smooth"})}},children:[w.jsx("span",{title:t.text,children:t.text}),t.children&&t.children.length>0&&w.jsx("div",{className:`${j.prefix}-catalog-wrapper`,children:t.children.map(r=>w.jsx(K,{mdHeadingId:e,tocItem:r,onActive:C,onClick:o,scrollElementOffsetTop:D},`${t.text}-link-${r.level}-${r.text}`))})]})},Z=t=>{const{editorId:e,mdHeadingId:C=j.defaultProps.mdHeadingId,theme:o="light",offsetTop:D=20,syncWith:S="preview"}=t,$=u.useMemo(()=>`#${e}-preview-wrapper`,[e]),[g,r]=u.useState([]),[v,O]=u.useState(),N=u.useRef(null),T=u.useRef(),y=u.useRef(),P=u.useRef(),[k,G]=u.useState(),[c,p]=u.useState({}),E=u.useMemo(()=>{const l=[];return g.forEach((i,h)=>{if(t.catalogMaxDepth&&i.level>t.catalogMaxDepth)return;const{text:A,level:m,line:H}=i,d={level:m,text:A,line:H,index:h+1,active:v===i};if(l.length===0)l.push(d);else{let s=l[l.length-1];if(d.level>s.level)for(let L=s.level+1;L<=6;L++){const{children:b}=s;if(!b){s.children=[d];break}if(s=b[b.length-1],d.level<=s.level){b.push(d);break}}else l.push(d)}}),l},[v,g,t.catalogMaxDepth]),[n]=u.useState(()=>t.scrollElement||`#${e}-preview-wrapper`),a=u.useCallback(()=>{var i;if(n instanceof HTMLElement)return n;let l=document;return(n===$||t.isScrollElementInShadow)&&(l=(i=N.current)==null?void 0:i.getRootNode()),l.querySelector(n)},[$,t.isScrollElementInShadow,n]),f=u.useCallback((l,i)=>{var h;p({top:i.offsetTop+W(i,"padding-top")+"px"}),(h=t.onActive)==null||h.call(t,l,i)},[t]);return u.useEffect(()=>{P.current=N.current.getRootNode()},[]),u.useEffect(()=>{let l=[];const i=m=>{if(m.length===0)return O(void 0),r([]),l=m,!1;const{activeHead:H}=m.reduce((d,s,L)=>{var _;let b=0;if(S==="preview"){const q=(_=P.current)==null?void 0:_.getElementById(C(s.text,s.level,L+1));q instanceof HTMLElement&&(b=U.getRelativeTop(q,T.current))}else if(k){const q=k.lineBlockAt(k.state.doc.line(s.line+1).from).top,I=k.scrollDOM.scrollTop;b=q-I}return b<D&&b>d.minTop?{activeHead:s,minTop:b}:d},{activeHead:m[0],minTop:Number.MIN_SAFE_INTEGER});O(H),r(m),l=m},h=()=>{i(l)},A=m=>{var H,d;if((H=y.current)==null||H.removeEventListener("scroll",h),S==="editor")y.current=k==null?void 0:k.scrollDOM;else{const s=a();T.current=s,y.current=s===document.documentElement?document:s}i(m),(d=y.current)==null||d.addEventListener("scroll",h)};return R.bus.on(e,{name:R.CATALOG_CHANGED,callback:A}),R.bus.emit(e,R.PUSH_CATALOG),()=>{var m;R.bus.remove(e,R.CATALOG_CHANGED,A),(m=y.current)==null||m.removeEventListener("scroll",h)}},[D,C,a,e,S,k]),u.useEffect(()=>{const l=i=>{G(i)};return R.bus.on(e,{name:R.GET_EDITOR_VIEW,callback:l}),R.bus.emit(e,R.SEND_EDITOR_VIEW),()=>{R.bus.remove(e,R.GET_EDITOR_VIEW,l)}},[e]),w.jsx(J.Provider,{value:{scrollElementRef:T,rootNodeRef:P},children:w.jsx("div",{className:U.classnames([`${j.prefix}-catalog`,o==="dark"&&`${j.prefix}-catalog-dark`,t.className||""]),style:t.style,ref:N,children:E.length>0&&w.jsxs(w.Fragment,{children:[w.jsx("div",{className:`${j.prefix}-catalog-indicator`,style:c}),w.jsx("div",{className:`${j.prefix}-catalog-container`,children:E.map(l=>w.jsx(K,{mdHeadingId:C,tocItem:l,onActive:f,onClick:t.onClick,scrollElementOffsetTop:t.scrollElementOffsetTop},`link-${l.level}-${l.text}`))})]})})})},ee=u.memo(Z);exports.MdCatalog=ee;exports.scrollAuto=Y;exports.scrollAutoWithScale=X;