Page MenuHomePhabricator

Redesign CodeMirror search panel
Open, Needs TriagePublic

Description

Problem

CodeMirror 6 got rid of the viewportMargin: Infinity option that allowed users to use +F to search for text within the textarea from outside the textarea. Instead, CM6 gives you a built-in search panel (shown below). This is actually a good thing because it means performance is dramatically better. However, the built-in search panel uses very tiny font, and visually deviates from the designs other UI components in MediaWiki use:

Screenshot from 2024-07-30 16-28-10.png (197×706 px, 29 KB)

Solution

Provide our own search dialog using CSS-only Codex components. This keeps the implementation small (just changing CSS classes) and won't require us to load all of Codex. Most importantly, it will give the search panel a familiar design that's more consistent with other MW components.

Note also that this search panel is not shown only in WikiEditor (2010). CodeMirror 6 also supports the native 2003 wikitext editor. The 2017 editor has its own search panel and no changes are required there.

Other information

A very similar Community Wishlist proposal was made at https://meta.wikimedia.org/wiki/Community_Wishlist/Wishes/Find_%26_replace. The talk page discussion shows the requester was unhappy with the default WikiEditor (2010) search panel since it obstructs content, which the new CodeMirror search panel won't.

Event Timeline

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

I'm just curious, why wasn't the standart Wikicode editor Search popup extended with the new functionality instead of creating two working at the same time?

I'm just curious, why wasn't the standart Wikicode editor Search popup extended with the new functionality instead of creating two working at the same time?

I don't think the WikiEditor's search dialog works for the 2003 editor. Furthermore, I've seen several wishes complaining about the WikiEditor's search dialog covering the textarea.

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

[mediawiki/extensions/CodeMirror@master] [WIP] Implement dark mode styles and style search panel like Codex

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

A little demo of what it looks like:

Screenshot from 2024-08-05 14-12-02.png (349×964 px, 45 KB)

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

[mediawiki/extensions/CodeMirror@master] CodeMirrorSearch: add num results and current selection; improve tabbing

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

Change #1059166 merged by jenkins-bot:

[mediawiki/extensions/CodeMirror@master] Implement dark mode styles and use Codex CSS components in search panel

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

I hope r1062756 gets merged first, but anyway I've added a note to Tech News about the change to the search panel that will come with the CodeMirror 6 upgrade scheduled to be deployed to group0.

Is this ready to be re-added to Tech News this week? (Prior removal diff for reuse). Thanks!

Is this ready to be re-added to Tech News this week? (Prior removal diff for reuse). Thanks!

Sorry for the late reply. We are postponing deployment so I've removed User-notice for now.

Noting this bug that @Izno informed me of:

Screenshot from 2024-10-02 17-18-04.png (330×797 px, 55 KB)

With Realtime Preview open, the buttons in the search bar look off. I copied the styles exactly from VE, but they were not built to support such a narrow editor.

Izno pointed to the possibility of using the order property to put the two inputs on top, and all the buttons on the bottom. Care should be taken to not change the tab order, or if we have to, change it something that makes sense with the responsive layout.

Change #1062756 merged by jenkins-bot:

[mediawiki/extensions/CodeMirror@master] CodeMirrorSearch: add num results and current selection; improve tabbing

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

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

[mediawiki/extensions/CodeMirror@master] CodeMirrorSearch: catch exceptions from invalid regex input

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

n.b. there is an outstanding bug where the selection is not properly updated after a regex replacement. This has been filed upstream at https://discuss.codemirror.net/t/8832

EDIT: Now fixed as part of r1094041.

Change #1094041 merged by jenkins-bot:

[mediawiki/extensions/CodeMirror@master] CodeMirrorSearch: catch exceptions from invalid regex input

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