Extension talk:CodeMirror

Jump to navigation Jump to search

About this board

Thanks for your feedback about the Extension:CodeMirror used to provide wikitext syntax highlight to pages on MediaWiki-based projects.

Report a new bug in Phabricator

CodeMirror in collaboration with WikiEditor, MW 1.31

Summary by Alzi24

User's mistake

Alzi24 (talkcontribs)

Hello there! I have just upgraded our test wiki to Mediawiki 1.31.

In our previous MW version, the CodeMirror extension (3.4.something) broke the browser search Ctrl+F, which should have been solved in the newer extension (4.0.0)

Unfortunately now with MW 1.31 the extension does not work at all. Seems as if there are problems with the WikiEditor (0.5.1), if the CodeMirror extension is installed.

There should be an additional icon in the WikiEditor's toolbar to switch the code highlighting on or off, but there isn't. Worse: If I set the user preference for the extended toolbar, then in the WikiEditor the toolbar disappars at all. And worst: As soon as the CodeMirror extension is installed, I earn an additional malfunction within the user preferences; it refuses switching to another tab: the browser URL tells me e.g. Spezial:Einstellungen#mw-prefsection-rc but the preferance still sticks on the first tab.

Does anyone have any ideas what I am doing wrong here?

NKohli (WMF) (talkcontribs)
Alzi24 (talkcontribs)

I have to apologize, I've made a mistake yesterday. Don't know what I did wrong. Today I removed the extension and reinstalled it from the ExtensionDistributor (which I thought was the same procedure I performed yesterday). It is still version 4.0.0 but now everything works fine.

For your interest: the master version results in

 PHP Fatal error:  Uncaught ExtensionDependencyError: CodeMirror is not compatible with the current MediaWiki core (version 1.31.1), it requires: >= 1.32.0. 

which seems reasonable ;-)

Sorry for stealing your time!

NKohli (WMF) (talkcontribs)

Oops, sorry about that. :)

AEzell (WMF) (talkcontribs)

Recently, Marijn and Adrian, the developers and maintainers of CodeMirror posted an explanation of the big changes they have in-store for Version 6 of CodeMirror: https://codemirror.net/6/

I work with the Community Tech team which helped integrate CodeMirror with the wikitext editor. Given this new version, we want to do two things.

First, we want to voice our support for Marijn and Adrian in their efforts. CodeMirror and the syntax highlighting it provides via this extension are a valuable feature for MW users.

Second, I'd like to gather some feedback on the current extension's strengths and what it lacks. If we take on the work to integrate this new version, we want to be sure to keep things that users like now and possibly fix or add features that users want. Marijn and Adrian are building CodeMirror with their own feature set in mind. We cannot and would not try to dictate feature requests or bug fixes. In the interest of collaboration, we do want to collect as much user feedback as we can so we can all have a better library and extension.

Our hope is that the new version will enable much easier integration which will create fewer bugs with the extension. Your input here can go a long way to making that true. It's important to point out that this is a preliminary discussion as the timeline for a finished library and my team's ability to start working with it is currently unknown.

Reply to "Revamp of CodeMirror"

How to check if switched on and access its API

V111P (talkcontribs)

For some reason the page Extension:CodeMirror does not explain these simple questions. If the API is not accessible in MediaWiki this should obviously be documented on the extension's page.

P.S. thanks to a comment by User:Trustable in another thread I figured out that you can check if CodeMirror is switched on with: $('.mw-editbutton-codemirror-active').length > 0 and you can swith it on/off with: $('#mw-editbutton-codemirror').click()

Reply to "How to check if switched on and access its API"
George Ho (talkcontribs)

Some (if not most) of us know that the extension is not compatible at Internet Explorer and lesser-known browsers. The "Browser support" section should be updated to reflect that. What about other parts of the page?

Reply to "Page should be updated"
Delusion23 (talkcontribs)

en:User talk:GregU/dashes.js is a useful script on English Wikipedia for turning hyhens into dashes. It appears it is no longer works when I use "Wikitext syntax highlighting" beta.

NKohli (WMF) (talkcontribs)

@Delusion23 Thanks for letting us know. There are several similar user scripts which break with CodeMirror. It seems like the script author isn't active on wiki anymore, unfortunately. We'll try to take a look at it.

Perhelion (talkcontribs)

CodeMirror breaks any script wich need manipulating plain Wiki text. To need fix every script except of CodeMirror is an absolute no-go. Why need CodeMirror a new Textbox? Other older (sometimes better) Syntax-highlighter have not this problem (my favorite is de:User:Schnark/js/syntaxhighlight).

PS: There is a difference in the textbox access .

$( '#wpTextbox1' ).val() is different to $( '#wpTextbox1' )[0].value

Which is normally fully the same, but seems a use of hook or something.

Reply to "User talk:GregU/dashes.js"

Problem when copy/paste from external text editors

Summary by NKohli (WMF)


Herr Klugbeisser (talkcontribs)

