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

import { useCallback, useEffect, useState } from 'preact/hooks';
import type { JSX } from 'preact/jsx-runtime';
import { ErrorsDisplay, ErrorsDisplayParams } from './errorsDisplay';

export const SpellChecker = () => {
    const [regex, setRegex] = useState<RegExp>();
    const [errorsDisplayParams, setErrorsDisplayParams] =
        useState<ErrorsDisplayParams>({
            originalText: '',
            spellcheckErrors: [],
        });

    useEffect(() => {
        if (!regex) {
            window
                .fetch(
                    new URL(
                        `./assets/th-en-x-basic.ooo-thesaurus`,
                        import.meta.url,
                    ).href,
                )
                .then((response) => response.text())
                .then((regexString) => {
                    console.time('regex-parse');
                    setRegex(new RegExp(regexString, 'gi'));
                    console.timeEnd('regex-parse');
                })
                .catch((err) => console.error(err));
        }
    }, [regex]);

    const handleSubmit: JSX.GenericEventHandler<HTMLFormElement> = useCallback(
        (e) => {
            e.preventDefault();

            if (!regex) {
                return;
            }

            const formData = new FormData(e.currentTarget);
            const originalText = formData.get('text')?.toString() ?? '';

            console.time('regex-execute');
            const results = [...originalText.matchAll(regex)];
            console.timeEnd('regex-execute');

            const spellcheckErrors = results.map((result) => {
                const start = result.index;
                if (start === undefined) {
                    throw new Error('Should not happen for non-empty results');
                }

                return {
                    start,
                    end: start + result[0].length,
                };
            });

            setErrorsDisplayParams({
                originalText,
                spellcheckErrors,
            });
        },
        [regex],
    );

    return (
        <section>
            <form onSubmit={handleSubmit}>
                <textarea rows={10} cols={100} name="text" />
                <br />
                <button type="submit" disabled={!regex}>
                    Validate
                </button>
            </form>
            <ErrorsDisplay {...errorsDisplayParams} />
        </section>
    );
};