There is no wikiEditor loaded for readonly text areas (please refer to T41577 for more information), which means there is currently no icon button to switch on/off CodeMirror.

@Lectrician1 The Commtech team reviewed this today and we thought this would make a good proposal.

That old task T41577: Toolbar shouldn't appear in view source if page is protected was also talking about the RefToolbar gadget on enwiki, which is what was allowing it to insert text in the protected page. WikiEditor when enabled on protected pages doesn't allow anything to be changed in the textbox (or rather TextSelection, which is used by WikiEditor and CodeMirror, doesn't).

It's reasonably easy to enable WikiEditor on readonly editing forms, but the buttons will (mostly) be non-functional. Is that okay? I suspect it is, as it's how CodeEditor does things too. We could disable the built-in obviously non-useful buttons (formatting etc) but it's trickier to do that in a general way I think — CodeMirror of course should remain enabled, and possibly the new Preview button. Alternatively, we could de-couple CodeMirror from WikiEditor and show syntax highlighting without the toolbar.

Change 891089 had a related patch set uploaded (by Samwilson; author: Samwilson):

[mediawiki/extensions/WikiEditor@master] Load WikiEditor on readonly edits (e.g. protected pages)

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

In T301615#8635992, @Samwilson wrote:

It's reasonably easy to enable WikiEditor on readonly editing forms, but the buttons will (mostly) be non-functional. Is that okay? I suspect it is, as it's how CodeEditor does things too.

I think we should be careful here. CodeEditor has a much more limited audience, who are all much more familiar with MediaWiki, so they know what 'view source' implies. The buttons used by CodeEditor are also far less related to editing (most have to do with the view).

This editor however can be encountered by any and all editors (including anonymous editors) and I would expect "why does pressing this button not work"-feedback from that audience.

Ideally we'd disable buttons that don't work, but buttons for WikiEditor 2010 have no disabled variant (it was made before stuff was designed to such levels). I'm not even sure there is a disabled state to begin with.

This is also a 2023 CWS wish. I think it should not be implemented before the survey concludes, so that any eventual suggestions by the voters can be addressed.

Yes, absolutely, you're both right. I didn't mean to rush ahead here! I was just looking into it briefly and thought I'd upload the patch just for interests' sake. Nothing will be done till we're actually sure we want to do it! :-)

Okay, thanks for making the patch WIP!

Change 891089 abandoned by Samwilson:

[mediawiki/extensions/WikiEditor@master] Load WikiEditor on readonly edits (e.g. protected pages)

Reason:

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

Should be much easier with the advent of CodeMirror 6, which is currently in development.

Change 989260 had a related patch set uploaded (by MusikAnimal; author: MusikAnimal):

[mediawiki/extensions/CodeMirror@master] CodeMirror 6: show wikitext highlighting on protected pages

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

Asking as my search failed, is there a related task (even declined) to allow for starting up the editor on a protected page to make use of the preview function, for pages that you do not have permissions to edit?

Asking as my search failed, is there a related task (even declined) to allow for starting up the editor on a protected page to make use of the preview function, for pages that you do not have permissions to edit?

Not that I remember. There are several UX problems that would present for having the editors load for pages that you are not actually able to edit. It's not a concept that is very common in other software and generally there are workarounds available (Special:ExpandTemplates and /sandbox). The only place where I have truly found a use for it, is with Template Sandbox previews, but that is a pretty niche group of users.

It was raised by @Tacsipacsi that there should be a way to turn off CodeMirror in this situation, out of respect for users with low-end devices. Provided CodeMirror 6 is fast enough (it should be, n.b. T303664), are there any concerns with having no way to turn it off? I feel like loading WikiEditor and running all its hooks etc. could cause more of a strain than just vanilla CodeMirror, and certainly require more bandwidth. The other option is to introduce a new toggle component for this situation (where we don't use WikiEditor).

r989260 does respect the usecodemirror preference, at least. On that note -- With CodeMirror 6, we no longer require WikiEditor to get syntax highlighting, so I was thinking it might make sense to add a checkbox for usecodemirror under "Accessibility" in preferences. That way, logged-in users have a way to turn it off without having to use WikiEditor, which I think makes sense if we're going to add CodeMirror to more non-WikiEditor places.

Thoughts?

In T301615#9463727, @MusikAnimal wrote:

Provided CodeMirror 6 is fast enough (it should be, n.b. T303664), are there any concerns with having no way to turn it off?

I’m once again judging by my CodeMirror 5 experience, but I have two issues in addition to performance:

• Text I select when CodeMirror is active isn’t considered a primary select, i.e. I cannot paste it somewhere with a middle click on Linux. (This works in Flow and probably anywhere else where VisualEditor’s wikitext editor is used. It may also work in CM6.)
• It took me quite some time to figure out how to configure a browser extension I have to not handle it as if it was a rich text editor (since contenteditable is usually a rich text editor) and behave as if it was a plain <textarea> – others may also have difficulties, or may not even be able at all to configure their extensions properly. Since this is an inherent result of doing anything more advanced than a plain <textarea>, I don’t think this will work in CM6 (or any later version), so it’s important to always be able to fall back to basic HTML technology, i.e. a plain <textarea>.

On that note -- With CodeMirror 6, we no longer require WikiEditor to get syntax highlighting, so I was thinking it might make sense to add a checkbox for usecodemirror under "Accessibility" in preferences. That way, logged-in users have a way to turn it off without having to use WikiEditor, which I think makes sense if we're going to add CodeMirror to more non-WikiEditor places.

Good idea! However, to bikeshed a bit, I’d put it under Editing → Editor, not Editing → Accessibility, as whether one wants syntax highlighting is a matter of taste in the first place, not a matter of special needs.

In T301615#9464259, @Tacsipacsi wrote:

Text I select when CodeMirror is active isn’t considered a primary select, i.e. I cannot paste it somewhere with a middle click on Linux. (This works in Flow and probably anywhere else where VisualEditor’s wikitext editor is used. It may also work in CM6.)

It should work in Chromium-based browsers. Apparently there's a bug in Firefox that prevents it from working there https://bugzilla.mozilla.org/show_bug.cgi?id=1593761

It took me quite some time to figure out how to configure a browser extension I have to not handle it as if it was a rich text editor (since contenteditable is usually a rich text editor) and behave as if it was a plain <textarea> – others may also have difficulties, or may not even be able at all to configure their extensions properly. Since this is an inherent result of doing anything more advanced than a plain <textarea>, I don’t think this will work in CM6 (or any later version), so it’s important to always be able to fall back to basic HTML technology, i.e. a plain <textarea>.

We have the option of simply turning off contenteditable on read-only pages, which I assume would address your issue. The trade-off is you then can't take advantage of CodeMirror's search functionality, which I think is a deal-breaker. Also the bracket matching etc. is something I think we should keep. So, indeed this sounds like something we won't be able to fix.

I suppose I'll explore a toggle component for standalone CodeMirror (where WikiEditor isn't used). I'm thinking maybe a floating toggle, that appears only when you hover over the CodeMirror view. Or a tiny button pinned to the top-right, or something. If anyone has ideas, please share :)

However, to bikeshed a bit, I’d put [the preference] under Editing → Editor, not Editing → Accessibility, as whether one wants syntax highlighting is a matter of taste in the first place, not a matter of special needs.

Indeed. I just figured there will be more CodeMirror preferences to come (themes, code folding, autocompletion, etc.), so it's better to bundle them in the same place. I guess we can do as you say, and move the color-blind preference to the same area.

At any rate, I might save adding the toggle (or whatever solution) for a separate patch. r989260 is already big enough.

In T301615#9473461, @MusikAnimal wrote:

It should work in Chromium-based browsers. Apparently there's a bug in Firefox that prevents it from working there https://bugzilla.mozilla.org/show_bug.cgi?id=1593761

It annoys me in the developer tools as well. Didn’t know that the developer tools also use CodeMirror and it’s the same bug.

We have the option of simply turning off contenteditable on read-only pages, which I assume would address your issue. The trade-off is you then can't take advantage of CodeMirror's search functionality, which I think is a deal-breaker. Also the bracket matching etc. is something I think we should keep. So, indeed this sounds like something we won't be able to fix.

I agree that search and bracket matching shouldn’t be broken for everyone – actually, bracket matching is probably the most important feature of CodeMirror for me on protected pages (mainly protected templates).

I suppose I'll explore a toggle component for standalone CodeMirror (where WikiEditor isn't used). I'm thinking maybe a floating toggle, that appears only when you hover over the CodeMirror view. Or a tiny button pinned to the top-right, or something. If anyone has ideas, please share :)