Hello, I consistently face a problem when I do the following:

  • I make big edits or write new articles in a text editor outside the web browser (mostly because I write when I am offline)
  • When I copy/paste the text into the edit window, then
    • no syntax is highlighted
    • after using the "preview" function, the original text is previsualized and the text in the edit window is reset (and thereby lost)

This is a new phenomenon that arrived together with syntax highlighting. It happens consistently in Win7 and Internet Explorer. I used to see a similar phenomenon in Linux and Firefox, but not consistently.

See below for your reference:

NKohli (WMF) (talkcontribs)

I don't see the syntax highlighting icon in the toolbar in your images. Which editor are you using?

As long as you are not using syntax highlighting, you should not be affected by it at all. The way you describe your problem, it does not seem like it is being caused by syntax highlighting.

Herr Klugbeisser (talkcontribs)

Hello, I also don't see any syntax highlighting icon, but syntax highlighting has been activated for me some weeks ago. At least syntax is highlighted when I open the source of an article.

I am not aware of having any choice of editor. I assume I use the default editor in the German wikipedia. I have noticed that syntax highlighting is "off" for my user in the English wikipedia, but "on" in the German. I can't see any difference in the preferences. Emptying *.js and *.css subpages has not helped, switching between skins also not.

Please understand that I'm here for writing good articles and not for messing around with this kind of issues. --Herr Klugbeisser (talk) 09:03, 30 July 2018 (UTC)

NKohli (WMF) (talkcontribs)

@Herr Klugbeisser the content in your screenshots above does not appear to have syntax highlighting. What makes you think syntax highlighting is causing these issues for you?

Herr Klugbeisser (talkcontribs)


I let you see what I see:

When I open any article in the German Wikipedia under Win7/IE, I see the above picture.

Syntax highlighting is obviously active. There is no icon, I don't know why. I have deleted my *css and *js yesterday, maybe this is the reason; it is opaque for the average user. Anyway, the icons were completely useless to me so I'm happy they are gone.

Now, assume I scroll down in the text and I want to edit the line where the cursor is.

If I click on the word "Eisenbahn" in the textbox, then

  • the text displayed "jumps" to the beginning
  • the scroll bar of the text box remains where the cursor is
  • the user has to look for the cursor

Marking a text is practically impossible because at clicking, the focus is lost and the user does not see the text he wanted to mark any more.

This is extremely annoying (I read several complaints in discussions of the German wikipedia). I have not experienced this before syntax highlighting was introduced. If you are sure that syntax highlighting is not the cause of this issue, please channel this bug to the right place inside Wikimedia.

Given this bug, the only way to work efficiently for me is to copy the whole text into an external editor, carry out my edits, then copy the complete text back to the editing window.

However, when I copy such a text back from any text editor (I have tried several), syntax highlighting fails to highlight (no loss), but also saving or previewing fails to show the text pasted from the external editor but instead visualises the original text.

This means that at the moment, I can't contribute under Windows.

I don't know how many people experience this issue.

The implementation of syntax highlighting was very poorly communicated, it took me some time to find out the probable cause of these issues even though I consider myself a regular contributor.

For some reason, in English Wikipedia syntax highlighting seems to be "off" for me even though my user settings are identical.

Under Linux (Mint 19/Firefox), syntax highlighting is also obviously active. No icon, however.

Editing works fine.

Pasting text from a text editor (kate in my case) usually works, but I have observed the issue described above occasionally.

NKohli (WMF) (talkcontribs)

@Herr Klugbeisser Do you have the toolbar disabled? I would suggest you enable the toolbar and then in the toolbar click the icon which will turn off syntax highlighting. After that you can disable the toolbar again and you will have no problems with syntax highlighting any more.

Herr Klugbeisser (talkcontribs)

Hello NKohli, it seems that I have found the reason: the CodeMirror conflicts with other "Helpers", in my case this one:


After removing this helper from my subpages, and activating/deactivating the standard toolbar, it seems that everything works.

I mistook the toolbar from the above "helper" for the standard mediawiki toolbar, hence the confusion.

Sorry for this. This point can be closed.

NKohli (WMF) (talkcontribs)

I am glad it got resolved for you.

Backspace deletes too much and Undo action is disabled

Palaestrator verborum (talkcontribs)

The thing that holds me off using the wikitext syntax highlighting is that it only deletes whole segments of writing when I use the backspace key, deviating from the standard behavior in Firefox. This means I cannot just delete the stress mark over the word “ворота́” without deleting the final vowel sign “а” too, and it inhibits me from proper vocalizing of Arabic text with ḥarakāt and vocalizing any other Semitic script, which is needed on Wiktionary. Presumably the problems with more complex scripts are much more severe. Similar to this problem is also that the extension disables the “Undo” function in the context menues the browser opens in text fields, which is also a reason not to use the extension. (talkcontribs)

