Missing highlight of first word (if bad word) with redactor about jquery-spellchecker HOT 7 OPEN

I have solved the problem in my project with a patch in the spellchecker.js code. What I changed it's the regex declared at line 588. The regex was:

var regExp = '';
regExp += '([^' + letterChars + '])';
regExp += '(' + incorrectWords.join('|') + ')';
regExp += '(?=[^' + letterChars + '])';

I changed with:

var regExp = '';
regExp += '([^' + letterChars + ']*)';
regExp += '(' + incorrectWords.join('|') + ')';
regExp += '(?=[^' + letterChars + ']*)';

In my project it seems to solve the problem, I don't know if it introduces issues in other cases but it might be a hint for you.

Please, let me know if I can help somehow.

from jquery-spellchecker.

Great job man, my QA team reports me that missing highlight word as a bug; As same as you I don't know it this could impact other functionality of the spellchecker.

Thank you.

from jquery-spellchecker.

Thank you for your reply! Please, let me know if I can help you.

from jquery-spellchecker.

It works on the highlighting but when we choose a word from the suggestions, the word is not modified.

from jquery-spellchecker.

I've fixed this bug by reusing the Regex from the text parser

        var regExp = '';
        regExp += '(^|[^' + letterChars + '])';
        regExp += '(' + incorrectWords.join('|') + ')';
        regExp += '(?=[^' + letterChars + ']|$)';

from jquery-spellchecker.

I'm still having this same issue, though in a contenteditable div. The first word will not be highlighted, and also a word right after a newline ("br" inside div).

I tried the regex mentioned above:
var regExp = '';
regExp += '([^' + letterChars + '])';
regExp += '(' + incorrectWords.join('|') + ')';
regExp += '(?=[^' + letterChars + '])';
and also one mentioned in similar listed bug:
var regExp = '';
regExp += '([^' + letterChars + ']?)';
regExp += '(' + incorrectWords.join('|') + ')';
regExp += '(?=[^' + letterChars + ']?)';

Both fix the issue of first word being highlighted, BUT they both also allow words within words to be highlighted. Like "booz" is one of the words and marked misspelled, but "booz" of "booze" is also highlighted.

Using the regex from elsewhere in the lib does not solve the first highlight or after newline highlight for me:
var regExp = '';
regExp += '(^|[^' + letterChars + '])';
regExp += '(' + incorrectWords.join('|') + ')';
regExp += '(?=[^' + letterChars + ']|$)';

Help!

Thanks

from jquery-spellchecker.

The issue is worsened because it joins words between nodes before checking them. This way, if you have a word like foo_bar_baz it will match across the inline styles. This causes an issue with words at the ends of block level nodes though, for instance: <p>wierd</p><p>wierd</p> do not get highlighted because it is matching wierdwierd against weird when trying to hightlight.

This is fixable by adding a newline character before the closing tags of visually spaced block level elements. This character isn't visible in the rendered HTML, but it does get transformed into a space when comparing, which turns the example into wierd wierd which matches.

Also, as mentioned above, it doesn't account for words at the beginning or end of the entire checked area, so we need to account for begin and end characters (^ and $).

I fixed this in my code by doing this for the highlightWords function:

  HtmlParser.prototype.highlightWords = function(incorrectWords, element) {
    if (!incorrectWords.length) {
      return;
    }

    // add newlines at block level elements, for cross-node matching later
    element.html(element.html().replace(/\n?(<((\/(div|p|td|th|li|dt|dd))|br\/?)>)/gi, '\n$1'));

    this.incorrectWords = incorrectWords;
    incorrectWords = $.map(incorrectWords, function(word) {
      return RegExp.escape(word);
    });

    var regExp = '';
    regExp += '(^|[^' + letterChars + '])';
    regExp += '(' + incorrectWords.join('|') + ')';
    regExp += '(?=[^' + letterChars + ']|$)';

    this.replaceText(new RegExp(regExp, 'g'), element[0], this.highlightWordsHandler(incorrectWords), 2);
  };

Notice the element.html(...) part which adds newlines to the ends of visually breaking block level elements, as well as the ^ and $ characters added to the regExp as others did above.

from jquery-spellchecker.