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.
Built from https://develop.svn.wordpress.org/trunk@32022


git-svn-id: http://core.svn.wordpress.org/trunk@32001 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Andrew Ozz 2015-04-04 23:00:26 +00:00
parent a7341b7c3f
commit 0186bbcb95
6 changed files with 93 additions and 62 deletions

View File

@ -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,
// or the iframe will fail especially when switching Text => Visual.
setTimeout( function() {
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"]',
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
) {
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() {
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: {
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 ) {

File diff suppressed because one or more lines are too long

View File

@ -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(/<div[^>]+data-wpview-text=\"([^"]+)"[^>]*>[\s\S]+?wpview-selection-after[^>]+>(?:&nbsp;|\u00a0)*<\/p><\/div>/g, '$1' );
content = content.replace( /<div[^>]+data-wpview-text="([^"]+)"[^>]*>[\s\S]+?wpview-selection-after[^>]+>[^<>]*<\/p>\s*<\/div>/g, function( all, match ) {
return '<p>' + window.decodeURIComponent( match ) + '</p>';
});
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' ) || '' );
if ( text && node.parentNode ) {
$node.replaceWith( $( editor.dom.create('p') ).text( text ) );
}
});
editor.on( 'PostProcess', function( event ) {
if ( event.content ) {
event.content = event.content.replace( /<div [^>]*?data-wpview-text="([^"]*)"[^>]*>[\s\S]*?<\/div>/g, function( match, shortcode ) {
if ( shortcode ) {
return '<p>' + window.decodeURIComponent( shortcode ) + '</p>';
}
return ''; // If error, remove the view wrapper
});
// 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.

File diff suppressed because one or more lines are too long

View File

@ -4,7 +4,7 @@
*
* @global string $wp_version
*/
$wp_version = '4.2-beta4-32021';
$wp_version = '4.2-beta4-32022';
/**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.
@ -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