Fix the default browser spellcheck functionality, or integrate a spell checker to CodeMirror
Closed, ResolvedPublic8 Story Points

Description

Currently the default browser spell-checker does not function.
Previously it was a problem with textarea, but that should no longer be a problem (see discussion below).
Can we fix this?


Original description:
It is possible to add support something like Typo.js

Pastakhov created this task.Apr 5 2015, 6:45 AM
Pastakhov updated the task description. (Show Details)
Pastakhov raised the priority of this task from to Needs Triage.
Pastakhov added a subscriber: Pastakhov.
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptApr 5 2015, 6:45 AM
Pastakhov triaged this task as Low priority.Apr 5 2015, 6:46 AM
Pastakhov set Security to None.

Maybe this link can help.

What advantages does this provide, compared to the generally excellent spelling checkers that are already provided in everyone's web browsers?

Web browsers can check spelling in textareas only. The CodeMirror removes textarea and emulates one since textarea doesn't support highlights. So web browsers can't provide spelling checkers with CodeMirror.

Web browsers can check spelling in textareas only.

I am not certain that this is completely accurate any longer. For example, I understand that VisualEditor isn't a textarea, and my web browser's spellcheck system works in it anyway:

This screenshot was taken in VisualEditor's visual mode in Firefox 50 at the German Wikipedia, with the browser's spelling dictionary set to English. All those red lines indicate "misspelled" words.

Yes, you are right. Have no idea why it still does not work in CodeMirror in this case...

Quiddity added a subscriber: Quiddity.
Quiddity renamed this task from Integrate a spell checker to CodeMirror to Fix the default browser spellcheck functionality, or integrate a spell checker to CodeMirror.Jul 9 2017, 3:33 AM
Quiddity raised the priority of this task from Low to Normal.
Quiddity updated the task description. (Show Details)
Quiddity added a subscriber: Niharika.
Schnark added a subscriber: Schnark.Aug 7 2017, 8:26 AM

Web browsers can check spelling in textareas only.

I am not certain that this is completely accurate any longer. For example, I understand that VisualEditor isn't a textarea, and my web browser's spellcheck system works in it anyway:

This screenshot was taken in VisualEditor's visual mode in Firefox 50 at the German Wikipedia, with the browser's spelling dictionary set to English. All those red lines indicate "misspelled" words.

Actually, in the combination of NWE and CodeMirror, spellcheck works great. But this mode technically differs a lot from the classic editor + CodeMirror.

Maybe @Esanders can shed some light on this.

Trizek-WMF added a subscriber: Trizek-WMF.

I've tested CoreMirror yesterday evening and I really miss my spelling check functionality. I'm pretty sure it will be a request from multiple communities.

The VE surface was designed to use all the built in features of ContentEditable (such as spell check and RTL support) and @dchan has spent a lot of time making sure that when you use these features it synchronises directly to the model. I can't envision CodeMirror addressing these problems any time soon, but the way VE integration works is we use the VE surface as an invisible input, and only use CodeMirror for colouring, by rendering underneath VE.

So it turns out CodeMirror has a CE mode as well (inputStyle: 'contenteditable'). They still disable spellchecking, and when I override that it seemed to work okay, although it moved the cursor to the wrong place after using it. It probably handles RTL and IMEs better, so it seems like a better system.

DannyH set the point value for this task to 8.Aug 29 2017, 11:36 PM
Niharika claimed this task.Sep 14 2017, 5:48 PM
Niharika moved this task from Ready to In Development on the Community-Tech-Sprint board.

Change 378076 had a related patch set uploaded (by Niharika29; owner: Niharika Kohli):
[mediawiki/extensions/CodeMirror@master] Turn on native CodeMirror spellcheck feature

https://gerrit.wikimedia.org/r/378076

Niharika added a comment.EditedSep 14 2017, 8:13 PM

The patch above does what Ed explained. Using contenteditable mode and turning on spellcheck. It's not fully reliable. Sometimes the red underlines vanish after typing and reappear after you move your cursor to it etc. This is because of CodeMirror's constant re-rendering of content in the textarea. See https://github.com/codemirror/CodeMirror/pull/4113#issuecomment-239779754

I think the question here is - How do people use spellcheck?

  • If a user is typing text and they mistype something, it'll get underlined in red and they can fix it instantly and move on.
  • If a user is pasting in a whole lot of text, hoping to fix the typos together, that's not going to be very reliable.

From my testing Firefox and Chrome handled this okay. The issues were worst in Safari.

There aren't any performance concerns because it's not loading in any extra language dictionaries.

IMHO, adding this patch is better than the current state where there is no spellchecking at all. We can look at other solutions meanwhile.

The patch is on commtech wiki is anyone wants to test it there.

According to @Fomafix, with this change CodeMirror inserts characters into the content when pressing browser access keys like Shift+Alt+B for jumping into the summary line. Personally, I can't reproduce the problem. Perhaps Fomafix could provide more details.

Only Firefox seams to have the problem with inserting characters.

@Fomafix: I'm using Firefox, but can't reproduce. Could you provide more details?

I can't reproduce either. @Fomafix are you sure this patch is causing the problem? Does it work fine without this patch? Is could possibly be a gadget or user script interfering with CodeMirror. Please use ?safemode=1 while testing this. Thanks.

I can reproduce the problem with Firefox on Windows and on Linux, with safemode=1, with skin Vector and MonoBook, and when I disable other extensions. Only when I disable inputStyle: 'contenteditable' the inserting of characters in the content is away.

I can't reproduce the error with crtl-shift-p etc. on Firefox 55.0.2 on Linux. These key shortcuts work as expected.

