dyelight 1.0.0

package/LICENSE.md

@@ -0,0 +1,9 @@
+MIT License
+
+Copyright (c) 2025 Ragaeeb Haq
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,280 @@
+# DyeLight
+
+A lightweight TypeScript React component for highlighting characters in textareas with powerful text annotation capabilities.
+
+[![wakatime](https://wakatime.com/badge/user/a0b906ce-b8e7-4463-8bce-383238df6d4b/project/897368ef-62b9-48be-bba9-7c530f10e3da.svg)](https://wakatime.com/badge/user/a0b906ce-b8e7-4463-8bce-383238df6d4b/project/897368ef-62b9-48be-bba9-7c530f10e3da)
+![Bun](https://img.shields.io/badge/Bun-%23000000.svg?style=for-the-badge&logo=bun&logoColor=white)
+[![Node.js CI](https://github.com/ragaeeb/dyelight/actions/workflows/build.yml/badge.svg)](https://github.com/ragaeeb/dyelight/actions/workflows/build.yml)
+![GitHub License](https://img.shields.io/github/license/ragaeeb/dyelight)
+![GitHub Release](https://img.shields.io/github/v/release/ragaeeb/dyelight)
+[![Size](https://deno.bundlejs.com/badge?q=dyelight@latest&badge=detailed)](https://bundlejs.com/?q=dyelight%40latest)
+![typescript](https://badgen.net/badge/icon/typescript?icon=typescript&label&color=blue)
+![npm](https://img.shields.io/npm/dm/dyelight)
+![GitHub issues](https://img.shields.io/github/issues/ragaeeb/dyelight)
+![GitHub stars](https://img.shields.io/github/stars/ragaeeb/dyelight?style=social)
+[![NPM Version](https://img.shields.io/npm/v/dyelight)](https://www.npmjs.com/package/dyelight)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
+## Features
+
+- **Absolute Position Highlighting**: Highlight text using simple start/end positions across the entire text
+- **Multi-line Support**: Highlights automatically span across line breaks
+- **Line-level Highlighting**: Optional background highlighting for entire lines
+- **Pattern Matching**: Built-in support for regex and keyword highlighting
+- **Auto-resize**: Automatic textarea height adjustment based on content
+- **TypeScript**: Full TypeScript support with comprehensive type definitions
+- **Lightweight**: Minimal dependencies, optimized for performance
+- **Flexible Styling**: Support for CSS classes and inline styles
+
+## Installation
+
+```bash
+npm install dyelight
+```
+
+```bash
+yarn add dyelight
+```
+
+```bash
+pnpm add dyelight
+```
+
+## Basic Usage
+
+```tsx
+import React, { useState } from 'react';
+import { DyeLight, HighlightBuilder } from 'dyelight';
+
+function MyEditor() {
+    const [text, setText] = useState('Hello world\nThis is line 2');
+
+    // Highlight characters 0-5 (absolute positions)
+    const highlights = HighlightBuilder.ranges([
+        { start: 0, end: 5, className: 'bg-yellow-200' },
+        { start: 12, end: 24, className: 'bg-blue-200' },
+    ]);
+
+    return (
+        <DyeLight
+            value={text}
+            onChange={setText}
+            highlights={highlights}
+            className="w-full p-2 border rounded"
+            rows={4}
+        />
+    );
+}
+```
+
+## Advanced Usage
+
+### Pattern-based Highlighting
+
+```tsx
+import { DyeLight, HighlightBuilder } from 'dyelight';
+
+function CodeEditor() {
+    const [code, setCode] = useState(`
+function hello() {
+  const message = "Hello World";
+  console.log(message);
+}
+  `);
+
+    // Highlight JavaScript keywords
+    const keywordHighlights = HighlightBuilder.pattern(
+        code,
+        /\b(function|const|let|var|if|else|for|while)\b/g,
+        'text-blue-600 font-semibold',
+    );
+
+    // Highlight strings
+    const stringHighlights = HighlightBuilder.pattern(code, /"[^"]*"/g, 'text-green-600');
+
+    // Highlight specific words
+    const wordHighlights = HighlightBuilder.words(code, ['console', 'log'], 'text-purple-600');
+
+    return (
+        <DyeLight
+            value={code}
+            onChange={setCode}
+            highlights={[...keywordHighlights, ...stringHighlights, ...wordHighlights]}
+            className="font-mono text-sm"
+            enableAutoResize
+        />
+    );
+}
+```
+
+### Line Highlighting
+
+```tsx
+function ErrorHighlighter() {
+    const [text, setText] = useState('Line 1\nLine 2 with error\nLine 3');
+
+    // Highlight line 1 (0-indexed) with error styling
+    const lineHighlights = HighlightBuilder.lines([
+        { line: 1, className: 'bg-red-100' },
+        { line: 2, color: '#e8f5e8' }, // Or use direct color
+    ]);
+
+    return <DyeLight value={text} onChange={setText} lineHighlights={lineHighlights} />;
+}
+```
+
+### Character-level Highlighting
+
+```tsx
+function CharacterHighlighter() {
+    const [text, setText] = useState('Hello World');
+
+    // Highlight individual characters
+    const characterHighlights = HighlightBuilder.characters([
+        { index: 0, className: 'bg-red-200' }, // 'H'
+        { index: 6, className: 'bg-blue-200' }, // 'W'
+        { index: 10, style: { backgroundColor: 'yellow' } }, // 'd'
+    ]);
+
+    return <DyeLight value={text} onChange={setText} highlights={characterHighlights} />;
+}
+```
+
+### Using Refs
+
+```tsx
+function RefExample() {
+    const dyeLightRef = useRef<DyeLightRef>(null);
+    const [text, setText] = useState('');
+
+    const handleFocus = () => {
+        dyeLightRef.current?.focus();
+    };
+
+    const handleSelectAll = () => {
+        dyeLightRef.current?.select();
+    };
+
+    const handleGetValue = () => {
+        const value = dyeLightRef.current?.getValue();
+        console.log('Current value:', value);
+    };
+
+    return (
+        <div>
+            <DyeLight ref={dyeLightRef} value={text} onChange={setText} />
+            <button onClick={handleFocus}>Focus</button>
+            <button onClick={handleSelectAll}>Select All</button>
+            <button onClick={handleGetValue}>Get Value</button>
+        </div>
+    );
+}
+```
+
+## API Reference
+
+### DyeLight Props
+
+| Prop               | Type                               | Default     | Description                          |
+| ------------------ | ---------------------------------- | ----------- | ------------------------------------ |
+| `value`            | `string`                           | `undefined` | Controlled value                     |
+| `defaultValue`     | `string`                           | `''`        | Default value for uncontrolled usage |
+| `onChange`         | `(value: string) => void`          | `undefined` | Callback when value changes          |
+| `highlights`       | `CharacterRange[]`                 | `[]`        | Character range highlights           |
+| `lineHighlights`   | `{ [lineNumber: number]: string }` | `{}`        | Line-level highlights                |
+| `enableAutoResize` | `boolean`                          | `true`      | Enable auto-height adjustment        |
+| `className`        | `string`                           | `''`        | CSS class name                       |
+| `dir`              | `'ltr' \| 'rtl'`                   | `'ltr'`     | Text direction                       |
+| `rows`             | `number`                           | `4`         | Number of visible rows               |
+
+All standard textarea HTML attributes are also supported.
+
+### CharacterRange
+
+```typescript
+type CharacterRange = {
+    start: number; // Start position (inclusive)
+    end: number; // End position (exclusive)
+    className?: string; // CSS class name
+    style?: React.CSSProperties; // Inline styles
+};
+```
+
+### DyeLightRef Methods
+
+| Method                          | Description                |
+| ------------------------------- | -------------------------- |
+| `focus()`                       | Focus the textarea         |
+| `blur()`                        | Blur the textarea          |
+| `select()`                      | Select all text            |
+| `setSelectionRange(start, end)` | Set text selection         |
+| `getValue()`                    | Get current value          |
+| `setValue(value)`               | Set value programmatically |
+
+## HighlightBuilder Utilities
+
+### `HighlightBuilder.ranges(ranges)`
+
+Create highlights from character ranges.
+
+### `HighlightBuilder.pattern(text, pattern, className?, style?)`
+
+Highlight text matching a regex pattern.
+
+### `HighlightBuilder.words(text, words, className?, style?)`
+
+Highlight specific words.
+
+### `HighlightBuilder.characters(chars)`
+
+Highlight individual characters by index.
+
+### `HighlightBuilder.selection(start, end, className?, style?)`
+
+Create a single selection highlight.
+
+### `HighlightBuilder.lines(lines)`
+
+Create line-level highlights.
+
+## Styling
+
+DyeLight uses CSS-in-JS for core functionality but allows complete customization through CSS classes and inline styles.
+
+### Example CSS Classes
+
+```css
+.highlight-keyword {
+    background-color: #e3f2fd;
+    color: #1976d2;
+    font-weight: 600;
+}
+
+.highlight-error {
+    background-color: #ffebee;
+    color: #c62828;
+    text-decoration: underline wavy red;
+}
+
+.highlight-string {
+    background-color: #e8f5e8;
+    color: #2e7d32;
+}
+```
+
+## Browser Support
+
+DyeLight supports all modern browsers including:
+
+- Chrome 60+
+- Firefox 60+
+- Safari 12+
+- Edge 79+
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+## License
+
+MIT © [Ragaeeb Haq](https://github.com/ragaeeb)

package/dist/index.d.ts

@@ -0,0 +1,132 @@
+import * as react from 'react';
+
+/**
+ * Represents a character range to highlight in the entire text
+ */
+type CharacterRange = {
+    /** Optional CSS class name to apply to the highlighted range */
+    className?: string;
+    /** Zero-based end index in the entire text (exclusive) */
+    end: number;
+    /** Zero-based start index in the entire text (inclusive) */
+    start: number;
+    /** Optional inline styles to apply to the highlighted range */
+    style?: React.CSSProperties;
+};
+/**
+ * Methods exposed by the HighlightableTextarea component through its ref
+ */
+type DyeLightRef = {
+    blur: () => void;
+    focus: () => void;
+    getValue: () => string;
+    select: () => void;
+    setSelectionRange: (start: number, end: number) => void;
+    setValue: (value: string) => void;
+};
+/**
+ * Props for the DyeLight component
+ */
+interface DyeLightProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange'> {
+    /** CSS class name for the component */
+    className?: string;
+    /** Default value for uncontrolled usage */
+    defaultValue?: string;
+    /** Text direction */
+    dir?: 'ltr' | 'rtl';
+    /** Enable automatic height adjustment based on content */
+    enableAutoResize?: boolean;
+    /** Character range highlights using absolute positions in the entire text */
+    highlights?: CharacterRange[];
+    /** Line-level highlights mapped by line number (0-based) to CSS color/class */
+    lineHighlights?: {
+        [lineNumber: number]: string;
+    };
+    /** Callback fired when the textarea value changes */
+    onChange?: (value: string) => void;
+    /** Number of visible text lines */
+    rows?: number;
+    /** Controlled value */
+    value?: string;
+}
+
+/**
+ * Automatically resizes a textarea element to fit its content
+ * Sets the height to 'auto' first, then adjusts to the scroll height
+ * Prevents textarea from having scrollbars when content fits
+ *
+ * @param textArea - The HTML textarea element to resize
+ */
+declare const autoResize: (textArea: HTMLTextAreaElement) => void;
+
+/**
+ * Utility functions for building highlight objects
+ */
+declare const HighlightBuilder: {
+    /**
+     * Creates highlights for individual characters using absolute positions
+     */
+    characters: (chars: Array<{
+        className?: string;
+        index: number;
+        style?: React.CSSProperties;
+    }>) => {
+        className: string | undefined;
+        end: number;
+        start: number;
+        style: react.CSSProperties | undefined;
+    }[];
+    /**
+     * Creates line highlights
+     */
+    lines: (lines: Array<{
+        className?: string;
+        color?: string;
+        line: number;
+    }>) => {
+        [lineNumber: number]: string;
+    };
+    /**
+     * Highlights text matching a pattern using absolute positions
+     */
+    pattern: (text: string, pattern: RegExp | string, className?: string, style?: React.CSSProperties) => {
+        className: string | undefined;
+        end: number;
+        start: number;
+        style: react.CSSProperties | undefined;
+    }[];
+    /**
+     * Creates character range highlights using absolute positions
+     */
+    ranges: (ranges: Array<{
+        className?: string;
+        end: number;
+        start: number;
+        style?: React.CSSProperties;
+    }>) => {
+        className: string | undefined;
+        end: number;
+        start: number;
+        style: react.CSSProperties | undefined;
+    }[];
+    /**
+     * Highlights text between specific start and end positions
+     */
+    selection: (start: number, end: number, className?: string, style?: React.CSSProperties) => {
+        className: string | undefined;
+        end: number;
+        start: number;
+        style: react.CSSProperties | undefined;
+    }[];
+    /**
+     * Highlights entire words that match a pattern
+     */
+    words: (text: string, words: string[], className?: string, style?: React.CSSProperties) => {
+        className: string | undefined;
+        end: number;
+        start: number;
+        style: react.CSSProperties | undefined;
+    }[];
+};
+
+export { type CharacterRange, type DyeLightProps, type DyeLightRef, HighlightBuilder, autoResize };

package/dist/index.js

@@ -0,0 +1,3 @@
+import{forwardRef as J,useCallback as T,useEffect as K,useImperativeHandle as Q,useMemo as X,useRef as w,useState as $}from"react";var I=e=>{e.style.height="auto",e.style.height=`${e.scrollHeight}px`};var F=e=>{let r=e.split(`
+`),t=[],n=0;return r.forEach((a,l)=>{t.push(n),n+=a.length+(l<r.length-1?1:0)}),{lines:r,lineStarts:t}},P=(e,r)=>{for(let t=r.length-1;t>=0;t--)if(e>=r[t])return{char:e-r[t],line:t};return{char:0,line:0}},k=e=>/^(#|rgb|hsl|var\(--.*?\)|transparent|currentColor|inherit|initial|unset)/i.test(e)||/^[a-z]+$/i.test(e);var z={display:"block",position:"relative",width:"100%"},Y={background:"transparent",boxSizing:"border-box",caretColor:"#000000",color:"transparent",minHeight:"auto",position:"relative",width:"100%",zIndex:2},V={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};import{jsx as L,jsxs as te}from"react/jsx-runtime";var U=(e,r,t)=>{if(!t)return L("div",{children:e},r);let n=k(t);return L("div",{className:n?void 0:t,style:n?{backgroundColor:t}:void 0,children:e},r)},Z=(e,r,t,n)=>{if(t.length===0)return U(e||"\xA0",r,n);let a=t.toSorted((p,u)=>p.start-u.start),l=[],c=0;if(a.forEach((p,u)=>{let{className:A,end:H,start:o,style:g}=p,f=Math.max(0,Math.min(o,e.length)),x=Math.max(f,Math.min(H,e.length));if(f>c){let h=e.slice(c,f);h&&l.push(h)}if(x>f){let h=e.slice(f,x);l.push(L("span",{className:A,style:g,children:h},`highlight-${r}-${u}`))}c=Math.max(c,x)}),c<e.length){let p=e.slice(c);p&&l.push(p)}let C=l.length===0?"\xA0":l;return U(C,r,n)},ee=J(({className:e="",defaultValue:r="",dir:t="ltr",enableAutoResize:n=!0,highlights:a=[],lineHighlights:l={},onChange:c,rows:C=4,style:p,value:u,...A},H)=>{let o=w(null),g=w(null),f=w(null),[x,h]=$(u??r),[b,B]=$(),S=u!==void 0?u:x,y=T(s=>{n&&(I(s),B(s.scrollHeight))},[n]),G=T(s=>{let i=s.target.value;u===void 0&&h(i),c?.(i),y(s.target)},[u,c,y]),O=T(()=>{if(o.current&&g.current){let{scrollLeft:s,scrollTop:i}=o.current;g.current.scrollTop=i,g.current.scrollLeft=s}},[]),v=T(()=>{if(!o.current||!g.current)return;let s=getComputedStyle(o.current),i=g.current;i.style.padding=s.padding,i.style.fontSize=s.fontSize,i.style.fontFamily=s.fontFamily,i.style.lineHeight=s.lineHeight,i.style.letterSpacing=s.letterSpacing,i.style.wordSpacing=s.wordSpacing,i.style.textIndent=s.textIndent},[]);Q(H,()=>({blur:()=>o.current?.blur(),focus:()=>o.current?.focus(),getValue:()=>S,select:()=>o.current?.select(),setSelectionRange:(s,i)=>o.current?.setSelectionRange(s,i),setValue:s=>{u===void 0&&h(s),o.current&&(o.current.value=s,y(o.current))}}),[S,u,y]),K(()=>{o.current&&n&&y(o.current),v()},[S,y,n,v]);let W=X(()=>{let{lines:s,lineStarts:i}=F(S),R={};return a.forEach(m=>{let E=P(m.start,i),N=P(m.end-1,i);for(let d=E.line;d<=N.line;d++){R[d]||(R[d]=[]);let D=i[d],M=Math.max(m.start-D,0),_=Math.min(m.end-D,s[d].length);_>M&&R[d].push({className:m.className,end:_,start:M,style:m.style})}}),s.map((m,E)=>{let N=l[E],d=R[E]||[];return Z(m,E,d,N)})},[S,a,l]),j={...Y,height:b?`${b}px`:void 0,resize:n?"none":"vertical"},q={...V,direction:t,height:b?`${b}px`:void 0,padding:o.current?getComputedStyle(o.current).padding:"8px 12px"};return te("div",{ref:f,style:{...z,...p},children:[L("div",{"aria-hidden":"true",ref:g,style:q,children:W}),L("textarea",{className:e,dir:t,onChange:G,onScroll:O,ref:o,rows:C,style:j,value:S,...A})]})});ee.displayName="DyeLight";var re={characters:e=>e.map(({className:r,index:t,style:n})=>({className:r,end:t+1,start:t,style:n})),lines:e=>{let r={};return e.forEach(({className:t,color:n,line:a})=>{r[a]=t||n||""}),r},pattern:(e,r,t,n)=>{let a=typeof r=="string"?new RegExp(r,"g"):new RegExp(r.source,"g");return Array.from(e.matchAll(a)).map(c=>({className:t,end:c.index+c[0].length,start:c.index,style:n}))},ranges:e=>e.map(({className:r,end:t,start:n,style:a})=>({className:r,end:t,start:n,style:a})),selection:(e,r,t,n)=>[{className:t,end:r,start:e,style:n}],words:(e,r,t,n)=>{let a=new RegExp(`\\b(${r.join("|")})\\b`,"g");return re.pattern(e,a,t,n)}};export{re as HighlightBuilder,I as autoResize};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/DyeLight.tsx","../src/domUtils.ts","../src/textUtils.ts","../src/styles.ts","../src/builder.ts"],"sourcesContent":["import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';\n\nimport { autoResize } from './domUtils';\nimport type { DyeLightProps, DyeLightRef } from './types';\nimport { absoluteToLinePos, getLinePositions, isColorValue } from './textUtils';\nimport { DEFAULT_BASE_STYLE, DEFAULT_CONTAINER_STYLE, DEFAULT_HIGHLIGHT_LAYER_STYLE } from './styles';\n\nconst createLineElement = (content: React.ReactNode, lineIndex: number, lineHighlight?: string): 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\nconst 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}`} 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 *\n * @example\n * ```tsx\n * const MyComponent = () => {\n *   const [text, setText] = useState('Hello world\\nSecond line');\n *\n *   // Highlight characters 0-5 (absolute positions)\n *   const highlights = HighlightBuilder.ranges([\n *     { start: 0, end: 5, className: 'bg-yellow-200' },\n *     { start: 12, end: 18, className: 'bg-blue-200' }\n *   ]);\n *\n *   // Highlight keywords automatically\n *   const keywordHighlights = HighlightBuilder.pattern(\n *     text,\n *     /\\b(function|const|let)\\b/g,\n *     'text-blue-600'\n *   );\n *\n *   // Optional line highlights\n *   const lineHighlights = HighlightBuilder.lines([\n *     { line: 1, className: 'bg-red-100' }\n *   ]);\n *\n *   return (\n *     <DyeLight\n *       value={text}\n *       onChange={setText}\n *       highlights={[...highlights, ...keywordHighlights]}\n *       lineHighlights={lineHighlights}\n *     />\n *   );\n * };\n * ```\n */\nconst DyeLight = forwardRef<DyeLightRef, DyeLightProps>(\n    (\n        {\n            className = '',\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 textareaRef = useRef<HTMLTextAreaElement>(null);\n        const highlightLayerRef = useRef<HTMLDivElement>(null);\n        const containerRef = useRef<HTMLDivElement>(null);\n\n        const [internalValue, setInternalValue] = useState(value ?? defaultValue);\n        const [textareaHeight, setTextareaHeight] = useState<number | undefined>();\n\n        const currentValue = value !== undefined ? value : internalValue;\n\n        const handleAutoResize = useCallback(\n            (element: HTMLTextAreaElement) => {\n                if (!enableAutoResize) return;\n\n                autoResize(element);\n                setTextareaHeight(element.scrollHeight);\n            },\n            [enableAutoResize],\n        );\n\n        const handleChange = useCallback(\n            (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n                const newValue = e.target.value;\n\n                if (value === undefined) {\n                    setInternalValue(newValue);\n                }\n\n                onChange?.(newValue);\n                handleAutoResize(e.target);\n            },\n            [value, onChange, handleAutoResize],\n        );\n\n        const syncScroll = useCallback(() => {\n            if (textareaRef.current && highlightLayerRef.current) {\n                const { scrollLeft, scrollTop } = textareaRef.current;\n                highlightLayerRef.current.scrollTop = scrollTop;\n                highlightLayerRef.current.scrollLeft = scrollLeft;\n            }\n        }, []);\n\n        const syncStyles = useCallback(() => {\n            if (!textareaRef.current || !highlightLayerRef.current) return;\n\n            const computedStyle = getComputedStyle(textareaRef.current);\n            const highlightLayer = highlightLayerRef.current;\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        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: (newValue: string) => {\n                    if (value === undefined) {\n                        setInternalValue(newValue);\n                    }\n                    if (textareaRef.current) {\n                        textareaRef.current.value = newValue;\n                        handleAutoResize(textareaRef.current);\n                    }\n                },\n            }),\n            [currentValue, value, handleAutoResize],\n        );\n\n        useEffect(() => {\n            if (textareaRef.current && enableAutoResize) {\n                handleAutoResize(textareaRef.current);\n            }\n            syncStyles();\n        }, [currentValue, handleAutoResize, enableAutoResize, syncStyles]);\n\n        const highlightedContent = useMemo(() => {\n            const { lines, lineStarts } = getLinePositions(currentValue);\n\n            // Group highlights by line\n            const highlightsByLine: {\n                [lineIndex: number]: Array<{\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                // Handle highlights that span multiple lines\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                    // Calculate highlight range within this line\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        }, [currentValue, highlights, lineHighlights]);\n\n        const baseTextareaStyle: React.CSSProperties = {\n            ...DEFAULT_BASE_STYLE,\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 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={handleChange}\n                    onScroll={syncScroll}\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\nexport default DyeLight;\n","/**\n * Automatically resizes a textarea element to fit its content\n * Sets the height to 'auto' first, then adjusts to the scroll height\n * Prevents textarea from having scrollbars when content fits\n *\n * @param textArea - The HTML textarea element to resize\n */\nexport const autoResize = (textArea: HTMLTextAreaElement) => {\n    textArea.style.height = 'auto';\n    textArea.style.height = `${textArea.scrollHeight}px`;\n};\n","/**\n * Converts absolute text positions to line-relative positions\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 { lines, lineStarts };\n};\n\n/**\n * Converts absolute position to line and character index\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 {\n                char: absolutePos - lineStarts[i],\n                line: i,\n            };\n        }\n    }\n    return { char: 0, line: 0 };\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","export const DEFAULT_CONTAINER_STYLE: React.CSSProperties = {\n    display: 'block',\n    position: 'relative',\n    width: '100%',\n};\n\nexport const DEFAULT_BASE_STYLE: React.CSSProperties = {\n    background: 'transparent',\n    boxSizing: 'border-box',\n    caretColor: '#000000',\n    color: 'transparent',\n    minHeight: 'auto',\n    position: 'relative',\n    width: '100%',\n    zIndex: 2,\n};\n\nexport const DEFAULT_HIGHLIGHT_LAYER_STYLE: React.CSSProperties = {\n    border: 'transparent solid 1px',\n    bottom: 0,\n    boxSizing: 'border-box',\n    color: 'inherit',\n    fontFamily: 'inherit',\n    fontSize: 'inherit',\n    left: 0,\n    lineHeight: 'inherit',\n    margin: 0,\n    overflow: 'hidden',\n    pointerEvents: 'none',\n    position: 'absolute',\n    right: 0,\n    top: 0,\n    whiteSpace: 'pre-wrap',\n    wordWrap: 'break-word',\n    zIndex: 1,\n};\n","/**\n * Utility functions for building highlight objects\n */\nexport const HighlightBuilder = {\n    /**\n     * Creates highlights for individual characters using absolute positions\n     */\n    characters: (chars: Array<{ className?: string; index: number; style?: React.CSSProperties }>) => {\n        return chars.map(({ className, index, style }) => ({\n            className,\n            end: index + 1,\n            start: index,\n            style,\n        }));\n    },\n\n    /**\n     * Creates line highlights\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     */\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) => ({\n            className,\n            end: match.index! + match[0].length,\n            start: match.index!,\n            style,\n        }));\n    },\n\n    /**\n     * Creates character range highlights using absolute positions\n     */\n    ranges: (ranges: Array<{ className?: string; end: number; start: number; style?: React.CSSProperties }>) => {\n        return ranges.map(({ className, end, start, style }) => ({\n            className,\n            end,\n            start,\n            style,\n        }));\n    },\n\n    /**\n     * Highlights text between specific start and end positions\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 a pattern\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"],"mappings":"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","names":["forwardRef","useCallback","useEffect","useImperativeHandle","useMemo","useRef","useState","autoResize","textArea","getLinePositions","text","lines","lineStarts","position","line","index","absoluteToLinePos","absolutePos","i","isColorValue","value","DEFAULT_CONTAINER_STYLE","DEFAULT_BASE_STYLE","DEFAULT_HIGHLIGHT_LAYER_STYLE","jsx","jsxs","createLineElement","content","lineIndex","lineHighlight","isColor","isColorValue","renderHighlightedLine","line","ranges","sortedRanges","a","b","result","lastIndex","range","idx","className","end","start","rangeStyle","clampedStart","clampedEnd","textBefore","highlightedText","textAfter","DyeLight","forwardRef","defaultValue","dir","enableAutoResize","highlights","lineHighlights","onChange","rows","style","value","props","ref","textareaRef","useRef","highlightLayerRef","containerRef","internalValue","setInternalValue","useState","textareaHeight","setTextareaHeight","currentValue","handleAutoResize","useCallback","element","autoResize","handleChange","e","newValue","syncScroll","scrollLeft","scrollTop","syncStyles","computedStyle","highlightLayer","useImperativeHandle","useEffect","highlightedContent","useMemo","lines","lineStarts","getLinePositions","highlightsByLine","highlight","startPos","absoluteToLinePos","endPos","lineStart","rangeStart","rangeEnd","baseTextareaStyle","DEFAULT_BASE_STYLE","highlightLayerStyle","DEFAULT_HIGHLIGHT_LAYER_STYLE","DEFAULT_CONTAINER_STYLE","HighlightBuilder","chars","className","index","style","lines","result","color","line","text","pattern","regex","match","ranges","end","start","words"]}

package/package.json

@@ -0,0 +1,57 @@
+{
+    "name": "dyelight",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/ragaeeb/dyelight.git"
+    },
+    "module": "./dist/index.js",
+    "version": "1.0.0",
+    "types": "./dist/index.d.ts",
+    "exports": {
+        ".": {
+            "import": "./dist/index.js",
+            "types": "./dist/index.d.ts"
+        }
+    },
+    "files": [
+        "dist"
+    ],
+    "devDependencies": {
+        "@eslint/js": "^9.30.1",
+        "@types/bun": "^1.2.17",
+        "@types/react": "^19.1.8",
+        "@types/react-dom": "^19.1.6",
+        "eslint": "^9.30.1",
+        "eslint-config-prettier": "^10.1.5",
+        "eslint-plugin-perfectionist": "^4.15.0",
+        "eslint-plugin-prettier": "^5.5.1",
+        "eslint-plugin-react": "^7.37.5",
+        "globals": "^16.3.0",
+        "prettier": "^3.6.2",
+        "semantic-release": "^24.2.6",
+        "tsup": "^8.5.0",
+        "typescript-eslint": "^8.35.1"
+    },
+    "peerDependencies": {
+        "react": "^19.1.0",
+        "react-dom": "^19.1.0"
+    },
+    "type": "module",
+    "bugs": {
+        "url": "https://github.com/ragaeeb/dyelight/issues"
+    },
+    "description": "A lightweight TypeScript React component to allow highlighting characters in textareas.",
+    "homepage": "https://github.com/ragaeeb/dyelight",
+    "keywords": [
+        "highlight",
+        "textarea",
+        "multiline",
+        "input",
+        "forms",
+        "styling"
+    ],
+    "license": "MIT",
+    "scripts": {
+        "build": "tsup"
+    }
+}