WordPress.org

Make WordPress Core

Ticket #28195: 28195.6.patch

File 28195.6.patch, 7.3 KB (added by iseulde, 4 years ago)
  • src/wp-includes/js/mce-view.js

     
    88// Ensure the global `wp` object exists.
    99window.wp = window.wp || {};
    1010
    11 (function($){
     11( function( $ ) {
     12        'use strict';
     13
    1214        var views = {},
    1315                instances = {},
    1416                media = wp.media,
     
    637639        /**
    638640         * TinyMCE handler for the embed shortcode
    639641         */
    640         wp.mce.views.register( 'embed', {
    641                 shortcode: 'embed',
    642                 View: _.extend( {}, wp.media.mixin, {
    643                         template: media.template( 'editor-embed' ),
    644                         initialize: function( options ) {
    645                                 this.players = [];
    646                                 this.content = options.content;
    647                                 this.parsed = false;
    648                                 this.shortcode = options.shortcode;
    649                                 _.bindAll( this, 'setHtml', 'setNode', 'fetch' );
    650                                 $( this ).on( 'ready', this.setNode );
    651                         },
    652                         unbind: function() {
    653                                 var self = this;
    654                                 _.each( this.players, function ( player ) {
    655                                         player.pause();
    656                                         self.removePlayer( player );
    657                                 } );
    658                                 this.players = [];
    659                         },
    660                         setNode: function ( e, node ) {
    661                                 this.node = node;
    662                                 if ( this.parsed ) {
    663                                         this.parseMediaShortcodes();
    664                                 } else {
    665                                         this.fetch();
     642        wp.mce.embedView = _.extend( {}, wp.media.mixin, {
     643                template: media.template( 'editor-embed' ),
     644                initialize: function( options ) {
     645                        this.players = [];
     646                        this.content = options.content;
     647                        this.parsed = false;
     648                        this.original = options.url || options.shortcode.string();
     649                        if ( options.url ) {
     650                                this.shortcode = '[embed]' + options.url + '[/embed]';
     651                        } else {
     652                                this.shortcode = options.shortcode.string();
     653                        }
     654                        _.bindAll( this, 'setHtml', 'setNode', 'fetch' );
     655                        $( this ).on( 'ready', this.setNode );
     656                },
     657                unbind: function() {
     658                        var self = this;
     659                        _.each( this.players, function ( player ) {
     660                                player.pause();
     661                                self.removePlayer( player );
     662                        } );
     663                        this.players = [];
     664                },
     665                setNode: function ( e, node ) {
     666                        this.node = node;
     667                        if ( this.parsed ) {
     668                                this.parseMediaShortcodes();
     669                        } else {
     670                                this.fetch();
     671                        }
     672                },
     673                fetch: function () {
     674                        wp.ajax.send( 'parse-embed', {
     675                                data: {
     676                                        post_ID: $( '#post_ID' ).val(),
     677                                        content: this.shortcode
    666678                                }
    667                         },
    668                         fetch: function () {
    669                                 wp.ajax.send( 'parse-embed', {
    670                                         data: {
    671                                                 post_ID: $( '#post_ID' ).val(),
    672                                                 content: this.shortcode.string()
     679                        } ).done( this.setHtml );
     680                },
     681                /* jshint scripturl: true */
     682                setHtml: function ( content ) {
     683                        var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver,
     684                                html, $html, scripts, observer, iframe, iframeWin, iframeDoc,
     685                                test = '<a href',
     686                                dom = tinymce.activeEditor.dom;
     687
     688                        this.parsed = content;
     689
     690                        if ( content.substring( 0, test.length ) === test ) {
     691                                dom.replace( dom.create( 'P', null, this.original ), this.node );
     692                        } else {
     693                                html = $.trim( this.getHtml() );
     694                                $html = $( html );
     695                                scripts = $html.find( 'script' ).add( $html.filter( 'script' ) );
     696
     697                                if ( scripts.length ) {
     698                                        iframe = dom.create( 'IFRAME', {
     699                                                src: 'javascript:""',
     700                                                frameBorder: '0',
     701                                                allowTransparency: 'true',
     702                                                style: {
     703                                                        width: '100%',
     704                                                        display: 'block'
     705                                                }
     706                                        } );
     707
     708                                        this.node.insertBefore( dom.createFragment(
     709                                                '<div class="toolbar">' +
     710                                                        '<div class="dashicons dashicons-no-alt remove"></div>' +
     711                                                '</div>' +
     712                                                '<div class="wpview-overlay"></div>'
     713                                        ), this.node.lastChild );
     714                                        this.node.insertBefore( iframe, this.node.lastChild );
     715
     716                                        iframeWin = iframe.contentWindow;
     717                                        iframeDoc = iframeWin.document;
     718
     719                                        iframeWin.resize = function() {
     720                                                window.parent.postMessage( {
     721                                                        height: $( iframeDoc ).height()
     722                                                }, '*' );
     723                                        };
     724
     725                                        window.addEventListener( 'message', function ( event ) {
     726                                                if ( event.data.height ) {
     727                                                        $( iframe ).height( event.data.height );
     728                                                }
     729                                        }, false );
     730
     731                                        iframeDoc.open();
     732                                        iframeDoc.write( '<!DOCTYPE html><html><head><meta charset="utf-8"></head><body onload="resize();">' + html + '</body></html>' );
     733                                        iframeDoc.close();
     734
     735                                        if ( MutationObserver ) {
     736                                                observer = new MutationObserver( _.debounce( function() {
     737                                                        iframeWin.resize();
     738                                                }, 500 ) ).observe( iframeDoc.body, {
     739                                                        attributes: true,
     740                                                        childList: true,
     741                                                        subtree: true
     742                                                } );
    673743                                        }
    674                                 } ).done( this.setHtml );
    675                         },
    676                         setHtml: function ( content ) {
    677                                 this.parsed = content;
    678                                 $( this.node ).html( this.getHtml() );
    679                                 this.parseMediaShortcodes();
    680                         },
    681                         parseMediaShortcodes: function () {
    682                                 var self = this;
    683                                 $( '.wp-audio-shortcode, .wp-video-shortcode', this.node ).each( function ( i, element ) {
    684                                         self.players.push( new MediaElementPlayer( element, self.mejsSettings ) );
    685                                 } );
    686                         },
    687                         getHtml: function() {
    688                                 if ( ! this.parsed ) {
    689                                         return '';
     744                                } else {
     745                                        this.node.insertBefore( dom.createFragment( html ), this.node.lastChild );
    690746                                }
    691                                 return this.template({ content: this.parsed });
    692747                        }
    693                 } ),
     748
     749                        this.parseMediaShortcodes();
     750                },
     751                parseMediaShortcodes: function () {
     752                        var self = this;
     753                        $( '.wp-audio-shortcode, .wp-video-shortcode', this.node ).each( function ( i, element ) {
     754                                self.players.push( new MediaElementPlayer( element, self.mejsSettings ) );
     755                        } );
     756                },
     757                getHtml: function() {
     758                        if ( ! this.parsed ) {
     759                                return '';
     760                        }
     761                        return this.template( { content: this.parsed } );
     762                }
     763        } );
     764
     765        wp.mce.views.register( 'embed', {
     766                shortcode: 'embed',
     767                View: wp.mce.embedView,
     768                edit: function() {}
     769        } );
     770
     771        wp.mce.views.register( 'embedURL', {
     772                shortcode: 'embed',
     773                toView: function( content ) {
     774                        var re = /^<p>\s*(https?:\/\/[^\s"]+)\s*<\/p>$/gim,
     775                                match = re.exec( content );
     776
     777                        if ( ! match ) {
     778                                return;
     779                        }
     780
     781                        return {
     782                                index: match.index,
     783                                content: match[0],
     784                                options: {
     785                                        url: match[1]
     786                                }
     787                        };
     788                },
     789                View: wp.mce.embedView,
    694790                edit: function() {}
    695791        } );
    696792
  • src/wp-includes/js/tinymce/plugins/wpview/plugin.js

     
    158158        // matching view patterns, and transform the matches into
    159159        // view wrappers.
    160160        editor.on( 'BeforeSetContent', function( event ) {
     161                var node;
     162
    161163                if ( ! event.content ) {
    162164                        return;
    163165                }
     
    166168                        wp.mce.views.unbind( editor );
    167169                }
    168170
    169                 event.content = wp.mce.views.toViews( event.content );
    170         });
     171                node = editor.selection.getNode();
    171172
    172         editor.on( 'PastePreProcess', function( event ) {
    173                 if ( event.content.match( /^\s*(https?:\/\/[^\s"]+)\s*$/im ) ) {
    174                         event.content = '[embed]' + event.content + '[/embed]';
     173                // If a url is inserted in an empty paragraph, wrap the url in p tags so it's detected by wp.mce.views.
     174                if ( node.nodeName === 'P' && editor.dom.isEmpty( node ) && event.content.match( /^\s*(https?:\/\/[^\s"]+)\s*$/im ) ) {
     175                        event.content = '<p>' + event.content + '</p>';
    175176                }
    176         } );
     177
     178                event.content = wp.mce.views.toViews( event.content );
     179        });
    177180
    178181        // When the editor's content has been updated and the DOM has been
    179182        // processed, render the views in the document.