Page MenuHomePhabricator

CodeMirror: Gallery highlighting may lead to bad/desynchronised state
Closed, ResolvedPublicBUG REPORT

Description

Steps to replicate the issue (include links if applicable):

  • Paste the snippet below into CodeMirror (sorry that it's quite untidy but I'm unsure what exactly in it makes the editor break):
<div class="genre-table">
<gallery mode="packed">
Example.png|Example=:Category:Example|[[:Category:Example|Example<br>Example]]
Example.png|Example=:Category:Example|[[:Category:Example|Example<br>Example]]
Example.png|Example=:Category:Example|[[:Category:Example|Example]]
Example.png|Example=:Category:Example|[[:Category:Example|Example<br>Example]]
Example.png|Example=:Category:Example|[[:Category:Example|Example]]
Example.png|Example=:Category:Example|[[:Category:Example|Example]]
Example.png|Example=:Category:Example|[[:Category:Example|Example<br>Example]]
Example.png|Example=:Category:Example|[[:Category:Example|Example&nbsp;Example]]
Example.png|Example=:Category:Example|[[:Category:Example|Example]]
Example.png|Example=:Category:Example|[[:Category:Example|Example]]
Example.png|Example=:Category:Example|[[:Category:Example|Example<br>Example]]
Example.png|Example=:Category:Example|[[:Category:Example|Example<br>Example]]
Example.png|Example=:Category:Example|[[:Category:Example|Example<br>Example]]
Example.png|Example=:Category:Example|[[:Category:Example|Example<br>Example]]
Example.png|Example=:Category:Example|[[:Category:Example|Example<br>Example]]
Example.png|Example=:Category:Example|[[:Category:Example|Example<br>Example]]
Example.png|Example=:Category:Example|[[:Category:Example|Example<br>Example]]
Example.png|Example=:Category:Example|[[:Category:Example|Example<br>Example]]
Example.png|Example=:Category:Example|[[:Category:Example|Example<br>Example]]
Example.png|Example=:Category:Example|[[:Category:Example|Example<br>Example]]
Example.png|Example=:Category:Example|[[:Category:Example|Example]]
Example.png|Example=:Category:Example|[[:Category:Example|Example<br>Example]]
</gallery></div>

<gallery mode="packed">
Example.png|Example=:Category:Example|[[:Category:Example|Example]]
Example.png|Example=:Category:Example|[[:Category:Example|Example<br>Example]]
Example.png|Example=:Category:Example|[[:Category:Example|Example<br>Example]]
Example.png|Example=:Category:Example|[[:Category:Example|Example<br>Example]]
Example.png|Example=:Category:Example|[[:Category:Example|Example<br>Example]]
</gallery>

last line:
  • Place the cursor at the end (after last line:).
  • Start typing, for example aa.

What happens?:
Cursor does not visibly reposition. aa appears until arrow keys are used, the cursor is repositioned via mouse, or the editor loses focus.

Additionally:

  • Upon typing the first character at the last line, an exception is thrown (within the eatExtTagAttribute closure when name === 'gallery'):
Uncaught TypeError: state.extMode.startState is not a function
    token codemirror.mediawiki.js:770
    tokenize codemirror.mediawiki.js:871
    eatExtTagArea codemirror.mediawiki.js:850
    token codemirror.mediawiki.js:1528
    readToken codemirror6.bundle.lib.js:20480
    parseLine codemirror6.bundle.lib.js:20444
    advance codemirror6.bundle.lib.js:20361
    work codemirror6.bundle.lib.js:18386
    withContext codemirror6.bundle.lib.js:18421
    work codemirror6.bundle.lib.js:18374
    apply codemirror6.bundle.lib.js:18560
    update codemirror6.bundle.lib.js:18580
    update codemirror6.bundle.lib.js:1851
    applyTransaction codemirror6.bundle.lib.js:2692
    ensureAddr codemirror6.bundle.lib.js:2092
    field codemirror6.bundle.lib.js:2638
    syntaxTree codemirror6.bundle.lib.js:18211
    updateF codemirror.matchbrackets.js:93
    update codemirror6.bundle.lib.js:1851
    applyTransaction codemirror6.bundle.lib.js:2692
    ensureAddr codemirror6.bundle.lib.js:2092
    EditorState codemirror6.bundle.lib.js:2628
    applyTransaction codemirror6.bundle.lib.js:2692
    get state codemirror6.bundle.lib.js:2342
    update codemirror6.bundle.lib.js:11792
    dispatchTransactions codemirror6.bundle.lib.js:11750
    dispatch codemirror6.bundle.lib.js:11774
    applyDOMChangeInner codemirror6.bundle.lib.js:8292
    applyDOMChange codemirror6.bundle.lib.js:8247
    flush codemirror6.bundle.lib.js:11306
    observer codemirror6.bundle.lib.js:10988
    DOMObserver codemirror6.bundle.lib.js:10971
    EditorView codemirror6.bundle.lib.js:11759
    initialize codemirror.js:718
    initialize codemirror.wikieditor.js:137
    init codemirror.init.js:44
    add mediawiki.base.js:531
    init codemirror.init.js:42
    js codemirror.init.js:126
    runScript startup.js:1288
    cssHandle startup.js:1356
    flushCssBuffer startup.js:602
