Page MenuHomePhabricator

CodeMirror doesn't support focus/blur events for the editing area
Closed, ResolvedPublic

Description

Despite supporting .val() and .textSelection (added by jquery.textSelection module) methods for $( '#wpTextbox1' ), CodeMirror has no support for .focus() & .blur() methods and corresponding events.

In Chrome, listening to these events for the .CodeMirror-code element saves the day, but for some reason the DOM for Chrome and Firefox (at least these two) differs, and in Firefox, I have found no reliable way to attach the said event listeners to the editing area. You can listen to .CodeMirror textarea which is present only in Firefox, but it isn't present in the DOM from the start, and—what makes the things even worse—there is no mw.hook events created for CodeMirror (see T174811: Support JavaScript hook events for CodeMirror), so you can't catch the moment when CodeMirror is initialized to attach a listener. mw.hook( 'wikipage.editform' ) is useless.

Because of this issue an important ruwiki script has broken in Firefox for many users after CodeMirror came out of beta last week.

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript

Unrelated to the issue at hand:

... after making CodeMirror opt-out last week.

It's not supposed to be opt-out :( We've had a few ambiguous reports of this but with all of my test accounts (that had never used CodeMirror), and new test accounts that I created, CodeMirror is off by default as it should be. @MaxSem Any idea what could have caused this?

@Jack_who_built_the_house Did you ever try out CodeMirror on beta labs or test wiki? If you ever turned it on, it will show up as on by default.

Niharika triaged this task as Medium priority.Jun 18 2018, 10:44 PM
Niharika removed a project: Community-Tech.

Okay I assume I'm wrong about opt-out (just too many fellow users reported that). The issue still stands though.

Vvjjkkii renamed this task from CodeMirror doesn't support focus/blur events for the editing area to jpaaaaaaaa.Jul 1 2018, 1:02 AM
Vvjjkkii raised the priority of this task from Medium to High.
Vvjjkkii updated the task description. (Show Details)
Vvjjkkii removed a subscriber: Aklapper.
CommunityTechBot renamed this task from jpaaaaaaaa to CodeMirror doesn't support focus/blur events for the editing area.Jul 2 2018, 11:51 AM
CommunityTechBot lowered the priority of this task from High to Medium.
CommunityTechBot updated the task description. (Show Details)
CommunityTechBot added a subscriber: Aklapper.

Change 763916 had a related patch set uploaded (by Bhsd; author: Bhsd):

[mediawiki/extensions/CodeMirror@master] Trigger focus/blur event handlers attached to textarea

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

Change 763916 merged by jenkins-bot:

[mediawiki/extensions/CodeMirror@master] Trigger focus/blur event handlers attached to textarea

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

With the patch by @Bhsd, you can just register the 'focus'/'blur' handlers on #wpTextbox1, and they will be triggered whenever the user focuses/blurs the CodeMirror editor.

This is similar to how you could already use jquery.textSelection methods on #wpTextbox1, and they would magically return results synchronised with the CodeMirror editor.

Thanks for the patch!

With the patch by @Bhsd, you can just register the 'focus'/'blur' handlers on #wpTextbox1, and they will be triggered whenever the user focuses/blurs the CodeMirror editor.

Thank you for your comment! By the way, I just realize it after closing this task. Do we ever need to worry about visual editors?

I think we don't need to, but it's an interesting question.

For the "normal" visual editor, we definitely don't need to worry about it, because gadgets intended for the wikitext editor don't work with it at all anyway.

For the 2017 wikitext editor, I think we don't need to worry, because (unlike the CodeMirror syntax highlighting) it's not a "drop-in" replacement for the old wikitext editor, and because of that most gadget users and authors wouldn't expect their gadgets to work with it. However, it currently overrides the jquery.textSelection API on #wpTextbox1 (here) similarly to CodeMirror, and you could probably also implement a similar hack to handle the focus/blur events. I don't think it's worth the effort though, and I would worry that this could actually cause issues with existing gadgets, if they expect #wpTextbox1 to behave in certain ways.

Got it. Thank you for your reply!