During prototyping, we found the VisualEditor requires some cursor synchronization in order for bracket matching to work correctly. This task is to integrate, behind the same feature flag as the parent task.
Description
Description
Details
Details
Customize query in gerrit
| Status | Subtype | Assigned | Task | ||
|---|---|---|---|---|---|
| Resolved | None | T302857 Deploy first template focus-area improvements to enwiki | |||
| Resolved | WMDE-Fisch | T280023 Enable bracket matching on all wikis (except enwiki) | |||
| Resolved | Lena_WMDE | T273591 Enable bracket matching on more wikis | |||
| Resolved | Lena_WMDE | T270238 Enable bracket matching on the first wikis | |||
| Resolved | Tobi_WMDE_SW | T270240 Try to write a browser test for the bracket matching feature | |||
| Resolved | thiemowmde | T270317 Optimization and limits for bracket matching | |||
| Resolved | Feature | None | T15302 Implement brace matching in page editing | ||
| Resolved | lilients_WMDE | T261857 Implement bracket matching in CodeMirror behind a feature flag | |||
| Resolved | thiemowmde | T269094 Integrate bracket matching for CodeMirror with VisualEditor |
Event Timeline
Comment Actions
Change 649593 had a related patch set uploaded (by Svantje Lilienthal; owner: Svantje Lilienthal):
[mediawiki/extensions/CodeMirror@master] Integrated bracket matching for CodeMirror with VisualEditor
Comment Actions
After adding dozens and dozens of console.log() everywhere I started to understand the issue a bit better.
- The matchbrackets addon doesn't work in VisualEditor.
- The addon runs. It is correctly initialized and called when it should be called.
- But when the addon is called, the cursor position is always line 0, character 0. You can even see this when you edit a page and type something like [[…]] right at the start.
- The reason for this misbehavior is that the focus is never inside of the <div class="CodeMirror cm-s-default CodeMirror-wrap"> element. But CodeMirror expects the focus to be there. Otherwise significant parts of CodeMirror don't work. (Well, obviously parts that have not been needed so far.)
- Instead, VisualEditor puts an element <div class="ve-ce-branchNode ve-ce-documentNode ve-ce-attachedRootNode ve-ce-rootNode mw-content-ltr mw-parser-output ve-ce-documentNode-codeEditor-webkit-hide" contenteditable="true" spellcheck="true" tabindex="0" data-gramm="false" role="textbox" lang="en" dir="ltr"> on top of CodeMirror. That's where the focus is. The element is invisible via .ve-ce-documentNode-codeEditor-webkit-hide { -webkit-text-fill-color: transparent; }.
I realized to late that the later patch set 2 contains code to propagate the cursor position from the top element ("mirror") down to CodeMirror. With this bracket matching works! Unfortunately the performance impact is rather extreme:
Edit: I played around with different approaches in patch set 3. I temporarily left all code in the patch.
Comment Actions
Change 651530 had a related patch set uploaded (by Thiemo Kreuz (WMDE); owner: Thiemo Kreuz (WMDE)):
[VisualEditor/VisualEditor@master] Improve SourceConverter.getSourceTextFromDataRange performance
Comment Actions
Change 651530 merged by jenkins-bot:
[VisualEditor/VisualEditor@master] Improve SourceConverter.getSourceTextFromDataRange performance
Comment Actions
Change 652210 had a related patch set uploaded (by Esanders; owner: Esanders):
[mediawiki/extensions/VisualEditor@master] Update VE core submodule to master (d0d57d2bc)
Comment Actions
Change 652210 merged by jenkins-bot:
[mediawiki/extensions/VisualEditor@master] Update VE core submodule to master (d0d57d2bc)
Comment Actions
Change 649593 merged by jenkins-bot:
[mediawiki/extensions/CodeMirror@master] Integrated bracket matching for CodeMirror with VisualEditor
Comment Actions
Change 654424 had a related patch set uploaded (by Thiemo Kreuz (WMDE); owner: Thiemo Kreuz (WMDE)):
[mediawiki/extensions/CodeMirror@master] Simplify onSelect handler implementation
Comment Actions
Change 654424 merged by jenkins-bot:
[mediawiki/extensions/CodeMirror@master] Simplify onSelect handler implementation