I enabled spell check for the text box (Interactions - Enable spell check). However, I need to enhance the feature.
For example, I have a text box, and I am entering some data like "World is so Beautiful." In the example above, there are a couple of spaces between "so" and "Beautiful." In such scenarios, is there any way we can ensure no more than one space is used, and also detect any errors?
Are there any external libraries we can integrate, like React? If so, how can we do it?
Hello!
Do you need the value to be transformed if there are double spaces or just be shown as invalid?
If the former, you can always do a .replace() on doubled spaces. If the latter, you can utilize the built in Validation rules to setup a Regex lookahead for double spaces with the following pattern:
^(?!.* ).+
Thank you @pyrrho the messages giving please match with required format how can I update it to
“My own message “ like custom message
I don't think you can set the validationMessage property of the Text Input component, but you can hide the validation message and then use a different component like a regular Text to show the custom message when the Text Input is invalid:
The Text can be set to be hidden when the Text Input is valid:
"Thank you for sharing your inputs. I also need a grammar check. How can I implement it?
Note: It's not like spell check in the interaction. For example, in Outlook, if we type 'What is dog names1,' it will automatically suggest 'names,' even though I typed 'names1.' I can then choose whether I want to go with 'names' or 'names1.'
I am not aware of a built-in library offhand that has grammar checks, but I believe this is the most up-to-date list of included libs.
You would have to load an acceptable grammar checking library into your application settings:
I don't really have a step by step to give you for this but if you do find an appropriate library you would then have to figure out the mechanics of formatting your component values to use the functions outputs of that library.
@pyrrho I tried different approach but I could not able to . I really need this
: I need grammar check in text box.
(Any text box is fine) .
Note : I am not looking for spell check
// Function to load the nspell library
async function loadNspellLibrary() {
return new Promise((resolve, reject) => {
if (window.nspell) {
console.log("nspell library already loaded.");
resolve(); // If nspell is already loaded, resolve immediately
return;
}
const script = document.createElement('script');
// Alternative URL for nspell library
script.src = "https://cdn.jsdelivr.net/npm/nspell@2.0.4";
script.onload = () => {
console.log("nspell library loaded successfully.");
resolve();
};
script.onerror = (error) => {
console.error("Failed to load nspell library:", error);
reject(error);
};
document.head.appendChild(script);
});
}
// Function to fetch dictionary files
async function fetchDictionaryFiles() {
try {
const dictionary = await fetch('https://unpkg.com/dictionaries/en/index.dic').then(response => response.text());
const affix = await fetch('https://unpkg.com/dictionaries/en/index.aff').then(response => response.text());
console.log("Dictionary and affix files fetched successfully.");
return { dictionary, affix };
} catch (error) {
console.error("Failed to fetch dictionary files:", error);
throw error;
}
}
// Function to initialize nspell with fetched dictionary files
async function initializeNspell() {
await loadNspellLibrary();
const { dictionary, affix } = await fetchDictionaryFiles();
return new window.nspell({ aff: affix, dic: dictionary });
}
// Function to check grammar using nspell
async function checkGrammar(nspellInstance, text) {
// Split the text into words
const words = text.split(/\s+/);
// Check each word and collect suggestions
const suggestions = words.map(word => {
if (!nspellInstance.correct(word)) {
return `Word: ${word}, Suggestions: ${nspellInstance.suggest(word).join(', ')}`;
}
return null;
}).filter(suggestion => suggestion !== null).join('\n');
return suggestions;
}
// Initialize nspell and set up the event listener
async function setupSpellChecker() {
try {
const nspellInstance = await initializeNspell();
console.log("nspell initialized successfully.");
// Reference to the text input field
const textInput = businessDescLanguageInputField;
// Event listener for text input changes
textInput.onChange(async () => {
const text = textInput.value;
const suggestions = await checkGrammar(nspellInstance, text);
textInput.setValue(suggestions);
});
console.log("Spell checker setup completed.");
} catch (error) {
console.error('Error setting up the spell checker:', error);
}
}
// Load libraries and initialize spell checker when the page loads
setupSpellChecker().catch(error => {
console.error('Error in setupSpellChecker:', error);
});
@pyrrho I used this on change query it’s failing
Hi @one123,
Did you add the library per these instructions? Which url did you use?
What is the error message?
I didn’t find any appropriate libraries