[Summary view] [Print] [Text view]

   1  /* global tinymce */
   2  /**
   3   * WordPress View plugin.
   4   */
   5  
   6  (function() {
   7      var VK = tinymce.VK,
   8          TreeWalker = tinymce.dom.TreeWalker,
   9          selected;
  10  
  11      tinymce.create('tinymce.plugins.wpView', {
  12          init : function( editor ) {
  13              var wpView = this;
  14  
  15              // Check if the `wp.mce` API exists.
  16              if ( typeof wp === 'undefined' || ! wp.mce )
  17                  return;
  18  
  19              editor.onPreInit.add( function( editor ) {
  20                  // Add elements so we can set `contenteditable` to false.
  21                  editor.schema.addValidElements('div[*],span[*]');
  22              });
  23  
  24              // When the editor's content changes, scan the new content for
  25              // matching view patterns, and transform the matches into
  26              // view wrappers. Since the editor's DOM is outdated at this point,
  27              // we'll wait to render the views.
  28              editor.onBeforeSetContent.add( function( editor, o ) {
  29                  if ( ! o.content )
  30                      return;
  31  
  32                  o.content = wp.mce.view.toViews( o.content );
  33              });
  34  
  35              // When the editor's content has been updated and the DOM has been
  36              // processed, render the views in the document.
  37              editor.onSetContent.add( function( editor ) {
  38                  wp.mce.view.render( editor.getDoc() );
  39              });
  40  
  41              editor.onInit.add( function( editor ) {
  42  
  43                  // When a view is selected, ensure content that is being pasted
  44                  // or inserted is added to a text node (instead of the view).
  45                  editor.selection.onBeforeSetContent.add( function( selection ) {
  46                      var view = wpView.getParentView( selection.getNode() ),
  47                          walker, target;
  48  
  49                      // If the selection is not within a view, bail.
  50                      if ( ! view )
  51                          return;
  52  
  53                      // If there are no additional nodes or the next node is a
  54                      // view, create a text node after the current view.
  55                      if ( ! view.nextSibling || wpView.isView( view.nextSibling ) ) {
  56                          target = editor.getDoc().createTextNode('');
  57                          editor.dom.insertAfter( target, view );
  58  
  59                      // Otherwise, find the next text node.
  60                      } else {
  61                          walker = new TreeWalker( view.nextSibling, view.nextSibling );
  62                          target = walker.next();
  63                      }
  64  
  65                      // Select the `target` text node.
  66                      selection.select( target );
  67                      selection.collapse( true );
  68                  });
  69  
  70                  // When the selection's content changes, scan any new content
  71                  // for matching views and immediately render them.
  72                  //
  73                  // Runs on paste and on inserting nodes/html.
  74                  editor.selection.onSetContent.add( function( selection, o ) {
  75                      if ( ! o.context )
  76                          return;
  77  
  78                      var node = selection.getNode();
  79  
  80                      if ( ! node.innerHTML )
  81                          return;
  82  
  83                      node.innerHTML = wp.mce.view.toViews( node.innerHTML );
  84                      wp.mce.view.render( node );
  85                  });
  86              });
  87  
  88              // When the editor's contents are being accessed as a string,
  89              // transform any views back to their text representations.
  90              editor.onPostProcess.add( function( editor, o ) {
  91                  if ( ( ! o.get && ! o.save ) || ! o.content )
  92                      return;
  93  
  94                  o.content = wp.mce.view.toText( o.content );
  95              });
  96  
  97              // Triggers when the selection is changed.
  98              // Add the event handler to the top of the stack.
  99              editor.onNodeChange.addToTop( function( editor, controlManager, node ) {
 100                  var view = wpView.getParentView( node );
 101  
 102                  // Update the selected view.
 103                  if ( view ) {
 104                      wpView.select( view );
 105  
 106                      // Prevent the selection from propagating to other plugins.
 107                      return false;
 108  
 109                  // If we've clicked off of the selected view, deselect it.
 110                  } else {
 111                      wpView.deselect();
 112                  }
 113              });
 114  
 115              editor.onKeyDown.addToTop( function( editor, event ) {
 116                  var keyCode = event.keyCode,
 117                      view, instance;
 118  
 119                  // If a view isn't selected, let the event go on its merry way.
 120                  if ( ! selected )
 121                      return;
 122  
 123                  // If the caret is not within the selected view, deselect the
 124                  // view and bail.
 125                  view = wpView.getParentView( editor.selection.getNode() );
 126                  if ( view !== selected ) {
 127                      wpView.deselect();
 128                      return;
 129                  }
 130  
 131                  // If delete or backspace is pressed, delete the view.
 132                  if ( keyCode === VK.DELETE || keyCode === VK.BACKSPACE ) {
 133                      if ( (instance = wp.mce.view.instance( selected )) ) {
 134                          instance.remove();
 135                          wpView.deselect();
 136                      }
 137                  }
 138  
 139                  // Let keypresses that involve the command or control keys through.
 140                  // Also, let any of the F# keys through.
 141                  if ( event.metaKey || event.ctrlKey || ( keyCode >= 112 && keyCode <= 123 ) )
 142                      return;
 143  
 144                  event.preventDefault();
 145              });
 146          },
 147  
 148          getParentView : function( node ) {
 149              while ( node ) {
 150                  if ( this.isView( node ) )
 151                      return node;
 152  
 153                  node = node.parentNode;
 154              }
 155          },
 156  
 157          isView : function( node ) {
 158              return (/(?:^|\s)wp-view-wrap(?:\s|$)/).test( node.className );
 159          },
 160  
 161          select : function( view ) {
 162              if ( view === selected )
 163                  return;
 164  
 165              this.deselect();
 166              selected = view;
 167              wp.mce.view.select( selected );
 168          },
 169  
 170          deselect : function() {
 171              if ( selected )
 172                  wp.mce.view.deselect( selected );
 173              selected = null;
 174          },
 175  
 176          getInfo : function() {
 177              return {
 178                  longname  : 'WordPress Views',
 179                  author    : 'WordPress',
 180                  authorurl : 'http://wordpress.org',
 181                  infourl   : 'http://wordpress.org',
 182                  version   : '1.0'
 183              };
 184          }
 185      });
 186  
 187      // Register plugin
 188      tinymce.PluginManager.add( 'wpview', tinymce.plugins.wpView );
 189  })();