Get basic CodeMirror 6 setup working with ResourceLoader
Closed, ResolvedPublic8 Estimated Story Points
Actions

Assigned To

Authored By

	MusikAnimal
	Sep 7 2022, 9:24 PM

Description

This is the first step of T259059: Upgrade to CodeMirror 6. This will only put us in a basic working state with CodeMirror 6, with everything behind a temporary feature flag. The actual syntax highlighting and other features are to follow.

Acceptance criteria

Using the basic CodeMirror package, identify which modules under the @codemirror namespace we need.
- As CodeMirror 6 uses native JavaScript Modules, use a bundle system as necessary to feed into ResourceLoader.
Create new ext.CodeMirror.v6.WikiEditor module that is loaded when $wgCodeMirrorV6 is set or if the cm6enable=1 URL query parameter is set.
Visually, enabling CodeMirror should give you a monospaced text editor without any syntax highlighting.
- Relevant features of WikiEditor (2010) should still work (no exhaustive testing necessary), and you should still be able to save the page, etc.
- Identify any other integrations that are apparently now broken, and document them (we're not going to enable $wgCodeMirrorV6 anytime soon so some breakage is expected)

Details

Subject	Repo	Branch	Lines /-
CodeMirror 6: localize search dialog	mediawiki/extensions/CodeMirror	master	75 -4
CodeMirrorWikiEditor: scroll selection into view on inital load	mediawiki/extensions/CodeMirror	master	4 -3
CodeMirrorWikiEditor: sync with textarea when using CodeMirror toggle	mediawiki/extensions/CodeMirror	master	10 -2
CodeMirror: fix scrollToCaretPosition $.textSelection implementation	mediawiki/extensions/CodeMirror	master	98 -5
CodeMirrorWikiEditor: add missing hook and fix reference to textarea	mediawiki/extensions/CodeMirror	master	5 -3
CodeMirror6: add new modules, feature flag, and URL query parameter	mediawiki/extensions/CodeMirror	master	29 K -2 K

Customize query in gerrit

Related Objects
Search...

Status	Subtype	Assigned	Task
Open	Feature	None	T166098 Syntax sensitive and highlighting source code editor for template code wanted
Resolved	Feature	Bhsd	T95100 Add autocompletion to CodeMirror extension
Resolved	Feature	MusikAnimal	T181677 Implement syntax highlight for U 00A0 (no-break space, nbsp)
Resolved	Feature	MusikAnimal	T301615 Show syntax highlighting on View Source/protected pages
Resolved		MusikAnimal	T214989 Allow CodeMirror to be used for other textareas with WikiEditor
In Progress	Goal	None	T259059 Upgrade to CodeMirror 6
Resolved		MusikAnimal	T348019 Port MediaWiki mode to CodeMirror 6 stream-parser
Resolved		MusikAnimal	T317243 Get basic CodeMirror 6 setup working with ResourceLoader

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes

Restricted Application added a project: Community-Tech. · View Herald TranscriptSep 7 2022, 9:24 PM

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

MusikAnimal added a parent task: T259059: Upgrade to CodeMirror 6.Sep 7 2022, 9:25 PM

MusikAnimal updated the task description. (Show Details)

MusikAnimal updated the task description. (Show Details)Sep 7 2022, 9:27 PM

MusikAnimal updated the task description. (Show Details)

MusikAnimal moved this task from New & TBD Tickets to Needs Discussion on the Community-Tech board.Sep 7 2022, 10:34 PM

Copy the raw source of those files into the resources/lib/ directory of the CodeMirror MediaWiki extension.

This should probably be done with a manageForeignResources.php maintenance script.

• NRodriguez edited projects, added Community-Tech (CommTech-Sprint-33); removed Community-Tech.Sep 8 2022, 8:55 PM

MusikAnimal mentioned this in T259059: Upgrade to CodeMirror 6.Sep 12 2022, 3:01 PM

MusikAnimal claimed this task.Sep 16 2022, 9:06 PM

MusikAnimal moved this task from Ready 🎬 to In Development 💻 on the Community-Tech (CommTech-Sprint-33) board.

MusikAnimal set the point value for this task to 8.Sep 21 2022, 7:05 PM

• JMcLeod_WMF edited projects, added Community-Tech (CommTech-Sprint-34); removed Community-Tech (CommTech-Sprint-33).Sep 26 2022, 8:26 PM

• JMcLeod_WMF moved this task from Ready 🎬 to In Development 💻 on the Community-Tech (CommTech-Sprint-34) board.Sep 26 2022, 8:37 PM

• JMcLeod_WMF edited projects, added Community-Tech (CommTech-Sprint-35); removed Community-Tech (CommTech-Sprint-34).Oct 11 2022, 10:27 AM

• JMcLeod_WMF moved this task from Ready 🎬 to In Development 💻 on the Community-Tech (CommTech-Sprint-35) board.Oct 11 2022, 10:33 AM

• JMcLeod_WMF moved this task from In Development 💻 to Ready 🎬 on the Community-Tech (CommTech-Sprint-35) board.Oct 12 2022, 7:06 PM

• JMcLeod_WMF edited projects, added Community-Tech (CommTech-Sprint-36); removed Community-Tech (CommTech-Sprint-35).Nov 7 2022, 10:11 PM

• JMcLeod_WMF edited projects, added Community-Tech (CommTech-Sprint-37); removed Community-Tech (CommTech-Sprint-36).Nov 23 2022, 10:21 PM

• JMcLeod_WMF removed MusikAnimal as the assignee of this task.Nov 30 2022, 8:11 PM

• JMcLeod_WMF edited projects, added Community-Tech (CommTech-Kanban); removed Community-Tech (CommTech-Sprint-37).

• JMcLeod_WMF edited projects, added Community-Tech; removed Community-Tech (CommTech-Kanban).Mar 27 2023, 7:08 PM

MusikAnimal moved this task from Needs Discussion to Up Next (June 3-21) on the Community-Tech board.Mar 27 2023, 7:09 PM

MusikAnimal claimed this task.Sep 13 2023, 6:14 PM

MusikAnimal edited projects, added Community-Tech (CommTech-Kanban); removed Community-Tech.

MusikAnimal moved this task from Ready 🎬 to In Development 💻 on the Community-Tech (CommTech-Kanban) board.

Rrh-tk subscribed.Sep 20 2023, 3:19 PM

MusikAnimal updated the task description. (Show Details)Sep 26 2023, 12:37 AM

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

[mediawiki/extensions/CodeMirror@master] [WIP] CodeMirror 6 upgrade

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

gerritbot added a project: Patch-For-Review.Sep 26 2023, 3:53 PM

Bhsd subscribed.Sep 26 2023, 5:11 PM

MusikAnimal moved this task from In Development 💻 to Review/Feedback 💬 on the Community-Tech (CommTech-Kanban) board.Sep 28 2023, 1:59 AM

MusikAnimal moved this task from Review/Feedback 💬 to In Development 💻 on the Community-Tech (CommTech-Kanban) board.Sep 28 2023, 2:23 AM

I still need to write some tests but I think this is ready for initial review.

I want to fix the Realtime Preview integration, so back to in-dev for now.

MusikAnimal mentioned this in T348019: Port MediaWiki mode to CodeMirror 6 stream-parser.Oct 3 2023, 4:07 PM

MusikAnimal added a subtask: T348019: Port MediaWiki mode to CodeMirror 6 stream-parser.Oct 3 2023, 4:10 PM

MusikAnimal removed a subtask: T348019: Port MediaWiki mode to CodeMirror 6 stream-parser.Oct 3 2023, 4:13 PM

MusikAnimal added a parent task: T348019: Port MediaWiki mode to CodeMirror 6 stream-parser.

MusikAnimal moved this task from In Development 💻 to Review/Feedback 💬 on the Community-Tech (CommTech-Kanban) board.Oct 3 2023, 9:46 PM

MusikAnimal moved this task from Review/Feedback 💬 to In Development 💻 on the Community-Tech (CommTech-Kanban) board.

MusikAnimal moved this task from In Development 💻 to Review/Feedback 💬 on the Community-Tech (CommTech-Kanban) board.Oct 4 2023, 6:16 PM

Change 961145 merged by jenkins-bot:

[mediawiki/extensions/CodeMirror@master] CodeMirror6: add new modules, feature flag, and URL query parameter

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

ReleaseTaggerBot added a project: MW-1.42-notes (1.42.0-wmf.1; 2023-10-17).Oct 10 2023, 9:00 AM

Testing on the beta cluster with cm6enable=1 (and then toggling syntax highlighting) gives the following error:

Uncaught TypeError: t.view.scrollIntoView is not a function
    at jQuery.fn.init.scrollToCaretPosition [...]

Disabling realtime preview and retrying does not show this error, but instead errors with

Uncaught TypeError: Cannot read properties of undefined (reading 'off')
    at bindTextareaListener [...]

when toggling syntax highlighting off.

Maintenance_bot removed a project: Patch-For-Review.Oct 10 2023, 9:10 AM

In T317243#9237791, @TheresNoTime wrote:
Testing on the beta cluster with cm6enable=1 (and then toggling syntax highlighting) gives the following error:
Uncaught TypeError: t.view.scrollIntoView is not a function
    at jQuery.fn.init.scrollToCaretPosition [...]
Disabling realtime preview and retrying does not show this error, but instead errors with
Uncaught TypeError: Cannot read properties of undefined (reading 'off')
    at bindTextareaListener [...]
when toggling syntax highlighting off.

~~I can't repro the first issue,~~ but the second is a broken integration with Dismambiguator's notification feature. Since CodeMirror 6 is not backwards compatible, any integration is going to break until fixed.

EDIT: I can repro the RTP conflict and am working on a fix.

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

[mediawiki/extensions/CodeMirror@master] CodeMirrorWikiEditor: add missing hook and fix reference to textarea

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

gerritbot added a project: Patch-For-Review.Oct 10 2023, 8:12 PM

In T317243#9239943, @MusikAnimal wrote:
…
Disabling realtime preview and retrying does not show this error, but instead errors with
Uncaught TypeError: Cannot read properties of undefined (reading 'off')
    at bindTextareaListener [...]
when toggling syntax highlighting off.
… the second is a broken integration with Dismambiguator's notification feature. Since CodeMirror 6 is not backwards compatible, any integration is going to break until fixed.

Lies… we weren't even firing the hook in the new code! Also, while the CodeMirror API itself is not backwards compatible, any use of jQuery.textSelection() against the .cm-editor element should work fine, which is the case with Disambiguator.

MusikAnimal updated the task description. (Show Details)Oct 11 2023, 5:10 AM

MusikAnimal updated the task description. (Show Details)Oct 11 2023, 5:16 AM

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

[mediawiki/extensions/CodeMirror@master] CodeMirror: fix scrollToCaretPosition $.textSelection implementation

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

Change 964975 merged by jenkins-bot:

[mediawiki/extensions/CodeMirror@master] CodeMirrorWikiEditor: add missing hook and fix reference to textarea

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

Change 964998 merged by jenkins-bot:

[mediawiki/extensions/CodeMirror@master] CodeMirror: fix scrollToCaretPosition $.textSelection implementation

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

Maintenance_bot removed a project: Patch-For-Review.Oct 11 2023, 9:11 AM

(Something is up with my local dev vs. beta cluster — though even then these bugs seem intermittent..)

As currently live on beta, I seem to be able to occasionally trigger a bug where enabling/disabling/enabling RTP (with cm6enable=1 set) causes:

VM1393:8 Uncaught DOMException: Failed to execute 'insertBefore' on 'Node': The new child element contains the parent.
    at HTMLDivElement.<anonymous> [...]

Uncaught TypeError: Cannot read properties of undefined (reading 'done')
    at RealtimePreview.doRealtimePreview [...]

and the resultant UI:

Screenshot 2023-10-11 at 10.22.07.png (571×940 px, 127 KB)

TheresNoTime moved this task from Review/Feedback 💬 to QA 🐛 on the Community-Tech (CommTech-Kanban) board.Oct 11 2023, 9:23 AM

TheresNoTime mentioned this in T348692: TypeError: t.view.scrollIntoView is not a function .Oct 11 2023, 9:04 PM

Bhsd unsubscribed.Oct 14 2023, 5:00 AM

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

[mediawiki/extensions/CodeMirror@master] CodeMirrorWikiEditor: sync with textarea when using CodeMirror toggle

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

gerritbot added a project: Patch-For-Review.Oct 18 2023, 12:47 AM

MusikAnimal moved this task from QA 🐛 to Review/Feedback 💬 on the Community-Tech (CommTech-Kanban) board.Oct 18 2023, 6:04 PM

MusikAnimal moved this task from Backlog to CodeMirror 6 migration on the MediaWiki-extensions-CodeMirror board.Oct 19 2023, 4:12 AM

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

[mediawiki/extensions/CodeMirror@master] CodeMirrorWikiEditor: scroll selection into view on inital load

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

Change 966650 merged by jenkins-bot:

[mediawiki/extensions/CodeMirror@master] CodeMirrorWikiEditor: sync with textarea when using CodeMirror toggle

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

Change 967539 merged by jenkins-bot:

[mediawiki/extensions/CodeMirror@master] CodeMirrorWikiEditor: scroll selection into view on inital load

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

Maintenance_bot removed a project: Patch-For-Review.Oct 25 2023, 9:30 PM

ReleaseTaggerBot edited projects, added MW-1.42-notes (1.42.0-wmf.3; 2023-10-31); removed MW-1.42-notes (1.42.0-wmf.1; 2023-10-17).Oct 25 2023, 10:00 PM

HMonroy moved this task from Review/Feedback 💬 to QA 🐛 on the Community-Tech (CommTech-Kanban) board.Oct 25 2023, 10:57 PM

I'm going to mark this as resolved. Although it can be tested early, the QA effort should probably be saved closer to when we have a MVP, in particular T348019.