dyelight 1.1.0 → 1.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.d.mts +3 -1
  2. package/dist/index.d.mts.map +1 -1
  3. package/dist/index.mjs +1 -1
  4. package/dist/index.mjs.map +1 -1
  5. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -275,7 +275,8 @@ type DyeLightRef = {
275
275
  getValue: () => string; /** Selects all text in the textarea */
276
276
  select: () => void; /** Sets the selection range in the textarea */
277
277
  setSelectionRange: (start: number, end: number) => void; /** Sets the value of the textarea programmatically */
278
- setValue: (value: string) => void;
278
+ setValue: (value: string) => void; /** Scrolls the character position into view with an optional pixel offset */
279
+ scrollToPosition: (pos: number, offset?: number, behavior?: ScrollBehavior) => void;
279
280
  };
280
281
  //#endregion
281
282
  //#region src/DyeLight.d.ts
@@ -298,6 +299,7 @@ declare const createLineElement: (content: React.ReactNode, lineIndex: number, l
298
299
  * Renders a single line with character-level highlights and optional line-level highlighting
299
300
  */
300
301
  declare const renderHighlightedLine: (line: string, lineIndex: number, ranges: Array<{
302
+ absoluteStart: number;
301
303
  className?: string;
302
304
  end: number;
303
305
  start: number;
package/dist/index.d.mts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.mts","names":[],"sources":["../src/builder.ts","../src/types.ts","../src/DyeLight.tsx","../src/domUtils.ts"],"mappings":";;;;AAcA;;;cAAa,gBAAA;EAAA;;;;;;;;;;;;;;;;;EAAA,UAAA,GAAA,KAAA,EAkBW,KAAA;IAAA,SAAA;IAAA,KAAA;IAAA,KAAA,GAAmD,KAAA,CAAM,aAAA;EAAA;IAAA,SAAA;IAAA,GAAA;IAAA,KAAA;IAAA,KAAA;;;;;;;;;;;;;;;;;;iBAoB9D,KAAA;IAAA,SAAA;IAAA,KAAA;IAAA,IAAA;EAAA;IAAA,CAAA,UAAA;EAAA;EAAA;;;;;;;;;;;;;;;AC9BnB;AA4CA;;;;;;AA4CA;;ED1DmB,OAAA,GAAA,IAAA,UAAA,OAAA,EAgCkB,MAAA,WAAA,SAAA,WAAA,KAAA,GAA6C,KAAA,CAAM,aAAA;IAAA,SAAA;IAAA,GAAA;IAAA,KAAA;IAAA,KAAA;;;;;;;;;;;;;;AC9DxF;AA4CA;;;;;mBD2CqB,KAAA;IAAA,SAAA;IAAA,GAAA;IAAA,KAAA;IAAA,KAAA,GAAgE,KAAA,CAAM,aAAA;EAAA;IAAA,SAAA;IAAA,GAAA;IAAA,KAAA;IAAA,KAAA;;;;;;;;;;;ACvF3F;AA4CA;;;;;;AA4CA;;sEDqBwE,KAAA,CAAM,aAAA;IAAA,SAAA;IAAA,GAAA;IAAA,KAAA;IAAA,KAAA;;;;;;;;;AC7G9E;AA4CA;;;;;;AA4CA;;;;ACrFA;AAwBA;;;;;AA8DA;qEFiDuE,KAAA,CAAM,aAAA;IAAA,SAAA;IAAA,GAAA;IAAA,KAAA;IAAA,KAAA;;;;;;AC1I7E;AA4CA;;;;;;AA4CA;;;;KAxFY,cAAA;EAAA,gEAAA,SAAA;EAAA,GAAA;EAAA,KAAA;EAAA,KAAA,GAQA,KAAA,CAAM,aAAA;AAAA;AAAA;AAoClB;;;;;;AA4CA;;;;ACrFA;AAwBA;;;;;AA8DA;;;;;;;;;ACjFA;;;;;;;AFAkB,UAoCD,aAAA,SAAsB,IAAA,CAAK,KAAA,CAAM,sBAAA,CAAuB,mBAAA;EAAA;EAAA,SAAA;EAAA;EAAA,kBAAA;EAAA;EAAA,YAAA;EAAA;EAAA,GAAA;EAAA;EAAA,gBAAA;EAAA;EAAA,UAAA,GAYxD,cAAA;EAAA;EAAA,cAAA;IAAA,CAAA,UAAA;EAAA;EAAA;EAAA,QAAA,IAAA,KAAA;EAAA;EAAA,IAAA;EAAA;EAAA,KAAA;AAAA;AAAA;;;AAgCjB;;;;ACrFA;AAwBA;;;;;AA8DA;;;;;;;;ADjCiB,KAgCL,WAAA;EAAA,sCAAA,IAAA;EAAA,KAAA;EAAA,QAAA;EAAA,MAAA;EAAA,iBAAA,GAAA,KAAA,UAAA,GAAA;EAAA,QAAA,GAAA,KAAA;AAAA;;;;ACrFZ;AAwBA;;;;;AA8DA;;;;;AAtFA;AAwBA;cAxBa,iBAAA,GAAA,OAAA,EACA,KAAA,CAAM,SAAA,EAAA,SAAA,UAAA,aAAA,cAGhB,KAAA,CAAM,YAAA;AAAA;AAoBT;;AApBS,cAoBI,qBAAA,GAAA,IAAA,UAAA,SAAA,UAAA,MAAA,EAGD,KAAA;EAAA,SAAA;EAAA,GAAA;EAAA,KAAA;EAAA,KAAA,GAAgE,KAAA,CAAM,aAAA;AAAA,IAAA,aAAA,cAE/E,KAAA,CAAM,YAAA;AAAA;;AAyDT;;;AAzDS,cAyDI,QAAA,EAAQ,KAAA,CAAA,yBAAA,CAAA,aAAA,GAAA,KAAA,CAAA,aAAA,CAAA,WAAA;;;;ACjFrB;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;;;cAAa,UAAA,GAAA,QAAA,EAAwB,mBAAA"}
1
+ {"version":3,"file":"index.d.mts","names":[],"sources":["../src/builder.ts","../src/types.ts","../src/DyeLight.tsx","../src/domUtils.ts"],"mappings":";;;;AAcA;;;cAAa,gBAAA;EAAA;;;;;;;;;;;;;;;;;EAAA,UAAA,GAAA,KAAA,EAkBW,KAAA;IAAA,SAAA;IAAA,KAAA;IAAA,KAAA,GAAmD,KAAA,CAAM,aAAA;EAAA;IAAA,SAAA;IAAA,GAAA;IAAA,KAAA;IAAA,KAAA;;;;;;;;;;;;;;;;;;iBAoB9D,KAAA;IAAA,SAAA;IAAA,KAAA;IAAA,IAAA;EAAA;IAAA,CAAA,UAAA;EAAA;EAAA;;;;;;;;;;;;;;;AC9BnB;AA4CA;;;;;;AA4CA;;ED1DmB,OAAA,GAAA,IAAA,UAAA,OAAA,EAgCkB,MAAA,WAAA,SAAA,WAAA,KAAA,GAA6C,KAAA,CAAM,aAAA;IAAA,SAAA;IAAA,GAAA;IAAA,KAAA;IAAA,KAAA;;;;;;;;;;;;;;AC9DxF;AA4CA;;;;;mBD2CqB,KAAA;IAAA,SAAA;IAAA,GAAA;IAAA,KAAA;IAAA,KAAA,GAAgE,KAAA,CAAM,aAAA;EAAA;IAAA,SAAA;IAAA,GAAA;IAAA,KAAA;IAAA,KAAA;;;;;;;;;;;ACvF3F;AA4CA;;;;;;AA4CA;;sEDqBwE,KAAA,CAAM,aAAA;IAAA,SAAA;IAAA,GAAA;IAAA,KAAA;IAAA,KAAA;;;;;;;;;AC7G9E;AA4CA;;;;;;AA4CA;;;;ACrFA;AAwBA;;;;;AAyEA;qEFsCuE,KAAA,CAAM,aAAA;IAAA,SAAA;IAAA,GAAA;IAAA,KAAA;IAAA,KAAA;;;;;;AC1I7E;AA4CA;;;;;;AA4CA;;;;KAxFY,cAAA;EAAA,gEAAA,SAAA;EAAA,GAAA;EAAA,KAAA;EAAA,KAAA,GAQA,KAAA,CAAM,aAAA;AAAA;AAAA;AAoClB;;;;;;AA4CA;;;;ACrFA;AAwBA;;;;;AAyEA;;;;;;;;;AC5FA;;;;;;;AFAkB,UAoCD,aAAA,SAAsB,IAAA,CAAK,KAAA,CAAM,sBAAA,CAAuB,mBAAA;EAAA;EAAA,SAAA;EAAA;EAAA,kBAAA;EAAA;EAAA,YAAA;EAAA;EAAA,GAAA;EAAA;EAAA,gBAAA;EAAA;EAAA,UAAA,GAYxD,cAAA;EAAA;EAAA,cAAA;IAAA,CAAA,UAAA;EAAA;EAAA;EAAA,QAAA,IAAA,KAAA;EAAA;EAAA,IAAA;EAAA;EAAA,KAAA;AAAA;AAAA;;;AAgCjB;;;;ACrFA;AAwBA;;;;;AAyEA;;;;;;;;AD5CiB,KAgCL,WAAA;EAAA,sCAAA,IAAA;EAAA,KAAA;EAAA,QAAA;EAAA,MAAA;EAAA,iBAAA,GAAA,KAAA,UAAA,GAAA;EAAA,QAAA,GAAA,KAAA;EAAA,gBAAA,GAAA,GAAA,UAAA,MAAA,WAAA,QAAA,GAcoD,cAAA;AAAA;;;;ACnGhE;AAwBA;;;;;AAyEA;;;;;AAjGA;AAwBA;cAxBa,iBAAA,GAAA,OAAA,EACA,KAAA,CAAM,SAAA,EAAA,SAAA,UAAA,aAAA,cAGhB,KAAA,CAAM,YAAA;AAAA;AAoBT;;AApBS,cAoBI,qBAAA,GAAA,IAAA,UAAA,SAAA,UAAA,MAAA,EAGD,KAAA;EAAA,aAAA;EAAA,SAAA;EAAA,GAAA;EAAA,KAAA;EAAA,KAAA,GAKI,KAAA,CAAM,aAAA;AAAA,IAAA,aAAA,cAGnB,KAAA,CAAM,YAAA;AAAA;;AA8DT;;;AA9DS,cA8DI,QAAA,EAAQ,KAAA,CAAA,yBAAA,CAAA,aAAA,GAAA,KAAA,CAAA,aAAA,CAAA,WAAA;;;;AC5FrB;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;;;cAAa,UAAA,GAAA,QAAA,EAAwB,mBAAA"}
package/dist/index.mjs CHANGED
@@ -1,3 +1,3 @@
1
1
  import{forwardRef as e,useCallback as t,useEffect as n,useImperativeHandle as r,useMemo as i,useRef as a,useState as o}from"react";import{jsx as s,jsxs as c}from"react/jsx-runtime";const l={characters:e=>e.map(({className:e,index:t,style:n})=>({className:e,end:t+1,start:t,style:n})),lines:e=>{let t={};return e.forEach(({className:e,color:n,line:r})=>{t[r]=e||n||``}),t},pattern:(e,t,n,r)=>{let i=typeof t==`string`?new RegExp(t,`g`):new RegExp(t.source,`g`);return Array.from(e.matchAll(i)).map(e=>({className:n,end:e.index+e[0].length,start:e.index,style:r}))},ranges:e=>e.map(({className:e,end:t,start:n,style:r})=>({className:e,end:t,start:n,style:r})),selection:(e,t,n,r)=>[{className:n,end:t,start:e,style:r}],words:(e,t,n,r)=>{let i=RegExp(`\\b(${t.join(`|`)})\\b`,`g`);return l.pattern(e,i,n,r)}},u=e=>{e.style.height=`auto`,e.style.height=`${e.scrollHeight}px`},d=e=>{let[n,r]=o();return{handleAutoResize:t(t=>{e&&(u(t),r(t.scrollHeight))},[e]),textareaHeight:n}},f=e=>{let t=e.split(`
2
- `),n=[],r=0;return t.forEach((e,i)=>{n.push(r),r+=e.length+(i<t.length-1?1:0)}),{lineStarts:n,lines:t}},p=(e,t)=>{for(let n=t.length-1;n>=0;n--)if(e>=t[n])return{char:e-t[n],line:n};return{char:0,line:0}},m=e=>/^(#|rgb|hsl|var\(--.*?\)|transparent|currentColor|inherit|initial|unset)/i.test(e)||/^[a-z]+$/i.test(e),h=(e,t,n,r)=>{let{lines:i,lineStarts:a}=f(e),o={};return t.forEach(e=>{let t=p(e.start,a),n=p(e.end-1,a);for(let r=t.line;r<=n.line;r++){o[r]||(o[r]=[]);let t=a[r],n=Math.max(e.start-t,0),s=Math.min(e.end-t,i[r].length);s>n&&o[r].push({className:e.className,end:s,start:n,style:e.style})}}),i.map((e,t)=>{let i=n[t];return r(e,t,o[t]||[],i)})},g=(e,t,n,r)=>i(()=>h(e,t,n,r),[e,t,n,r]),_=(e,t)=>{if(!e||!t)return;let{scrollLeft:n,scrollTop:r}=e;t.scrollTop=r,t.scrollLeft=n},v=(e,t,n=getComputedStyle)=>{if(!e||!t)return;let r=n(e);t.style.padding=r.padding,t.style.fontSize=r.fontSize,t.style.fontFamily=r.fontFamily,t.style.lineHeight=r.lineHeight,t.style.letterSpacing=r.letterSpacing,t.style.wordSpacing=r.wordSpacing,t.style.textIndent=r.textIndent},y=()=>{let e=a(null);return{highlightLayerRef:e,syncScroll:t(t=>{_(t.current,e.current)},[]),syncStyles:t(t=>{v(t.current,e.current)},[])}},b=(e,t,n,r,i)=>{if(!e)return;let a=e.value;a!==t&&(n||r(a),i?.(a))},x=(e,t,n,r)=>{t||n(e),r?.(e)},S=(e,t,n,r,i)=>{e!==t&&(n||r(e),i?.(e))},C=(e,t,n,r,i)=>{e&&(e.value=t,n||r(t),i?.(t))},w=(e,r=``,i)=>{let s=a(null),[c,l]=o(e??r),u=e!==void 0,d=u?e:c,f=t(()=>{b(s.current,d,u,l,i)},[d,u,i]),p=t(e=>{x(e.target.value,u,l,i)},[u,i]),m=t(e=>{S(e.currentTarget.value,d,u,l,i)},[d,u,i]),h=t(e=>{C(s.current,e,u,l,i)},[u,i]);return n(()=>{f()},[f]),n(()=>{u&&s.current&&s.current.value!==e&&(s.current.value=e)},[u,e]),n(()=>{let e=s.current;if(!e)return;let t=new MutationObserver(()=>{f()});t.observe(e,{attributeFilter:[`value`],attributes:!0});let n=setInterval(()=>{e.value!==d&&f()},100);return()=>{t.disconnect(),clearInterval(n)}},[d,f]),{currentValue:d,handleChange:p,handleInput:m,setValue:h,textareaRef:s}},T={display:`block`,position:`relative`,width:`100%`},E={background:`transparent`,boxSizing:`border-box`,caretColor:`#000000`,color:`transparent`,minHeight:`auto`,position:`relative`,width:`100%`,zIndex:2},D={border:`transparent solid 1px`,bottom:0,boxSizing:`border-box`,color:`inherit`,fontFamily:`inherit`,fontSize:`inherit`,left:0,lineHeight:`inherit`,margin:0,overflow:`hidden`,pointerEvents:`none`,position:`absolute`,right:0,top:0,whiteSpace:`pre-wrap`,wordWrap:`break-word`,zIndex:1},O=(e,t,n)=>{if(!n)return s(`div`,{children:e},t);let r=m(n);return s(`div`,{className:r?void 0:n,style:r?{backgroundColor:n}:void 0,children:e},t)},k=(e,t,n,r)=>{if(n.length===0)return O(e||`\xA0`,t,r);let i=n.toSorted((e,t)=>e.start-t.start),a=[],o=0;if(i.forEach((n,r)=>{let{className:i,end:c,start:l,style:u}=n,d=Math.max(0,Math.min(l,e.length)),f=Math.max(d,Math.min(c,e.length));if(d>o){let t=e.slice(o,d);t&&a.push(t)}if(f>d){let n=e.slice(d,f);a.push(s(`span`,{className:i,style:u,children:n},`highlight-${t}-${r.toString()}`))}o=Math.max(o,f)}),o<e.length){let t=e.slice(o);t&&a.push(t)}return O(a.length===0?`\xA0`:a,t,r)},A=e(({className:e=``,containerClassName:i=``,defaultValue:o=``,dir:l=`ltr`,enableAutoResize:u=!0,highlights:f=[],lineHighlights:p={},onChange:m,rows:h=4,style:_,value:v,...b},x)=>{let S=a(null),{currentValue:C,handleChange:O,handleInput:A,setValue:j,textareaRef:M}=w(v,o,m),{handleAutoResize:N,textareaHeight:P}=d(u),{highlightLayerRef:F,syncScroll:I,syncStyles:L}=y(),R=g(C,f,p,k),z=t(e=>{O(e),N(e.target)},[O,N]),B=t(e=>{A(e),N(e.currentTarget)},[A,N]),V=t(e=>{j(e),M.current&&N(M.current)},[j,N,M]),H=t(()=>{I(M)},[I,M]);r(x,()=>({blur:()=>M.current?.blur(),focus:()=>M.current?.focus(),getValue:()=>C,select:()=>M.current?.select(),setSelectionRange:(e,t)=>M.current?.setSelectionRange(e,t),setValue:V}),[C,V]),n(()=>{M.current&&u&&N(M.current),L(M)},[C,N,u,L,M]);let U={...E,color:C?`transparent`:`inherit`,height:P?`${P}px`:void 0,resize:u?`none`:`vertical`},W={...D,direction:l,height:P?`${P}px`:void 0,padding:M.current?getComputedStyle(M.current).padding:`8px 12px`};return c(`div`,{className:i,ref:S,style:{...T,..._},children:[s(`div`,{"aria-hidden":`true`,ref:F,style:W,children:R}),s(`textarea`,{className:e,dir:l,onChange:z,onInput:B,onScroll:H,ref:M,rows:h,style:U,value:C,...b})]})});A.displayName=`DyeLight`;export{A as DyeLight,l as HighlightBuilder,u as autoResize,O as createLineElement,k as renderHighlightedLine};
2
+ `),n=[],r=0;return t.forEach((e,i)=>{n.push(r),r+=e.length+(i<t.length-1?1:0)}),{lineStarts:n,lines:t}},p=(e,t)=>{for(let n=t.length-1;n>=0;n--)if(e>=t[n])return{char:e-t[n],line:n};return{char:0,line:0}},m=e=>/^(#|rgb|hsl|var\(--.*?\)|transparent|currentColor|inherit|initial|unset)/i.test(e)||/^[a-z]+$/i.test(e),h=(e,t,n,r)=>{let{lines:i,lineStarts:a}=f(e),o={};return t.forEach(e=>{let t=p(e.start,a),n=p(e.end-1,a);for(let r=t.line;r<=n.line;r++){o[r]||(o[r]=[]);let t=a[r],n=Math.max(e.start-t,0),s=Math.min(e.end-t,i[r].length);s>n&&o[r].push({absoluteStart:e.start,className:e.className,end:s,start:n,style:e.style})}}),i.map((e,t)=>{let i=n[t];return r(e,t,o[t]||[],i)})},g=(e,t,n,r)=>i(()=>h(e,t,n,r),[e,t,n,r]),_=(e,t)=>{if(!e||!t)return;let{scrollLeft:n,scrollTop:r}=e;t.scrollTop=r,t.scrollLeft=n},v=(e,t,n=getComputedStyle)=>{if(!e||!t)return;let r=n(e);t.style.padding=r.padding,t.style.fontSize=r.fontSize,t.style.fontFamily=r.fontFamily,t.style.lineHeight=r.lineHeight,t.style.letterSpacing=r.letterSpacing,t.style.wordSpacing=r.wordSpacing,t.style.textIndent=r.textIndent},y=()=>{let e=a(null);return{highlightLayerRef:e,syncScroll:t(t=>{_(t.current,e.current)},[]),syncStyles:t(t=>{v(t.current,e.current)},[])}},b=(e,t,n,r,i)=>{if(!e)return;let a=e.value;a!==t&&(n||r(a),i?.(a))},x=(e,t,n,r)=>{t||n(e),r?.(e)},S=(e,t,n,r,i)=>{e!==t&&(n||r(e),i?.(e))},C=(e,t,n,r,i)=>{e&&(e.value=t,n||r(t),i?.(t))},w=(e,r=``,i)=>{let s=a(null),[c,l]=o(e??r),u=e!==void 0,d=u?e:c,f=t(()=>{b(s.current,d,u,l,i)},[d,u,i]),p=t(e=>{x(e.target.value,u,l,i)},[u,i]),m=t(e=>{S(e.currentTarget.value,d,u,l,i)},[d,u,i]),h=t(e=>{C(s.current,e,u,l,i)},[u,i]);return n(()=>{f()},[f]),n(()=>{u&&s.current&&s.current.value!==e&&(s.current.value=e)},[u,e]),n(()=>{let e=s.current;if(!e)return;let t=new MutationObserver(()=>{f()});t.observe(e,{attributeFilter:[`value`],attributes:!0});let n=setInterval(()=>{e.value!==d&&f()},100);return()=>{t.disconnect(),clearInterval(n)}},[d,f]),{currentValue:d,handleChange:p,handleInput:m,setValue:h,textareaRef:s}},T={display:`block`,position:`relative`,width:`100%`},E={background:`transparent`,boxSizing:`border-box`,caretColor:`#000000`,color:`transparent`,minHeight:`auto`,position:`relative`,width:`100%`,zIndex:2},D={border:`transparent solid 1px`,bottom:0,boxSizing:`border-box`,color:`inherit`,fontFamily:`inherit`,fontSize:`inherit`,left:0,lineHeight:`inherit`,margin:0,overflow:`hidden`,pointerEvents:`none`,position:`absolute`,right:0,top:0,whiteSpace:`pre-wrap`,wordWrap:`break-word`,zIndex:1},O=(e,t,n)=>{if(!n)return s(`div`,{children:e},t);let r=m(n);return s(`div`,{className:r?void 0:n,style:r?{backgroundColor:n}:void 0,children:e},t)},k=(e,t,n,r)=>{if(n.length===0)return O(e||`\xA0`,t,r);let i=n.toSorted((e,t)=>e.start-t.start),a=[],o=0;if(i.forEach((n,r)=>{let{className:i,end:c,start:l,style:u}=n,d=Math.max(0,Math.min(l,e.length)),f=Math.max(d,Math.min(c,e.length));if(d>o){let t=e.slice(o,d);t&&a.push(t)}if(f>d){let o=e.slice(d,f);a.push(s(`span`,{className:i,style:u,"data-range-start":n.absoluteStart,children:o},`highlight-${t}-${r.toString()}`))}o=Math.max(o,f)}),o<e.length){let t=e.slice(o);t&&a.push(t)}return O(a.length===0?`\xA0`:a,t,r)},A=e(({className:e=``,containerClassName:i=``,defaultValue:o=``,dir:l=`ltr`,enableAutoResize:u=!0,highlights:f=[],lineHighlights:p={},onChange:m,rows:h=4,style:_,value:v,...b},x)=>{let S=a(null),{currentValue:C,handleChange:O,handleInput:A,setValue:j,textareaRef:M}=w(v,o,m),{handleAutoResize:N,textareaHeight:P}=d(u),{highlightLayerRef:F,syncScroll:I,syncStyles:L}=y(),R=g(C,f,p,k),z=t(e=>{O(e),N(e.target)},[O,N]),B=t(e=>{A(e),N(e.currentTarget)},[A,N]),V=t(e=>{j(e),M.current&&N(M.current)},[j,N,M]);n(()=>{},[]);let H=t(()=>{I(M)},[I,M]);r(x,()=>({blur:()=>M.current?.blur(),focus:()=>M.current?.focus(),getValue:()=>C,scrollToPosition:(e,t=40,n=`auto`)=>{if(F.current&&M.current){let r=F.current.querySelector(`[data-range-start="${e.toString()}"]`);if(r instanceof HTMLElement){let e=M.current,i=r.offsetTop;r.offsetHeight;let a=e.scrollTop,o=e.clientHeight;i>=a&&a+o-t,n===`smooth`?e.scrollTo({behavior:`smooth`,top:i-t}):e.scrollTop=i-t}}},select:()=>M.current?.select(),setSelectionRange:(e,t)=>M.current?.setSelectionRange(e,t),setValue:V}),[C,V,F,M]),n(()=>{M.current&&u&&N(M.current),L(M)},[C,N,u,L,M]);let U={...E,color:C?`transparent`:`inherit`,height:P?`${P}px`:void 0,resize:u?`none`:`vertical`},W={...D,direction:l,height:P?`${P}px`:void 0,padding:M.current?getComputedStyle(M.current).padding:`8px 12px`};return c(`div`,{className:i,ref:S,style:{...T,..._},children:[s(`div`,{"aria-hidden":`true`,ref:F,style:W,children:R}),s(`textarea`,{className:e,dir:l,onChange:z,onInput:B,onScroll:H,ref:M,rows:h,style:U,value:C,...b})]})});A.displayName=`DyeLight`;export{A as DyeLight,l as HighlightBuilder,u as autoResize,O as createLineElement,k as renderHighlightedLine};
3
3
  //# sourceMappingURL=index.mjs.map
package/dist/index.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.mjs","names":["renderHighlightedLine"],"sources":["../src/builder.ts","../src/domUtils.ts","../src/hooks/useAutoResize.ts","../src/textUtils.ts","../src/hooks/useHighlightedContent.ts","../src/hooks/useHighlightSync.ts","../src/hooks/useTextareaValue.ts","../src/styles.ts","../src/DyeLight.tsx"],"sourcesContent":["/**\n * @fileoverview HighlightBuilder - Utility functions for creating highlight objects\n *\n * This module provides a convenient API for building highlight configurations\n * for the DyeLight component. It includes methods for creating character-level\n * highlights, line-level highlights, pattern-based highlights, and more.\n */\n\nimport type React from 'react';\n\n/**\n * Utility functions for building highlight objects for the DyeLight component\n * Provides a fluent API for creating various types of text highlights\n */\nexport const HighlightBuilder = {\n /**\n * Creates highlights for individual characters using absolute positions\n * @param chars - Array of character highlight configurations\n * @param chars[].index - Zero-based character index in the text\n * @param chars[].className - Optional CSS class name to apply\n * @param chars[].style - Optional inline styles to apply\n * @returns Array of character range highlights\n * @example\n * ```tsx\n * // Highlight characters at positions 5, 10, and 15\n * const highlights = HighlightBuilder.characters([\n * { index: 5, className: 'highlight-error' },\n * { index: 10, className: 'highlight-warning' },\n * { index: 15, style: { backgroundColor: 'yellow' } }\n * ]);\n * ```\n */\n characters: (chars: Array<{ className?: string; index: number; style?: React.CSSProperties }>) => {\n return chars.map(({ className, index, style }) => ({ className, end: index + 1, start: index, style }));\n },\n\n /**\n * Creates line highlights for entire lines\n * @param lines - Array of line highlight configurations\n * @param lines[].line - Zero-based line number\n * @param lines[].className - Optional CSS class name to apply to the line\n * @param lines[].color - Optional color value (CSS color, hex, rgb, etc.)\n * @returns Object mapping line numbers to highlight values\n * @example\n * ```tsx\n * // Highlight lines 0 and 2 with different styles\n * const lineHighlights = HighlightBuilder.lines([\n * { line: 0, className: 'error-line' },\n * { line: 2, color: '#ffff00' }\n * ]);\n * ```\n */\n lines: (lines: Array<{ className?: string; color?: string; line: number }>) => {\n const result: { [lineNumber: number]: string } = {};\n lines.forEach(({ className, color, line }) => {\n result[line] = className || color || '';\n });\n return result;\n },\n\n /**\n * Highlights text matching a pattern using absolute positions\n * @param text - The text to search within\n * @param pattern - Regular expression or string pattern to match\n * @param className - Optional CSS class name to apply to matches\n * @param style - Optional inline styles to apply to matches\n * @returns Array of character range highlights for all matches\n * @example\n * ```tsx\n * // Highlight all JavaScript keywords\n * const highlights = HighlightBuilder.pattern(\n * code,\n * /\\b(function|const|let|var|if|else|for|while)\\b/g,\n * 'keyword-highlight'\n * );\n *\n * // Highlight all email addresses\n * const emailHighlights = HighlightBuilder.pattern(\n * text,\n * /\\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\\.[A-Z|a-z]{2,}\\b/g,\n * 'email-highlight'\n * );\n * ```\n */\n pattern: (text: string, pattern: RegExp | string, className?: string, style?: React.CSSProperties) => {\n const regex = typeof pattern === 'string' ? new RegExp(pattern, 'g') : new RegExp(pattern.source, 'g');\n const matches = Array.from(text.matchAll(regex));\n\n return matches.map((match) => ({ className, end: match.index! + match[0].length, start: match.index!, style }));\n },\n\n /**\n * Creates character range highlights using absolute positions\n * @param ranges - Array of character range configurations\n * @param ranges[].start - Zero-based start index (inclusive)\n * @param ranges[].end - Zero-based end index (exclusive)\n * @param ranges[].className - Optional CSS class name to apply\n * @param ranges[].style - Optional inline styles to apply\n * @returns Array of character range highlights\n * @example\n * ```tsx\n * // Highlight specific ranges in the text\n * const highlights = HighlightBuilder.ranges([\n * { start: 0, end: 5, className: 'title-highlight' },\n * { start: 10, end: 20, style: { backgroundColor: 'yellow' } },\n * { start: 25, end: 30, className: 'error-highlight' }\n * ]);\n * ```\n */\n ranges: (ranges: Array<{ className?: string; end: number; start: number; style?: React.CSSProperties }>) => {\n return ranges.map(({ className, end, start, style }) => ({ className, end, start, style }));\n },\n\n /**\n * Highlights text between specific start and end positions\n * Convenience method for highlighting a single selection range\n * @param start - Zero-based start index (inclusive)\n * @param end - Zero-based end index (exclusive)\n * @param className - Optional CSS class name to apply\n * @param style - Optional inline styles to apply\n * @returns Array containing a single character range highlight\n * @example\n * ```tsx\n * // Highlight a selection from position 10 to 25\n * const selectionHighlight = HighlightBuilder.selection(\n * 10,\n * 25,\n * 'selection-highlight'\n * );\n * ```\n */\n selection: (start: number, end: number, className?: string, style?: React.CSSProperties) => {\n return [{ className, end, start, style }];\n },\n\n /**\n * Highlights entire words that match specific terms\n * @param text - The text to search within\n * @param words - Array of words to highlight\n * @param className - Optional CSS class name to apply to matched words\n * @param style - Optional inline styles to apply to matched words\n * @returns Array of character range highlights for all matched words\n * @example\n * ```tsx\n * // Highlight specific programming keywords\n * const highlights = HighlightBuilder.words(\n * sourceCode,\n * ['function', 'const', 'let', 'var', 'return'],\n * 'keyword'\n * );\n *\n * // Highlight important terms with custom styling\n * const termHighlights = HighlightBuilder.words(\n * document,\n * ['TODO', 'FIXME', 'NOTE'],\n * undefined,\n * { backgroundColor: 'orange', fontWeight: 'bold' }\n * );\n * ```\n */\n words: (text: string, words: string[], className?: string, style?: React.CSSProperties) => {\n const pattern = new RegExp(`\\\\b(${words.join('|')})\\\\b`, 'g');\n return HighlightBuilder.pattern(text, pattern, className, style);\n },\n};\n","/**\n * @fileoverview DOM utility functions for textarea manipulation\n *\n * This module provides utility functions for working with DOM elements,\n * specifically focused on textarea auto-resizing functionality used by\n * the DyeLight component.\n */\n\n/**\n * Automatically resizes a textarea element to fit its content\n *\n * This function adjusts the textarea height to match its scroll height,\n * effectively removing scrollbars when the content fits and expanding\n * the textarea as content is added. The height is first set to 'auto'\n * to allow the element to shrink if content is removed.\n *\n * @param textArea - The HTML textarea element to resize\n * @example\n * ```ts\n * const textarea = document.querySelector('textarea');\n * if (textarea) {\n * autoResize(textarea);\n * }\n *\n * // Or in an event handler:\n * const handleInput = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n * autoResize(e.target);\n * };\n * ```\n */\nexport const autoResize = (textArea: HTMLTextAreaElement) => {\n // Reset height to auto to allow shrinking\n textArea.style.height = 'auto';\n // Set height to scroll height to fit content\n textArea.style.height = `${textArea.scrollHeight}px`;\n};\n","import { useCallback, useState } from 'react';\n\nimport { autoResize } from '@/domUtils';\n\nexport const createAutoResizeHandler = (\n enableAutoResize: boolean,\n setTextareaHeight: (height: number | undefined) => void,\n resize: (element: HTMLTextAreaElement) => void = autoResize,\n) => {\n return (element: HTMLTextAreaElement) => {\n if (!enableAutoResize) {\n return;\n }\n\n resize(element);\n setTextareaHeight(element.scrollHeight);\n };\n};\n\n/**\n * Hook for managing textarea auto-resize functionality\n */\nexport const useAutoResize = (enableAutoResize: boolean) => {\n const [textareaHeight, setTextareaHeight] = useState<number | undefined>();\n\n /**\n * Handles automatic resizing of the textarea based on content\n */\n const handleAutoResize = useCallback(\n (element: HTMLTextAreaElement) => {\n if (!enableAutoResize) {\n return;\n }\n autoResize(element);\n setTextareaHeight(element.scrollHeight);\n },\n [enableAutoResize],\n );\n\n return { handleAutoResize, textareaHeight };\n};\n","/**\n * @fileoverview Text utility functions for position calculations and text processing\n *\n * This module provides utilities for converting between absolute text positions\n * and line-relative positions, as well as other text processing functions used\n * by the DyeLight component for highlight positioning.\n */\n\n/**\n * Analyzes text content and returns line information with position mappings\n * @param text - The text content to analyze\n * @returns Object containing lines array and line start positions\n * @returns returns.lines - Array of individual lines (without newline characters)\n * @returns returns.lineStarts - Array of absolute positions where each line starts\n * @example\n * ```ts\n * const text = \"Hello\\nWorld\\nTest\";\n * const { lines, lineStarts } = getLinePositions(text);\n * // lines: [\"Hello\", \"World\", \"Test\"]\n * // lineStarts: [0, 6, 12]\n * ```\n */\nexport const getLinePositions = (text: string) => {\n const lines = text.split('\\n');\n const lineStarts: number[] = [];\n let position = 0;\n\n lines.forEach((line, index) => {\n lineStarts.push(position);\n position += line.length + (index < lines.length - 1 ? 1 : 0); // +1 for \\n except last line\n });\n\n return { lineStarts, lines };\n};\n\n/**\n * Converts an absolute text position to line-relative coordinates\n * @param absolutePos - Zero-based absolute position in the entire text\n * @param lineStarts - Array of line start positions (from getLinePositions)\n * @returns Object containing line number and character position within that line\n * @returns returns.line - Zero-based line number\n * @returns returns.char - Zero-based character position within the line\n * @example\n * ```ts\n * const text = \"Hello\\nWorld\\nTest\";\n * const { lineStarts } = getLinePositions(text);\n * const pos = absoluteToLinePos(8, lineStarts);\n * // pos: { line: 1, char: 2 } (the 'r' in \"World\")\n * ```\n */\nexport const absoluteToLinePos = (absolutePos: number, lineStarts: number[]) => {\n for (let i = lineStarts.length - 1; i >= 0; i--) {\n if (absolutePos >= lineStarts[i]) {\n return { char: absolutePos - lineStarts[i], line: i };\n }\n }\n return { char: 0, line: 0 };\n};\n\n/**\n * Determines if a string value represents a CSS color value\n * @param value - The string value to test\n * @returns True if the value appears to be a color value, false otherwise\n * @example\n * ```ts\n * isColorValue('#ff0000'); // true\n * isColorValue('rgb(255, 0, 0)'); // true\n * isColorValue('red'); // true\n * isColorValue('my-css-class'); // false (contains hyphens)\n * isColorValue('transparent'); // true\n * isColorValue('var(--primary-color)'); // true\n * ```\n */\nexport const isColorValue = (value: string): boolean => {\n return (\n /^(#|rgb|hsl|var\\(--.*?\\)|transparent|currentColor|inherit|initial|unset)/i.test(value) ||\n /^[a-z]+$/i.test(value)\n );\n};\n","import { useMemo } from 'react';\nimport { absoluteToLinePos, getLinePositions } from '@/textUtils';\nimport type { CharacterRange } from '@/types';\n\nexport const computeHighlightedContent = (\n text: string,\n highlights: CharacterRange[],\n lineHighlights: { [lineNumber: number]: string },\n renderHighlightedLine: (\n line: string,\n lineIndex: number,\n ranges: Array<{ className?: string; end: number; start: number; style?: React.CSSProperties }>,\n lineHighlight?: string,\n ) => React.ReactElement,\n) => {\n const { lines, lineStarts } = getLinePositions(text);\n\n const highlightsByLine: {\n [lineIndex: number]: Array<{ className?: string; end: number; start: number; style?: React.CSSProperties }>;\n } = {};\n\n highlights.forEach((highlight) => {\n const startPos = absoluteToLinePos(highlight.start, lineStarts);\n const endPos = absoluteToLinePos(highlight.end - 1, lineStarts);\n\n for (let lineIndex = startPos.line; lineIndex <= endPos.line; lineIndex++) {\n if (!highlightsByLine[lineIndex]) {\n highlightsByLine[lineIndex] = [];\n }\n\n const lineStart = lineStarts[lineIndex];\n\n const rangeStart = Math.max(highlight.start - lineStart, 0);\n const rangeEnd = Math.min(highlight.end - lineStart, lines[lineIndex].length);\n\n if (rangeEnd > rangeStart) {\n highlightsByLine[lineIndex].push({\n className: highlight.className,\n end: rangeEnd,\n start: rangeStart,\n style: highlight.style,\n });\n }\n }\n });\n\n return lines.map((line, lineIndex) => {\n const lineHighlight = lineHighlights[lineIndex];\n const ranges = highlightsByLine[lineIndex] || [];\n\n return renderHighlightedLine(line, lineIndex, ranges, lineHighlight);\n });\n};\n\n/**\n * Hook for computing highlighted content from text and highlight ranges\n */\nexport const useHighlightedContent = (\n text: string,\n highlights: CharacterRange[],\n lineHighlights: { [lineNumber: number]: string },\n renderHighlightedLine: (\n line: string,\n lineIndex: number,\n ranges: Array<{ className?: string; end: number; start: number; style?: React.CSSProperties }>,\n lineHighlight?: string,\n ) => React.ReactElement,\n) => {\n /**\n * Computes the highlighted content by processing text and highlight ranges\n * Groups highlights by line and renders each line with appropriate highlighting\n */\n const highlightedContent = useMemo(\n () => computeHighlightedContent(text, highlights, lineHighlights, renderHighlightedLine),\n [text, highlights, lineHighlights, renderHighlightedLine],\n );\n\n return highlightedContent;\n};\n","import { useCallback, useRef } from 'react';\n\nexport const syncScrollPositions = (\n textarea: Pick<HTMLTextAreaElement, 'scrollLeft' | 'scrollTop'> | null,\n highlightLayer: Pick<HTMLDivElement, 'scrollLeft' | 'scrollTop'> | null,\n) => {\n if (!textarea || !highlightLayer) {\n return;\n }\n\n const { scrollLeft, scrollTop } = textarea;\n highlightLayer.scrollTop = scrollTop;\n highlightLayer.scrollLeft = scrollLeft;\n};\n\nexport const syncHighlightStyles = (\n textarea: HTMLTextAreaElement | null,\n highlightLayer: HTMLDivElement | null,\n computeStyle: (element: Element) => CSSStyleDeclaration = getComputedStyle,\n) => {\n if (!textarea || !highlightLayer) {\n return;\n }\n\n const computedStyle = computeStyle(textarea);\n\n highlightLayer.style.padding = computedStyle.padding;\n highlightLayer.style.fontSize = computedStyle.fontSize;\n highlightLayer.style.fontFamily = computedStyle.fontFamily;\n highlightLayer.style.lineHeight = computedStyle.lineHeight;\n highlightLayer.style.letterSpacing = computedStyle.letterSpacing;\n highlightLayer.style.wordSpacing = computedStyle.wordSpacing;\n highlightLayer.style.textIndent = computedStyle.textIndent;\n};\n\n/**\n * Hook for managing highlight layer synchronization\n */\nexport const useHighlightSync = () => {\n const highlightLayerRef = useRef<HTMLDivElement>(null);\n\n const syncScroll = useCallback((textareaRef: React.RefObject<HTMLTextAreaElement | null>) => {\n syncScrollPositions(textareaRef.current, highlightLayerRef.current);\n }, []);\n\n const syncStyles = useCallback((textareaRef: React.RefObject<HTMLTextAreaElement | null>) => {\n syncHighlightStyles(textareaRef.current, highlightLayerRef.current);\n }, []);\n\n return { highlightLayerRef, syncScroll, syncStyles };\n};\n","import { useCallback, useEffect, useRef, useState } from 'react';\n\nexport const syncValueWithDOM = (\n textarea: HTMLTextAreaElement | null,\n currentValue: string,\n isControlled: boolean,\n setInternalValue: (value: string) => void,\n onChange?: (value: string) => void,\n) => {\n if (!textarea) {\n return;\n }\n\n const domValue = textarea.value;\n if (domValue !== currentValue) {\n if (!isControlled) {\n setInternalValue(domValue);\n }\n onChange?.(domValue);\n }\n};\n\nexport const handleChangeValue = (\n newValue: string,\n isControlled: boolean,\n setInternalValue: (value: string) => void,\n onChange?: (value: string) => void,\n) => {\n if (!isControlled) {\n setInternalValue(newValue);\n }\n\n onChange?.(newValue);\n};\n\nexport const handleInputValue = (\n newValue: string,\n currentValue: string,\n isControlled: boolean,\n setInternalValue: (value: string) => void,\n onChange?: (value: string) => void,\n) => {\n if (newValue === currentValue) {\n return;\n }\n\n if (!isControlled) {\n setInternalValue(newValue);\n }\n\n onChange?.(newValue);\n};\n\nexport const applySetValue = (\n textarea: HTMLTextAreaElement | null,\n newValue: string,\n isControlled: boolean,\n setInternalValue: (value: string) => void,\n onChange?: (value: string) => void,\n) => {\n if (!textarea) {\n return;\n }\n\n textarea.value = newValue;\n\n if (!isControlled) {\n setInternalValue(newValue);\n }\n\n onChange?.(newValue);\n};\n\n/**\n * Hook for managing textarea value state and synchronization\n * Handles both controlled and uncontrolled modes, plus programmatic changes\n */\nexport const useTextareaValue = (value?: string, defaultValue = '', onChange?: (value: string) => void) => {\n const textareaRef = useRef<HTMLTextAreaElement>(null);\n const [internalValue, setInternalValue] = useState(value ?? defaultValue);\n\n const isControlled = value !== undefined;\n const currentValue = isControlled ? value : internalValue;\n\n const syncValueWithDOMCallback = useCallback(() => {\n syncValueWithDOM(textareaRef.current, currentValue, isControlled, setInternalValue, onChange);\n }, [currentValue, isControlled, onChange]);\n\n const handleChange = useCallback(\n (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n handleChangeValue(e.target.value, isControlled, setInternalValue, onChange);\n },\n [isControlled, onChange],\n );\n\n const handleInput = useCallback(\n (e: React.FormEvent<HTMLTextAreaElement>) => {\n handleInputValue(e.currentTarget.value, currentValue, isControlled, setInternalValue, onChange);\n },\n [currentValue, isControlled, onChange],\n );\n\n const setValue = useCallback(\n (newValue: string) => {\n applySetValue(textareaRef.current, newValue, isControlled, setInternalValue, onChange);\n },\n [isControlled, onChange],\n );\n\n useEffect(() => {\n syncValueWithDOMCallback();\n }, [syncValueWithDOMCallback]);\n\n useEffect(() => {\n if (isControlled && textareaRef.current && textareaRef.current.value !== value) {\n textareaRef.current.value = value;\n }\n }, [isControlled, value]);\n\n useEffect(() => {\n const textarea = textareaRef.current;\n if (!textarea) {\n return;\n }\n\n const observer = new MutationObserver(() => {\n syncValueWithDOMCallback();\n });\n\n observer.observe(textarea, { attributeFilter: ['value'], attributes: true });\n\n const intervalId = setInterval(() => {\n if (textarea.value !== currentValue) {\n syncValueWithDOMCallback();\n }\n }, 100);\n\n return () => {\n observer.disconnect();\n clearInterval(intervalId);\n };\n }, [currentValue, syncValueWithDOMCallback]);\n\n return { currentValue: currentValue, handleChange, handleInput, setValue, textareaRef };\n};\n","/**\n * @fileoverview Default styles for DyeLight component elements\n *\n * This module contains the default CSS-in-JS styles used by the DyeLight component\n * for its container, textarea, and highlight layer elements. These styles ensure\n * proper layering, positioning, and visual alignment between the textarea and\n * its highlight overlay.\n */\n\nimport type React from 'react';\n\n/**\n * Default styles for the main container element that wraps the entire component\n * Creates a positioned container that serves as the reference for absolutely positioned children\n */\nexport const DEFAULT_CONTAINER_STYLE: React.CSSProperties = {\n /** Ensures the container behaves as a block-level element */\n display: 'block',\n /** Enables absolute positioning for child elements */\n position: 'relative',\n /** Takes full width of parent container */\n width: '100%',\n};\n\n/**\n * Default styles for the textarea element\n * Makes the textarea transparent while maintaining its functionality and positioning\n */\nexport const DEFAULT_BASE_STYLE: React.CSSProperties = {\n /** Transparent background to show highlights underneath */\n background: 'transparent',\n /** Ensures consistent box model calculations */\n boxSizing: 'border-box',\n /** Maintains visible text cursor */\n caretColor: '#000000',\n /** Transparent text to reveal highlights while keeping cursor and selection */\n color: 'transparent',\n /** Prevents unwanted height constraints */\n minHeight: 'auto',\n /** Positioned above the highlight layer */\n position: 'relative',\n /** Takes full width of container */\n width: '100%',\n /** Ensures textarea appears above highlight layer */\n zIndex: 2,\n};\n\n/**\n * Default styles for the highlight layer that renders behind the textarea\n * Positioned absolutely to overlay perfectly with the textarea content\n */\nexport const DEFAULT_HIGHLIGHT_LAYER_STYLE: React.CSSProperties = {\n /** Transparent border to match textarea default border */\n border: 'transparent solid 1px',\n /** Stretch to fill container bottom */\n bottom: 0,\n /** Consistent box model with textarea */\n boxSizing: 'border-box',\n /** Inherit text color from parent */\n color: 'inherit',\n /** Match textarea font family */\n fontFamily: 'inherit',\n /** Match textarea font size */\n fontSize: 'inherit',\n /** Stretch to fill container left */\n left: 0,\n /** Match textarea line height */\n lineHeight: 'inherit',\n /** Remove default margins */\n margin: 0,\n /** Hide scrollbars on highlight layer */\n overflow: 'hidden',\n /** Prevent highlight layer from capturing mouse events */\n pointerEvents: 'none',\n /** Positioned absolutely within container */\n position: 'absolute',\n /** Stretch to fill container right */\n right: 0,\n /** Stretch to fill container top */\n top: 0,\n /** Preserve whitespace and line breaks like textarea */\n whiteSpace: 'pre-wrap',\n /** Break long words like textarea */\n wordWrap: 'break-word',\n /** Ensure highlight layer appears behind textarea */\n zIndex: 1,\n};\n","import type React from 'react';\nimport { forwardRef, useCallback, useEffect, useImperativeHandle, useRef } from 'react';\nimport { useAutoResize } from './hooks/useAutoResize';\nimport { useHighlightedContent } from './hooks/useHighlightedContent';\nimport { useHighlightSync } from './hooks/useHighlightSync';\nimport { useTextareaValue } from './hooks/useTextareaValue';\nimport { DEFAULT_BASE_STYLE, DEFAULT_CONTAINER_STYLE, DEFAULT_HIGHLIGHT_LAYER_STYLE } from './styles';\nimport { isColorValue } from './textUtils';\nimport type { DyeLightProps, DyeLightRef } from './types';\n\n/**\n * @fileoverview DyeLight - A React textarea component with advanced text highlighting capabilities\n *\n * This component provides a textarea with overlay-based text highlighting that supports:\n * - Character-level highlighting using absolute text positions\n * - Line-level highlighting with CSS classes or color values\n * - Automatic height adjustment based on content\n * - Synchronized scrolling between textarea and highlight layer\n * - Both controlled and uncontrolled usage patterns\n * - RTL text direction support\n */\n\n/**\n * Creates a line element with optional highlighting\n */\nexport const createLineElement = (\n content: React.ReactNode,\n lineIndex: number,\n lineHighlight?: string,\n): React.ReactElement => {\n if (!lineHighlight) {\n return <div key={lineIndex}>{content}</div>;\n }\n\n const isColor = isColorValue(lineHighlight);\n return (\n <div\n className={isColor ? undefined : lineHighlight}\n key={lineIndex}\n style={isColor ? { backgroundColor: lineHighlight } : undefined}\n >\n {content}\n </div>\n );\n};\n\n/**\n * Renders a single line with character-level highlights and optional line-level highlighting\n */\nexport const renderHighlightedLine = (\n line: string,\n lineIndex: number,\n ranges: Array<{ className?: string; end: number; start: number; style?: React.CSSProperties }>,\n lineHighlight?: string,\n): React.ReactElement => {\n if (ranges.length === 0) {\n const content = line || '\\u00A0';\n return createLineElement(content, lineIndex, lineHighlight);\n }\n\n // Sort ranges by start position\n const sortedRanges = ranges.toSorted((a, b) => a.start - b.start);\n\n const result: React.ReactNode[] = [];\n let lastIndex = 0;\n\n sortedRanges.forEach((range, idx) => {\n const { className, end, start, style: rangeStyle } = range;\n\n // Clamp range to line bounds\n const clampedStart = Math.max(0, Math.min(start, line.length));\n const clampedEnd = Math.max(clampedStart, Math.min(end, line.length));\n\n // Add text before highlight\n if (clampedStart > lastIndex) {\n const textBefore = line.slice(lastIndex, clampedStart);\n if (textBefore) {\n result.push(textBefore);\n }\n }\n\n // Add highlighted text\n if (clampedEnd > clampedStart) {\n const highlightedText = line.slice(clampedStart, clampedEnd);\n result.push(\n <span className={className} key={`highlight-${lineIndex}-${idx.toString()}`} style={rangeStyle}>\n {highlightedText}\n </span>,\n );\n }\n\n lastIndex = Math.max(lastIndex, clampedEnd);\n });\n\n // Add remaining text\n if (lastIndex < line.length) {\n const textAfter = line.slice(lastIndex);\n if (textAfter) {\n result.push(textAfter);\n }\n }\n\n const content = result.length === 0 ? '\\u00A0' : result;\n return createLineElement(content, lineIndex, lineHighlight);\n};\n\n/**\n * A textarea component with support for highlighting character ranges using absolute positions\n * and optional line-level highlighting. Perfect for syntax highlighting, error indication,\n * and text annotation without the complexity of line-based positioning.\n */\nexport const DyeLight = forwardRef<DyeLightRef, DyeLightProps>(\n (\n {\n className = '',\n containerClassName = '',\n defaultValue = '',\n dir = 'ltr',\n enableAutoResize = true,\n highlights = [],\n lineHighlights = {},\n onChange,\n rows = 4,\n style,\n value,\n ...props\n },\n ref,\n ) => {\n const containerRef = useRef<HTMLDivElement>(null);\n\n // Custom hooks for managing component logic\n const { currentValue, handleChange, handleInput, setValue, textareaRef } = useTextareaValue(\n value,\n defaultValue,\n onChange,\n );\n\n const { handleAutoResize, textareaHeight } = useAutoResize(enableAutoResize);\n\n const { highlightLayerRef, syncScroll, syncStyles } = useHighlightSync();\n\n const highlightedContent = useHighlightedContent(\n currentValue,\n highlights,\n lineHighlights,\n renderHighlightedLine,\n );\n\n // Enhanced change handler that includes auto-resize\n const handleChangeWithResize = useCallback(\n (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n handleChange(e);\n handleAutoResize(e.target);\n },\n [handleChange, handleAutoResize],\n );\n\n // Enhanced input handler that includes auto-resize\n const handleInputWithResize = useCallback(\n (e: React.FormEvent<HTMLTextAreaElement>) => {\n handleInput(e);\n handleAutoResize(e.currentTarget);\n },\n [handleInput, handleAutoResize],\n );\n\n // Enhanced setValue that includes auto-resize\n const setValueWithResize = useCallback(\n (newValue: string) => {\n setValue(newValue);\n if (textareaRef.current) {\n handleAutoResize(textareaRef.current);\n }\n },\n [setValue, handleAutoResize, textareaRef],\n );\n\n // Scroll handler with ref binding\n const handleScroll = useCallback(() => {\n syncScroll(textareaRef);\n }, [syncScroll, textareaRef]);\n\n // Expose ref methods\n useImperativeHandle(\n ref,\n () => ({\n blur: () => textareaRef.current?.blur(),\n focus: () => textareaRef.current?.focus(),\n getValue: () => currentValue,\n select: () => textareaRef.current?.select(),\n setSelectionRange: (start: number, end: number) => textareaRef.current?.setSelectionRange(start, end),\n setValue: setValueWithResize,\n }),\n [currentValue, setValueWithResize],\n );\n\n // Sync styles and handle auto-resize on value changes\n useEffect(() => {\n if (textareaRef.current && enableAutoResize) {\n handleAutoResize(textareaRef.current);\n }\n syncStyles(textareaRef);\n }, [currentValue, handleAutoResize, enableAutoResize, syncStyles, textareaRef]);\n\n // Compute styles\n const baseTextareaStyle: React.CSSProperties = {\n ...DEFAULT_BASE_STYLE,\n color: currentValue ? 'transparent' : 'inherit',\n height: textareaHeight ? `${textareaHeight}px` : undefined,\n resize: enableAutoResize ? 'none' : 'vertical',\n };\n\n const highlightLayerStyle: React.CSSProperties = {\n ...DEFAULT_HIGHLIGHT_LAYER_STYLE,\n direction: dir,\n height: textareaHeight ? `${textareaHeight}px` : undefined,\n padding: textareaRef.current ? getComputedStyle(textareaRef.current).padding : '8px 12px',\n };\n\n return (\n <div className={containerClassName} ref={containerRef} style={{ ...DEFAULT_CONTAINER_STYLE, ...style }}>\n <div aria-hidden=\"true\" ref={highlightLayerRef} style={highlightLayerStyle}>\n {highlightedContent}\n </div>\n\n <textarea\n className={className}\n dir={dir}\n onChange={handleChangeWithResize}\n onInput={handleInputWithResize}\n onScroll={handleScroll}\n ref={textareaRef}\n rows={rows}\n style={baseTextareaStyle}\n value={currentValue}\n {...props}\n />\n </div>\n );\n },\n);\n\nDyeLight.displayName = 'DyeLight';\n"],"mappings":"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"}
1
+ {"version":3,"file":"index.mjs","names":["renderHighlightedLine"],"sources":["../src/builder.ts","../src/domUtils.ts","../src/hooks/useAutoResize.ts","../src/textUtils.ts","../src/hooks/useHighlightedContent.ts","../src/hooks/useHighlightSync.ts","../src/hooks/useTextareaValue.ts","../src/styles.ts","../src/DyeLight.tsx"],"sourcesContent":["/**\n * @fileoverview HighlightBuilder - Utility functions for creating highlight objects\n *\n * This module provides a convenient API for building highlight configurations\n * for the DyeLight component. It includes methods for creating character-level\n * highlights, line-level highlights, pattern-based highlights, and more.\n */\n\nimport type React from 'react';\n\n/**\n * Utility functions for building highlight objects for the DyeLight component\n * Provides a fluent API for creating various types of text highlights\n */\nexport const HighlightBuilder = {\n /**\n * Creates highlights for individual characters using absolute positions\n * @param chars - Array of character highlight configurations\n * @param chars[].index - Zero-based character index in the text\n * @param chars[].className - Optional CSS class name to apply\n * @param chars[].style - Optional inline styles to apply\n * @returns Array of character range highlights\n * @example\n * ```tsx\n * // Highlight characters at positions 5, 10, and 15\n * const highlights = HighlightBuilder.characters([\n * { index: 5, className: 'highlight-error' },\n * { index: 10, className: 'highlight-warning' },\n * { index: 15, style: { backgroundColor: 'yellow' } }\n * ]);\n * ```\n */\n characters: (chars: Array<{ className?: string; index: number; style?: React.CSSProperties }>) => {\n return chars.map(({ className, index, style }) => ({ className, end: index + 1, start: index, style }));\n },\n\n /**\n * Creates line highlights for entire lines\n * @param lines - Array of line highlight configurations\n * @param lines[].line - Zero-based line number\n * @param lines[].className - Optional CSS class name to apply to the line\n * @param lines[].color - Optional color value (CSS color, hex, rgb, etc.)\n * @returns Object mapping line numbers to highlight values\n * @example\n * ```tsx\n * // Highlight lines 0 and 2 with different styles\n * const lineHighlights = HighlightBuilder.lines([\n * { line: 0, className: 'error-line' },\n * { line: 2, color: '#ffff00' }\n * ]);\n * ```\n */\n lines: (lines: Array<{ className?: string; color?: string; line: number }>) => {\n const result: { [lineNumber: number]: string } = {};\n lines.forEach(({ className, color, line }) => {\n result[line] = className || color || '';\n });\n return result;\n },\n\n /**\n * Highlights text matching a pattern using absolute positions\n * @param text - The text to search within\n * @param pattern - Regular expression or string pattern to match\n * @param className - Optional CSS class name to apply to matches\n * @param style - Optional inline styles to apply to matches\n * @returns Array of character range highlights for all matches\n * @example\n * ```tsx\n * // Highlight all JavaScript keywords\n * const highlights = HighlightBuilder.pattern(\n * code,\n * /\\b(function|const|let|var|if|else|for|while)\\b/g,\n * 'keyword-highlight'\n * );\n *\n * // Highlight all email addresses\n * const emailHighlights = HighlightBuilder.pattern(\n * text,\n * /\\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\\.[A-Z|a-z]{2,}\\b/g,\n * 'email-highlight'\n * );\n * ```\n */\n pattern: (text: string, pattern: RegExp | string, className?: string, style?: React.CSSProperties) => {\n const regex = typeof pattern === 'string' ? new RegExp(pattern, 'g') : new RegExp(pattern.source, 'g');\n const matches = Array.from(text.matchAll(regex));\n\n return matches.map((match) => ({ className, end: match.index! + match[0].length, start: match.index!, style }));\n },\n\n /**\n * Creates character range highlights using absolute positions\n * @param ranges - Array of character range configurations\n * @param ranges[].start - Zero-based start index (inclusive)\n * @param ranges[].end - Zero-based end index (exclusive)\n * @param ranges[].className - Optional CSS class name to apply\n * @param ranges[].style - Optional inline styles to apply\n * @returns Array of character range highlights\n * @example\n * ```tsx\n * // Highlight specific ranges in the text\n * const highlights = HighlightBuilder.ranges([\n * { start: 0, end: 5, className: 'title-highlight' },\n * { start: 10, end: 20, style: { backgroundColor: 'yellow' } },\n * { start: 25, end: 30, className: 'error-highlight' }\n * ]);\n * ```\n */\n ranges: (ranges: Array<{ className?: string; end: number; start: number; style?: React.CSSProperties }>) => {\n return ranges.map(({ className, end, start, style }) => ({ className, end, start, style }));\n },\n\n /**\n * Highlights text between specific start and end positions\n * Convenience method for highlighting a single selection range\n * @param start - Zero-based start index (inclusive)\n * @param end - Zero-based end index (exclusive)\n * @param className - Optional CSS class name to apply\n * @param style - Optional inline styles to apply\n * @returns Array containing a single character range highlight\n * @example\n * ```tsx\n * // Highlight a selection from position 10 to 25\n * const selectionHighlight = HighlightBuilder.selection(\n * 10,\n * 25,\n * 'selection-highlight'\n * );\n * ```\n */\n selection: (start: number, end: number, className?: string, style?: React.CSSProperties) => {\n return [{ className, end, start, style }];\n },\n\n /**\n * Highlights entire words that match specific terms\n * @param text - The text to search within\n * @param words - Array of words to highlight\n * @param className - Optional CSS class name to apply to matched words\n * @param style - Optional inline styles to apply to matched words\n * @returns Array of character range highlights for all matched words\n * @example\n * ```tsx\n * // Highlight specific programming keywords\n * const highlights = HighlightBuilder.words(\n * sourceCode,\n * ['function', 'const', 'let', 'var', 'return'],\n * 'keyword'\n * );\n *\n * // Highlight important terms with custom styling\n * const termHighlights = HighlightBuilder.words(\n * document,\n * ['TODO', 'FIXME', 'NOTE'],\n * undefined,\n * { backgroundColor: 'orange', fontWeight: 'bold' }\n * );\n * ```\n */\n words: (text: string, words: string[], className?: string, style?: React.CSSProperties) => {\n const pattern = new RegExp(`\\\\b(${words.join('|')})\\\\b`, 'g');\n return HighlightBuilder.pattern(text, pattern, className, style);\n },\n};\n","/**\n * @fileoverview DOM utility functions for textarea manipulation\n *\n * This module provides utility functions for working with DOM elements,\n * specifically focused on textarea auto-resizing functionality used by\n * the DyeLight component.\n */\n\n/**\n * Automatically resizes a textarea element to fit its content\n *\n * This function adjusts the textarea height to match its scroll height,\n * effectively removing scrollbars when the content fits and expanding\n * the textarea as content is added. The height is first set to 'auto'\n * to allow the element to shrink if content is removed.\n *\n * @param textArea - The HTML textarea element to resize\n * @example\n * ```ts\n * const textarea = document.querySelector('textarea');\n * if (textarea) {\n * autoResize(textarea);\n * }\n *\n * // Or in an event handler:\n * const handleInput = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n * autoResize(e.target);\n * };\n * ```\n */\nexport const autoResize = (textArea: HTMLTextAreaElement) => {\n // Reset height to auto to allow shrinking\n textArea.style.height = 'auto';\n // Set height to scroll height to fit content\n textArea.style.height = `${textArea.scrollHeight}px`;\n};\n","import { useCallback, useState } from 'react';\n\nimport { autoResize } from '@/domUtils';\n\nexport const createAutoResizeHandler = (\n enableAutoResize: boolean,\n setTextareaHeight: (height: number | undefined) => void,\n resize: (element: HTMLTextAreaElement) => void = autoResize,\n) => {\n return (element: HTMLTextAreaElement) => {\n if (!enableAutoResize) {\n return;\n }\n\n resize(element);\n setTextareaHeight(element.scrollHeight);\n };\n};\n\n/**\n * Hook for managing textarea auto-resize functionality\n */\nexport const useAutoResize = (enableAutoResize: boolean) => {\n const [textareaHeight, setTextareaHeight] = useState<number | undefined>();\n\n /**\n * Handles automatic resizing of the textarea based on content\n */\n const handleAutoResize = useCallback(\n (element: HTMLTextAreaElement) => {\n if (!enableAutoResize) {\n return;\n }\n autoResize(element);\n setTextareaHeight(element.scrollHeight);\n },\n [enableAutoResize],\n );\n\n return { handleAutoResize, textareaHeight };\n};\n","/**\n * @fileoverview Text utility functions for position calculations and text processing\n *\n * This module provides utilities for converting between absolute text positions\n * and line-relative positions, as well as other text processing functions used\n * by the DyeLight component for highlight positioning.\n */\n\n/**\n * Analyzes text content and returns line information with position mappings\n * @param text - The text content to analyze\n * @returns Object containing lines array and line start positions\n * @returns returns.lines - Array of individual lines (without newline characters)\n * @returns returns.lineStarts - Array of absolute positions where each line starts\n * @example\n * ```ts\n * const text = \"Hello\\nWorld\\nTest\";\n * const { lines, lineStarts } = getLinePositions(text);\n * // lines: [\"Hello\", \"World\", \"Test\"]\n * // lineStarts: [0, 6, 12]\n * ```\n */\nexport const getLinePositions = (text: string) => {\n const lines = text.split('\\n');\n const lineStarts: number[] = [];\n let position = 0;\n\n lines.forEach((line, index) => {\n lineStarts.push(position);\n position += line.length + (index < lines.length - 1 ? 1 : 0); // +1 for \\n except last line\n });\n\n return { lineStarts, lines };\n};\n\n/**\n * Converts an absolute text position to line-relative coordinates\n * @param absolutePos - Zero-based absolute position in the entire text\n * @param lineStarts - Array of line start positions (from getLinePositions)\n * @returns Object containing line number and character position within that line\n * @returns returns.line - Zero-based line number\n * @returns returns.char - Zero-based character position within the line\n * @example\n * ```ts\n * const text = \"Hello\\nWorld\\nTest\";\n * const { lineStarts } = getLinePositions(text);\n * const pos = absoluteToLinePos(8, lineStarts);\n * // pos: { line: 1, char: 2 } (the 'r' in \"World\")\n * ```\n */\nexport const absoluteToLinePos = (absolutePos: number, lineStarts: number[]) => {\n for (let i = lineStarts.length - 1; i >= 0; i--) {\n if (absolutePos >= lineStarts[i]) {\n return { char: absolutePos - lineStarts[i], line: i };\n }\n }\n return { char: 0, line: 0 };\n};\n\n/**\n * Determines if a string value represents a CSS color value\n * @param value - The string value to test\n * @returns True if the value appears to be a color value, false otherwise\n * @example\n * ```ts\n * isColorValue('#ff0000'); // true\n * isColorValue('rgb(255, 0, 0)'); // true\n * isColorValue('red'); // true\n * isColorValue('my-css-class'); // false (contains hyphens)\n * isColorValue('transparent'); // true\n * isColorValue('var(--primary-color)'); // true\n * ```\n */\nexport const isColorValue = (value: string): boolean => {\n return (\n /^(#|rgb|hsl|var\\(--.*?\\)|transparent|currentColor|inherit|initial|unset)/i.test(value) ||\n /^[a-z]+$/i.test(value)\n );\n};\n","import { useMemo } from 'react';\nimport { absoluteToLinePos, getLinePositions } from '@/textUtils';\nimport type { CharacterRange } from '@/types';\n\nexport const computeHighlightedContent = (\n text: string,\n highlights: CharacterRange[],\n lineHighlights: { [lineNumber: number]: string },\n renderHighlightedLine: (\n line: string,\n lineIndex: number,\n ranges: Array<{\n absoluteStart: number;\n className?: string;\n end: number;\n start: number;\n style?: React.CSSProperties;\n }>,\n lineHighlight?: string,\n ) => React.ReactElement,\n) => {\n const { lines, lineStarts } = getLinePositions(text);\n\n const highlightsByLine: {\n [lineIndex: number]: Array<{\n absoluteStart: number;\n className?: string;\n end: number;\n start: number;\n style?: React.CSSProperties;\n }>;\n } = {};\n\n highlights.forEach((highlight) => {\n const startPos = absoluteToLinePos(highlight.start, lineStarts);\n const endPos = absoluteToLinePos(highlight.end - 1, lineStarts);\n\n for (let lineIndex = startPos.line; lineIndex <= endPos.line; lineIndex++) {\n if (!highlightsByLine[lineIndex]) {\n highlightsByLine[lineIndex] = [];\n }\n\n const lineStart = lineStarts[lineIndex];\n\n const rangeStart = Math.max(highlight.start - lineStart, 0);\n const rangeEnd = Math.min(highlight.end - lineStart, lines[lineIndex].length);\n\n if (rangeEnd > rangeStart) {\n highlightsByLine[lineIndex].push({\n absoluteStart: highlight.start,\n className: highlight.className,\n end: rangeEnd,\n start: rangeStart,\n style: highlight.style,\n });\n }\n }\n });\n\n return lines.map((line, lineIndex) => {\n const lineHighlight = lineHighlights[lineIndex];\n const ranges = highlightsByLine[lineIndex] || [];\n\n return renderHighlightedLine(line, lineIndex, ranges, lineHighlight);\n });\n};\n\n/**\n * Hook for computing highlighted content from text and highlight ranges\n */\nexport const useHighlightedContent = (\n text: string,\n highlights: CharacterRange[],\n lineHighlights: { [lineNumber: number]: string },\n renderHighlightedLine: (\n line: string,\n lineIndex: number,\n ranges: Array<{\n absoluteStart: number;\n className?: string;\n end: number;\n start: number;\n style?: React.CSSProperties;\n }>,\n lineHighlight?: string,\n ) => React.ReactElement,\n) => {\n /**\n * Computes the highlighted content by processing text and highlight ranges\n * Groups highlights by line and renders each line with appropriate highlighting\n */\n const highlightedContent = useMemo(\n () => computeHighlightedContent(text, highlights, lineHighlights, renderHighlightedLine),\n [text, highlights, lineHighlights, renderHighlightedLine],\n );\n\n return highlightedContent;\n};\n","import { useCallback, useRef } from 'react';\n\nexport const syncScrollPositions = (\n textarea: Pick<HTMLTextAreaElement, 'scrollLeft' | 'scrollTop'> | null,\n highlightLayer: Pick<HTMLDivElement, 'scrollLeft' | 'scrollTop'> | null,\n) => {\n if (!textarea || !highlightLayer) {\n return;\n }\n\n const { scrollLeft, scrollTop } = textarea;\n highlightLayer.scrollTop = scrollTop;\n highlightLayer.scrollLeft = scrollLeft;\n};\n\nexport const syncHighlightStyles = (\n textarea: HTMLTextAreaElement | null,\n highlightLayer: HTMLDivElement | null,\n computeStyle: (element: Element) => CSSStyleDeclaration = getComputedStyle,\n) => {\n if (!textarea || !highlightLayer) {\n return;\n }\n\n const computedStyle = computeStyle(textarea);\n\n highlightLayer.style.padding = computedStyle.padding;\n highlightLayer.style.fontSize = computedStyle.fontSize;\n highlightLayer.style.fontFamily = computedStyle.fontFamily;\n highlightLayer.style.lineHeight = computedStyle.lineHeight;\n highlightLayer.style.letterSpacing = computedStyle.letterSpacing;\n highlightLayer.style.wordSpacing = computedStyle.wordSpacing;\n highlightLayer.style.textIndent = computedStyle.textIndent;\n};\n\n/**\n * Hook for managing highlight layer synchronization\n */\nexport const useHighlightSync = () => {\n const highlightLayerRef = useRef<HTMLDivElement>(null);\n\n const syncScroll = useCallback((textareaRef: React.RefObject<HTMLTextAreaElement | null>) => {\n syncScrollPositions(textareaRef.current, highlightLayerRef.current);\n }, []);\n\n const syncStyles = useCallback((textareaRef: React.RefObject<HTMLTextAreaElement | null>) => {\n syncHighlightStyles(textareaRef.current, highlightLayerRef.current);\n }, []);\n\n return { highlightLayerRef, syncScroll, syncStyles };\n};\n","import { useCallback, useEffect, useRef, useState } from 'react';\n\nexport const syncValueWithDOM = (\n textarea: HTMLTextAreaElement | null,\n currentValue: string,\n isControlled: boolean,\n setInternalValue: (value: string) => void,\n onChange?: (value: string) => void,\n) => {\n if (!textarea) {\n return;\n }\n\n const domValue = textarea.value;\n if (domValue !== currentValue) {\n if (!isControlled) {\n setInternalValue(domValue);\n }\n onChange?.(domValue);\n }\n};\n\nexport const handleChangeValue = (\n newValue: string,\n isControlled: boolean,\n setInternalValue: (value: string) => void,\n onChange?: (value: string) => void,\n) => {\n if (!isControlled) {\n setInternalValue(newValue);\n }\n\n onChange?.(newValue);\n};\n\nexport const handleInputValue = (\n newValue: string,\n currentValue: string,\n isControlled: boolean,\n setInternalValue: (value: string) => void,\n onChange?: (value: string) => void,\n) => {\n if (newValue === currentValue) {\n return;\n }\n\n if (!isControlled) {\n setInternalValue(newValue);\n }\n\n onChange?.(newValue);\n};\n\nexport const applySetValue = (\n textarea: HTMLTextAreaElement | null,\n newValue: string,\n isControlled: boolean,\n setInternalValue: (value: string) => void,\n onChange?: (value: string) => void,\n) => {\n if (!textarea) {\n return;\n }\n\n textarea.value = newValue;\n\n if (!isControlled) {\n setInternalValue(newValue);\n }\n\n onChange?.(newValue);\n};\n\n/**\n * Hook for managing textarea value state and synchronization\n * Handles both controlled and uncontrolled modes, plus programmatic changes\n */\nexport const useTextareaValue = (value?: string, defaultValue = '', onChange?: (value: string) => void) => {\n const textareaRef = useRef<HTMLTextAreaElement>(null);\n const [internalValue, setInternalValue] = useState(value ?? defaultValue);\n\n const isControlled = value !== undefined;\n const currentValue = isControlled ? value : internalValue;\n\n const syncValueWithDOMCallback = useCallback(() => {\n syncValueWithDOM(textareaRef.current, currentValue, isControlled, setInternalValue, onChange);\n }, [currentValue, isControlled, onChange]);\n\n const handleChange = useCallback(\n (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n handleChangeValue(e.target.value, isControlled, setInternalValue, onChange);\n },\n [isControlled, onChange],\n );\n\n const handleInput = useCallback(\n (e: React.FormEvent<HTMLTextAreaElement>) => {\n handleInputValue(e.currentTarget.value, currentValue, isControlled, setInternalValue, onChange);\n },\n [currentValue, isControlled, onChange],\n );\n\n const setValue = useCallback(\n (newValue: string) => {\n applySetValue(textareaRef.current, newValue, isControlled, setInternalValue, onChange);\n },\n [isControlled, onChange],\n );\n\n useEffect(() => {\n syncValueWithDOMCallback();\n }, [syncValueWithDOMCallback]);\n\n useEffect(() => {\n if (isControlled && textareaRef.current && textareaRef.current.value !== value) {\n textareaRef.current.value = value;\n }\n }, [isControlled, value]);\n\n useEffect(() => {\n const textarea = textareaRef.current;\n if (!textarea) {\n return;\n }\n\n const observer = new MutationObserver(() => {\n syncValueWithDOMCallback();\n });\n\n observer.observe(textarea, { attributeFilter: ['value'], attributes: true });\n\n const intervalId = setInterval(() => {\n if (textarea.value !== currentValue) {\n syncValueWithDOMCallback();\n }\n }, 100);\n\n return () => {\n observer.disconnect();\n clearInterval(intervalId);\n };\n }, [currentValue, syncValueWithDOMCallback]);\n\n return { currentValue: currentValue, handleChange, handleInput, setValue, textareaRef };\n};\n","/**\n * @fileoverview Default styles for DyeLight component elements\n *\n * This module contains the default CSS-in-JS styles used by the DyeLight component\n * for its container, textarea, and highlight layer elements. These styles ensure\n * proper layering, positioning, and visual alignment between the textarea and\n * its highlight overlay.\n */\n\nimport type React from 'react';\n\n/**\n * Default styles for the main container element that wraps the entire component\n * Creates a positioned container that serves as the reference for absolutely positioned children\n */\nexport const DEFAULT_CONTAINER_STYLE: React.CSSProperties = {\n /** Ensures the container behaves as a block-level element */\n display: 'block',\n /** Enables absolute positioning for child elements */\n position: 'relative',\n /** Takes full width of parent container */\n width: '100%',\n};\n\n/**\n * Default styles for the textarea element\n * Makes the textarea transparent while maintaining its functionality and positioning\n */\nexport const DEFAULT_BASE_STYLE: React.CSSProperties = {\n /** Transparent background to show highlights underneath */\n background: 'transparent',\n /** Ensures consistent box model calculations */\n boxSizing: 'border-box',\n /** Maintains visible text cursor */\n caretColor: '#000000',\n /** Transparent text to reveal highlights while keeping cursor and selection */\n color: 'transparent',\n /** Prevents unwanted height constraints */\n minHeight: 'auto',\n /** Positioned above the highlight layer */\n position: 'relative',\n /** Takes full width of container */\n width: '100%',\n /** Ensures textarea appears above highlight layer */\n zIndex: 2,\n};\n\n/**\n * Default styles for the highlight layer that renders behind the textarea\n * Positioned absolutely to overlay perfectly with the textarea content\n */\nexport const DEFAULT_HIGHLIGHT_LAYER_STYLE: React.CSSProperties = {\n /** Transparent border to match textarea default border */\n border: 'transparent solid 1px',\n /** Stretch to fill container bottom */\n bottom: 0,\n /** Consistent box model with textarea */\n boxSizing: 'border-box',\n /** Inherit text color from parent */\n color: 'inherit',\n /** Match textarea font family */\n fontFamily: 'inherit',\n /** Match textarea font size */\n fontSize: 'inherit',\n /** Stretch to fill container left */\n left: 0,\n /** Match textarea line height */\n lineHeight: 'inherit',\n /** Remove default margins */\n margin: 0,\n /** Hide scrollbars on highlight layer */\n overflow: 'hidden',\n /** Prevent highlight layer from capturing mouse events */\n pointerEvents: 'none',\n /** Positioned absolutely within container */\n position: 'absolute',\n /** Stretch to fill container right */\n right: 0,\n /** Stretch to fill container top */\n top: 0,\n /** Preserve whitespace and line breaks like textarea */\n whiteSpace: 'pre-wrap',\n /** Break long words like textarea */\n wordWrap: 'break-word',\n /** Ensure highlight layer appears behind textarea */\n zIndex: 1,\n};\n","import type React from 'react';\nimport { forwardRef, useCallback, useEffect, useImperativeHandle, useRef } from 'react';\nimport { useAutoResize } from './hooks/useAutoResize';\nimport { useHighlightedContent } from './hooks/useHighlightedContent';\nimport { useHighlightSync } from './hooks/useHighlightSync';\nimport { useTextareaValue } from './hooks/useTextareaValue';\nimport { DEFAULT_BASE_STYLE, DEFAULT_CONTAINER_STYLE, DEFAULT_HIGHLIGHT_LAYER_STYLE } from './styles';\nimport { isColorValue } from './textUtils';\nimport type { DyeLightProps, DyeLightRef } from './types';\n\n/**\n * @fileoverview DyeLight - A React textarea component with advanced text highlighting capabilities\n *\n * This component provides a textarea with overlay-based text highlighting that supports:\n * - Character-level highlighting using absolute text positions\n * - Line-level highlighting with CSS classes or color values\n * - Automatic height adjustment based on content\n * - Synchronized scrolling between textarea and highlight layer\n * - Both controlled and uncontrolled usage patterns\n * - RTL text direction support\n */\n\n/**\n * Creates a line element with optional highlighting\n */\nexport const createLineElement = (\n content: React.ReactNode,\n lineIndex: number,\n lineHighlight?: string,\n): React.ReactElement => {\n if (!lineHighlight) {\n return <div key={lineIndex}>{content}</div>;\n }\n\n const isColor = isColorValue(lineHighlight);\n return (\n <div\n className={isColor ? undefined : lineHighlight}\n key={lineIndex}\n style={isColor ? { backgroundColor: lineHighlight } : undefined}\n >\n {content}\n </div>\n );\n};\n\n/**\n * Renders a single line with character-level highlights and optional line-level highlighting\n */\nexport const renderHighlightedLine = (\n line: string,\n lineIndex: number,\n ranges: Array<{\n absoluteStart: number;\n className?: string;\n end: number;\n start: number;\n style?: React.CSSProperties;\n }>,\n lineHighlight?: string,\n): React.ReactElement => {\n if (ranges.length === 0) {\n const content = line || '\\u00A0';\n return createLineElement(content, lineIndex, lineHighlight);\n }\n\n // Sort ranges by start position\n const sortedRanges = ranges.toSorted((a, b) => a.start - b.start);\n\n const result: React.ReactNode[] = [];\n let lastIndex = 0;\n\n sortedRanges.forEach((range, idx) => {\n const { className, end, start, style: rangeStyle } = range;\n\n // Clamp range to line bounds\n const clampedStart = Math.max(0, Math.min(start, line.length));\n const clampedEnd = Math.max(clampedStart, Math.min(end, line.length));\n\n // Add text before highlight\n if (clampedStart > lastIndex) {\n const textBefore = line.slice(lastIndex, clampedStart);\n if (textBefore) {\n result.push(textBefore);\n }\n }\n\n // Add highlighted text\n if (clampedEnd > clampedStart) {\n const highlightedText = line.slice(clampedStart, clampedEnd);\n result.push(\n <span\n className={className}\n key={`highlight-${lineIndex}-${idx.toString()}`}\n style={rangeStyle}\n data-range-start={range.absoluteStart}\n >\n {highlightedText}\n </span>,\n );\n }\n\n lastIndex = Math.max(lastIndex, clampedEnd);\n });\n\n // Add remaining text\n if (lastIndex < line.length) {\n const textAfter = line.slice(lastIndex);\n if (textAfter) {\n result.push(textAfter);\n }\n }\n\n const content = result.length === 0 ? '\\u00A0' : result;\n return createLineElement(content, lineIndex, lineHighlight);\n};\n\n/**\n * A textarea component with support for highlighting character ranges using absolute positions\n * and optional line-level highlighting. Perfect for syntax highlighting, error indication,\n * and text annotation without the complexity of line-based positioning.\n */\nexport const DyeLight = forwardRef<DyeLightRef, DyeLightProps>(\n (\n {\n className = '',\n containerClassName = '',\n defaultValue = '',\n dir = 'ltr',\n enableAutoResize = true,\n highlights = [],\n lineHighlights = {},\n onChange,\n rows = 4,\n style,\n value,\n ...props\n },\n ref,\n ) => {\n const containerRef = useRef<HTMLDivElement>(null);\n\n // Custom hooks for managing component logic\n const { currentValue, handleChange, handleInput, setValue, textareaRef } = useTextareaValue(\n value,\n defaultValue,\n onChange,\n );\n\n const { handleAutoResize, textareaHeight } = useAutoResize(enableAutoResize);\n\n const { highlightLayerRef, syncScroll, syncStyles } = useHighlightSync();\n\n const highlightedContent = useHighlightedContent(\n currentValue,\n highlights,\n lineHighlights,\n renderHighlightedLine,\n );\n\n // Enhanced change handler that includes auto-resize\n const handleChangeWithResize = useCallback(\n (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n handleChange(e);\n handleAutoResize(e.target);\n },\n [handleChange, handleAutoResize],\n );\n\n // Enhanced input handler that includes auto-resize\n const handleInputWithResize = useCallback(\n (e: React.FormEvent<HTMLTextAreaElement>) => {\n handleInput(e);\n handleAutoResize(e.currentTarget);\n },\n [handleInput, handleAutoResize],\n );\n\n // Enhanced setValue that includes auto-resize\n const setValueWithResize = useCallback(\n (newValue: string) => {\n setValue(newValue);\n if (textareaRef.current) {\n handleAutoResize(textareaRef.current);\n }\n },\n [setValue, handleAutoResize, textareaRef],\n );\n\n // Scroll handler with ref binding\n useEffect(() => {}, []);\n\n const handleScroll = useCallback(() => {\n syncScroll(textareaRef);\n }, [syncScroll, textareaRef]);\n\n // Expose ref methods\n useImperativeHandle(\n ref,\n () => ({\n blur: () => textareaRef.current?.blur(),\n focus: () => textareaRef.current?.focus(),\n getValue: () => currentValue,\n scrollToPosition: (pos: number, offset = 40, behavior: ScrollBehavior = 'auto') => {\n if (highlightLayerRef.current && textareaRef.current) {\n const span = highlightLayerRef.current.querySelector(`[data-range-start=\"${pos.toString()}\"]`);\n if (span instanceof HTMLElement) {\n const textarea = textareaRef.current;\n const spanTop = span.offsetTop;\n const spanHeight = span.offsetHeight;\n const scrollTop = textarea.scrollTop;\n const clientHeight = textarea.clientHeight;\n\n // Check if the element is already comfortably visible\n // We define \"comfortably visible\" as the start being in the viewport\n // and not too close to the edge (unless it's top/bot).\n const isStartVisible = spanTop >= scrollTop && spanTop <= scrollTop + clientHeight - offset;\n\n if (behavior === 'smooth') {\n textarea.scrollTo({ behavior: 'smooth', top: spanTop - offset });\n } else {\n textarea.scrollTop = spanTop - offset;\n }\n }\n }\n },\n select: () => textareaRef.current?.select(),\n setSelectionRange: (start: number, end: number) => textareaRef.current?.setSelectionRange(start, end),\n setValue: setValueWithResize,\n }),\n [currentValue, setValueWithResize, highlightLayerRef, textareaRef],\n );\n\n // Sync styles and handle auto-resize on value changes\n useEffect(() => {\n if (textareaRef.current && enableAutoResize) {\n handleAutoResize(textareaRef.current);\n }\n syncStyles(textareaRef);\n }, [currentValue, handleAutoResize, enableAutoResize, syncStyles, textareaRef]);\n\n // Compute styles\n const baseTextareaStyle: React.CSSProperties = {\n ...DEFAULT_BASE_STYLE,\n color: currentValue ? 'transparent' : 'inherit',\n height: textareaHeight ? `${textareaHeight}px` : undefined,\n resize: enableAutoResize ? 'none' : 'vertical',\n };\n\n const highlightLayerStyle: React.CSSProperties = {\n ...DEFAULT_HIGHLIGHT_LAYER_STYLE,\n direction: dir,\n height: textareaHeight ? `${textareaHeight}px` : undefined,\n padding: textareaRef.current ? getComputedStyle(textareaRef.current).padding : '8px 12px',\n };\n\n return (\n <div className={containerClassName} ref={containerRef} style={{ ...DEFAULT_CONTAINER_STYLE, ...style }}>\n <div aria-hidden=\"true\" ref={highlightLayerRef} style={highlightLayerStyle}>\n {highlightedContent}\n </div>\n\n <textarea\n className={className}\n dir={dir}\n onChange={handleChangeWithResize}\n onInput={handleInputWithResize}\n onScroll={handleScroll}\n ref={textareaRef}\n rows={rows}\n style={baseTextareaStyle}\n value={currentValue}\n {...props}\n />\n </div>\n );\n },\n);\n\nDyeLight.displayName = 'DyeLight';\n"],"mappings":"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"}
package/package.json CHANGED
@@ -61,5 +61,5 @@
61
61
  },
62
62
  "type": "module",
63
63
  "types": "./dist/index.d.mts",
64
- "version": "1.1.0"
64
+ "version": "1.1.1"
65
65
  }