Page MenuHomePhabricator

Heading bolding in syntax highlighter bleeding onto all following text
Closed, ResolvedPublic

Description

Steps to replicate the issue (include links if applicable):

The basics to create the problem are

  • Enter the wikitext for a level three or higher header ( e.g. ===test===) into the edit box of one of a number of Wiktionaries (including en, es, zh, and uk)
  • On any line that follows the header, enter plain text ( e.g. test)
  • The end result should be something like
===test===
test

What happens?:

  • Text is bolded

What should have happened instead?:

  • Text should be unformatted

Software version (skip for WMF-hosted wikis like Wikipedia):

Other information (browser name/version, screenshots, etc.):

  • Using the aforementioned page (en:wikt:Special:Permalink/77667743) as an example, this issue occurs on FireFox version 121.0.1 (64-bit, desktop, Windows) and Chrome version 120.0.6099.225 (Official Build, 64-bit, desktop, Windows).
  • User:Justinrleung has also reported the issue, so it appears to not be limited to just my computer.
  • For evidence the issue does not occur on all wikis, edit en:w:Special:Permalink/1196735688 with syntax highlighting on in the WikiEditor toolbar
  • A screenshot showing off the issue:

Untitled.png (166×726 px, 7 KB)

Event Timeline

From poking around using built in element inspectors in browsers, I believe the following portion of one of the style sheets is the issue:

pre.CodeMirror-line-like.cm-mw-section-3,pre.CodeMirror-line.cm-mw-section-4,pre.CodeMirror-line-like.cm-mw-section-4,pre.CodeMirror-line.cm-mw-section-5,pre.CodeMirror-line-like.cm-mw-section-5,pre.CodeMirror-line.cm-mw-section-6,pre.CodeMirror-line-like.cm-mw-section-6,.cm-mw-section-3 ~ *,.cm-mw-section-4 ~ *,.cm-mw-section-5 ~ *,.cm-mw-section-6 ~ *{font-weight:bold;}

In particular, from testing things out, I think the * following .cm-mw-section-3, .cm-mw-section-4, etc. at the end are what is causing the issue as when I delete the * in the developer tools window of my browser the issue immediately resolves.

Bhsd moved this task from Backlog to Bugs on the MediaWiki-extensions-CodeMirror board.
Bhsd subscribed.

This is due to CSS conflict with CodeMirror 5 introduced in rECMI9826cc906f1e

Change 991612 had a related patch set uploaded (by Bhsd; author: Bhsd):

[mediawiki/extensions/CodeMirror@master] fix heading style conflict with CM5

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

Change 991612 merged by jenkins-bot:

[mediawiki/extensions/CodeMirror@master] fix heading style conflict with CM5

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

This issue doesn't happen on my local for some reason… which is why I merged the original patch. Trusting the new patch fixes it, we'll get it backported.

Change 991562 had a related patch set uploaded (by Tim Starling; author: Bhsd):

[mediawiki/extensions/CodeMirror@wmf/1.42.0-wmf.14] fix heading style conflict with CM5

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

Pols12 renamed this task from Bolding in syntax highlighter bleeding onto all following text on Wiktionaries to Heading bolding in syntax highlighter bleeding onto all following text.Jan 18 2024, 10:59 PM

Change 991562 merged by jenkins-bot:

[mediawiki/extensions/CodeMirror@wmf/1.42.0-wmf.14] fix heading style conflict with CM5

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

Mentioned in SAL (#wikimedia-operations) [2024-01-18T23:13:27Z] <tstarling@deploy2002> Synchronized php-1.42.0-wmf.14/extensions/CodeMirror/resources/mode/mediawiki/mediawiki.less: fix CodeMirror style bug T355290 (duration: 06m 33s)

MusikAnimal closed this task as Resolved.EditedJan 18 2024, 11:24 PM
MusikAnimal moved this task from Bugs to Done on the MediaWiki-extensions-CodeMirror board.

Thanks to Bhsd for the fix, and to Tim for deploying!