Page MenuHomePhabricator

CodeMirror: allow users to customize links vs. file links differently via CSS
Open, Needs TriagePublic3 Estimated Story Points

Description

It has been requested that users should be able to customize how different types of links appear with syntax highlighting. For example, these three types of links are conceptually different but highlighted the same way:

Screen Shot 2018-04-27 at 10.07.11 AM.png (80×285 px, 13 KB)

From: https://test.wikipedia.org/wiki/Cat?action=edit


Acceptance criteria
  • Users can customize, via a unique CSS class, how links appear (e.g. [http://www.foo.com bar] and [[foobar]])
  • Users can customize, via a unique CSS class, how file links appear (e.g. [[File:Foobar.jpg]])
  • This documentation is updated

Event Timeline

The ability to style file links different from regular links & category links

Nice idea! It's a little work but we should be able to do this.

A css class to change the color and font of normal text

Using .CodeMirror-line might work, because the highlighted elements have their own CSS classes that are nested within .CodeMirror-line and will take precedence.

A way to change line spacing height

Again I haven't tested but you should be able to change the line-height on .CodeMirror-line, because it is wrapped around every line of text.

TBolliger renamed this task from CodeMirror: more customization options to CodeMirror: allow users to customize links vs. file links differently via CSS.Apr 27 2018, 2:11 PM
TBolliger updated the task description. (Show Details)

I'm not following MusikAnimal's comment above.

I searched https://meta.wikimedia.org/wiki/Community_Tech/Wikitext_editor_syntax_highlighting#Color_and_style_customization and https://phabricator.wikimedia.org/diffusion/ECMI/browse/master/resources/mode/mediawiki/mediawiki.css for the strings .CodeMirror-line and line-height and did not find anything, except for

pre.cm-mw-section-1 { font-size: 1.8em; line-height: 1.2em; }
pre.cm-mw-section-2 { font-size: 1.5em; line-height: 1.2em; }

Most everything that can be configured begins with .cm-mw- not .CodeMirror-

I'm far from a CSS expert myself but I was able to figure out enough to help Doc James, except for the things he has asked you about.

My understanding is that Doc wants to change the (height of the) spaces between the lines of text not the height of the text itself.

Sorry, I replied here because MusikAnimal's comment wasn't split to the other ticket.

All of the .cm-mw- items seem to be for specifying how to color and font-weight something that is not ordinary, normal text, i.e. a section heading, a template, a wikilink, etc.

Is there a .cm-mw- item for specifying the default color and font for anything that is not a section heading, a template, a wikilink, etc.?

I searched https://meta.wikimedia.org/wiki/Community_Tech/Wikitext_editor_syntax_highlighting#Color_and_style_customization and https://phabricator.wikimedia.org/diffusion/ECMI/browse/master/resources/mode/mediawiki/mediawiki.css for the strings .CodeMirror-line and line-height and did not find anything

That's because it's undocumented, see T193248. I guess it's the JavaScript that adds this CSS class. Setting the colour on this class should change everything that is not already highlighted.

Is there a .cm-mw- item for specifying the default color and font for anything that is not a section heading, a template, a wikilink, etc.?

No, but you make a good point because using .CodeMirror-line would affect some things like the text within a section heading, since the colour is not overridden by another CSS class. Templates are already coloured, so unaffected. I guess I wasn't sure what was meant by "normal text" as it was originally worded in the task description.

My understanding is that Doc wants to change the (height of the) spaces between the lines of text not the height of the text itself.

Setting the line-height property (not font-size) on .CodeMirror-line should work, because it is wrapped around every line of text. Or better yet, use .CodeMirror-lines which is wrapped around the entire wikitext within CodeMirror.

kaldari set the point value for this task to 3.May 1 2018, 11:58 PM
Vvjjkkii renamed this task from CodeMirror: allow users to customize links vs. file links differently via CSS to d4daaaaaaa.Jul 1 2018, 1:14 AM
Vvjjkkii triaged this task as High priority.
Vvjjkkii updated the task description. (Show Details)
Vvjjkkii removed the point value for this task.
Vvjjkkii removed a subscriber: Aklapper.
Niharika renamed this task from d4daaaaaaa to CodeMirror: allow users to customize links vs. file links differently via CSS.Jul 1 2018, 4:43 AM
Niharika lowered the priority of this task from High to Low.
Niharika updated the task description. (Show Details)
Niharika set the point value for this task to 3.
CommunityTechBot raised the priority of this task from Low to Needs Triage.Jul 5 2018, 6:32 PM
CommunityTechBot updated the task description. (Show Details)