Page MenuHomePhabricator

Implement syntax highlight for U 00A0 (no-break space, nbsp)
Closed, ResolvedPublicFeature

Description

CodeMirror already makes a syntax highlight for U 00AD (soft hyphen). A soft hyphen in the wikitext is shown as red bullet.

It would be nice to have a syntax highlight for U 00A0 (no-break space, nbsp), too.

Acceptance criteria

Related Objects

StatusSubtypeAssignedTask
ResolvedFeatureMusikAnimal
In ProgressGoalNone
ResolvedFeatureMusikAnimal
ResolvedMusikAnimal
ResolvedMusikAnimal
ResolvedMusikAnimal
ResolvedBhsd
OpenBUG REPORTNone
ResolvedMusikAnimal
In ProgressMusikAnimal
OpenTheresNoTime
OpenNone
OpenMusikAnimal
OpenBUG REPORTNone
OpenMusikAnimal
ResolvedBUG REPORTMusikAnimal
OpenBUG REPORTNone
ResolvedBUG REPORTMusikAnimal
OpenNone
ResolvedMusikAnimal
ResolvedMusikAnimal
OpenNone
OpenFeatureNone
Resolvedawight
ResolvedLena_WMDE
ResolvedLena_WMDE
OpenFeatureNone
ResolvedMusikAnimal
ResolvedBhsd
In ProgressMusikAnimal
ResolvedMusikAnimal

Event Timeline

Restricted Application added a subscriber: Aklapper. ยท View Herald Transcript

Change 394385 had a related patch set uploaded (by Fomafix; owner: Fomafix):
[mediawiki/extensions/CodeMirror@master] [WIP] Add syntax highlight for special characters

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

Fomafix renamed this task from Implement syntax highlight for U 00A0 (no-break space, non-breaking space, nbsp) to Implement syntax highlight for U 00A0 (no-break space, nbsp).Dec 2 2017, 12:22 PM
Fomafix claimed this task.
Fomafix updated the task description. (Show Details)
โ€ข TBolliger subscribed.

Potential alternate fix: add a CSS class and let users individually set their personal CSS to highlight it

The highlight of special characters should enabled and disabled by a ยถ button.

This seems reasonable: most pages shouldn't have invisible non-breaking spaces anyway, so making them visible shouldn't disturb editors.

I played with cm-show-invisibles and it was very easy to integrate.

Screenshot 2019-03-19 at 12.05.23.png (1ร—2 px, 582 KB)

However, like in most editors, showing all invisibles is also very annoying when you actually want to read what you are editing. So either we need to only show very specific invisble characters other than, space and enter, or we need a toolbar button to toggle showing them (like we have in CodeEditor).

Draceane triaged this task as Medium priority.Nov 24 2020, 4:52 PM

Removing task assignee due to inactivity, as this open task has been assigned to the same person for more than two years (see the emails sent to the task assignee on Oct27 and Nov23). Please assign this task to yourself again if you still realistically [plan to] work on this task - it would be welcome.
(See https://www.mediawiki.org/wiki/Bug_management/Assignee_cleanup for tips how to best manage your individual work in Phabricator.)

This would be extremely helpful for Russian Wikipedia where all   are replaced with a symbol by an automatic instrument (Wikificator) that is enabled by default. The lack of such highlighing is the root of many disputes that are easily avoidable. (The most recent is today.)

This is trivial to implement in the new version of CodeMirror which we're currently working on. I've added T259059 as a subtask and can tackle this as part of the upgrade.

Izno changed the subtype of this task from "Task" to "Feature Request".Oct 5 2023, 1:46 AM

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

[mediawiki/extensions/CodeMirror@master] CodeMirror: highlight special characters and non-breaking spaces

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

Change 991686 merged by jenkins-bot:

[mediawiki/extensions/CodeMirror@master] CodeMirror: highlight special characters and non-breaking spaces

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

Change 394385 abandoned by Fomafix:

[mediawiki/extensions/CodeMirror@master] Add syntax highlight for special characters

Reason:

Superseded by Iac1a8cf78e4cd0a27abc917f4b70bdfbaf86252a

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

Currently testable on Beta or prod by supplying the ?cm6enable=1 URL query paramater. I.e. https://en.wikipedia.beta.wmflabs.org/wiki/CodeMirror_special_chars?action=edit&cm6enable=1 Use without the cm6enable=1 to see how it looks in the old CodeMirror.

With this patch, we're highlighting soft hypens and non-breaking spaces as a faint blue dot (this is CodeMirror default appearance). I think this is pretty much the only thing QA should be concerned about, but I'll explain the other changes anyway.

In addition, we've added i18n messages as tooltips on some non-printable control characters, and those are given a red dot. Here's a list of all the characters that are potentially highlighted and given a unique i18n message:

1Null: ๏ฟฝ
2Bell: 
3Backspace: 
4Newline:
5
6Vertical tab:
7Carriage return:
8
9Escape: 
10Non-breaking space: ย 
11Zero-width space: โ€‹
12Zero-width non-joiner: โ€Œ
13Zero-width joiner: โ€
14Left-to-right mark: โ€Ž
15Right-to-left mark: โ€
16Line seperator: โ€จ
17Left-to-right override: โ€ญ
18Right-to-left override: โ€ฎ
19Narrow non-breaking space: โ€ฏ
20Left-to-right isolate: โฆ
21Right-to-left isolate: โง
22Pop directional isolate: โฉ
23Paragraph separator: โ€ฉ
24Zero-width non-breaking space: ๏ปฟ
25Object replacement: ๏ฟผ

Apparently, depending on your system, the fonts installed, or other things I don't understand, some characters may not show or don't have tooltips. This seems to be expected. For example, on my localhost, the "bell" character is highlighted, but it's not on Beta.

Other examples are the newline and the carriage return characters. I don't know when these characters would be visible, but CodeMirror provides messages for them, so I assume they must be visible in some context.

dom_walden subscribed.

I have looked at https://en.wikipedia.beta.wmflabs.org/wiki/CodeMirror_special_chars?action=edit&cm6enable=1 in a few different browsers and operating systems. They all have the faint blue dot.

Safari 17 (Mac Sonoma):

codeeditor_control_char_safari17.png (625ร—771 px, 126 KB)

Chromium 120 (Debian Bullseye):

codeeditor_control_char_chromium120.png (644ร—792 px, 67 KB)

Firefox 115 (Debian Bullseye):

codeeditor_control_char_firefox115.png (668ร—802 px, 66 KB)

Opera 107 (Mac Sonoma):

codeeditor_control_char_opera107.png (647ร—771 px, 151 KB)

Firefox 122 (Windows 11):

codeeditor_control_char_firefox122.png (629ร—758 px, 180 KB)