Page MenuHomePhabricator

Implement line-level styling (i.e. section headings) in CodeMirror 6
Closed, ResolvedPublic

Description

Split from T348019: Port MediaWiki mode to CodeMirror 6 stream-parser.

Background

In working on porting our stream parser to CodeMirror 6, I discovered that it's not very simple to apply line-level styles. Right now, all things that define the "MediaWiki language" are confined to the stream parser. In CodeMIrror 6, we need to use Decorations and apply them to the EditorView, which isn't available within the scope of the stream parser code. This means while possible, it's very difficult to replicate the same behaviour in CodeMirror 6.

I asked a few editors and they all seemed in favor of keeping the section heading styling if possible. This task is to further investigate making this happen.

Acceptance criteria

Level 1, 2 and 3 section headings should be in bold, and have incrementally larger/smaller font sizes, just as it does currently with CodeMirror 5.

For visual reference, we want this:

Screenshot from 2023-11-20 20-06-47.png (244×291 px, 13 KB)

and not this:

Screenshot from 2023-11-20 20-06-52.png (244×291 px, 11 KB)

Additionally, <nowiki> and <pre> tags should have line-level styling applied to full lines in between the tags, i.e.:

Screenshot from 2024-01-03 01-47-10.png (216×323 px, 12 KB)

instead of:

Screenshot from 2024-01-03 01-47-17.png (216×323 px, 13 KB)

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript

I have received confirmation that this functionality will not be supported natively in CodeMirror 6: https://discuss.codemirror.net/t/cm6-equivalent-for-extractllineclasses-functionality/7488/2

If we really want this, we have to write our own extension. This is doable, but aside from engineering costs (probably up to a few days of work), it could have a performance toll as well.

Thanks for communicating with the author of CodeMirror! In this case, I think boldface is a reasonable alternative solution.

A possible CSS hack with some minimal changes in codemirror.mode.mediawiki.js is like this:

.cm-mw-section-1, .cm-mw-section-1 ~ * {
    font-size: 1.8em;
    line-height: 1.2em;
}
.cm-mw-section-2, .cm-mw-section-2 ~ * {
    font-size: 1.5em;
    line-height: 1.2em;
}
.cm-mw-section-3 ~ *,
.cm-mw-section-4 ~ *,
.cm-mw-section-5 ~ *,
.cm-mw-section-6 ~ * {
    font-weight: bold;
}

Screen Shot 2023-12-13 at 8.15.46 PM.png (325×412 px, 26 KB)

I am attaching a screen shot to illustrate it. Please ignore the additional extensions (linter and highlightActiveLine) I am loading for my own use.

MusikAnimal renamed this task from Implement styling of section headings in CodeMirror 6 to Implement line-level styling (i.e. section headings) in CodeMirror 6.Jan 3 2024, 6:48 AM
MusikAnimal updated the task description. (Show Details)

Awesome! I just updated the task description after noticing the bug also effects <nowiki> and <pre>. I have a patch nearly done that adds highlighting for those tags, but don't worry about it in your patch for now, I guess. Also please don't worry about conflicts with my patches, which are inevitable… but do try to go off the same relation chain if you could. Thanks for contributing! :)

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

[mediawiki/extensions/CodeMirror@master] Line-level styling for section heading

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

Change 988202 merged by jenkins-bot:

[mediawiki/extensions/CodeMirror@master] Line-level styling for section heading

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

Bhsd removed Bhsd as the assignee of this task.Jan 9 2024, 9:37 AM

Boldly going to mark as resolved. The main issue was the section headings. Losing the line-level styles in <nowiki> and <pre> isn't as important, and can be filed as a separate task if people really want it back. I asked some volunteers on Discord, and no one deemed this as a critical feature, rather just a "nice to have".

Assigned to Bhsd as they did the work here :)