Flickering in the preview with syntax highlighting


(Kasper Peulen) #1

Here is a video to show what I mean:
http://www.screenr.com/zciH

This is not really a bug, but it may be a little bit annoying. Syntax highlighting is flickering with every keypress. This caused by this code:

  // Called after the preview renders. Debounced for performance
  afterRender: Discourse.debounce(function() {
    var $wmdPreview = $('#wmd-preview');
    if ($wmdPreview.length === 0) return;

    Discourse.SyntaxHighlighting.apply($wmdPreview);

    var post = this.get('model.post'),
        refresh = false;

    // If we are editing a post, we'll refresh its contents once. This is a feature that
    // allows a user to refresh its contents once.
    if (post && post.blank('refreshedPost')) {
      refresh = true;
      post.set('refreshedPost', true);
    }

    // Load the post processing effects
    $('a.onebox', $wmdPreview).each(function(i, e) {
      Discourse.Onebox.load(e, refresh);
    });
    $('span.mention', $wmdPreview).each(function(i, e) {
      Discourse.Mention.load(e, refresh);
    });

    this.trigger('previewRefreshed', $wmdPreview);
  }, 100),

(see also https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/views/composer/composer_view.js)

If I just remove the debounce, this doesn’t happen anymore. I don’t see why this debounce is necesary. Besides that, if this debounce is removed, I won’t need this pull request anymore: Add another previewRefreshed trigger that is not debounced by kasperpeulen · Pull Request #1721 · discourse/discourse · GitHub to let the mathjax preview not flicker.


(Robin Ward) #2

I’m going to investigate this and report back!


(Robin Ward) #3

I investigated this and you have found something interesting!

Right now the debouncing is happening of the jQuery code that runs after the editor has refreshed and that was causing flickering. I’ve moved the debouncing to before the rendering happens instead and I think that works a lot better.

Let me know if it works with your MathJax plugin!


(Kasper Peulen) #4

This works also for the mathjax preview ! Thanks :slight_smile:


(Robin Ward) #5

Awesome, happy to help.


(Robin Ward) #6