TinyMCE views improvements

[iseulde]

I'm going to use this ticket to propose some improvements to the mce views API, instead of adding this to #29841.

• Give views the option to display a loader or not. See #29841. We can mark the paragraph and replace it later based on this option. To the user it will look as if nothing happened until there is a match. This is very useful for oEmbed.
• Remove the wrap and replace options from setContent.
• Better edit function. Now it's part of the instance, so no need to look at the node for the encoded text. You can call the function provided to refresh the view, no need to touch the DOM any more. You can see the edit functions of the core views are a lot simpler.
• The gallery and av views now reuse the same edit function.
• Simpler registration.
• setContent will call setIframes itself if needed.
• Selecting another view will pause all players. We could also limit this to the same view type or a set of view types. This allows us to remove a lot of code.
• Better documentation (though it could be better still).
• Move the main API to the top of the file.
• Wrap the view registration in a separate IIFE. Ideally this should go in a separate file.
• The render method is easier to override.
• Better detection of already rendered views, so we don't unnecessarily refresh views.
• I added a proper setLoader method, just like setError.
• All options set in toView are now added as properties of the instance.

I will do some more testing.
Suggestion are welcome.

[iseulde]

edit: function( node ) {
	var gallery = wp.media.gallery,
		self = this,
		frame, data;

	data = window.decodeURIComponent( $( node ).attr('data-wpview-text') );
	frame = gallery.edit( data );

	frame.state('gallery-edit').on( 'update', function( selection ) {
		var shortcode = gallery.shortcode( selection ).string();
		$( node ).attr( 'data-wpview-text', window.encodeURIComponent( shortcode ) );
		wp.mce.views.refreshView( self, shortcode, true );
	});

	frame.on( 'close', function() {
		frame.detach();
	});
}

becomes

edit: function( text, update ) {
	var gallery = wp.media.gallery,
		frame = gallery.edit( text );

	frame.state( 'gallery-edit' ).on( 'update', function( selection ) {
		update( gallery.shortcode( selection ).string() );
	} );

	frame.on( 'close', function() {
		frame.detach();
	} );
}

[iseulde]

Improved the docs a bit.

[azaozz]

In 31546:

TinyMCE: wpView improvements:

• Better structure, simpler "view" registration, better extensibility.
• Better inline documentation.
• Don't show a placeholder for pasted link until we know the link is "embeddable'.

And many more improvements. Props iseulde. See #31412.

[azaozz]

In 31548:

TinyMCE: wpView improvements: remove the (obsolete) get/setViewText methods. Update stopping/pausing of multiple ME media players. Props iseulde. See #31412.

[iseulde]

Hm, there seems to be a tiny memory leak since 4.0 [29615]. editor.on( 'wp-body-class-change', function() {....

[azaozz]

In 31559:

TinyMCE: wpView improvements: introduce getText() and remove() methods, improved getInstance(), better docs. Props iseulde. See #31412.

[azaozz]

In 31586:

TinyMCE wpView: update the "update" method. Props iseulde. See #31412.

[azaozz]

In 31612:

TinyMCE wpView: decode HTML entities before trying to insert view markers. Props iseulde. See #31412.

[azaozz]

In 31621:

TinyMCE wpView: revert decoding of HTML entities. Doesn't work in old IE and needs to be more selective. Keep the change from .html() to .text() when getting the content of a node. See #31412.

[iseulde]

Left here:

• Above patch (there's a missing check for MutationObserver).
• Encoding issue.
• Media views should pause when switching to the text editor. Previously we did this whenever we could through mejs, but that didn't pause any embeds. I think the best solution is to remove the views when switching (which will destroy any iframes and therefore stop anything that's playing). This is okay since all the views need to be rerendered anyway when switching back to visual (all content is replaced by TinyMCE).

[azaozz]

In 31667:

TinyMCE wpView: improve unbinding of mutationObserver in nested iframes. Props iseulde. See #31412.

[azaozz]

Replying to iseulde:

Left here:

• Encoding issue.

As far as I see we will have to do that by hand. It seems it will be better to encode the wpView "text" rather than decode the whole content. If we touch the content we risk breaking double encoding, for example code with && in <pre> tags.

• Media views should pause when switching to the text editor. Previously we did this whenever we could through mejs, but that didn't pause any embeds. I think the best solution is to remove the views when switching (which will destroy any iframes and therefore stop anything that's playing). This is okay since all the views need to be rerendered anyway when switching back to visual (all content is replaced by TinyMCE).

Right. The whole content of TinyMCE is reloaded on every switch Text => Visual as we are expecting changes. There is no point in keeping the old "views".

[iseulde]

​https://github.com/tinymce/tinymce/blob/4.1.8/js/tinymce/classes/html/Entities.js#L243

[azaozz]

In 31689:

TinyMCE wpView: decode HTML entities before trying to match the wpView text string. Props iseulde. See #31412.

[dtbaker]

Subscribing. I'll update this TinyMCE view/shortcode example once 4.2 RC is out.

​https://github.com/dtbaker/wordpress-mce-view-and-shortcode-editor

(I'm using similar code to this in lots of themes so will have to do a big update)

[mattheu]

I've found a small - somewhat edge case issue with setIframes. Since this ticket tackles quite a few things - I'm going to post it here.

If you call setIframes twice in quick succession, then you can end up with the iFrame content being shown twice. This only happens for previews that are sandboxed in an iFrame.

You can replicate this by replacing render() in the initialize method of the av view with render( true ); render( true );

I think the reason for this is the timeout in the setIframes method. content.innerHTML is reset outside of the callback. Calling it twice in quick succession causes the content to be appended to the content from the first call.

A simple fix is to move content.innerHTML = ''; inside the timeout callback - resetting the content innerHTML each time.

Uploading a patch.

[iseulde]

@mattheu Sounds good. :)

[mattheu]

Fix duplicate content in setIframes

[iseulde]

Looking good. :) Probably best to move the callback in the timeout too.

[iseulde]

Left here: patch above from @mattheu and third point in comment above.
We could move that last one to a new ticket.

[azaozz]

In 31740:

TinyMCE: improve setting of the sandboxing iframe inside a view.
Props mattheu, iseulde. Fixes #31412.

[dtbaker]

Hey all,

Is there a way to override the default gallery template?

Here is a before/after 4.2 example that I'm struggling with. Surely there's an easier way?

​http://stackoverflow.com/questions/31552084/wp-mce-views-gallery-override-default-editor-gallery-template

Thanks!

[antpb]

#31881 was marked as a duplicate.