CharInsert+CodeMirror doesn't work under WebKit browsers
Closed, ResolvedPublic5 Story Points

Description

Clicking on characters doesn't do anything. Originally reported with Safari 11, macOS 10.13. Confirmed with Chrome 62 and Opera 48 (both Windows 7 SP1), I don't even get any error message on the browser console.

Another report, about problems on Yandex browser and Microsoft Edge:
https://www.mediawiki.org/w/index.php?title=Topic:U3u9luerjbdt3gdw&topic_showPostId=u40t28kk547cmko7&fromnotif=1#flow-post-u40t28kk547cmko7

Restricted Application added a project: Community-Tech. · View Herald TranscriptOct 30 2017, 1:27 PM
Restricted Application added a subscriber: Aklapper. · View Herald Transcript

Hi @Tacsipacsi, thanks for taking the time to report this!
Please add a more complete description to this report (either linking to a public testcase or MediaWiki version information for your personal wiki, etc). You can edit the task description by clicking Edit Task. Thanks!

  1. Turn on your computer.
  2. Start a WebKit-based browser (Safari, Chrome, Opera etc.)
  3. Open Wikipedia.
  4. Go to Settings > Beta and turn on CodeMirror.
  5. Go to any Wikipedia page.
  6. Click on "Edit source".
  7. If the software asks if you would like to turn on syntax highlighting, choose yes.
  8. Click on a character in the edit tools.
  9. See what happens—nothing!

Is it complete enough?

@Tacsipacsi:

  1. Open Wikipedia.

Which one? I went to https://en.wikipedia.org now.

  1. Go to Settings > Beta and turn on CodeMirror.

I turned on "Wikitext syntax highlighting". I have no idea where or how to find "CodeMirror".

  1. Go to any Wikipedia page.
  2. Click on "Edit source".

I clicked "Random page" and ended up on https://en.wikipedia.org/w/index.php?title=The_Pushbike_Song&action=edit

  1. If the software asks if you would like to turn on syntax highlighting, choose yes.

I never get asked if I want to turn on syntax highlighting.

Is it complete enough?

No, see my inline comments. :) In general, "any page" does not help while specific example links do.

@Tacsipacsi:

  1. Open Wikipedia.

Which one? I went to https://en.wikipedia.org now.

Any that actively uses CharInsert (e.g. huwiki). English Wikipedia uses some custom character insert, which seems to not have this bug, but will certainly break for everyone after finalizing T30856.

  1. Go to Settings > Beta and turn on CodeMirror.

I turned on "Wikitext syntax highlighting". I have no idea where or how to find "CodeMirror".

That's it. A developer of this extension would not have questions about it—I write bug reports for developers, not for users.

  1. Go to any Wikipedia page.
  2. Click on "Edit source".

I clicked "Random page" and ended up on https://en.wikipedia.org/w/index.php?title=The_Pushbike_Song&action=edit

I also used "Random page", of course on huwiki. Now I ended up on https://hu.wikipedia.org/w/index.php?title=Villamoratiel_de_las_Matas&action=edit but the bug was present on all previous pages.

  1. If the software asks if you would like to turn on syntax highlighting, choose yes.

I never get asked if I want to turn on syntax highlighting.

Then don't answer yes. :) If it doesn't ask, it means you have previously used it. It might be turned off, but as it doesn't turn off by itself, you have already found the toggle button which you have to use.

That's it. A developer of this extension would not have questions about it—I write bug reports for developers, not for users.

If you do not provide clear steps to reproduce, it's irrelevant who you "write for" because neither developers nor users will be able to reproduce.

Then don't answer yes. :)

This does not make any sense.

Then don't answer yes. :)

This does not make any sense.

Why? As I wrote, it may not ask you, but it has a simple reason: you use this feature not for the first time, so it have asked you before. (If it hasn't asked you ever, then it's another bug.)

DannyH added a subscriber: DannyH.Nov 1 2017, 9:38 PM

@Tacsipacsi I tried syntax highlighting on huwiki using both Chrome and Firefox, and used the toolbar to bold text and to add characters. It worked in both places; here's a couple screenshots. Did I understand the problem correctly?


