Function AnsiLine

frontend/app/element/ansiline.tsx:119–153

({ line })

const ansiRegex = /\x1b\[([0-9;]+)m/g;

const AnsiLine = ({ line }) => {
    const segments: SegmentType[] = [];
    let lastIndex = 0;
    let currentState = makeInitialState();

    let match: RegExpExecArray;
    while ((match = ansiRegex.exec(line)) !== null) {
        if (match.index > lastIndex) {
            segments.push({
                text: line.substring(lastIndex, match.index),
                classes: stateToClasses(currentState),
            });
        }
        const codes = match[1].split(";").map(Number);
        updateStateWithCodes(currentState, codes);
        lastIndex = ansiRegex.lastIndex;
    }

    if (lastIndex < line.length) {
        segments.push({
            text: line.substring(lastIndex),
            classes: stateToClasses(currentState),
        });
    }

    return (
        <div>
            {segments.map((seg, idx) => (
                <span key={idx} className={seg.classes}>
                    {seg.text}
                </span>
            ))}
        </div>
    );
};

export default AnsiLine;