test-assignment-overleaf/src/spellChecker/errorsDisplay.tsx

import './errorsDisplay.css';

export type ErrorsDisplayParams = {
    originalText: string;
    spellcheckErrors: {
        start: number;
        end: number;
    }[];
};

type TextChunk = {
    text: string;
    index: number;
    isCorrect: boolean;
};

const toChunks = ({ originalText, spellcheckErrors }: ErrorsDisplayParams) => {
    const chunks: TextChunk[] = [];
    let lastIndex = 0;
    for (const error of spellcheckErrors) {
        chunks.push({
            text: originalText.slice(lastIndex, error.start),
            index: lastIndex,
            isCorrect: true,
        });
        chunks.push({
            text: originalText.slice(error.start, error.end),
            index: error.start,
            isCorrect: false,
        });

        lastIndex = error.end;
    }

    chunks.push({
        text: originalText.slice(lastIndex, originalText.length),
        index: lastIndex,
        isCorrect: true,
    });

    return chunks.filter(({ text }) => !!text.length);
};

export const ErrorsDisplay = ({
    originalText,
    spellcheckErrors,
}: ErrorsDisplayParams) => {
    if (!spellcheckErrors.length) {
        return <p>No errors!</p>;
    }

    const chunks = toChunks({ originalText, spellcheckErrors });

    return (
        <p class="validated-text">
            {chunks.map((chunk) => (
                <span
                    key={chunk.index}
                    class={
                        chunk.isCorrect
                            ? 'fragment-correct'
                            : 'fragment-incorrect'
                    }
                >
                    {chunk.text}
                </span>
            ))}
        </p>
    );
};