Page MenuHomePhabricator

function mw.toolbar.insertTags does not work with CodeMirror in Chrome and IE
Closed, ResolvedPublic2 Estimate Story Points


Interface for the classic edit toolbar (mw.toolbar) does not correctly identify the focused element when CodeMirror is enabled in Chrome and IE (in FF it works correctly).
As a result the function mw.toolbar insertTags does not work correctly.

The function can insert tags, but cannot encapsulate selection.

Problem description:

$currentFocused is wrong in Chrome and IE when CodeMirror enabled

insertTags: function ( tagOpen, tagClose, sampleText ) {
     if ( $currentFocused && $currentFocused.length ) {
         'encapsulateSelection', {
           pre: tagOpen,
           peri: sampleText,
           post: tagClose

Code that set the $currentFocused variable:

$( document ).on( 'focus', 'textarea, input:text', function () {
      $currentFocused = $( this );
 } );

This works different in IE, Chrome and FF when CodeMirror is enabled.

And corresponded code in CodeMirror:

function cmTextSelection( command, options ) {
    if ( !codeMirror || codeMirror.getTextArea() !== this[ 0 ] ) {
      return this, command, options );

Only in FF when CodeMirror enabled and function mw.toolbar.insertTags called this[ 0 ] === codeMirror.getTextArea()

This bug was found when the CodeMirror and Charinsert extensions was used together.

Seems, it can be fixed in CodeMirror by:

function cmTextSelection( command, options ) {
    if ( !codeMirror /*|| codeMirror.getTextArea() !== this[ 0 ]*/ ) {
      return this, command, options );

but I sure it should be fixed in MW core.

From the merged-in task:

Different results in Firefox 55 and Chromium 60 (linux)
To reproduce:

Note: Removing any text from that example will result in it starting to work properly. It is currently 1001 bytes (possibly relevant?).


Related Gerrit Patches:
mediawiki/extensions/CodeMirror : masterFix for function mw.toolbar.insertTags in chrome and IE

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMay 10 2017, 5:45 AM
Pastakhov updated the task description. (Show Details)May 10 2017, 5:56 AM
Niharika added subscribers: Fluffernutter, Niharika.

Bumping this. Also reported by @Fluffernutter on IRC.

Kbrown added a subscriber: Kbrown.Aug 30 2017, 7:38 PM

Seems likely. I'll merge it in since this one has more info.

Niharika updated the task description. (Show Details)Aug 30 2017, 7:42 PM

Change 375754 had a related patch set uploaded (by Pastakhov; owner: Pastakhov):
[mediawiki/extensions/CodeMirror@master] Fix for function mw.toolbar.insertTags in chrome and IE

kaldari triaged this task as Medium priority.Sep 5 2017, 11:39 PM
kaldari set the point value for this task to 2.

Change 375754 merged by jenkins-bot:
[mediawiki/extensions/CodeMirror@master] Fix for function mw.toolbar.insertTags in chrome and IE

kaldari closed this task as Resolved.Sep 20 2017, 6:25 PM
kaldari claimed this task.
kaldari moved this task from Needs Review/Feedback to Q1 2018-19 on the Community-Tech-Sprint board.
DannyH moved this task from Estimated to Archive on the Community-Tech board.Oct 3 2017, 9:50 PM
Perhelion reopened this task as Open.Oct 20 2018, 8:44 PM
Perhelion added a subscriber: Perhelion.EditedOct 20 2018, 8:48 PM

I reopened this task as this is not resolved on DeWiki, as there is still the deprecated mw.toolbar.insertTags used (on MediaWiki:Onlyifediting.js).

Perhelion closed this task as Resolved.Aug 15 2019, 10:05 AM

Adding the .CodeMirror class to the $currentFocused variable fixes this:

.on( 'focus', 'textarea, input:text, .CodeMirror', function () { ...

As used in commons:MediaWiki:Edittools.js (since over 1 year)
Anyway mw.toolbar.insertTags doesn't exists anymore, so I closed this again.