From 3265aad7446f6b7d7e7ae5918f5d1032ea6af911 Mon Sep 17 00:00:00 2001 From: Andrew Ozz Date: Sat, 4 Apr 2015 22:59:07 +0000 Subject: [PATCH] TinyMCE wpView: - Fix editor undo levels. - Remove views and markers in the DOM before serialization. - Unbind views before removing them on hide. - Empty the content in the timeout, so it doesn't render iframes twice. Props iseulde. Fixes #31669. git-svn-id: https://develop.svn.wordpress.org/trunk@32022 602fd350-edb4-49c9-b593-d223f7449a82 --- src/wp-includes/js/mce-view.js | 92 +++++++++++-------- .../js/tinymce/plugins/wpview/plugin.js | 55 +++++++---- src/wp-includes/version.php | 2 +- 3 files changed, 90 insertions(+), 59 deletions(-) diff --git a/src/wp-includes/js/mce-view.js b/src/wp-includes/js/mce-view.js index b54470dba1..7552b221ba 100644 --- a/src/wp-includes/js/mce-view.js +++ b/src/wp-includes/js/mce-view.js @@ -87,6 +87,8 @@ window.wp = window.wp || {}; * and creates a new instance for every match. * * @param {String} content The string to scan. + * + * @return {String} The string with markers. */ setMarkers: function( content ) { var pieces = [ { content: content } ], @@ -298,11 +300,18 @@ window.wp = window.wp || {}; /** * Renders all view nodes tied to this view instance that are not yet rendered. * + * @param {String} content The content to render. Optional. * @param {Boolean} force Rerender all view nodes tied to this view instance. */ - render: function( force ) { + render: function( content, force ) { + if ( content != null ) { + this.content = content; + } + + content = this.getContent(); + // If there's nothing to render an no loader needs to be shown, stop. - if ( ! this.loader && ! this.getContent() ) { + if ( ! this.loader && ! content ) { return; } @@ -312,21 +321,33 @@ window.wp = window.wp || {}; // Replace any left over markers. this.replaceMarkers(); - if ( this.getContent() ) { - this.setContent( this.getContent(), function( editor, node ) { - $( node ).data( 'rendered', true ).trigger( 'wp-mce-view-bind' ); + if ( content ) { + this.setContent( content, function( editor, node ) { + $( node ).data( 'rendered', true ); + this.bindNode.call( this, editor, node ); }, force ? null : false ); } else { this.setLoader(); } }, + /** + * Binds a given node after its content is added to the DOM. + */ + bindNode: function() {}, + + /** + * Unbinds a given node before its content is removed from the DOM. + */ + unbindNode: function() {}, + /** * Unbinds all view nodes tied to this view instance. * Runs before their content is removed from the DOM. */ unbind: function() { this.getNodes( function( editor, node ) { + this.unbindNode.call( this, editor, node ); $( node ).trigger( 'wp-mce-view-unbind' ); }, true ); }, @@ -447,7 +468,7 @@ window.wp = window.wp || {}; contentNode.innerHTML = ''; contentNode.appendChild( _.isString( content ) ? editor.dom.createFragment( content ) : content ); - callback && callback.apply( this, arguments ); + callback && callback.call( this, editor, node, contentNode ); }, rendered ); } }, @@ -461,30 +482,27 @@ window.wp = window.wp || {}; * @param {Boolean} rendered Only set for (un)rendered nodes. Optional. */ setIframes: function( head, body, callback, rendered ) { - var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver; + var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver, + self = this; this.getNodes( function( editor, node, content ) { - // Seems Firefox needs a bit of time to insert/set the view nodes, + var dom = editor.dom, + styles = '', + bodyClasses = editor.getBody().className || '', + editorHead = editor.getDoc().getElementsByTagName( 'head' )[0], + iframe, iframeDoc, observer, i; + + tinymce.each( dom.$( 'link[rel="stylesheet"]', editorHead ), function( link ) { + if ( link.href && link.href.indexOf( 'skins/lightgray/content.min.css' ) === -1 && + link.href.indexOf( 'skins/wordpress/wp-content.css' ) === -1 ) { + + styles += dom.getOuterHTML( link ); + } + } ); + + // Seems the browsers need a bit of time to insert/set the view nodes, // or the iframe will fail especially when switching Text => Visual. setTimeout( function() { - var dom = editor.dom, - styles = '', - bodyClasses = editor.getBody().className || '', - iframe, iframeDoc, observer, i; - - tinymce.each( dom.$( - 'link[rel="stylesheet"]', - editor.getDoc().getElementsByTagName( 'head' )[0] - ), function( link ) { - if ( - link.href && - link.href.indexOf( 'skins/lightgray/content.min.css' ) === -1 && - link.href.indexOf( 'skins/wordpress/wp-content.css' ) === -1 - ) { - styles += dom.getOuterHTML( link ); - } - } ); - content.innerHTML = ''; iframe = dom.add( content, 'iframe', { @@ -582,7 +600,7 @@ window.wp = window.wp || {}; editor.off( 'wp-body-class-change', classChange ); } ); - callback && callback.apply( this, arguments ); + callback && callback.call( self, editor, node ); }, 50 ); }, rendered ); }, @@ -664,6 +682,7 @@ window.wp = window.wp || {}; * @param {HTMLElement} node The view node to remove. */ remove: function( editor, node ) { + this.unbindNode.call( this, editor, node, $( node ).find( '.wpview-content' ).get( 0 ) ); $( node ).trigger( 'wp-mce-view-unbind' ); editor.dom.remove( node ); editor.focus(); @@ -728,12 +747,10 @@ window.wp = window.wp || {}; } } ); - self.content = self.template( { + self.render( self.template( { attachments: attachments, columns: attrs.columns ? parseInt( attrs.columns, 10 ) : wp.media.galleryDefaults.columns - } ); - - self.render(); + } ) ); } ) .fail( function( jqXHR, textStatus ) { self.setError( textStatus ); @@ -754,16 +771,13 @@ window.wp = window.wp || {}; } ); } - wp.ajax.send( this.action, { - data: { - post_ID: postID, - type: this.shortcode.tag, - shortcode: this.shortcode.string() - } + wp.ajax.post( this.action, { + post_ID: postID, + type: this.shortcode.tag, + shortcode: this.shortcode.string() } ) .done( function( response ) { - self.content = response; - self.render(); + self.render( response ); } ) .fail( function( response ) { if ( self.url ) { diff --git a/src/wp-includes/js/tinymce/plugins/wpview/plugin.js b/src/wp-includes/js/tinymce/plugins/wpview/plugin.js index 9a8b650e1c..db9db466fc 100644 --- a/src/wp-includes/js/tinymce/plugins/wpview/plugin.js +++ b/src/wp-includes/js/tinymce/plugins/wpview/plugin.js @@ -4,7 +4,8 @@ * WordPress View plugin. */ tinymce.PluginManager.add( 'wpview', function( editor ) { - var selected, + var $ = editor.$, + selected, Env = tinymce.Env, VK = tinymce.util.VK, TreeWalker = tinymce.dom.TreeWalker, @@ -153,13 +154,17 @@ tinymce.PluginManager.add( 'wpview', function( editor ) { // Remove the content of view wrappers from HTML string function emptyViews( content ) { - return content.replace(/]+data-wpview-text=\"([^"]+)"[^>]*>[\s\S]+?wpview-selection-after[^>]+>(?: |\u00a0)*<\/p><\/div>/g, '$1' ); + content = content.replace( /]+data-wpview-text="([^"]+)"[^>]*>[\s\S]+?wpview-selection-after[^>]+>[^<>]*<\/p>\s*<\/div>/g, function( all, match ) { + return '

' + window.decodeURIComponent( match ) + '

'; + }); + + return content.replace( / data-wpview-marker="[^"]+"/g, '' ); } // Prevent adding undo levels on changes inside a view wrapper editor.on( 'BeforeAddUndo', function( event ) { - if ( event.lastLevel && emptyViews( event.level.content ) === emptyViews( event.lastLevel.content ) ) { - event.preventDefault(); + if ( event.level.content ) { + event.level.content = emptyViews( event.level.content ); } }); @@ -169,6 +174,10 @@ tinymce.PluginManager.add( 'wpview', function( editor ) { editor.on( 'BeforeSetContent', function( event ) { var node; + if ( ! event.selection ) { + wp.mce.views.unbind(); + } + if ( ! event.content ) { return; } @@ -339,22 +348,30 @@ tinymce.PluginManager.add( 'wpview', function( editor ) { } }); - editor.on( 'PreProcess', function( event ) { - // Empty the wpview wrap nodes - tinymce.each( editor.dom.select( 'div[data-wpview-text]', event.node ), function( node ) { - node.textContent = node.innerText = '\u00a0'; - }); - }); + function resetViews( rootNode ) { + // Replace view nodes + $( 'div[data-wpview-text]', rootNode ).each( function( i, node ) { + var $node = $( node ), + text = window.decodeURIComponent( $node.attr( 'data-wpview-text' ) || '' ); - editor.on( 'PostProcess', function( event ) { - if ( event.content ) { - event.content = event.content.replace( /
]*?data-wpview-text="([^"]*)"[^>]*>[\s\S]*?<\/div>/g, function( match, shortcode ) { - if ( shortcode ) { - return '

' + window.decodeURIComponent( shortcode ) + '

'; - } - return ''; // If error, remove the view wrapper - }); - } + if ( text && node.parentNode ) { + $node.replaceWith( $( editor.dom.create('p') ).text( text ) ); + } + }); + + // Remove marker attributes + $( 'p[data-wpview-marker]', rootNode ).attr( 'data-wpview-marker', null ); + } + + editor.on( 'PreProcess', function( event ) { + // Replace the view nodes with their text in the DOM clone. + resetViews( event.node ); + }, true ); + + editor.on( 'hide', function() { + // Replace the view nodes with their text directly in the editor body. + wp.mce.views.unbind(); + resetViews( editor.getBody() ); }); // Excludes arrow keys, delete, backspace, enter, space bar. diff --git a/src/wp-includes/version.php b/src/wp-includes/version.php index 85978f30d6..2fd5066217 100644 --- a/src/wp-includes/version.php +++ b/src/wp-includes/version.php @@ -18,7 +18,7 @@ $wp_db_version = 31532; * * @global string $tinymce_version */ -$tinymce_version = '4109-20150310'; +$tinymce_version = '4109-20150404'; /** * Holds the required PHP version