⚓ T418793 Cursor gets misaligned when CodeMirror’s syntax highlighting is enabled while creating a new topic with DiscussionTool

⚓ T418793 Cursor gets misaligned when CodeMirror’s syntax highlighting is enabled while creating a new topic with DiscussionTools when custom stylesheet defines a font rule
Page Menu
Phabricator
Create Task
Maniphest
T418793
Cursor gets misaligned when CodeMirror’s syntax highlighting is enabled while creating a new topic with DiscussionTools when custom stylesheet defines a font rule
Closed, Resolved
Public
BUG REPORT
Actions
Edit Task
Edit Related Tasks...
Create Subtask
Edit Parent Tasks
Edit Subtasks
Merge Duplicates In
Close As Duplicate
Edit Related Objects...
Edit Commits
Edit Mocks
Mute Notifications
Protect as security issue
Assigned To
MusikAnimal
Authored By
Redmin
Mar 2 2026, 7:55 PM
2026-03-02 19:55:01 (UTC+0)
Tags
MediaWiki-extensions-CodeMirror
(Done)
DiscussionTools
(Backlog)
Community-Tech
(New & TBD Tickets)
MW-1.46-notes (1.46.0-wmf.19; 2026-03-10)
Referenced Files
F72476132: ScreenRecording_03-03-2026 01-48-03_1.mp4
Mar 2 2026, 7:55 PM
2026-03-02 19:55:01 (UTC+0)
Subscribers
Aklapper
Bhsd
MusikAnimal
Quiddity
Redmin
Description
Steps to replicate the issue
Add a font rule to your user CSS (I used font-family: Helvetica for the p tag).
Try starting a new topic or replying to an existing one with CodeMirror’s syntax highlighting enabled using the ‘talk page tools’ provided by DiscussionTools.
What happens?
The cursor gets misaligned soon.
What should have happened instead?
The cursor should have stayed correctly aligned.
Other information
(browser name/version, screenshots, etc.):
Safari on macOS and iPadOS 26
Details
Related Changes in Gerrit:
Subject
Repo
Branch
Lines +/-
ve.ui.CodeMirror: inherit font-family and font-size
mediawiki/extensions/CodeMirror
master
+3
-0
Customize query in gerrit
Related Objects
Mentions
Mentioned Here
T412117: Cursor position is out of sync in DiscussionTools with CodeMirror
Event Timeline
Redmin
created this task.
Mar 2 2026, 7:55 PM
2026-03-02 19:55:01 (UTC+0)
Restricted Application
added a subscriber:
Aklapper
View Herald Transcript
Mar 2 2026, 7:55 PM
2026-03-02 19:55:02 (UTC+0)
Redmin
added projects:
MediaWiki-extensions-CodeMirror
DiscussionTools
Mar 2 2026, 7:55 PM
2026-03-02 19:55:33 (UTC+0)
Quiddity
subscribed.
Mar 2 2026, 8:26 PM
2026-03-02 20:26:23 (UTC+0)
Comment Actions
Hi. Are you using any user-CSS or gadget/user-scripts here? [Or: Can you reproduce this whilst logged-out?]. I can't see anything obvious in your global.css, but maybe there's something harder for me to see elsewhere.
Context: I experienced this bug a few months ago when I was experimenting with increasing the font-size in the edit-window, via custom user-CSS. [I was trying to force it to match my Appearance-menu preferences on Desktop for the "standard" font-size. Here's
the code I removed
from my custom user-CSS which fixed this bug, but leaves me with too-small a font].
[Sidenote: I am not a dev. I'm just trying to help clarify the origin of this bug.]
Redmin
renamed this task from
Cursor gets misaligned when CodeMirror’s syntax highlighting is enabled while creating a new topic with DiscussionTools
to
Cursor gets misaligned when CodeMirror’s syntax highlighting is enabled while creating a new topic with DiscussionTools when custom stylesheet defines a font rule
Mar 2 2026, 11:36 PM
2026-03-02 23:36:33 (UTC+0)
Redmin
updated the task description.
(Show Details)
Redmin
added a project:
Community-Tech
Mar 2 2026, 11:38 PM
2026-03-02 23:38:50 (UTC+0)
Comment Actions
Thanks! It was a font face rule in my global.css. I wonder if Community Tech would want to see if the extension could be improved or if this task should be declined.
gerritbot
added a comment.
Mar 3 2026, 12:55 AM
2026-03-03 00:55:14 (UTC+0)
Comment Actions
Change #1247191 had a related patch set uploaded (by MusikAnimal; author: MusikAnimal):
[mediawiki/extensions/CodeMirror@master] ve.ui.CodeMirror: inherit font-family and font-size
gerritbot
added a project:
Patch-For-Review
Mar 3 2026, 12:55 AM
2026-03-03 00:55:16 (UTC+0)
MusikAnimal
changed the task status from
Open
to
In Progress
Mar 3 2026, 1:03 AM
2026-03-03 01:03:31 (UTC+0)
MusikAnimal
claimed this task.
MusikAnimal
subscribed.
Comment Actions
The attached patch will fix trivial font overrides like
p { font-family: 'Helvetica'; font-size: 3em; }
, but it's still possible to override if the rules are specific enough or
!important
is used. I'd rather avoid using
!important
in the CodeMirror CSS unless we have to. Likewise, those who make JS/CSS overrides know (or should know) it's possible to break things, so hopefully this will suffice as a compromise.
I assume
@Redmin
(and perhaps
@Quiddity
as well) don't normally use the 2017 editor when editing, or else they would see this issue there too. DiscussionTools + CodeMirror is currently only possible with the "
Enable editing tools in source mode
" preference is set, which forces use of the 2017 editor.
Pro-tip for the future: Whenever you run into apparent bugs like this, try testing in
safemode
, as they will bypass personal JS/CSS and gadgets, and thus you'll then be able to rule those out as a culprit.
Bhsd
subscribed.
Mar 3 2026, 2:30 AM
2026-03-03 02:30:49 (UTC+0)
Comment Actions
In
T418793#11665369
@Quiddity
wrote:
Context: I experienced this bug a few months ago when I was experimenting with increasing the font-size in the edit-window, via custom user-CSS. [I was trying to force it to match my Appearance-menu preferences on Desktop for the "standard" font-size. Here's
the code I removed
from my custom user-CSS which fixed this bug, but leaves me with too-small a font].
The small font was intentionally enforced in
r1216878
to fix
T412117
. However, if larger fonts are favored, we may consider overriding CodeMirror's font size in
MobileFrontend styles
gerritbot
added a comment.
Mar 3 2026, 9:08 AM
2026-03-03 09:08:46 (UTC+0)
Comment Actions
Change #1247191
merged
by jenkins-bot:
[mediawiki/extensions/CodeMirror@master] ve.ui.CodeMirror: inherit font-family and font-size
Maintenance_bot
removed a project:
Patch-For-Review
Mar 3 2026, 9:30 AM
2026-03-03 09:30:44 (UTC+0)
ReleaseTaggerBot
added a project:
MW-1.46-notes (1.46.0-wmf.19; 2026-03-10)
Mar 3 2026, 10:00 AM
2026-03-03 10:00:31 (UTC+0)
Redmin
added a comment.
Mar 3 2026, 4:38 PM
2026-03-03 16:38:36 (UTC+0)
Comment Actions
In
T418793#11666279
@MusikAnimal
wrote:
The attached patch will fix trivial font overrides like
p { font-family: 'Helvetica'; font-size: 3em; }
, but it's still possible to override if the rules are specific enough or
!important
is used. I'd rather avoid using
!important
in the CodeMirror CSS unless we have to. Likewise, those who make JS/CSS overrides know (or should know) it's possible to break things, so hopefully this will suffice as a compromise.
Yeah, sounds great, thank you.
I assume
@Redmin
(and perhaps
@Quiddity
as well) don't normally use the 2017 editor when editing, or else they would see this issue there too…
Yes, I use the old Wikitext editor.
Quiddity
added a comment.
Edited
Mar 3 2026, 5:50 PM
2026-03-03 17:50:31 (UTC+0)
Comment Actions
In
T418793#11666398
@Bhsd
wrote:
The small font was intentionally enforced in
r1216878
to fix
T412117
. However, if larger fonts are favored, we may consider overriding CodeMirror's font size in
MobileFrontend styles
If you mean user-customizable, then yes please! I would like all relevant aspects of the sites [long-form text content] to scale appropriately when I adjust my Appearance-menu text-size preferences.
[When I was younger, I strongly wanted the Small fonts. Now my eyes are aging, and I need/appreciate the new Standard font size. In future years, I will probably want the Large size.]
Especially the content in the edit-boxes, but also other long-form text content, such as the other Namespaces that are not yet default (e.g. the
Manual: namespace
on mediawiki-wiki).
MusikAnimal
added a comment.
Mar 3 2026, 6:55 PM
2026-03-03 18:55:14 (UTC+0)
Comment Actions
So long as the VisualEditor font size and CodeMirror font size match, it should be fine. If they don't, we get misalignment. The Editing team may disagree however, see
r1100398
for example.
The core issue is that the CM surface is overlayed on top of the VE surface, so the styles must match exactly. Getting rid of this "hack" is something I hope to work on at the
Wikimedia-Hackathon-2026
. I still need to create tasks, and I also can't make promises a proper fix will be possible, but I shall try! :-P Until then, we may be stuck with precisely always the same monospace font when editing with the 2017 editor + CM, at the discretion of the Editing team.
Relatedly, I had wondered if we could respect the 2017 editor preference in
DiscussionTools
, such that "Enable editing tools in source mode" will use WikiEditor or 2017 editor based on the preference. If that were the case, the bug documented here would never have happened. It might be worth looking into (in a separate task), but would also subject to approval by Editing.
MusikAnimal
closed this task as
Resolved
Mar 5 2026, 7:25 AM
2026-03-05 07:25:54 (UTC+0)
MusikAnimal
moved this task from
Backlog
to
Done
on the
MediaWiki-extensions-CodeMirror
board.
Comment Actions
I'm guessing this can be closed. The fix as described at
T418793#11666279
will go live next week.
Log In to Comment
Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct.
Wikimedia Foundation
Code of Conduct
Disclaimer
CC-BY-SA
GPL
Credits