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

Description

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 ) {
       $currentFocused.textSelection(
         '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 origTextSelection.call( 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 origTextSelection.call( 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?).

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

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

kaldari triaged this task as Normal 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

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

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 Done on the Community-Tech-Sprint board.