rich-textarea/lib/index.js

A small customizable textarea for React to colorize, highlight, decorate texts, offer autocomplete and much more.

"use client";
var e=require("react/jsx-runtime"),t=require("react");const{min:n,max:o}=Math,r="current",i=e.jsx("span",{style:{color:"transparent"},children:"​"});function l(e,t,n,r){var i=e.ownerDocument;r||(r=i.createRange());let l,s,u,c=i.createNodeIterator(e,NodeFilter.SHOW_TEXT,null,!1),d={},a={};for(;l=c.nextNode();)s=l.nodeValue,u=s.length,!d.node&&u>t&&(d.node=l,d.offset=t),!a.node&&u>=n&&(a.node=l,a.offset=n),t-=u,n-=u;return d.node&&r.setStart(d.node,o(d.offset,0)),a.node&&r.setEnd(a.node,o(a.offset,0)),r}const s=["direction","padding","paddingTop","paddingBottom","paddingLeft","paddingRight","margin","marginTop","marginBottom","marginLeft","marginRight","border","borderWidth","borderTopWidth","borderBottomWidth","borderLeftWidth","borderRightWidth","borderStyle","borderTopStyle","borderBottomStyle","borderLeftStyle","borderRightStyle","fontSize","fontFamily","fontStyle","fontVariant","fontWeight","fontStretch","fontSizeAdjust","textAlign","textTransform","textIndent","letterSpacing","wordSpacing","lineHeight","whiteSpace","wordBreak","overflowWrap","tabSize","MozTabSize"],u=(e,t)=>e.getPropertyValue(t),c=(e,t,n)=>{e.setProperty(t,n)},d=(e,t)=>{const n=u(e,t);return n?parseInt(n,10):0},a=e=>getComputedStyle(e),p=e=>"string"==typeof e&&e.endsWith("%"),h=e=>d(e,"padding-top")+d(e,"padding-bottom")+d(e,"border-top")+d(e,"border-bottom"),g=e=>d(e,"padding-left")+d(e,"padding-right")+d(e,"border-left")+d(e,"border-right"),f=(e,t,n)=>{const o="pointer-events",r=e.style,i=t.style,l=u(r,o),s=u(i,o);c(r,o,"none"),c(i,o,"auto");const d=document.elementFromPoint(n.clientX,n.clientY);return c(r,o,l),c(i,o,s),v(d,t)?d:null},v=(e,t)=>!!e&&t!==e&&t.contains(e),b=(e,t,n)=>{e.dispatchEvent(new MouseEvent(t,n))},S=(e,t)=>{b(e,t.type,t)},m=(e,t)=>{e&&b(e,"mouseout",t)},x=e=>{e.stopPropagation()},y=(e,t,n,o)=>{const i=a(e),l=e.style,c=t.style;n[r]||(n[r]=u(i,"color")),s.forEach((e=>{c[e]=i[e]})),l.color=c.borderColor="transparent",l.caretColor=(null==o?void 0:o.caretColor)||n[r]},w=(e,t,n)=>(e.addEventListener(t,n),()=>{e.removeEventListener(t,n)}),_=(e,t)=>{let o,i=[null,null];const l={t(){setTimeout((()=>{t((()=>{const e=l.o(),t=l.i();return i[0]===e&&i[1]===t||(i=[e,t]),i})())}))},l(e){o=e},o(){const t=e[r];if(!t)return 0;const i=t.selectionStart;return o?n(i,t.selectionEnd-o.data.length):i},i(){const t=e[r];if(!t)return 0;const i=t.selectionEnd;return o?n(i,t.selectionStart+o.data.length):i}};return l},M="undefined"!=typeof window?t.useLayoutEffect:t.useEffect,k=e=>{const n=t.useRef(void 0);return n[r]||(n[r]=e())},z=(e,t,n,o,r)=>{let i=null;const l=new ResizeObserver((([t])=>{const{contentRect:{width:n,height:r},borderBoxSize:i}=t;if(i&&i[0])return void o([n,r,i[0].inlineSize-n,i[0].blockSize-r]);const l=a(e);o([n,r,g(l),h(l)])})),s=w(e,"focus",(()=>{r(!0)})),u=w(e,"blur",(()=>{r(!1)})),c=w(e,"scroll",(()=>{const{scrollTop:n,scrollLeft:o}=e;t.style.transform=`translate(${-o}px, ${-n}px)`})),d=w(e,"mousedown",(o=>{n.t();const r=w(document,"mouseup",(()=>{n.t(),r()})),i=f(e,t,o);i&&S(i,o)})),p=w(e,"mouseup",(n=>{const o=f(e,t,n);o&&S(o,n)})),v=w(e,"mousemove",(n=>{const o=f(e,t,n);((e,t,n)=>{e&&S(e,n),t!==e&&(m(t,n),e&&b(e,"mouseover",n))})(o,i,n),i=o})),x=w(e,"mouseleave",(e=>{m(i,e),i=null})),y=w(e,"click",(n=>{const o=f(e,t,n);o&&S(o,n)})),_=w(e,"input",(()=>{n.t()})),M=w(e,"compositionstart",(e=>{n.l(e)})),k=w(e,"compositionupdate",(e=>{n.l(e)})),z=w(e,"compositionend",(()=>{n.l()}));return l.observe(e),()=>{s(),u(),c(),d(),p(),v(),x(),y(),_(),M(),k(),z(),l.disconnect()}},T=t.memo((({u:n,p:o,h:r,v:l})=>{const[s,u]=t.useState("");return t.useImperativeHandle(o,(()=>u),[]),e.jsxs("div",{ref:n,"aria-hidden":!0,style:t.useMemo((()=>({width:l,transform:"translate(0px, 0px)",pointerEvents:"none",userSelect:"none",msUserSelect:"none",WebkitUserSelect:"none",boxSizing:"content-box",textSizeAdjust:"100%",WebkitTextSizeAdjust:"100%",MozTextSizeAdjust:"100%"})),[l]),onClick:x,onMouseDown:x,onMouseUp:x,onMouseOver:x,onMouseOut:x,onMouseMove:x,children:[t.useMemo((()=>r?r(s):s),[s,r]),i]})})),C=t.forwardRef((({children:n,autoHeight:o,style:i,onChange:s,onKeyDown:u,onSelectionChange:c,...d},a)=>{const h=t.useRef(null),g=t.useRef(null),f=t.useRef(null),[[v,b,S,m],x]=t.useState([0,0,0,0]),[w,C]=t.useState(!1),E=t.useRef(""),[[A,W],R]=t.useState([null,null]),j=k((()=>_(h,R))),B=v+S,D=b+m,L=!!(B+D);return t.useImperativeHandle(a,(()=>{const e=h[r],t={get selectionStart(){return j.o()},get selectionEnd(){return j.i()},setRangeText(t,n,o,r){e.setRangeText?e.setRangeText(t,n,o,r):(e.focus(),e.selectionStart=n,e.selectionEnd=o,document.execCommand("insertText",!1,t)),e.dispatchEvent(new Event("input",{bubbles:!0}))}};return new Proxy(e,{get(e,n){if(t[n])return t[n];const o=e[n];return"function"==typeof o?o.bind(e):o},set:(e,t,n)=>(e[t]=n,!0)})}),[]),M((()=>{const e=h[r],t=g[r];if(e&&t)return z(e,t,j,x,C)}),[]),M((()=>{const e=h[r];e&&f[r](e.value)}),[d.value]),M((()=>{const e=h[r],t=g[r];t&&e&&y(e,t,E,i)}),[i]),t.useEffect((()=>{if(null!=A&&null!=W&&c)if(w){const e=l(g[r],A,A+1).getBoundingClientRect();c({focused:!0,top:e.top,left:e.left,height:e.height,selectionStart:A,selectionEnd:W})}else c({focused:!1,selectionStart:A,selectionEnd:W})}),[w,A,W]),t.useEffect((()=>{const e=h[r];o&&e&&(e.style.height="auto",e.style.height=e.scrollHeight+"px")})),e.jsxs("div",{style:t.useMemo((()=>{let e=B,t=D;return i&&(p(i.width)&&(e=i.width),p(i.height)&&(t=i.height)),{display:"inline-block",position:"relative",width:e,height:t}}),[B,D,i]),children:[e.jsx("div",{style:t.useMemo((()=>{const e={position:"absolute",overflow:"hidden",top:0,left:0,width:B,height:D};return i?(["background","backgroundColor"].forEach((t=>{i[t]&&(e[t]=i[t])})),e):e}),[B,D,i]),children:e.jsx(T,{u:g,p:f,h:n,v})}),e.jsx("textarea",{...d,ref:h,style:t.useMemo((()=>({...i,background:"transparent",margin:0,position:"absolute",...!L&&{position:void 0,verticalAlign:"top"}})),[i,L]),onChange:t.useCallback((e=>{var t;null===(t=f[r])||void 0===t||t.call(f,e.target.value),null==s||s(e)}),[s]),onKeyDown:t.useCallback((e=>{e.nativeEvent.isComposing||229===e.nativeEvent.keyCode||(null==u||u(e),j.t())}),[u])})]})})),E=t.memo((({u:n,p:o,h:r,S:l})=>{const[s,u]=t.useState("");return t.useImperativeHandle(o,(()=>u),[]),e.jsx("div",{ref:n,"aria-hidden":!0,onClick:x,onMouseDown:x,onMouseUp:x,onMouseOver:x,onMouseOut:x,onMouseMove:x,children:e.jsx("div",{style:{height:l},children:e.jsxs("div",{style:t.useMemo((()=>({transform:"translate(0px, 0px)",pointerEvents:"none",userSelect:"none",msUserSelect:"none",WebkitUserSelect:"none",boxSizing:"content-box",textSizeAdjust:"100%",WebkitTextSizeAdjust:"100%",MozTextSizeAdjust:"100%",whiteSpace:"pre"})),[]),children:[t.useMemo((()=>r?r(s):s),[s,r]),i]})})})})),A=t.forwardRef((({children:n,autoHeight:o,style:i,onChange:s,onKeyDown:u,onSelectionChange:c,...d},a)=>{const h=t.useRef(null),g=t.useRef(null),f=t.useRef(null),[[v,b,S,m],x]=t.useState([0,0,0,0]),[w,T]=t.useState(!1),C=t.useRef(""),[[A,W],R]=t.useState([null,null]),j=k((()=>{const e=(()=>{if("undefined"==typeof navigator)return!1;const e=navigator.userAgent.toLowerCase();return e.indexOf("safari")>-1&&e.indexOf("chrome")<=-1})();return _(h,(t=>{if(R(t),e){if(!h[r]||!g[r])return;const{scrollTop:e,scrollLeft:t}=h[r];g[r].style.transform=`translate(${-t}px, ${-e}px)`}}))})),B=v+S,D=b+m,L=!!(B+D);return t.useImperativeHandle(a,(()=>{const e=h[r],t={get selectionStart(){return j.o()},get selectionEnd(){return j.i()},setRangeText(t,n,o,r){e.setRangeText?e.setRangeText(t,n,o,r):(e.focus(),e.selectionStart=n,e.selectionEnd=o,document.execCommand("insertText",!1,t)),e.dispatchEvent(new Event("input",{bubbles:!0}))}};return new Proxy(e,{get(e,n){if(t[n])return t[n];const o=e[n];return"function"==typeof o?o.bind(e):o},set:(e,t,n)=>(e[t]=n,!0)})}),[]),M((()=>{const e=h[r],t=g[r];if(e&&t)return z(e,t,j,x,T)}),[]),M((()=>{const e=h[r];e&&f[r](e.value)}),[d.value]),M((()=>{const e=h[r],t=g[r];t&&e&&y(e,t,C,i)}),[i]),t.useEffect((()=>{if(null!=A&&null!=W&&c)if(w){const e=l(g[r],A,A+1).getBoundingClientRect();c({focused:!0,top:e.top,left:e.left,height:e.height,selectionStart:A,selectionEnd:W})}else c({focused:!1,selectionStart:A,selectionEnd:W})}),[w,A,W]),t.useEffect((()=>{const e=h[r];o&&e&&(e.style.height="auto",e.style.height=e.scrollHeight+"px")})),e.jsxs("div",{style:t.useMemo((()=>{let e=B,t=D;return i&&(p(i.width)&&(e=i.width),p(i.height)&&(t=i.height)),{display:"inline-block",position:"relative",width:e,height:t}}),[B,D,i]),children:[e.jsx("div",{style:t.useMemo((()=>{const e={position:"absolute",overflow:"hidden",top:0,left:0,width:B,height:D};return i?(["background","backgroundColor"].forEach((t=>{i[t]&&(e[t]=i[t])})),e):e}),[B,D,i]),children:e.jsx(E,{u:g,p:f,h:n,S:b})}),e.jsx("input",{...d,ref:h,style:t.useMemo((()=>({...i,background:"transparent",margin:0,position:"absolute",...!L&&{position:void 0,verticalAlign:"top"}})),[i,L]),onChange:t.useCallback((e=>{var t;null===(t=f[r])||void 0===t||t.call(f,e.target.value),null==s||s(e)}),[s]),onKeyDown:t.useCallback((e=>{e.nativeEvent.isComposing||229===e.nativeEvent.keyCode||(null==u||u(e),j.t())}),[u])})]})})),W=(e,t,n)=>{const o=[];let r=null;for(;r=e.exec(t);)n&&!n(t,r)||o.push(r);return o},R=e=>"rich-textarea-"+e,j=t.memo((({m:n,_:o})=>{const r=t.useRef(null);return M((()=>{const e=r.current.firstChild,t=o.map((t=>new Highlight(...W(t,n).map((t=>{const n=t.index,o=t.index+t[0].length,r=new Range;return r.setStart(e,n),r.setEnd(e,o),r})))));return t.forEach(((e,t)=>{CSS.highlights.set(R(t),e)})),()=>{t.forEach(((e,t)=>{CSS.highlights.delete(R(t)),e.clear()}))}}),[n]),e.jsx("div",{ref:r,children:n})}));exports.RichTextarea=C,exports.createCSSCustomHighlightRenderer=t=>{const n=t.reduce(((e,[,t],n)=>e+`::highlight(${R(n)}){${t}}`),""),o=t.map((([e])=>e));return t=>e.jsxs(e.Fragment,{children:[e.jsx(j,{m:t,_:o}),e.jsx("style",{children:n})]})},exports.createRegexRenderer=t=>{const n=t.map((([,e])=>e));return o=>{var r;const[i,l,s]=t.reduce(((e,[t,n,r])=>(W(t,o,r).forEach((t=>{const o=t.index,r=t.index+t[0].length;e[0].add(o).add(r);let i=e[1].get(o),l=e[2].get(r);i||e[1].set(o,i=[]),l||e[2].set(r,l=[]),i.push(n),l.push(n)})),e)),[new Set,new Map,new Map]),u=Array.from(i);u.sort(((e,t)=>e-t));let c=0;const d=[],a=[];for(let t=0;t<u.length;t++){const i=u[t],p=null!==(r=u[t+1])&&void 0!==r?r:o.length;if(i===p)continue;const h=o.slice(c,i);h&&a.push(h);const g=l.get(i),f=s.get(p);g&&(g.forEach((e=>{d.push(e)})),d.sort(((e,t)=>n.indexOf(t)-n.indexOf(e))));const v=o.slice(i,p);a.push(d.reduceRight(((t,n,o)=>{const r=0===o?i+"":void 0;return"function"==typeof n?n({children:t,value:v,key:r}):e.jsx("span",{style:n,children:t},r)}),v)),f&&f.forEach((e=>{d.splice(d.indexOf(e),1)})),c=p}const p=o.slice(c);return p&&a.push(p),a}},exports.experimental_RichInput=A;
//# sourceMappingURL=index.js.map