.wikiEditor-ui .CodeMirror has padding: 0.1em. In RTP mode, it now also has an inline style statement width:100%; (probably because of the explicit 100% setSize in JS?) It should combine this with box-sizing:border-box; to avoid the overflow (as a rule, never use width:100% without using box-sizing:border-box;).

I think this is (or will be) fixed by https://gerrit.wikimedia.org/r/c/mediawiki/extensions/CodeMirror/+/763176. @TheDJ You're not seeing this on production, are you?

I am only commenting on the attached screenshot. .CodeMirror-scroll overflowing is not a bug. The question is whether .CodeMirror overflows.

In T303767#7778844, @MusikAnimal wrote:

I think this is (or will be) fixed by https://gerrit.wikimedia.org/r/c/mediawiki/extensions/CodeMirror/+/763176. @TheDJ You're not seeing this on production, are you?

Not that is what is causing it ;) I see this on https://patchdemo.wmflabs.org/wikis/85ef14e849/w/index.php?title=Main_Page

I think this is (or will be) fixed by https://gerrit.wikimedia.org/r/c/mediawiki/extensions/CodeMirror/+/763176. @TheDJ You're not seeing this on production, are you?

that is what is causing it ;) I see this on https://patchdemo.wmflabs.org/wikis/85ef14e849/w/index.php?title=Main_Page

Okay, phew :) When you filed the task I just assumed it was production (as bug reports usually refer to). Anyways thanks for catching this and providing a solution! I'll comment on the patch.

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

[mediawiki/extensions/CodeMirror@master] Support WikiEditor's realtime-preview feature

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

Actually, it seems that we don't have a ticket for tracking CodeMirror/RTP compatibility, so I think we should turn this into a task. The above patch is also attached to T293347 but that one is already in QA and shouldn't focus on CM stuff I think.

Change 763176 merged by jenkins-bot:

[mediawiki/extensions/CodeMirror@master] Support WikiEditor's realtime-preview feature

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

I'm seeing some issues with the debounce not working. I'll look into now.

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

[mediawiki/extensions/WikiEditor@master] Realtime Preview: fix event handlers for CodeMirror

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

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

[mediawiki/extensions/CodeMirror@master] Fix codeMirror reference passed to WikiEditor's realtime preview

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

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

[mediawiki/extensions/WikiEditor@master] Refactor event handler for easier re-use

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

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

[mediawiki/extensions/CodeMirror@master] Use new event handler from WikiEditor for Realtime Preview

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

Change 773652 abandoned by MusikAnimal:

[mediawiki/extensions/WikiEditor@master] Realtime Preview: fix event handlers for CodeMirror

Reason:

see Iee4c885f92dd9ec985a3f9fd92a2fafc00f2e9ff instead

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

Change 773675 abandoned by MusikAnimal:

[mediawiki/extensions/CodeMirror@master] Fix codeMirror reference passed to WikiEditor's realtime preview

Reason:

see Idb97a67f940eee69e09679196d0de71e76ef3672

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

Change 776672 merged by jenkins-bot:

[mediawiki/extensions/WikiEditor@master] Realtime Preview: Refactor event handler for easier re-use

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

Change 776673 merged by jenkins-bot:

[mediawiki/extensions/CodeMirror@master] Use new event handler from WikiEditor for Realtime Preview

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

All merged, and now on Beta.

@Samwilson When I have CodeMirror enabled, if I resize the textarea, the width of div.CodeMirror reduces slightly (and the scrollbar moves to the left).

I have also raised T305835.

I have tested CodeMirror, with and without Realtime Preview enabled.

The major functionality of CodeMirror (syntax highlight, bracket matching and line numbering) appeared to work.

I also tested the menu items in the editing toolbar while in CodeMirror.

I could switch between CodeMirror and regular WikiEditor and between CodeMirror and VisualEditor without problem.

I tested that CodeMirror appeared to work in the 2017 editor.

I tested in different skins and in Firefox and Safari 14.

In T303767#7841098, @dom_walden wrote:

@Samwilson When I have CodeMirror enabled, if I resize the textarea, the width of div.CodeMirror reduces slightly (and the scrollbar moves to the left).

I can reproduce on Firefox and Chromium. Only when RTP is not enabled.

I raised T305939 for this.

Test environment: MediaWiki 1.39.0-alpha (c8c7432) 13:33, 12 April 2022. WikiEditor 0.5.3 (85098ce) 06:15, 12 April 2022. CodeMirror 4.0.0 (758dd2c) 06:13, 12 April 2022.
Test browsers: Firefox 91, Safari 14.

@Samwilson do you know how much the estimated work on this was? Mind assigning it a back point?

I think actually quite a bit all up, as I was working on it alongside the WikiEditor work from basically the start. It sounds like there's a little bit more to do as well! But that'll be covered in other tasks.