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
| Status | Subtype | Assigned | Task | ||
|---|---|---|---|---|---|
| Resolved | kaldari | T101246 Highlighted wikisyntax while editing articles [AOI] | |||
| Resolved | Niharika | T95104 Fix the default browser spellcheck functionality, or integrate a spell checker to CodeMirror |
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...
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.
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.
Change 378076 had a related patch set uploaded (by Niharika29; owner: Niharika Kohli):
[mediawiki/extensions/CodeMirror@master] Turn on native CodeMirror spellcheck feature
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?
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.
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.
@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?
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.
Yes I can also reproduce the problem on this page although the extension WikiEditor is not enabled there.
@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 not 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
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
Change 382023 merged by jenkins-bot:
[mediawiki/extensions/CodeMirror@master] Disable spellchecking for Firefox users on non-Mac systems
I reported @Fomafix's bug upstream: https://github.com/codemirror/CodeMirror/issues/5253, although it probably belongs even further upstream (at the browser level).
Spellchecking still doesn't work for me, neither in Firefox 58.0.2 nor in Chromium 64.0.3282.140 on Ubuntu. :-(
The spell checking is disabled on Firefox by https://gerrit.wikimedia.org/r/382023 because the enabling of inputStyle: 'contenteditable' causes a problem with access keys on Firefox. Does your Chromium have spell checker when you disable CodeMirror?
Sorry! It works fine in Chromium, I don't know why I couldn't see it work yesterday, perhaps I simply didn't wait for the checker to reach my position or so … Excuse my injection!
3,5 years on, the contenteditable fix was reverted as most people will have FF versions installed (65 or higher, almost 2 years old) that no longer are affected by this bug.
I believe TheDJ is referring to https://gerrit.wikimedia.org/r/#/c/mediawiki/extensions/CodeMirror/+/421349/. Thanks!