diff --git a/src/wp-includes/js/mce-view.js b/src/wp-includes/js/mce-view.js index 3a21e01fa7..d7775ea4b8 100644 --- a/src/wp-includes/js/mce-view.js +++ b/src/wp-includes/js/mce-view.js @@ -1,278 +1,37 @@ /* global tinymce */ -/** + +window.wp = window.wp || {}; + +/* + * The TinyMCE view API. + * * Note: this API is "experimental" meaning that it will probably change * in the next few releases based on feedback from 3.9.0. * If you decide to use it, please follow the development closely. + * + * Diagram + * + * |- registered view constructor (type) + * | |- view instance (unique text) + * | | |- editor 1 + * | | | |- view node + * | | | |- view node + * | | | |- ... + * | | |- editor 2 + * | | | |- ... + * | |- view instance + * | | |- ... + * |- registered view + * | |- ... */ - -// Ensure the global `wp` object exists. -window.wp = window.wp || {}; - -( function( $ ) { +( function( window, wp, $ ) { 'use strict'; var views = {}, - instances = {}, - media = wp.media, - mediaWindows = [], - windowIdx = 0, - waitInterval = 50, - viewOptions = ['encodedText']; + instances = {}; - // Create the `wp.mce` object if necessary. wp.mce = wp.mce || {}; - /** - * wp.mce.View - * - * A Backbone-like View constructor intended for use when rendering a TinyMCE View. The main difference is - * that the TinyMCE View is not tied to a particular DOM node. - * - * @param {Object} [options={}] - */ - wp.mce.View = function( options ) { - options = options || {}; - this.type = options.type; - _.extend( this, _.pick( options, viewOptions ) ); - this.initialize.apply( this, arguments ); - }; - - _.extend( wp.mce.View.prototype, { - initialize: function() {}, - getHtml: function() { - return ''; - }, - loadingPlaceholder: function() { - return '' + - '
' + - '
' + - '
' + - '
'; - }, - render: function( force ) { - if ( force || ! this.rendered() ) { - this.unbind(); - - this.setContent( - '

\u00a0

' + - '
' + - '
' + - ( _.isFunction( views[ this.type ].edit ) ? '
' : '' ) + - '
' + - '
' + - '
' + - ( this.getHtml() || this.loadingPlaceholder() ) + - '
' + - ( this.overlay ? '
' : '' ) + - '
' + - '

\u00a0