What about top left? We used to have that for over a decade: https://www.mediawiki.org/wiki/Editor#Former

At any rate, I might save adding the toggle (or whatever solution) for a separate patch. r989260 is already big enough.

I’d like to have it implemented before $wgCodeMirrorV6 is enabled in prod, so that users are able to disable it from the very first moment, but it can be a different patch as long as that different patch comes before the config change.

I suppose I'll explore a toggle component for standalone CodeMirror (where WikiEditor isn't used). I'm thinking maybe a floating toggle, that appears only when you hover over the CodeMirror view. Or a tiny button pinned to the top-right, or something. If anyone has ideas, please share :)

What about top left? We used to have that for over a decade: https://www.mediawiki.org/wiki/Editor#Former

Well I was thinking more of a "floating" button, not a toolbar. We can discuss further at T190108.

I’d like to have it implemented before $wgCodeMirrorV6 is enabled in prod, so that users are able to disable it from the very first moment, but it can be a different patch as long as that different patch comes before the config change.

Yep, that's the intention :) I asked here to see if there were concerns beyond performance, as I don't think that will be a problem. The issue you have with browser extensions, or the distracting "color soup" mentioned at T190108 I think is enough to make this a requirement. I've added it to the checklist at T259059. If we start to run out of time, we can just put the standalone CodeMirror (i.e. read-only pages) behind a feature flag.

