rich-textarea/lib/index.cjs

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

"use client";

Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});let e=require("react"),t=require("react/jsx-runtime");var{min:n,max:o}=Math,r="current",i=/* @__PURE__ */ /* @__PURE__ */(0,t.jsx)("span",{style:{color:"transparent"},children:"​"});function s(e,t,n,r){var i=e.ownerDocument;r||(r=i.createRange());let s,l,c,u=i.createNodeIterator(e,NodeFilter.SHOW_TEXT,null,!1),d={},a={};for(;s=u.nextNode();)l=s.nodeValue,c=l.length,!d.node&&c>t&&(d.node=s,d.offset=t),!a.node&&c>=n&&(a.node=s,a.offset=n),t-=c,n-=c;return d.node&&r.setStart(d.node,o(d.offset,0)),a.node&&r.setEnd(a.node,o(a.offset,0)),r}var l=["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"],c=(e,t)=>e.getPropertyValue(t),u=(e,t,n)=>{e.setProperty(t,n)},d=(e,t)=>{const n=c(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,s=c(r,o),l=c(i,o);u(r,o,"none"),u(i,o,"auto");const d=document.elementFromPoint(n.clientX,n.clientY);return u(r,o,s),u(i,o,l),b(d,t)?d:null},b=(e,t)=>!!e&&t!==e&&t.contains(e),S=(e,t,n)=>{e.dispatchEvent(new MouseEvent(t,n))},v=(e,t)=>{S(e,t.type,t)},m=(e,t)=>{e&&S(e,"mouseout",t)},x=e=>{e.stopPropagation()},y=(e,t,n,o)=>{const i=a(e),s=e.style,u=t.style;n.current||(n[r]=c(i,"color")),l.forEach(e=>{u[e]=i[e]}),s.color=u.borderColor="transparent",s.caretColor=o?.caretColor||n.current},w=(e,t,n)=>(e.addEventListener(t,n),()=>{e.removeEventListener(t,n)}),_=(e,t)=>{let o,i=[null,null];const s={t(){setTimeout(()=>{t((()=>{const e=s.o(),t=s.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 s},M="undefined"!=typeof window?e.useLayoutEffect:e.useEffect,k=t=>{const n=(0,e.useRef)(void 0);return n.current||(n.current=t())},z=(e,t,n,o,r)=>{let i=null;const s=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 s=a(e);o([n,r,g(s),h(s)])}),l=w(e,"focus",()=>{r(!0)}),c=w(e,"blur",()=>{r(!1)}),u=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&&v(i,o)}),p=w(e,"mouseup",n=>{const o=f(e,t,n);o&&v(o,n)}),b=w(e,"mousemove",n=>{const o=f(e,t,n);((e,t,n)=>{e&&v(e,n),t!==e&&(m(t,n),e&&S(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&&v(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 s.observe(e),()=>{l(),c(),u(),d(),p(),b(),x(),y(),_(),M(),k(),z(),s.disconnect()}},T=(0,e.memo)(({u:n,p:o,h:r,S:s})=>{const[l,c]=(0,e.useState)("");return(0,e.useImperativeHandle)(o,()=>c,[]),/* @__PURE__ */ /* @__PURE__ */(0,t.jsxs)("div",{ref:n,"aria-hidden":!0,style:(0,e.useMemo)(()=>({width:s,transform:"translate(0px, 0px)",pointerEvents:"none",userSelect:"none",msUserSelect:"none",WebkitUserSelect:"none",boxSizing:"content-box",textSizeAdjust:"100%",WebkitTextSizeAdjust:"100%",MozTextSizeAdjust:"100%"}),[s]),onClick:x,onMouseDown:x,onMouseUp:x,onMouseOver:x,onMouseOut:x,onMouseMove:x,children:[(0,e.useMemo)(()=>r?r(l):l,[l,r]),i]})}),C=/*#__PURE__*/ /*#__PURE__*/(0,e.forwardRef)(({children:n,autoHeight:o,style:i,onChange:l,onKeyDown:c,onSelectionChange:u,...d},a)=>{const h=(0,e.useRef)(null),g=(0,e.useRef)(null),f=(0,e.useRef)(null),[[b,S,v,m],x]=(0,e.useState)([0,0,0,0]),[w,C]=(0,e.useState)(!1),E=(0,e.useRef)(""),[[A,W],j]=(0,e.useState)([null,null]),R=k(()=>_(h,j)),B=b+v,D=S+m,L=!!(B+D);return(0,e.useImperativeHandle)(a,()=>{const e=h[r],t={get selectionStart(){return R.o()},get selectionEnd(){return R.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,R,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]),(0,e.useEffect)(()=>{if(null!=A&&null!=W&&u)if(w){const e=s(g[r],A,A+1).getBoundingClientRect();u({focused:!0,top:e.top,left:e.left,height:e.height,selectionStart:A,selectionEnd:W})}else u({focused:!1,selectionStart:A,selectionEnd:W})},[w,A,W]),(0,e.useEffect)(()=>{const e=h[r];o&&e&&(e.style.height="auto",e.style.height=e.scrollHeight+"px")}),/* @__PURE__ */ /* @__PURE__ */(0,t.jsxs)("div",{style:(0,e.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:[/* @__PURE__ */ /* @__PURE__ */(0,t.jsx)("div",{style:(0,e.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:/* @__PURE__ */ /* @__PURE__ */(0,t.jsx)(T,{u:g,p:f,h:n,S:b})}),/* @__PURE__ */ /* @__PURE__ */(0,t.jsx)("textarea",{...d,ref:h,style:(0,e.useMemo)(()=>({...i,background:"transparent",margin:0,position:"absolute",...!L&&{position:void 0,verticalAlign:"top"}}),[i,L]),onChange:(0,e.useCallback)(e=>{f[r]?.(e.target.value),l?.(e)},[l]),onKeyDown:(0,e.useCallback)(e=>{e.nativeEvent.isComposing||229===e.nativeEvent.keyCode||(c?.(e),R.t())},[c])})]})}),E=/*#__PURE__*/ /*#__PURE__*/(0,e.memo)(({u:n,p:o,h:r,v:s})=>{const[l,c]=(0,e.useState)("");return(0,e.useImperativeHandle)(o,()=>c,[]),/* @__PURE__ */ /* @__PURE__ */(0,t.jsx)("div",{ref:n,"aria-hidden":!0,onClick:x,onMouseDown:x,onMouseUp:x,onMouseOver:x,onMouseOut:x,onMouseMove:x,children:/* @__PURE__ */ /* @__PURE__ */(0,t.jsx)("div",{style:{height:s},children:/* @__PURE__ */ /* @__PURE__ */(0,t.jsxs)("div",{style:(0,e.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:[(0,e.useMemo)(()=>r?r(l):l,[l,r]),i]})})})}),A=/*#__PURE__*/ /*#__PURE__*/(0,e.forwardRef)(({children:n,autoHeight:o,style:i,onChange:l,onKeyDown:c,onSelectionChange:u,...d},a)=>{const h=(0,e.useRef)(null),g=(0,e.useRef)(null),f=(0,e.useRef)(null),[[b,S,v,m],x]=(0,e.useState)([0,0,0,0]),[w,T]=(0,e.useState)(!1),C=(0,e.useRef)(""),[[A,W],j]=(0,e.useState)([null,null]),R=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(j(t),e){if(!h.current||!g.current)return;const{scrollTop:e,scrollLeft:t}=h[r];g[r].style.transform=`translate(${-t}px, ${-e}px)`}})}),B=b+v,D=S+m,L=!!(B+D);return(0,e.useImperativeHandle)(a,()=>{const e=h[r],t={get selectionStart(){return R.o()},get selectionEnd(){return R.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,R,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]),(0,e.useEffect)(()=>{if(null!=A&&null!=W&&u)if(w){const e=s(g[r],A,A+1).getBoundingClientRect();u({focused:!0,top:e.top,left:e.left,height:e.height,selectionStart:A,selectionEnd:W})}else u({focused:!1,selectionStart:A,selectionEnd:W})},[w,A,W]),(0,e.useEffect)(()=>{const e=h[r];o&&e&&(e.style.height="auto",e.style.height=e.scrollHeight+"px")}),/* @__PURE__ */ /* @__PURE__ */(0,t.jsxs)("div",{style:(0,e.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:[/* @__PURE__ */ /* @__PURE__ */(0,t.jsx)("div",{style:(0,e.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:/* @__PURE__ */ /* @__PURE__ */(0,t.jsx)(E,{u:g,p:f,h:n,v:S})}),/* @__PURE__ */ /* @__PURE__ */(0,t.jsx)("input",{...d,ref:h,style:(0,e.useMemo)(()=>({...i,background:"transparent",margin:0,position:"absolute",...!L&&{position:void 0,verticalAlign:"top"}}),[i,L]),onChange:(0,e.useCallback)(e=>{f[r]?.(e.target.value),l?.(e)},[l]),onKeyDown:(0,e.useCallback)(e=>{e.nativeEvent.isComposing||229===e.nativeEvent.keyCode||(c?.(e),R.t())},[c])})]})}),W=(e,t,n)=>{const o=[];let r=null;for(;r=e.exec(t);)n&&!n(t,r)||o.push(r);return o},j=e=>"rich-textarea-"+e,R=/*#__PURE__*/ /*#__PURE__*/(0,e.memo)(({m:n,_:o})=>{const r=(0,e.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(j(t),e)}),()=>{t.forEach((e,t)=>{CSS.highlights.delete(j(t)),e.clear()})}},[n]),/* @__PURE__ */ /* @__PURE__ */(0,t.jsx)("div",{ref:r,children:n})});exports.RichTextarea=C,exports.createCSSCustomHighlightRenderer=e=>{const n=e.reduce((e,[,t],n)=>e+`::highlight(${j(n)}){${t}}`,""),o=e.map(([e])=>e);return e=>/* @__PURE__ */ /* @__PURE__ */(0,t.jsxs)(t.Fragment,{children:[/* @__PURE__ */ /* @__PURE__ */(0,t.jsx)(R,{m:e,_:o}),/* @__PURE__ */ /* @__PURE__ */(0,t.jsx)("style",{children:n})]})},exports.createRegexRenderer=e=>{const n=e.map(([,e])=>e);return o=>{const[r,i,s]=e.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),s=e[2].get(r);i||e[1].set(o,i=[]),s||e[2].set(r,s=[]),i.push(n),s.push(n)}),e),[
/* @__PURE__ */new Set,
/* @__PURE__ */new Map,
/* @__PURE__ */new Map]),l=Array.from(r);l.sort((e,t)=>e-t);let c=0;const u=[],d=[];for(let e=0;e<l.length;e++){const r=l[e],a=l[e+1]??o.length;if(r===a)continue;const p=o.slice(c,r);p&&d.push(p);const h=i.get(r),g=s.get(a);h&&(h.forEach(e=>{u.push(e)}),u.sort((e,t)=>n.indexOf(t)-n.indexOf(e)));const f=o.slice(r,a);d.push(u.reduceRight((e,n,o)=>{const i=0===o?r+"":void 0;return"function"==typeof n?n({children:e,value:f,key:i}):/* @__PURE__ */ /* @__PURE__ */(0,t.jsx)("span",{style:n,children:e},i)},f)),g&&g.forEach(e=>{u.splice(u.indexOf(e),1)}),c=a}const a=o.slice(c);return a&&d.push(a),d}},exports.experimental_RichInput=A;
//# sourceMappingURL=index.cjs.map