Steps to replicate the issue (include links if applicable):
- Go to https://en.wikipedia.org/wiki/Special:Blankpage
- Run this to create 2 CodeMirror instances:
const require = await mw.loader.using('ext.CodeMirror.v6'); const CodeMirror = require('ext.CodeMirror.v6'); const textarea1 = $('<textarea>').attr('rows', 10)[0]; $('.mw-body-content').append(textarea1); const cm1 = new CodeMirror(textarea1); cm1.initialize(); const textarea2 = $('<textarea>').attr('rows', 10)[0]; $('.mw-body-content').append(textarea2); const cm2 = new CodeMirror(textarea2); cm2.initialize();
- Press Ctrl+Shift+, to open preferences in each one
- Click the label of the checkbox "Show line numbers" (not the checkbox itself!)
What happens?:
What should have happened instead?:
Probably the preferences of two forms should be kept in sync by doing the same sync procedure as CodeMirrorChild does on ext.CodeMirror.preferences.apply hook? I guess a case could be made for having two instances of CodeMirror with different preferences, but seems far-fetched to me? (E.g. in VS Code you can't have different word wrap settings across tabs.)
Technical details:
The cause is the fact that the checkbox inputs they have the same input ID assigned in codemirror.codex.js#L121. Clicking the label with for attribute equal to that ID checks the wrong checkbox.
Note that the second checkbox is changed not directly by the click, but by the means of the hook in codemirror.preferences.js#L614
// Update the checked state when the preference is changed. mw.hook( 'ext.CodeMirror.preferences.apply' ).add( ( pref, enabled ) => { if ( pref === name ) { input.checked = enabled; } } );