[Summary view] [Print] [Text view]

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