Make word count warnings work with leatest TinyMCE editor.

[frjo]

Fixes #4270

Test Steps

• Confirm that the word count warnings on rich text fields on applications forms are working.

[theskumar]

Works great in my testing.

If you are up for it, probably also update the js file with a more readable and easy to understand version

(function() {
    let wordCountInterval;

    const WARNING_THRESHOLD = 0.8;

    /**
     * Count words and manage warning states for an element
     * @param {HTMLElement} element - Target element to process
     */
     function updateWordCount(element) {
        const currentCount = parseInt(element.innerText.match(/\d+/)?.[0], 10) || 0;
        const limit = parseInt(element.closest("div[data-word-limit]").dataset.wordLimit, 10);
        const warningThreshold = limit * WARNING_THRESHOLD;

        /**
        * Clear warning states and classes
        */
        function clearWarnings() {
            delete element.dataset.afterWordCount;
            element.classList.remove("word-count-warning", "word-count-warning-2");
        }

        if (element.textContent.includes("characters")) {
            clearWarnings();
            return;
        }

        element.dataset.afterWordCount = ` out of ${limit}`;

        if (currentCount <= warningThreshold) {
            clearWarnings();
        } else if (currentCount <= limit) {
            element.dataset.afterWordCount += " (Close to the limit)";
            element.classList.remove("word-count-warning-2");
            element.classList.add("word-count-warning");
        } else {
            element.dataset.afterWordCount += " (Over the limit)";
            element.classList.add("word-count-warning-2");
        }
    }

    const observer = new MutationObserver(mutations =>
        mutations.forEach(mutation => updateWordCount(mutation.target))
    );

    /**
     * Initialize word count tracking for matching elements
     */
    function initializeWordCount() {
        const elements = document.querySelectorAll(".tox-statusbar__wordcount");

        if (elements.length) {
            clearInterval(wordCountInterval);
            elements.forEach(element => {
                updateWordCount(element);
                observer.observe(element, {
                    childList: true
                });
            });
        }
    }

    wordCountInterval = setInterval(initializeWordCount, 300);
})();

[theskumar]

I didn't quite understand the logic behind wordCountInterval = setInterval(initializeWordCount, 300);, is it doing polling until a matching word count instance is found?

Will there be a situation when, after going into a loop, if js is included but no .tox-statusbar__wordcount is present in the DOM.

[frjo]

@theskumar Added your version of the script, definitely more readable.

If the only rich text field is in a field group it can be hidden. That might be the reason for using "setInterval". It was I who added this, but it was five years ago.

[theskumar]

If the only rich text field is in a field group it can be hidden. That might be the reason for using "setInterval". It was I who added this, but it was five years ago.

OK. Makes sense. If it’s hidden, the querySelector should still be able to pick it up. I think you should try using setTimeout to initialize it after, say, 300ms of page load, and see if it still works. We could try finding some better trigger, but to me it feels like it was added because the TinyMCE takes a while to initialize itself and this code just checks for it until it's ready.