Browser based undo (on right click) will never work properly with tools like this unlike keyboard shortcuts ( Ctrl + Z) . Basically, due to how html is designed, syntax highlighting tools must essentially forcibly hack in the styling to show the "cute" colors.

Codemirror seems to use contenteditable which doesn't work properly for this kind of thing (https://github.com/codemirror/CodeMirror/commit/58a487174b23740e76f42f883530ed50abd4f019, https://github.com/w3c/editing/issues/150), and even Extension:CodeEditor which doesn't use contenteditable still doesn't work properly with the browser based undo. Attempting to synchronize the highlighting when content changes is a fragile and will always have a long list of bugs.

It is a tradeoff, either use hacky syntax-highlighting and lose out on certain features, or use the plain textarea and enjoy all browser based features, and whatever browser bugs it comes with.

Reply to "Backspace deletes too much and Undo action is disabled"
Seudo (talkcontribs)


Apparently, CodeMirror creates another textarea which ID is not "w p Textbox1" (I add spaces because a stupid spam filter rejects my message otherwise). Therefore any customization of gadget that is based on that ID will not work with CodeMirror. Am I correct?

It took me quite a while to understand that a few days ago when the user interface was suddenly broken because of the activation of CodeMirror (I guess I accidentally clicked on a small pencil in the toolbar and thus activated this extension, which I knew nothing about).

Of course I deactivated CodeMirror as soon as I understood what was happening, but code hightlighting might be useful, so is there any way to maintain Javascript customizations in the editing field? When I read the source code, I cannot see any ID in the various DIVs used by CodeMirror. Thanks.

NKohli (WMF) (talkcontribs)

You're quite right. I don't see any IDs either. Will class="CodeMirror" work for your use case? Although CodeMirror chunks out the text into a lot of divs and spans so performing any sort of operations on the text would be very challenging.

Seudo (talkcontribs)

Thanks. So I'll keep CodeMirror deactivated for now and hope the good old textarea will not disappear...

TheDJ (talkcontribs)

I'm not sure what kind of customizations you are doing, but if you are changing the value of the textarea, it sounds like you should be using the jquery.textSelection module.

Seudo (talkcontribs)

For example I replace $oe with œ (and use other replacements to insert characters that are not easy to find in the keyboard, which is useful when editing old French texts in Wikisource). I don't think the textSelection module would be useful since I want the replacement to occur immediately (in the onkeyup event).

When I see the documentation of this module, I guess jquery.textSelection is one of the many modules that won't work in combination with CodeMirror, since it works with textareas.

Jack who built the house (talkcontribs)

Seudo, you should work with $('#wpTextbox1'), just use .textSelection() method for it. As I understand, CodeMirror emulates #wpTextbox1, and changes made to it are automatically transmitted to CodeMirror.

See what we did in ruwiki. At the bottom, you can find a code for the new wikitext editor also.

.val() for $('#wpTextbox1') works too. The only thing which we in ruwiki need that doesn't work is focus/blur jQuery events. I've created phab:T197632 for that.

Seudo (talkcontribs)

You're right, I tried using the textSelection API and now my customizations work even when activating CodeMirror. Thanks !

Seudo (talkcontribs)

At least I thought it worked. In some parts of Wikisource, $('#wpTextbox1').val() and $('#wpTextbox1').textSelection('getContents') do not return the same thing because some hidden text is added in the place where textSelection stores its value...

But this is not a CodeMirror problem and it's probably Wikisource-specific, so I'll try somewhere else. Thanks for the help!

Reply to "wpTextbox1"
Reptilien.19831209BE1 (talkcontribs)

Hello, Is that possible to add an overlay for specific highlighting ? I tried something but that doesn't work. An idea ?

NKohli (WMF) (talkcontribs)

Hey @Reptilien.19831209BE1 can you describe what you want to do a bit more? You can definitely change the styling for any of the wikitext markup pieces in the text. What do you mean by an overlay here?

Reptilien.19831209BE1 (talkcontribs)

Wikitext markup is not concerned by what I'd like to do. In French Wikisource, we have a gadget that detects some frequent typo and OCR mistakes in the parsed text (HTML): like " ' " (U+0027) that should be " ’ " (U+2019), or "1e" instead of "le". It's very usefull and I'd wish to detect these mistakes in the text highlighted by CodeMirror (example: "d'acier" → "d’acier"; "lorsqu’on" → "lorſqu’on"; "dcs" → "des"). CodeMirror API allows us to add a new layer with the method cm.addOverlay, but I don't know how to get (with MediaWiki) the CodeMirror extension object to do this. I hope it's a bit clearer. :-\

Reply to "addOverlay()"

Mark different types of dash and blank characters by highlighting

X black X (talkcontribs)
NKohli (WMF) (talkcontribs)

That's a good idea, @X black X. I created task T196934 to keep track of it. I wouldn't promise that we'll work on it soon because we have the whole new wishlist to go through but we'd definitely try and come back to it when we get the time to.

Reply to "Mark different types of dash and blank characters by highlighting"