codemirror.mediawiki.js:770:46
  • Upon typing the second and any subsequent characters, a different exception is thrown:
Uncaught TypeError: readyTokens[0] is undefined
    token codemirror.mediawiki.js:1468
    readToken codemirror6.bundle.lib.js:20480
    parseLine codemirror6.bundle.lib.js:20444
    advance codemirror6.bundle.lib.js:20361
    work codemirror6.bundle.lib.js:18386
    withContext codemirror6.bundle.lib.js:18421
    work codemirror6.bundle.lib.js:18374
    apply codemirror6.bundle.lib.js:18560
    update codemirror6.bundle.lib.js:18580
    update codemirror6.bundle.lib.js:1851
    applyTransaction codemirror6.bundle.lib.js:2692
    ensureAddr codemirror6.bundle.lib.js:2092
    field codemirror6.bundle.lib.js:2638
    syntaxTree codemirror6.bundle.lib.js:18211
    updateF codemirror.matchbrackets.js:93
    update codemirror6.bundle.lib.js:1851
    applyTransaction codemirror6.bundle.lib.js:2692
    ensureAddr codemirror6.bundle.lib.js:2092
    EditorState codemirror6.bundle.lib.js:2628
    applyTransaction codemirror6.bundle.lib.js:2692
    get state codemirror6.bundle.lib.js:2342
    update codemirror6.bundle.lib.js:11792
    dispatchTransactions codemirror6.bundle.lib.js:11750
    dispatch codemirror6.bundle.lib.js:11774
    applyDOMChangeInner codemirror6.bundle.lib.js:8292
    applyDOMChange codemirror6.bundle.lib.js:8247
    flush codemirror6.bundle.lib.js:11306
    observer codemirror6.bundle.lib.js:10988
    DOMObserver codemirror6.bundle.lib.js:10971
    EditorView codemirror6.bundle.lib.js:11759
    initialize codemirror.js:718
    initialize codemirror.wikieditor.js:137
    init codemirror.init.js:44
    add mediawiki.base.js:531
    init codemirror.init.js:42
    js codemirror.init.js:126
    runScript startup.js:1288
    cssHandle startup.js:1356
    flushCssBuffer startup.js:602
codemirror.mediawiki.js:1468:51

What should have happened instead?:
Typed characters are added to the textarea and remain after copying, for example last line: becomes last line:aa.

Software version (on Special:Version page; skip for WMF-hosted wikis like Wikipedia):
Latest master (cb750be868adcafffdf03d9bc828837aca24c4c7).

Other information (browser name/version, screenshots, etc.):
Tested using Firefox 143.0.1 on macOS 26.

Event Timeline

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

[mediawiki/extensions/CodeMirror@master] CodeMirrorMediaWiki: template arg name containing `-`

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

Can confirm the patch fixes the problem.

Change #1190644 merged by jenkins-bot:

[mediawiki/extensions/CodeMirror@master] CodeMirrorMediaWiki: template arg name containing `-`

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

Bhsd moved this task from Bugs to Done on the MediaWiki-extensions-CodeMirror board.