I can reproduce the problem with Firefox on Windows and on Linux, with safemode=1, with skin Vector and MonoBook, and when I disable other extensions. Only when I disable inputStyle: 'contenteditable' the inserting of characters in the content is away.

@Fomafix - sorry to ask again but are you *sure* that this patch is causing the problem? That is, if you go to enwiki right now, it doesn't happen there? Can you reproduce it on commtech wiki?

Fomafix added a comment.EditedSep 26 2017, 4:51 AM

I describe the misbehavior again:

When I enable spell check as in https://gerrit.wikimedia.org/r/378076 (adding inputStyle: 'contenteditable') then I have on Firefox the behavior: When I enter an access key the character is inserted into the content on the current cursor position. For example when I press Shift-Alt-, then a < is inserted on the current cursor position with English keyboard layout and a ; is inserted on the current cursor position with German keyboard layout. The access key action is also triggered so Shift-Alt-B inserts a B and jumps to the summary field.

I can reproduce this behavior on Firefox on Windows and on Firefox on Linux with a local Wiki installation and on https://en.wikipedia.org/w/index.php?title=Wikipedia:Sandbox&action=edit when I activate inputStyle: 'contenteditable' via browser JavaScript console. Other browser like Chrome or Internet Explorer are not affected by this problem.

Also WikiEditor must be enabled for this misbehavior.

I describe the misbehavior again:

When I enable spell check as in https://gerrit.wikimedia.org/r/378076 (adding inputStyle: 'contenteditable') then I have on Firefox the behavior: When I enter an access key the character is inserted into the content on the current cursor position. For example when I press Shift-Alt-, then a < is inserted on the current cursor position with English keyboard layout and a ; is inserted on the current cursor position with German keyboard layout. The access key action is also triggered so Shift-Alt-B inserts a B and jumps to the summary field.

I can reproduce this behavior on Firefox on Windows and on Firefox on Linux with a local Wiki installation and on https://en.wikipedia.org/w/index.php?title=Wikipedia:Sandbox&action=edit when I activate inputStyle: 'contenteditable' via browser JavaScript console. Other browser like Chrome or Internet Explorer are not affected by this problem.

Also WikiEditor must be enabled for this misbehavior.

That's not what I said. Please don't add that via the browser to test it. That's not how CodeMirror works.

Can you reproduce the issue on this page? (Please don't manipulate the DOM yourself, just use it as is, it has that patch.)

I've tried everything and I can't reproduce that bug.

Fomafix added a comment.EditedSep 27 2017, 8:35 PM

Yes I can also reproduce the problem on this page although the extension WikiEditor is not enabled there.

Yes I can also reproduce the problem on this page although the extension WikiEditor is not enabled there.

My mistake. It's active now. Try again please?

I can reproduce the problem on Firefox with and without extension WikiEditor.

I still cannot reproduce the problem.

In any case, I think the patch should be merged and we should file I bug for the above issue. A lot of people have expressed that they rely on spellchecking and it's a much bigger problem than this one. @kaldari, @DannyH - thoughts?

@Niharika: What happens if we enable spellcheck: true, but not inputStyle: contenteditable. Is the spellcheck feature dependent on contenteditable?

Quiddity added a comment.EditedSep 27 2017, 9:19 PM
  1. I can reproduce the Shift+Alt+B problem in Firefox 55.0.2 on Linux, on commtechwiki. (It types the letter "B" in the content area, and jumps the cursor to the edit-summary field). Happy to help test if you let me know how.
  2. Shift+Alt+B doesn't seem to work at all in Chromium 61 (on commtechwiki or Enwiki). So maybe the entire shortcut needs its own new bug filed?
  3. But doesn't using the [tab] key work a lot better for this?! It works predictably in both browsers, with/without CodeMirror.

@Niharika: What happens if we enable spellcheck: true, but not inputStyle: contenteditable. Is the spellcheck feature dependent on contenteditable?

Yeah, it's dependent on that. Does not work without setting inputStyle: contenteditable.

All access keys are affected. I noticed Shift-Alt-B because this is easier to reproduce because it does not jump to far. A more important access key Shift-Alt-P for preview. An interesting detail is that the preview is executed before the character is inserted because the preview does not contain the character. On live preview the character is still the content and a normal preview and then save stores the character in the database.

The spell check should get activated on Firefox as long this bug exists. Maybe the spell check for other browser may be activated.

Sounds like we should exclude using contenteditable in Firefox for now, until we can figure out what's responsible for handling these keyboard shortcuts (they sound MediaWiki specific) and make sure it plays nice with CodeMirror.

Change 382023 had a related patch set uploaded (by Niharika29; owner: Niharika Kohli):
[mediawiki/extensions/CodeMirror@master] Disable spellchecking for Firefox users on non-Mac systems

https://gerrit.wikimedia.org/r/382023

For future reference, the accesskeys are defined using the HTML accesskey attribute. For example, for the edit summary field:
<input accesskey="b" name="wpSummary" id="wpSummary" type="text"></input>
There is no special JavaScript involved. It's probably a bug that the Windows and Linux version of Firefox pass this event to the CodeMirror div.

Change 378076 merged by jenkins-bot:
[mediawiki/extensions/CodeMirror@master] Turn on native CodeMirror spellcheck feature

https://gerrit.wikimedia.org/r/378076

Change 382023 merged by jenkins-bot:
[mediawiki/extensions/CodeMirror@master] Disable spellchecking for Firefox users on non-Mac systems

https://gerrit.wikimedia.org/r/382023

Niharika closed this task as Resolved.Oct 5 2017, 12:07 AM
Niharika moved this task from Needs Review/Feedback to Done on the Community-Tech-Sprint board.
DannyH moved this task from Backlog to Archive on the Community-Tech board.