Page MenuHomePhabricator

Support JavaScript hook events for CodeMirror
Open, LowPublic

Description

When CodeMirror element structure changes, JS world should be notified.

  1. After initial page DOM loading, JS generation of hilite layer starts. I want to know when CodeMirror element creation finished.
  2. When source text changes significantly, I want to get notified. CodeMirror elements may have been created, or entire elements could vanish due to deletions.

Both situations may be reflected by only one event; point 1 is a special case of event 2.

  • Single characters amid element content are less important; I could listen change events and follow each keystroke anyway.

In MediaWiki context mw.hook() would be preferred and robust mechanism.

  • If non-MediaWiki environment needs to be supported, user defined JS Event() might be triggered.

Use cases:

  • One existing feature is drawing attention on errors, here as soon as .cm-error shows up, avoiding saving and leaving before remedied.
  • Another interesting issue is the occurrence of certain templates from a list of observed template names, flipping through .cm-mw-template-name and even more if connected with some template parameters which might be deprecated and should be replaced, or evaluating parameter values and warn or fix or format. Grabbing CodeMirror elements might be a new approach for next generation tools.

The other way around: CodeMirror might listen to mw.hook() and gets nudged to re-start for entire textarea content.

  • Extension talk:CodeMirror #How to send a command to CodeMirror from JS? is complaining.
  • Apparently current implementaton is listening to keystroke or mouse events only.
  • By JavaScript activities the text might be changed, too.
    • Each other single change event might be caught, too. However, it could be more efficient that JavaScript tools fire a hook event anyway, as soon as changes are completed. If CodeMirror is not active this is rather cheap. If CodeMirror is active rebuilding could be triggered after all incremental changes have been performed.

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptSep 1 2017, 5:20 PM
TheDJ added a subscriber: TheDJ.Sep 1 2017, 10:08 PM

My ActualLivePreview script also needs a way to hook into the change event of the textarea, and it's missing this now.

Change 375613 had a related patch set uploaded (by Pastakhov; owner: Pastakhov):
[mediawiki/extensions/CodeMirror@master] Add CodeMirror enabled/disabled JS hooks

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

Pastakhov added a subscriber: Pastakhov.EditedSep 3 2017, 1:11 PM

As a variant the patch above calls the CodeMirror.enabled and CodeMirror.disabled hooks.
Catching ones gets you full access to the CodeMirror features.
For example, alert message when the text is changed:

mediaWiki.hook( 'CodeMirror.enabled' ).add( 
    function ( cm ) { 
        cm.on( 'change', function() { 
            alert ( 'text changed' ); 
        } );
    } 
);

It used event change of CodeMirror.

I'm not sure this is the best approach as it creates two APIs for users who want to listen to text change events. Users shouldn't have to care which editor is being used, they should receive the same event for CodeMirror changes and textarea changes.

I am listening to textarea changes for many years already, since these are covered by low-level DOM events. I did not ask for this.

What I want to know is a structural change in syntax; new elements created or vanishing.

I do not want to restart the entire analysis for all classes after every single keystroke; I want to consider new or removed elements by their classes.

BTW the application object passed by the patch is exactly what will cover all the needs; thanks a lot.

I don't think relying on CM for wikitext parsing via the CM DOM is a good idea - it's a very indirect and fragile way of looking for wikitext structure. The CodeMirror highlighting classes should not be considered a public API, or a definitive source of model information, it's for presentation only.

Please see the use cases mentioned above:

  • One existing feature is drawing attention on errors, here as soon as .cm-error shows up, avoiding saving and leaving before remedied.

Please tell me a performant way to check for this error class, beside your suggestion to re-examine the entire DOM after every keystroke and every mouse click.

With CodeMirror, all my listening for $( '#wpTextbox1' ).blur() is worthless. What can be done instead of listening to two element's events?

Niharika triaged this task as Low priority.Nov 7 2017, 11:35 PM
Restricted Application added a project: Community-Tech. · View Herald TranscriptNov 7 2017, 11:35 PM
4shadoww added a subscriber: 4shadoww.EditedMay 5 2018, 3:24 PM

Is here way to edit CodeMirror's textarea and check is CodeMirror enabled?

edit: I mean the hooks ended up not being added so is here any alternative to access it?

edit 2: Never mind figured out myself. But here is how it's done.

stjn awarded a token.May 28 2019, 4:40 PM
stjn added a subscriber: stjn.EditedMay 28 2019, 4:47 PM

It seems like any customisation or extendability of CodeMirror by JavaScript developers was completely left out of development by Community Tech team. I’ve first noticed it in T214989 (not exactly first-hand), now I am seeing more issues trying to develop a script with keyboard shortcuts for WikiEditor (link for curious), and this is the most serious issue out of all. It’s really strange to see an important end-user tool to lack all of this stuff.

TheDJ added a comment.May 28 2019, 6:01 PM

It seems like any customisation or extendability of CodeMirror by JavaScript developers was completely left out of development by Community Tech team.

Because It wasn't the primary target of the couple of weeks of development spent on the project: https://meta.wikimedia.org/wiki/Community_Tech/Wikitext_editor_syntax_highlighting

stjn added a comment.May 28 2019, 6:06 PM

Because It wasn't the primary target of the couple of weeks of development spent on the project: https://meta.wikimedia.org/wiki/Community_Tech/Wikitext_editor_syntax_highlighting

You don’t need to explain it to me. At the same time, though, TemplateWizard was done by the same team and it has far more possibilities of third-party usage, even though it also wasn’t a target of development. So it’s just an unfortunate oversight.