No, it's about the edit tools below the edit box (light blue "buttons", which themselves look IMHO awful on Chrome).


TheDJ added a subscriber: TheDJ.Nov 2 2017, 12:44 PM

This is a conflict between CharInsert and CodeMirror. Charinsert only looks at a limited number of input areas, and the code mirror layer is not one of those.

$elm.click(function(e) {
                    e.preventDefault();
                    if ($currentFocused.length) {
                        $currentFocused.textSelection('encapsulateSelection', {
                            pre: start,
                            peri: '',
                            post: end
                        });
                    }
                }).data('mw-charinsert-done', true).attr('href', '#');

current focused.length == 0 so the character is not inserted (basically, because it doesn't know where to insert it to, because #wpTextbox1 was never focused. This logic is in place in CharInsert because it also had to work for edit summary field, upload page and LQT textareas. Not sure if there is a better way to do it atm...

DannyH added a comment.Nov 3 2017, 9:54 PM

@Tacsipacsi As far as I can tell, the "Special characters" toolbar at the top includes all of those features, and they work in syntax highlighting. They also look better than the buttons that you don't like. :) Can you switch to use the charinsert toolbar at the top?

I can switch to use Firefox, where it works well for some strange reason. (Actually, I do use Firefox and have never used WebKit-based browsers for everyday use. This bug was reported on the village pump and I created this task to let the developers know about it.) However, as long as these two extensions exist and can be used together on Wikimedia wikis, it should be considered as a bug, even if with low priority.

And the WikiEditor toolbar doesn't contain everything the edittools does: latter has a dropdown list, and, for example, the third, fourth and fifth options (various templates) are completely missing from the above toolbar. (And edittools works also in other inputs like edit summary, but it's not a problem, as we don't have edit summary syntax highlight.)

Niharika triaged this task as Low priority.Nov 6 2017, 8:01 PM
Niharika moved this task from Untriaged to To be estimated/discussed on the Community-Tech board.

If T178013 was closed with the reference to this task (perhaps merging would be a better approach), then some summarizing is in order.

In T178013 it was found that in the Firefox browser the above mentioned inserting of (special) characters into the edit field through edittools works (we are talking about CodeMirror enabled, of course), but you can't insert them into the summary field.

And the WikiEditor toolbar doesn't contain everything the edittools does: latter has a dropdown list, and, for example, the third, fourth and fifth options (various templates) are completely missing from the above toolbar. (And edittools works also in other inputs like edit summary, but it's not a problem, as we don't have edit summary syntax highlight.)

I agree about the part about "the WikiEditor toolbar doesn't contain everything the edittools does". But the part "edittools works also in other inputs like edit summary, but it's not a problem" is obviously incorrect. Because if the inserting of special characters (through the edittools) into the summary field is completely broken, I call it a (relatively) big problem. (Inserting those special characters into the summary field through WikiEditor is also not an option).

Then it's more severe problem than I thought – I believed that CodeMirror can't break a totally independent system like CharInsert+summary field. I was wrong, it can. :(

@Tacsipacsi both of them are manipulating JavaScript. Not independent so much. :)

Elitre added a subscriber: Elitre.Nov 15 2017, 12:29 PM
kaldari set the point value for this task to 5.Dec 13 2017, 12:16 AM
DannyH updated the task description. (Show Details)Dec 18 2017, 10:00 PM
MaxSem claimed this task.Dec 18 2017, 10:18 PM

Change 397631 had a related patch set uploaded (by MaxSem; owner: MaxSem):
[mediawiki/extensions/CodeMirror@master] Fix target detection for jquery.textSelection overrides

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

Change 399257 had a related patch set uploaded (by MaxSem; owner: MaxSem):
[mediawiki/extensions/CharInsert@master] Add CodeMirror support

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

Change 399257 merged by jenkins-bot:
[mediawiki/extensions/CharInsert@master] Add CodeMirror support

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

kaldari closed this task as Resolved.Dec 21 2017, 1:06 AM
kaldari moved this task from Needs Review/Feedback to Done on the Community-Tech-Sprint board.