Error highlighting

Highlight validation errors and warnings in your text editor

DyeLight supports both character-level and line-level error highlighting, making it perfect for validation feedback, code linters, and error indicators.

Line highlighting for errors

Highlight entire lines to draw attention to errors:

import { DyeLight, HighlightBuilder } from 'dyelight';
import { useState } from 'react';

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}
        />
    );
}

In this example:

• Line 1 (“Line 2 with error”) has a red background
• Line 2 (“Line 3”) has a light green background
• Line numbers are 0-indexed (first line is 0)

Line highlighting uses the lineHighlights prop, which is separate from the highlights prop used for character-level highlighting.

Character-level validation errors

Highlight specific characters to pinpoint validation issues:

function ValidationEditor() {
    const [email, setEmail] = useState('user@invalid');

    // Find the position of invalid characters
    const invalidChars = HighlightBuilder.pattern(
        email,
        /[^a-zA-Z0-9@._-]/g,  // Invalid email characters
        'bg-red-200 text-red-800'
    );

    // Check for missing domain
    const atIndex = email.indexOf('@');
    const hasDomain = atIndex !== -1 && email.indexOf('.', atIndex) !== -1;
    
    const domainError = !hasDomain ? HighlightBuilder.ranges([
        { 
            start: atIndex + 1, 
            end: email.length, 
            className: 'bg-yellow-200'
        }
    ]) : [];

    return (
        <DyeLight
            value={email}
            onChange={setEmail}
            highlights={[...invalidChars, ...domainError]}
            placeholder="Enter email address"
        />
    );
}

Combining line and character highlights

You can use both line-level and character-level highlighting together:

function CodeValidator() {
    const [code, setCode] = useState('const x = 5;\nconst y = ;\nconst z = 10;');

    // Highlight the line with syntax error
    const errorLines = HighlightBuilder.lines([
        { line: 1, className: 'bg-red-50' }
    ]);

    // Highlight the specific error position (missing value after =)
    const errorPosition = HighlightBuilder.ranges([
        { 
            start: code.indexOf('= ;') + 2,  // Position of the semicolon
            end: code.indexOf('= ;') + 3,
            style: {
                textDecoration: 'underline wavy red',
                backgroundColor: '#ffebee'
            }
        }
    ]);

    return (
        <DyeLight
            value={code}
            onChange={setCode}
            highlights={errorPosition}
            lineHighlights={errorLines}
            className="font-mono"
        />
    );
}

Error severity levels

Use different colors for different error severities:

Critical Errors

// Red for critical errors
const critical = HighlightBuilder.lines([
    { line: errorLine, className: 'bg-red-100 border-l-4 border-red-500' }
]);

Wavy underlines for errors

Create IDE-style error underlines with CSS:

function SpellChecker() {
    const [text, setText] = useState('This sentance has a typo');

    // Find misspelled words
    const errors = HighlightBuilder.pattern(
        text,
        /\b(sentance)\b/g,  // Known misspellings
        'error-underline'
    );

    return (
        <>
            <style>{`
                .error-underline {
                    text-decoration: underline wavy red;
                    text-decoration-skip-ink: none;
                }
            `}</style>
            <DyeLight
                value={text}
                onChange={setText}
                highlights={errors}
            />
        </>
    );
}

Dynamic validation

Highlight errors as users type:

function LiveValidator() {
    const [json, setJson] = useState('{"name": "value"');
    const [errors, setErrors] = useState<CharacterRange[]>([]);

    const validateJSON = (text: string) => {
        try {
            JSON.parse(text);
            setErrors([]);
        } catch (e) {
            if (e instanceof SyntaxError) {
                // Highlight the entire input on parse error
                setErrors([{
                    start: 0,
                    end: text.length,
                    className: 'bg-red-50'
                }]);
            }
        }
    };

    const handleChange = (value: string) => {
        setJson(value);
        validateJSON(value);
    };

    return (
        <DyeLight
            value={json}
            onChange={handleChange}
            highlights={errors}
            className="font-mono"
            placeholder='Enter JSON: {"key": "value"}'
        />
    );
}

Character highlighting for specific positions

Highlight individual characters for precise error indicators:

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}
        />
    );
}

Remember that line numbers are 0-indexed. The first line is line 0, not line 1.

Using color values vs CSS classes

You can use either CSS classes or direct color values:

CSS Classes

const lineHighlights = HighlightBuilder.lines([
    { line: 1, className: 'bg-red-100' },
    { line: 2, className: 'bg-yellow-100' }
]);

Color Values

const lineHighlights = HighlightBuilder.lines([
    { line: 1, color: '#ffebee' },  // Hex color
    { line: 2, color: 'rgb(255, 243, 224)' }  // RGB color
]);

Example CSS for error styles

.highlight-error {
    background-color: #ffebee;
    color: #c62828;
    text-decoration: underline wavy red;
}

.highlight-warning {
    background-color: #fff3e0;
    color: #e65100;
    text-decoration: underline wavy orange;
}

.highlight-info {
    background-color: #e3f2fd;
    color: #1565c0;
    border-bottom: 2px dotted #1976d2;
}

Next steps

• Styling - Learn more about customizing appearance
• Basic usage - Review fundamental concepts
• Syntax highlighting - Build a code editor