Ticket #39337: 39337.3.patch

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

@@ -88 +88 @@
                  *
                  * @return {String} The string with markers.
                  */
-                setMarkers: function( content ) {
+                setMarkers: function( content, event ) {
                         var pieces = [ { content: content } ],
                                 self = this,
+                                context = '',
                                 instance, current;
 
                         _.each( views, function( view, type ) {
@@ -118 +119 @@
                                                 instance = self.createInstance( type, result.content, result.options );
                                                 text = instance.loader ? '.' : instance.text;
 
+                                                if ( event ) {
+                                                        if ( event.initial ) {
+                                                                context = ' data-wpview-context="initial"';
+                                                        } else if ( ! event.load ) {
+                                                                context = ' data-wpview-context="new"';
+                                                        }
+                                                }
+
                                                 // Add the processed piece for the match.
                                                 pieces.push( {
-                                                        content: instance.ignore ? text : '<p data-wpview-marker="' + instance.encodedText + '">' + text + '</p>',
+                                                        content: instance.ignore ? text : '<p data-wpview-marker="' + instance.encodedText + '"' + context + '>' + text + '</p>',
                                                         processed: true
                                                 } );
 
@@ -428 +437 @@
                  */
                 replaceMarkers: function() {
                         this.getMarkers( function( editor, node ) {
-                                var $viewNode;
+                                var $viewNode, context;
+                                var $node = editor.$( node )
 
                                 if ( ! this.loader && $( node ).text() !== this.text ) {
-                                        editor.dom.setAttrib( node, 'data-wpview-marker', null );
+                                        $node.attr({ 'data-wpview-marker': null, 'data-wpview-context': null });
                                         return;
                                 }
 
+                                context = $node.attr( 'data-wpview-context' );
+
                                 $viewNode = editor.$(
                                         '<div class="wpview wpview-wrap" data-wpview-text="' + this.encodedText + '" data-wpview-type="' + this.type + '" contenteditable="false"></div>'
                                 );
 
-                                editor.$( node ).replaceWith( $viewNode );
+                                $node.replaceWith( $viewNode );
+
+                                 if ( context === 'new' ) {
+                                        if ( ! $viewNode.next().length ) {
+                                                editor.selection.select( $viewNode[0] );
+
+                                                setTimeout( function() {
+                                                        editor.selection.collapse();
+                                                } );
+                                        }
+                                } else if ( context === 'initial' && ! $viewNode.prev().length ) {
+                                        // When the first element is a wpview node, make sure it is not (partially) selected.
+                                        editor.selection.select( editor.getBody() );
+                                        editor.selection.collapse( true );
+                                }
                         } );
                 },
 
@@ -448 +474 @@
                  */
                 removeMarkers: function() {
                         this.getMarkers( function( editor, node ) {
-                                editor.dom.setAttrib( node, 'data-wpview-marker', null );
+                                editor.$( node ).attr({ 'data-wpview-marker': null, 'data-wpview-context': null });
                         } );
                 },
 

src/wp-includes/js/tinymce/plugins/wpview/plugin.js

@@ -88 +88 @@
                                 }
                         }
 
-                        event.content = wp.mce.views.setMarkers( event.content );
+                        event.content = wp.mce.views.setMarkers( event.content, event );
                 } );
 
                 // Replace any new markers nodes with views.