', - 'wrap' - ); - - $( this ).trigger( 'ready' ); - - this.rendered( true ); - } - }, - unbind: function() {}, - getEditors: function( callback ) { - var editors = []; - - _.each( tinymce.editors, function( editor ) { - if ( editor.plugins.wpview ) { - if ( callback ) { - callback( editor ); - } - - editors.push( editor ); - } - }, this ); - - return editors; - }, - getNodes: function( callback ) { - var nodes = [], - self = this; - - this.getEditors( function( editor ) { - $( editor.getBody() ) - .find( '[data-wpview-text="' + self.encodedText + '"]' ) - .each( function ( i, node ) { - if ( callback ) { - callback( editor, node, $( node ).find( '.wpview-content' ).get( 0 ) ); - } - - nodes.push( node ); - } ); - } ); - - return nodes; - }, - setContent: function( html, option ) { - this.getNodes( function ( editor, node, content ) { - var el = ( option === 'wrap' || option === 'replace' ) ? node : content, - insert = html; - - if ( _.isString( insert ) ) { - insert = editor.dom.createFragment( insert ); - } - - if ( option === 'replace' ) { - editor.dom.replace( insert, el ); - } else { - el.innerHTML = ''; - el.appendChild( insert ); - } - } ); - }, - /* jshint scripturl: true */ - setIframes: function ( head, body ) { - var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver, - importStyles = this.type === 'video' || this.type === 'audio' || this.type === 'playlist'; - - if ( head || body.indexOf( ' Visual. - setTimeout( function() { - iframe = dom.add( content, 'iframe', { - src: tinymce.Env.ie ? 'javascript:""' : '', - frameBorder: '0', - allowTransparency: 'true', - scrolling: 'no', - 'class': 'wpview-sandbox', - style: { - width: '100%', - display: 'block' - } - } ); - - iframeDoc = iframe.contentWindow.document; - - iframeDoc.open(); - iframeDoc.write( - '' + - '' + - '' + - '' + - head + - styles + - '' + - '' + - '' + - body + - '' + - '' - ); - iframeDoc.close(); - - resize = function() { - var $iframe, iframeDocHeight; - - // Make sure the iframe still exists. - if ( iframe.contentWindow ) { - $iframe = $( iframe ); - iframeDocHeight = $( iframeDoc.body ).height(); - - if ( $iframe.height() !== iframeDocHeight ) { - $iframe.height( iframeDocHeight ); - editor.nodeChanged(); - } - } - }; - - if ( MutationObserver ) { - new MutationObserver( _.debounce( function() { - resize(); - }, 100 ) ) - .observe( iframeDoc.body, { - attributes: true, - childList: true, - subtree: true - } ); - } else { - for ( i = 1; i < 6; i++ ) { - setTimeout( resize, i * 700 ); - } - } - - if ( importStyles ) { - editor.on( 'wp-body-class-change', function() { - iframeDoc.body.className = editor.getBody().className; - }); - } - }, waitInterval ); - }); - } else { - this.setContent( body ); - } - }, - setError: function( message, dashicon ) { - this.setContent( - '
' + - '
' + - '

' + message + '

' + - '
' - ); - }, - rendered: function( value ) { - var notRendered; - - this.getNodes( function( editor, node ) { - if ( value != null ) { - $( node ).data( 'rendered', value === true ); - } else { - notRendered = notRendered || ! $( node ).data( 'rendered' ); - } - } ); - - return ! notRendered; - } - } ); - - // take advantage of the Backbone extend method - wp.mce.View.extend = Backbone.View.extend; - /** * wp.mce.views * @@ -283,67 +42,36 @@ window.wp = window.wp || {}; wp.mce.views = { /** - * wp.mce.views.register( type, view ) - * - * Registers a new TinyMCE view. - * - * @param type - * @param constructor + * Registers a new view type. * + * @param {String} type The view type. + * @param {Object} extend An object to extend wp.mce.View.prototype with. */ - register: function( type, constructor ) { - var defaultConstructor = { - type: type, - View: {}, - toView: function( content ) { - var match = wp.shortcode.next( this.type, content ); - - if ( ! match ) { - return; - } - - return { - index: match.index, - content: match.content, - options: { - shortcode: match.shortcode - } - }; - } - }; - - constructor = _.defaults( constructor, defaultConstructor ); - constructor.View = wp.mce.View.extend( constructor.View ); - - views[ type ] = constructor; + register: function( type, extend ) { + views[ type ] = wp.mce.View.extend( _.extend( extend, { type: type } ) ); }, /** - * wp.mce.views.get( id ) + * Unregisters a view type. * - * Returns a TinyMCE view constructor. - * - * @param type - */ - get: function( type ) { - return views[ type ]; - }, - - /** - * wp.mce.views.unregister( type ) - * - * Unregisters a TinyMCE view. - * - * @param type + * @param {String} type The view type. */ unregister: function( type ) { delete views[ type ]; }, /** - * wp.mce.views.unbind( editor ) + * Returns the settings of a view type. * - * The editor DOM is being rebuilt, run cleanup. + * @param {String} type The view type. + */ + get: function( type ) { + return views[ type ]; + }, + + /** + * Unbinds all view nodes. + * Runs before removing all view nodes from the DOM. */ unbind: function() { _.each( instances, function( instance ) { @@ -352,18 +80,18 @@ window.wp = window.wp || {}; }, /** - * toViews( content ) - * Scans a `content` string for each view's pattern, replacing any - * matches with wrapper elements, and creates a new instance for - * every match, which triggers the related data to be fetched. + * Scans a given string for each view's pattern, + * replacing any matches with markers, + * and creates a new instance for every match. * - * @param content + * @param {String} content The string to scan. */ - toViews: function( content ) { + setMarkers: function( content ) { var pieces = [ { content: content } ], + self = this, current; - _.each( views, function( view, viewType ) { + _.each( views, function( view, type ) { current = pieces.slice(); pieces = []; @@ -379,110 +107,72 @@ window.wp = window.wp || {}; // Iterate through the string progressively matching views // and slicing the string as we go. - while ( remaining && (result = view.toView( remaining )) ) { + while ( remaining && ( result = view.prototype.match( remaining ) ) ) { // Any text before the match becomes an unprocessed piece. if ( result.index ) { - pieces.push({ content: remaining.substring( 0, result.index ) }); + pieces.push( { content: remaining.substring( 0, result.index ) } ); } + self.createInstance( type, result.content, result.options ); + // Add the processed piece for the match. - pieces.push({ - content: wp.mce.views.toView( viewType, result.content, result.options ), + pieces.push( { + content: '

' + result.content + '

', processed: true - }); + } ); // Update the remaining content. remaining = remaining.slice( result.index + result.content.length ); } - // There are no additional matches. If any content remains, - // add it as an unprocessed piece. + // There are no additional matches. + // If any content remains, add it as an unprocessed piece. if ( remaining ) { - pieces.push({ content: remaining }); + pieces.push( { content: remaining } ); } - }); - }); + } ); + } ); - return _.pluck( pieces, 'content' ).join(''); + return _.pluck( pieces, 'content' ).join( '' ); }, /** - * Create a placeholder for a particular view type - * - * @param viewType - * @param text - * @param options + * Create a view instance. * + * @param {String} type The view type. + * @param {String} text The textual representation of the view. + * @param {Object} options Options. */ - toView: function( viewType, text, options ) { - var view = wp.mce.views.get( viewType ), - encodedText = window.encodeURIComponent( text ), - instance, viewOptions; + createInstance: function( type, text, options ) { + var View = this.get( type ), + encodedText = encodeURIComponent( text ), + instance = this.getInstance( encodedText ); - - if ( ! view ) { - return text; + if ( instance ) { + return instance; } - if ( ! wp.mce.views.getInstance( encodedText ) ) { - viewOptions = options; - viewOptions.type = viewType; - viewOptions.encodedText = encodedText; - instance = new view.View( viewOptions ); - instances[ encodedText ] = instance; - } + options = _.extend( options || {}, { + text: text, + encodedText: encodedText + } ); - return wp.html.string({ - tag: 'div', - - attrs: { - 'class': 'wpview-wrap', - 'data-wpview-text': encodedText, - 'data-wpview-type': viewType - }, - - content: '\u00a0' - }); + return instances[ encodedText ] = new View( options ); }, /** - * Refresh views after an update is made + * Get a view instance. * - * @param view {object} being refreshed - * @param text {string} textual representation of the view - * @param force {Boolean} whether to force rendering + * @param {String} text The textual representation of the view. */ - refreshView: function( view, text, force ) { - var encodedText = window.encodeURIComponent( text ), - viewOptions, - result, instance; - - instance = wp.mce.views.getInstance( encodedText ); - - if ( ! instance ) { - result = view.toView( text ); - viewOptions = result.options; - viewOptions.type = view.type; - viewOptions.encodedText = encodedText; - instance = new view.View( viewOptions ); - instances[ encodedText ] = instance; - } - - instance.render( force ); - }, - - getInstance: function( encodedText ) { - return instances[ encodedText ]; + getInstance: function( text ) { + return instances[ encodeURIComponent( text ) ]; }, /** - * render( scope ) + * Renders all view nodes that are not yet rendered. * - * Renders any view instances inside a DOM node `scope`. - * - * View instances are detected by the presence of wrapper elements. - * To generate wrapper elements, pass your content through - * `wp.mce.view.toViews( content )`. + * @param {Boolean} force Rerender all view nodes. */ render: function( force ) { _.each( instances, function( instance ) { @@ -490,408 +180,645 @@ window.wp = window.wp || {}; } ); }, - edit: function( node ) { - var viewType = $( node ).data('wpview-type'), - view = wp.mce.views.get( viewType ); + /** + * Update the text of a given view node. + * + * @param {String} text The new text. + * @param {tinymce.Editor} editor The TinyMCE editor instance the view node is in. + * @param {HTMLElement} node The view node to update. + */ + update: function( text, editor, node ) { + var oldText = decodeURIComponent( $( node ).data( 'wpview-text' ) ), + instance = this.getInstance( oldText ); - if ( view ) { - view.edit( node ); - } - } - }; - - wp.mce.views.register( 'gallery', { - View: { - template: media.template( 'editor-gallery' ), - - // The fallback post ID to use as a parent for galleries that don't - // specify the `ids` or `include` parameters. - // - // Uses the hidden input on the edit posts page by default. - postID: $('#post_ID').val(), - - initialize: function( options ) { - this.shortcode = options.shortcode; - this.fetch(); - }, - - fetch: function() { - var self = this; - - this.attachments = wp.media.gallery.attachments( this.shortcode, this.postID ); - this.dfd = this.attachments.more().done( function() { - self.render( true ); - } ); - }, - - getHtml: function() { - var attrs = this.shortcode.attrs.named, - attachments = false, - options; - - // Don't render errors while still fetching attachments - if ( this.dfd && 'pending' === this.dfd.state() && ! this.attachments.length ) { - return ''; - } - - if ( this.attachments.length ) { - attachments = this.attachments.toJSON(); - - _.each( attachments, function( attachment ) { - if ( attachment.sizes ) { - if ( attrs.size && attachment.sizes[ attrs.size ] ) { - attachment.thumbnail = attachment.sizes[ attrs.size ]; - } else if ( attachment.sizes.thumbnail ) { - attachment.thumbnail = attachment.sizes.thumbnail; - } else if ( attachment.sizes.full ) { - attachment.thumbnail = attachment.sizes.full; - } - } - } ); - } - - options = { - attachments: attachments, - columns: attrs.columns ? parseInt( attrs.columns, 10 ) : wp.media.galleryDefaults.columns - }; - - return this.template( options ); - } - }, - - 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(); - }); - } - } ); - - /** - * These are base methods that are shared by the audio and video shortcode's MCE controller. - * - * @mixin - */ - wp.mce.av = { - View: { - overlay: true, - - action: 'parse-media-shortcode', - - initialize: function( options ) { - var self = this; - - this.shortcode = options.shortcode; - - _.bindAll( this, 'setIframes', 'setNodes', 'fetch', 'stopPlayers' ); - $( this ).on( 'ready', this.setNodes ); - - $( document ).on( 'media:edit', this.stopPlayers ); - - this.fetch(); - - this.getEditors( function( editor ) { - editor.on( 'hide', function () { - mediaWindows = []; - windowIdx = 0; - self.stopPlayers(); - } ); - }); - }, - - pauseOtherWindows: function ( win ) { - _.each( mediaWindows, function ( mediaWindow ) { - if ( mediaWindow.sandboxId !== win.sandboxId ) { - _.each( mediaWindow.mejs.players, function ( player ) { - player.pause(); - } ); - } - } ); - }, - - iframeLoaded: function (win) { - return _.bind( function () { - var callback; - if ( ! win.mejs || _.isEmpty( win.mejs.players ) ) { - return; - } - - win.sandboxId = windowIdx; - windowIdx++; - mediaWindows.push( win ); - - callback = _.bind( function () { - this.pauseOtherWindows( win ); - }, this ); - - if ( ! _.isEmpty( win.mejs.MediaPluginBridge.pluginMediaElements ) ) { - _.each( win.mejs.MediaPluginBridge.pluginMediaElements, function ( mediaElement ) { - mediaElement.addEventListener( 'play', callback ); - } ); - } - - _.each( win.mejs.players, function ( player ) { - $( player.node ).on( 'play', callback ); - }, this ); - }, this ); - }, - - listenToSandboxes: function () { - _.each( this.getNodes(), function ( node ) { - var win, iframe = $( '.wpview-sandbox', node ).get( 0 ); - if ( iframe && ( win = iframe.contentWindow ) ) { - $( win ).load( _.bind( this.iframeLoaded( win ), this ) ); - } - }, this ); - }, - - deferredListen: function () { - window.setTimeout( _.bind( this.listenToSandboxes, this ), this.getNodes().length * waitInterval ); - }, - - setNodes: function () { - if ( this.parsed ) { - this.setIframes( this.parsed.head, this.parsed.body ); - this.deferredListen(); - } else { - this.fail(); - } - }, - - fetch: function () { - var self = this; - - wp.ajax.send( this.action, { - data: { - post_ID: $( '#post_ID' ).val() || 0, - type: this.shortcode.tag, - shortcode: this.shortcode.string() - } - } ) - .done( function( response ) { - if ( response ) { - self.parsed = response; - self.setIframes( response.head, response.body ); - self.deferredListen(); - } else { - self.fail( true ); - } - } ) - .fail( function( response ) { - self.fail( response || true ); - } ); - }, - - fail: function( error ) { - if ( ! this.error ) { - if ( error ) { - this.error = error; - } else { - return; - } - } - - if ( this.error.message ) { - if ( ( this.error.type === 'not-embeddable' && this.type === 'embed' ) || this.error.type === 'not-ssl' || - this.error.type === 'no-items' ) { - - this.setError( this.error.message, 'admin-media' ); - } else { - this.setContent( '

' + this.original + '

', 'replace' ); - } - } else if ( this.error.statusText ) { - this.setError( this.error.statusText, 'admin-media' ); - } else if ( this.original ) { - this.setContent( '

' + this.original + '

', 'replace' ); - } - }, - - stopPlayers: function( remove ) { - var rem = remove === 'remove'; - - this.getNodes( function( editor, node, content ) { - var p, win, - iframe = $( 'iframe.wpview-sandbox', content ).get(0); - - if ( iframe && ( win = iframe.contentWindow ) && win.mejs ) { - // Sometimes ME.js may show a "Download File" placeholder and player.remove() doesn't exist there. - try { - for ( p in win.mejs.players ) { - win.mejs.players[p].pause(); - - if ( rem ) { - win.mejs.players[p].remove(); - } - } - } catch( er ) {} - } - }); - }, - - unbind: function() { - this.stopPlayers( 'remove' ); + if ( instance ) { + instance.update( text, editor, node ); } }, /** - * Called when a TinyMCE view is clicked for editing. - * - Parses the shortcode out of the element's data attribute - * - Calls the `edit` method on the shortcode model - * - Launches the model window - * - Bind's an `update` callback which updates the element's data attribute - * re-renders the view + * Renders any editing interface based on the view type. * - * @param {HTMLElement} node + * @param {tinymce.Editor} editor The TinyMCE editor instance the view node is in. + * @param {HTMLElement} node The view node to edit. */ - edit: function( node ) { - var media = wp.media[ this.type ], - self = this, - frame, data, callback; + edit: function( editor, node ) { + var text = decodeURIComponent( $( node ).data( 'wpview-text' ) ), + instance = this.getInstance( text ); - $( document ).trigger( 'media:edit' ); - - data = window.decodeURIComponent( $( node ).attr('data-wpview-text') ); - frame = media.edit( data ); - frame.on( 'close', function() { - frame.detach(); - } ); - - callback = function( selection ) { - var shortcode = wp.media[ self.type ].shortcode( selection ).string(); - $( node ).attr( 'data-wpview-text', window.encodeURIComponent( shortcode ) ); - wp.mce.views.refreshView( self, shortcode ); - frame.detach(); - }; - if ( _.isArray( self.state ) ) { - _.each( self.state, function (state) { - frame.state( state ).on( 'update', callback ); + if ( instance && instance.edit ) { + instance.edit( text, function( text ) { + instance.update( text, editor, node ); } ); - } else { - frame.state( self.state ).on( 'update', callback ); } - frame.open(); } }; /** - * TinyMCE handler for the video shortcode + * A Backbone-like View constructor intended for use when rendering a TinyMCE View. + * The main difference is that the TinyMCE View is not tied to a particular DOM node. * - * @mixes wp.mce.av + * @param {Object} Options. */ - wp.mce.views.register( 'video', _.extend( {}, wp.mce.av, { - state: 'video-details' - } ) ); - - /** - * TinyMCE handler for the audio shortcode - * - * @mixes wp.mce.av - */ - wp.mce.views.register( 'audio', _.extend( {}, wp.mce.av, { - state: 'audio-details' - } ) ); - - /** - * TinyMCE handler for the playlist shortcode - * - * @mixes wp.mce.av - */ - wp.mce.views.register( 'playlist', _.extend( {}, wp.mce.av, { - state: [ 'playlist-edit', 'video-playlist-edit' ] - } ) ); - - /** - * TinyMCE handler for the embed shortcode - */ - wp.mce.embedMixin = { - View: _.extend( {}, wp.mce.av.View, { - overlay: true, - action: 'parse-embed', - initialize: function( options ) { - this.content = options.content; - this.original = options.url || options.shortcode.string(); - - if ( options.url ) { - this.shortcode = media.embed.shortcode( { - url: options.url - } ); - } else { - this.shortcode = options.shortcode; - } - - _.bindAll( this, 'setIframes', 'setNodes', 'fetch' ); - $( this ).on( 'ready', this.setNodes ); - - this.fetch(); - } - } ), - edit: function( node ) { - var embed = media.embed, - self = this, - frame, - data, - isURL = 'embedURL' === this.type; - - $( document ).trigger( 'media:edit' ); - - data = window.decodeURIComponent( $( node ).attr('data-wpview-text') ); - frame = embed.edit( data, isURL ); - frame.on( 'close', function() { - frame.detach(); - } ); - frame.state( 'embed' ).props.on( 'change:url', function (model, url) { - if ( ! url ) { - return; - } - frame.state( 'embed' ).metadata = model.toJSON(); - } ); - frame.state( 'embed' ).on( 'select', function() { - var shortcode; - - if ( isURL ) { - shortcode = frame.state( 'embed' ).metadata.url; - } else { - shortcode = embed.shortcode( frame.state( 'embed' ).metadata ).string(); - } - $( node ).attr( 'data-wpview-text', window.encodeURIComponent( shortcode ) ); - wp.mce.views.refreshView( self, shortcode ); - frame.detach(); - } ); - frame.open(); - } + wp.mce.View = function( options ) { + _.extend( this, options ); + this.initialize(); }; - wp.mce.views.register( 'embed', _.extend( {}, wp.mce.embedMixin ) ); + wp.mce.View.extend = Backbone.View.extend; - wp.mce.views.register( 'embedURL', _.extend( {}, wp.mce.embedMixin, { - toView: function( content ) { - var re = /(^|

)(https?:\/\/[^\s"]+?)(<\/p>\s*|$)/gi, - match = re.exec( tinymce.trim( content ) ); + _.extend( wp.mce.View.prototype, { - if ( ! match ) { + /** + * The content. + * + * @type {*} + */ + content: null, + + /** + * Whether or not to display a loader. + * + * @type {Boolean} + */ + loader: true, + + /** + * Runs after the view instance is created. + */ + initialize: function() {}, + + /** + * Retuns the content to render in the view node. + * + * @return {*} + */ + getContent: function() { + return this.content; + }, + + /** + * Renders all view nodes tied to this view instance that are not yet rendered. + * + * @param {Boolean} force Rerender all view nodes tied to this view instance. + */ + render: function( force ) { + // If there's nothing to render an no loader needs to be shown, stop. + if ( ! this.loader && ! this.getContent() ) { return; } - return { - index: match.index + match[1].length, - content: match[2], - options: { - url: match[2] + // We're about to rerender all views of this instance, so unbind rendered views. + force && this.unbind(); + + // Replace any left over markers. + this.replaceMarkers(); + + if ( this.getContent() ) { + this.setContent( this.getContent(), function( editor, node ) { + $( node ).data( 'rendered', true ); + this.bindNodes.apply( this, arguments ); + }, force ? null : false ); + } else { + this.setLoader(); + } + }, + + /** + * Binds a given rendered view node. + * Runs after a view node's content is added to the DOM. + * + * @param {tinymce.Editor} editor The TinyMCE editor instance the view node is in. + * @param {HTMLElement} node The view node. + * @param {HTMLElement} contentNode The view's content node. + */ + bindNodes: function( /* editor, node, contentNode */ ) {}, + + /** + * Unbinds all view nodes tied to this view instance. + * Runs before their content is removed from the DOM. + */ + unbind: function() { + this.getNodes( function() { + this.unbindNodes.apply( this, arguments ); + }, true ); + }, + + /** + * Unbinds a given view node. + * Runs before the view node's content is removed from the DOM. + * + * @param {tinymce.Editor} editor The TinyMCE editor instance the view node is in. + * @param {HTMLElement} node The view node. + * @param {HTMLElement} contentNode The view's content node. + */ + unbindNodes: function( /* editor, node, contentNode */ ) {}, + + /** + * Gets all the TinyMCE editor instances that support views. + * + * @param {Function} callback A callback. + */ + getEditors: function( callback ) { + _.each( tinymce.editors, function( editor ) { + if ( editor.plugins.wpview ) { + callback.call( this, editor ); } - }; + }, this ); + }, + + /** + * Gets all view nodes tied to this view instance. + * + * @param {Function} callback A callback. + * @param {Boolean} rendered Get (un)rendered view nodes. Optional. + */ + getNodes: function( callback, rendered ) { + this.getEditors( function( editor ) { + var self = this; + + $( editor.getBody() ) + .find( '[data-wpview-text="' + self.encodedText + '"]' ) + .filter( function() { + var data; + + if ( rendered == null ) { + return true; + } + + data = $( this ).data( 'rendered' ) === true; + + return rendered ? data : ! data; + } ) + .each( function() { + callback.call( self, editor, this, $( this ).find( '.wpview-content' ).get( 0 ) ); + } ); + } ); + }, + + /** + * Gets all marker nodes tied to this view instance. + * + * @param {Function} callback A callback. + */ + getMarkers: function( callback ) { + this.getEditors( function( editor ) { + var self = this; + + $( editor.getBody() ) + .find( '[data-wpview-marker="' + this.encodedText + '"]' ) + .each( function() { + callback.call( self, editor, this ); + } ); + } ); + }, + + /** + * Replaces all marker nodes tied to this view instance. + */ + replaceMarkers: function() { + this.getMarkers( function( editor, node ) { + if ( $( node ).text() !== this.text ) { + editor.dom.setAttrib( node, 'data-wpview-marker', null ); + return; + } + + editor.dom.replace( + editor.dom.createFragment( + '

' + + '

\u00a0

' + + '
' + + '
' + + ( this.edit ? '
' : '' ) + + '
' + + '
' + + '
' + + '
' + + '

\u00a0

' + + '
' + ), + node + ); + } ); + }, + + /** + * Removes all marker nodes tied to this view instance. + */ + removeMarkers: function() { + this.getMarkers( function( editor, node ) { + editor.dom.setAttrib( node, 'data-wpview-marker', null ); + } ); + }, + + /** + * Sets the content for all view nodes tied to this view instance. + * + * @param {*} content The content to set. + * @param {Function} callback A callback. Optional. + * @param {Boolean} rendered Only set for (un)rendered nodes. Optional. + */ + setContent: function( content, callback, rendered ) { + if ( _.isObject( content ) && content.body.indexOf( ' Visual. + setTimeout( function() { + iframe = dom.add( content, 'iframe', { + /* jshint scripturl: true */ + src: tinymce.Env.ie ? 'javascript:""' : '', + frameBorder: '0', + allowTransparency: 'true', + scrolling: 'no', + 'class': 'wpview-sandbox', + style: { + width: '100%', + display: 'block' + } + } ); + + dom.add( content, 'div', { 'class': 'wpview-overlay' } ); + + iframeDoc = iframe.contentWindow.document; + + iframeDoc.open(); + + iframeDoc.write( + '' + + '' + + '' + + '' + + head + + styles + + '' + + '' + + '' + + body + + '' + + '' + ); + + iframeDoc.close(); + + resize = function() { + var $iframe, iframeDocHeight; + + // Make sure the iframe still exists. + if ( iframe.contentWindow ) { + $iframe = $( iframe ); + iframeDocHeight = $( iframeDoc.body ).height(); + + if ( $iframe.height() !== iframeDocHeight ) { + $iframe.height( iframeDocHeight ); + editor.nodeChanged(); + } + } + }; + + if ( MutationObserver ) { + new MutationObserver( _.debounce( function() { + resize(); + }, 100 ) ) + .observe( iframeDoc.body, { + attributes: true, + childList: true, + subtree: true + } ); + } else { + for ( i = 1; i < 6; i++ ) { + setTimeout( resize, i * 700 ); + } + } + + if ( importStyles ) { + editor.on( 'wp-body-class-change', function() { + iframeDoc.body.className = editor.getBody().className; + } ); + } + }, 50 ); + + callback && callback.apply( this, arguments ); + }, rendered ); + }, + + /** + * Sets a loader for all view nodes tied to this view instance. + */ + setLoader: function() { + this.setContent( + '
' + + '
' + + '
' + + '
' + ); + }, + + /** + * Sets an error for all view nodes tied to this view instance. + * + * @param {String} message The error message to set. + * @param {String} dashicon A dashicon ID (optional). {@link https://developer.wordpress.org/resource/dashicons/} + */ + setError: function( message, dashicon ) { + this.setContent( + '
' + + '
' + + '

' + message + '

' + + '
' + ); + }, + + /** + * Tries to find a text match in a given string. + * + * @param {String} content The string to scan. + * + * @return {Object} + */ + match: function( content ) { + var match = wp.shortcode.next( this.type, content ); + + if ( match ) { + return { + index: match.index, + content: match.content, + options: { + shortcode: match.shortcode + } + }; + } + }, + + /** + * Update the text of a given view node. + * + * @param {String} text The new text. + * @param {tinymce.Editor} editor The TinyMCE editor instance the view node is in. + * @param {HTMLElement} node The view node to update. + */ + update: function( text, editor, node ) { + $( node ).data( 'rendered', false ); + editor.dom.setAttrib( node, 'data-wpview-text', encodeURIComponent( text ) ); + wp.mce.views.createInstance( this.type, text, this.match( text ).options ).render(); } + } ); +} )( window, window.wp, window.jQuery ); + +/* + * The WordPress core TinyMCE views. + * Views for the gallery, audio, video, playlist and embed shortcodes, + * and a view for embeddable URLs. + */ +( function( window, views, $ ) { + var postID = $( '#post_ID' ).val() || 0, + media, gallery, av, embed; + + media = { + state: [], + + edit: function( text, update ) { + var media = wp.media[ this.type ], + frame = media.edit( text ); + + this.stopPlayers && this.stopPlayers(); + + _.each( this.state, function( state ) { + frame.state( state ).on( 'update', function( selection ) { + update( media.shortcode( selection ).string() ); + } ); + } ); + + frame.on( 'close', function() { + frame.detach(); + } ); + } + }; + + gallery = _.extend( {}, media, { + state: [ 'gallery-edit' ], + template: wp.media.template( 'editor-gallery' ), + + initialize: function() { + var attachments = wp.media.gallery.attachments( this.shortcode, postID ), + attrs = this.shortcode.attrs.named, + self = this; + + attachments.more() + .done( function() { + attachments = attachments.toJSON(); + + _.each( attachments, function( attachment ) { + if ( attachment.sizes ) { + if ( attrs.size && attachment.sizes[ attrs.size ] ) { + attachment.thumbnail = attachment.sizes[ attrs.size ]; + } else if ( attachment.sizes.thumbnail ) { + attachment.thumbnail = attachment.sizes.thumbnail; + } else if ( attachment.sizes.full ) { + attachment.thumbnail = attachment.sizes.full; + } + } + } ); + + self.content = self.template( { + attachments: attachments, + columns: attrs.columns ? parseInt( attrs.columns, 10 ) : wp.media.galleryDefaults.columns + } ); + + self.render(); + } ) + .fail( function( jqXHR, textStatus ) { + self.setError( textStatus ); + } ); + } + } ); + + av = _.extend( {}, media, { + action: 'parse-media-shortcode', + + initialize: function() { + var self = this; + + if ( this.url ) { + this.loader = false; + this.shortcode = wp.media.embed.shortcode( { + url: this.url + } ); + } + + wp.ajax.send( this.action, { + data: { + post_ID: postID, + type: this.shortcode.tag, + shortcode: this.shortcode.string() + } + } ) + .done( function( response ) { + self.content = response; + self.render(); + } ) + .fail( function( response ) { + if ( self.type === 'embedURL' ) { + self.removeMarkers(); + } else { + self.setError( response.message || response.statusText, 'admin-media' ); + } + } ); + + this.getEditors( function( editor ) { + editor.on( 'wpview-selected', function() { + self.stopPlayers(); + } ); + } ); + }, + + stopPlayers: function( remove ) { + this.getNodes( function( editor, node, content ) { + var win = $( 'iframe.wpview-sandbox', content ).get( 0 ); + + if ( win && ( win = win.contentWindow ) && win.mejs ) { + _.each( win.mejs.players, function( player ) { + try { + player[ remove ? 'remove' : 'pause' ](); + } catch ( e ) {} + } ); + } + } ); + } + } ); + + embed = _.extend( {}, av, { + action: 'parse-embed', + + edit: function( text, update ) { + var media = wp.media.embed, + isURL = 'embedURL' === this.type, + frame = media.edit( text, isURL ); + + this.stopPlayers(); + + frame.state( 'embed' ).props.on( 'change:url', function( model, url ) { + if ( url ) { + frame.state( 'embed' ).metadata = model.toJSON(); + } + } ); + + frame.state( 'embed' ).on( 'select', function() { + if ( isURL ) { + update( frame.state( 'embed' ).metadata.url ); + } else { + update( media.shortcode( frame.state( 'embed' ).metadata ).string() ); + } + } ); + + frame.on( 'close', function() { + frame.detach(); + } ); + + frame.open(); + } + } ); + + views.register( 'gallery', _.extend( {}, gallery ) ); + + views.register( 'audio', _.extend( {}, av, { + state: [ 'audio-details' ] } ) ); -}(jQuery)); + views.register( 'video', _.extend( {}, av, { + state: [ 'video-details' ] + } ) ); + + views.register( 'playlist', _.extend( {}, av, { + state: [ 'playlist-edit', 'video-playlist-edit' ] + } ) ); + + views.register( 'embed', _.extend( {}, embed ) ); + + views.register( 'embedURL', _.extend( {}, embed, { + match: function( content ) { + var re = /(^|

)(https?:\/\/[^\s"]+?)(<\/p>\s*|$)/gi, + match = re.exec( tinymce.trim( content ) ); + + if ( match ) { + return { + index: match.index + match[1].length, + content: match[2], + options: { + url: match[2] + } + }; + } + } + } ) ); +} )( window, window.wp.mce.views, window.jQuery ); diff --git a/src/wp-includes/js/tinymce/plugins/wpview/plugin.js b/src/wp-includes/js/tinymce/plugins/wpview/plugin.js index 2a9d496df0..2810a52be6 100644 --- a/src/wp-includes/js/tinymce/plugins/wpview/plugin.js +++ b/src/wp-includes/js/tinymce/plugins/wpview/plugin.js @@ -237,7 +237,7 @@ tinymce.PluginManager.add( 'wpview', function( editor ) { return; } - event.content = wp.mce.views.toViews( event.content ); + event.content = wp.mce.views.setMarkers( event.content ); }); // When the editor's content has been updated and the DOM has been @@ -341,7 +341,7 @@ tinymce.PluginManager.add( 'wpview', function( editor ) { editor.focus(); } - wp.mce.views.edit( view ); + wp.mce.views.edit( editor, view ); return false; } else if ( editor.dom.hasClass( event.target, 'remove' ) ) { removeView( view ); diff --git a/src/wp-includes/media-template.php b/src/wp-includes/media-template.php index 86500ff0fd..76b2d32af4 100644 --- a/src/wp-includes/media-template.php +++ b/src/wp-includes/media-template.php @@ -1205,7 +1205,7 @@ function wp_print_media_templates() {