-
Notifications
You must be signed in to change notification settings - Fork 38
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Make word count warnings work with leatest TinyMCE editor. #4271
Make word count warnings work with leatest TinyMCE editor. #4271
Conversation
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);
})(); |
I didn't quite understand the logic behind Will there be a situation when, after going into a loop, if js is included but no |
@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. |
OK. Makes sense. If it’s hidden, the querySelector should still be able to pick it up. I think you should try using |
Fixes #4270
Test Steps