Ticket #27899: 27899-01.patch

src/wp-includes/js/mce-view.js

@@ -550 +550 @@
                         this.data = {};
                         this.attachments = [];
                         this.shortcode = options.shortcode;
-                        _.bindAll( this, 'setPlayer' );
-                        $(this).on('ready', this.setNode);
-                },
-
-                /**
-                 * Set the element context for the view, and then fetch the playlist's
-                 *   associated attachments.
-                 *
-                 * @param {Event} e
-                 * @param {HTMLElement} node
-                 */
-                setNode: function(e, node) {
-                        this.node = node;
                         this.fetch();
                 },
 
+
                 /**
                  * Asynchronously fetch the shortcode's attachments
                  */
                 fetch: function() {
                         this.attachments = wp.media.playlist.attachments( this.shortcode );
-                        this.attachments.more().done( this.setPlayer );
+                        this.dfd = this.attachments.more().done( _.bind( this.render, this ) );
                 },
 
-                /**
-                 * Get the HTML for the view (which also set's the data), replace the
-                 *   current HTML, and then invoke the WPPlaylistView instance to render
-                 *   the playlist in the editor
-                 *
-                 * @global WPPlaylistView
-                 * @global tinymce.editors
-                 */
-                setPlayer: function() {
-                        var p,
-                                html = this.getHtml(),
-                                t = this.encodedText,
-                                self = this;
-
-                        this.unsetPlayer();
-
-                        _.each( tinymce.editors, function( editor ) {
-                                var doc;
-                                if ( editor.plugins.wpview ) {
-                                        doc = editor.getDoc();
-                                        $( doc ).find( '[data-wpview-text="' + t + '"]' ).each(function(i, elem) {
-                                                var node = $( elem );
-                                                node.html( html );
-                                                self.node = elem;
-                                        });
-                                }
-                        }, this );
-
-                        if ( ! this.data.tracks ) {
-                                return;
-                        }
-
-                        p = new WPPlaylistView({
-                                el: $( self.node ).find( '.wp-playlist' ).get(0),
-                                metadata: this.data
-                        });
-
-                        this.player = p._player;
-                },
 
                 /**
                  * Set the data that will be used to compile the Underscore template,
@@ -695 +644 @@
                         this.data = options;
 
                         return this.template( options );
+                },
+
+                render: function() {
+                        var html = this.getHtml();
+                        // Search all tinymce editor instances and update the placeholders
+                        _.each( tinymce.editors, function( editor ) {
+                                var doc,
+                                        self = this;
+                                if ( editor.plugins.wpview ) {
+                                        doc = editor.getDoc();
+
+                                        self.unsetPlayer();
+
+                                        $( doc ).find( '[data-wpview-text="' + this.encodedText + '"]' ).each(function (i, elem) {
+                                                var node = $( elem ),
+                                                        player;
+
+                                                // The <ins> is used to mark the end of the wrapper div. Needed when comparing
+                                                // the content as string for preventing extra undo levels.
+                                                node.html( html ).append( '<ins data-wpview-end="1"></ins>' );
+
+                                                if ( ! self.data.tracks ) {
+                                                        return;
+                                                }
+
+                                                player = new WPPlaylistView({
+                                                        el: $( elem ).find( '.wp-playlist' ).get(0),
+                                                        metadata: self.data
+                                                });
+
+                                                self.player = player._player;
+                                        });
+                                }
+                        }, this );
                 }
         });
         _.extend( wp.mce.media.PlaylistView.prototype, wp.media.mixin );