I've settled on using WikiEditor so that the toggle button is in the same familiar place. This is significantly more costly than just loading CodeMirror, but if we must have a toggle, it might as well be the one people are used to seeing. Also, this implementation is a bit cleaner (no need for a separate "read-only CodeMirror" module), and sort of lays the foundation for future work where we use CodeMirror+WikiEditor on pages other than just wikitext. So all in all, I think I like this better :)

It's reasonably easy to enable WikiEditor on readonly editing forms, but the buttons will (mostly) be non-functional.

I've addressed this in the same way as CodeEditor -- that is, simply using CSS to hide the non-applicable buttons.

Change 989260 merged by jenkins-bot:

[mediawiki/extensions/CodeMirror@master] CodeMirror 6: show wikitext highlighting on protected pages

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

@MusikAnimal Non-admin, the WikiEditor toolbar contains only the CodeMirror toggle, and no other buttons as seen in the videos below. Logged-out users always have CodeMirror disabled on page load. Also when CM6 is enabled, it's only read-only. I did come across a unrelated issue which I created a separate task for T360075: CodeMirror6: WikiEditor toolbar buttons cease to function when CodeMirror toggled on/off more than once. As for this task, I will move this to Done. Thanks for all your work!

Status: ✅PASS
Environment: Beta: 1.42.0-alpha (d91c1e7)
OS: macOS Sonoma 14.4
Browser: Chrome 122, Firefox 123, Safari 17.3
Skins. Vector 2022
Device: MBA M2
Emulated Device:: n/a
Test Links:
https://en.wikipedia.beta.wmflabs.org/w/index.php?title=Main_Page&action=edit

✅AC1: https://phabricator.wikimedia.org/T301615