wp-includes/js/tinymce/plugins/wpview/plugin.js

   1 /**
   2  * WordPress View plugin.
   3  */
   4 ( function( tinymce, wp ) {
   5         tinymce.PluginManager.add( 'wpview', function( editor ) {
   6                 function noop () {}
   7
   8                 if ( ! wp || ! wp.mce || ! wp.mce.views ) {
   9                         return {
  10                                 getView: noop
  11                         };
  12                 }
  13
  14                 // Check if a node is a view or not.
  15                 function isView( node ) {
  16                         return editor.dom.hasClass( node, 'wpview' );
  17                 }
  18
  19                 // Replace view tags with their text.
  20                 function resetViews( content ) {
  21                         function callback( match, $1 ) {
  22                                 return '<p>' + window.decodeURIComponent( $1 ) + '</p>';
  23                         }
  24
  25                         if ( ! content ) {
  26                                 return content;
  27                         }
  28
  29                         return content
  30                                 .replace( /<div[^>]+data-wpview-text="([^"]+)"[^>]*>(?:\.|[\s\S]+?wpview-end[^>]+>\s*<\/span>\s*)?<\/div>/g, callback )
  31                                 .replace( /<p[^>]+data-wpview-marker="([^"]+)"[^>]*>[\s\S]*?<\/p>/g, callback );
  32                 }
  33
  34                 editor.on( 'init', function() {
  35                         var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
  36
  37                         if ( MutationObserver ) {
  38                                 new MutationObserver( function() {
  39                                         editor.fire( 'wp-body-class-change' );
  40                                 } )
  41                                 .observe( editor.getBody(), {
  42                                         attributes: true,
  43                                         attributeFilter: ['class']
  44                                 } );
  45                         }
  46
  47                         // Pass on body class name changes from the editor to the wpView iframes.
  48                         editor.on( 'wp-body-class-change', function() {
  49                                 var className = editor.getBody().className;
  50
  51                                 editor.$( 'iframe[class="wpview-sandbox"]' ).each( function( i, iframe ) {
  52                                         // Make sure it is a local iframe
  53                                         // jshint scripturl: true
  54                                         if ( ! iframe.src || iframe.src === 'javascript:""' ) {
  55                                                 try {
  56                                                         iframe.contentWindow.document.body.className = className;
  57                                                 } catch( er ) {}
  58                                         }
  59                                 });
  60                         } );
  61                 });
  62
  63                 // Scan new content for matching view patterns and replace them with markers.
  64                 editor.on( 'beforesetcontent', function( event ) {
  65                         var node;
  66
  67                         if ( ! event.selection ) {
  68                                 wp.mce.views.unbind();
  69                         }
  70
  71                         if ( ! event.content ) {
  72                                 return;
  73                         }
  74
  75                         if ( ! event.load ) {
  76                                 node = editor.selection.getNode();
  77
  78                                 if ( node && node !== editor.getBody() && /^\s*https?:\/\/\S+\s*$/i.test( event.content ) ) {
  79                                         // When a url is pasted or inserted, only try to embed it when it is in an empty paragrapgh.
  80                                         node = editor.dom.getParent( node, 'p' );
  81
  82                                         if ( node && /^[\s\uFEFF\u00A0]*$/.test( editor.$( node ).text() || '' ) ) {
  83                                                 // Make sure there are no empty inline elements in the <p>
  84                                                 node.innerHTML = '';
  85                                         } else {
  86                                                 return;
  87                                         }
  88                                 }
  89                         }
  90
  91                         event.content = wp.mce.views.setMarkers( event.content );
  92                 } );
  93
  94                 // Replace any new markers nodes with views.
  95                 editor.on( 'setcontent', function( event ) {
  96                         if ( event.load && ! event.initial && editor.quirks.refreshContentEditable ) {
  97                                 // Make sure there is a selection in Gecko browsers.
  98                                 // Or it will refresh the content internally which resets the iframes.
  99                                 editor.quirks.refreshContentEditable();
 100                         }
 101
 102                         wp.mce.views.render();
 103                 } );
 104
 105                 // Empty view nodes for easier processing.
 106                 editor.on( 'preprocess hide', function( event ) {
 107                         editor.$( 'div[data-wpview-text], p[data-wpview-marker]', event.node ).each( function( i, node ) {
 108                                 node.innerHTML = '.';
 109                         } );
 110                 }, true );
 111
 112                 // Replace views with their text.
 113                 editor.on( 'postprocess', function( event ) {
 114                         event.content = resetViews( event.content );
 115                 } );
 116
 117                 // Replace views with their text inside undo levels.
 118                 // This also prevents that new levels are added when there are changes inside the views.
 119                 editor.on( 'beforeaddundo', function( event ) {
 120                         event.level.content = resetViews( event.level.content );
 121                 } );
 122
 123                 // Make sure views are copied as their text.
 124                 editor.on( 'drop objectselected', function( event ) {
 125                         if ( isView( event.targetClone ) ) {
 126                                 event.targetClone = editor.getDoc().createTextNode(
 127                                         window.decodeURIComponent( editor.dom.getAttrib( event.targetClone, 'data-wpview-text' ) )
 128                                 );
 129                         }
 130                 } );
 131
 132                 // Clean up URLs for easier processing.
 133                 editor.on( 'pastepreprocess', function( event ) {
 134                         var content = event.content;
 135
 136                         if ( content ) {
 137                                 content = tinymce.trim( content.replace( /<[^>]+>/g, '' ) );
 138
 139                                 if ( /^https?:\/\/\S+$/i.test( content ) ) {
 140                                         event.content = content;
 141                                 }
 142                         }
 143                 } );
 144
 145                 // Show the view type in the element path.
 146                 editor.on( 'resolvename', function( event ) {
 147                         if ( isView( event.target ) ) {
 148                                 event.name = editor.dom.getAttrib( event.target, 'data-wpview-type' ) || 'object';
 149                         }
 150                 } );
 151
 152                 // See `media` plugin.
 153                 editor.on( 'click keyup', function() {
 154                         var node = editor.selection.getNode();
 155
 156                         if ( isView( node ) ) {
 157                                 if ( editor.dom.getAttrib( node, 'data-mce-selected' ) ) {
 158                                         node.setAttribute( 'data-mce-selected', '2' );
 159                                 }
 160                         }
 161                 } );
 162
 163                 editor.addButton( 'wp_view_edit', {
 164                         tooltip: 'Edit ', // trailing space is needed, used for context
 165                         icon: 'dashicon dashicons-edit',
 166                         onclick: function() {
 167                                 var node = editor.selection.getNode();
 168
 169                                 if ( isView( node ) ) {
 170                                         wp.mce.views.edit( editor, node );
 171                                 }
 172                         }
 173                 } );
 174
 175                 editor.addButton( 'wp_view_remove', {
 176                         tooltip: 'Remove',
 177                         icon: 'dashicon dashicons-no',
 178                         onclick: function() {
 179                                 editor.fire( 'cut' );
 180                         }
 181                 } );
 182
 183                 editor.once( 'preinit', function() {
 184                         var toolbar;
 185
 186                         if ( editor.wp && editor.wp._createToolbar ) {
 187                                 toolbar = editor.wp._createToolbar( [
 188                                         'wp_view_edit',
 189                                         'wp_view_remove'
 190                                 ] );
 191
 192                                 editor.on( 'wptoolbar', function( event ) {
 193                                         if ( isView( event.element ) ) {
 194                                                 event.toolbar = toolbar;
 195                                         }
 196                                 } );
 197                         }
 198                 } );
 199
 200                 editor.wp = editor.wp || {};
 201                 editor.wp.getView = noop;
 202                 editor.wp.setViewCursor = noop;
 203
 204                 return {
 205                         getView: noop
 206                 };
 207         } );
 208 } )( window.tinymce, window.wp );