[Summary view] [Print] [Text view]

   1  /* global tinymce */
   2  tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
   3      var toolbar, serializer, touchOnImage, pasteInCaption,
   4          each = tinymce.each,
   5          trim = tinymce.trim,
   6          iOS = tinymce.Env.iOS;
   7  
   8  	function isPlaceholder( node ) {
   9          return !! ( editor.dom.getAttrib( node, 'data-mce-placeholder' ) || editor.dom.getAttrib( node, 'data-mce-object' ) );
  10      }
  11  
  12      editor.addButton( 'wp_img_remove', {
  13          tooltip: 'Remove',
  14          icon: 'dashicon dashicons-no',
  15          onclick: function() {
  16              removeImage( editor.selection.getNode() );
  17          }
  18      } );
  19  
  20      editor.addButton( 'wp_img_edit', {
  21          tooltip: 'Edit|button', // '|button' is not displayed, only used for context.
  22          icon: 'dashicon dashicons-edit',
  23          onclick: function() {
  24              editImage( editor.selection.getNode() );
  25          }
  26      } );
  27  
  28      each( {
  29          alignleft: 'Align left',
  30          aligncenter: 'Align center',
  31          alignright: 'Align right',
  32          alignnone: 'No alignment'
  33      }, function( tooltip, name ) {
  34          var direction = name.slice( 5 );
  35  
  36          editor.addButton( 'wp_img_' + name, {
  37              tooltip: tooltip,
  38              icon: 'dashicon dashicons-align-' + direction,
  39              cmd: 'alignnone' === name ? 'wpAlignNone' : 'Justify' + direction.slice( 0, 1 ).toUpperCase() + direction.slice( 1 ),
  40              onPostRender: function() {
  41                  var self = this;
  42  
  43                  editor.on( 'NodeChange', function( event ) {
  44                      var node;
  45  
  46                      // Don't bother.
  47                      if ( event.element.nodeName !== 'IMG' ) {
  48                          return;
  49                      }
  50  
  51                      node = editor.dom.getParent( event.element, '.wp-caption' ) || event.element;
  52  
  53                      if ( 'alignnone' === name ) {
  54                          self.active( ! /\balign(left|center|right)\b/.test( node.className ) );
  55                      } else {
  56                          self.active( editor.dom.hasClass( node, name ) );
  57                      }
  58                  } );
  59              }
  60          } );
  61      } );
  62  
  63      editor.once( 'preinit', function() {
  64          if ( editor.wp && editor.wp._createToolbar ) {
  65              toolbar = editor.wp._createToolbar( [
  66                  'wp_img_alignleft',
  67                  'wp_img_aligncenter',
  68                  'wp_img_alignright',
  69                  'wp_img_alignnone',
  70                  'wp_img_edit',
  71                  'wp_img_remove'
  72              ] );
  73          }
  74      } );
  75  
  76      editor.on( 'wptoolbar', function( event ) {
  77          if ( event.element.nodeName === 'IMG' && ! isPlaceholder( event.element ) ) {
  78              event.toolbar = toolbar;
  79          }
  80      } );
  81  
  82  	function isNonEditable( node ) {
  83          var parent = editor.$( node ).parents( '[contenteditable]' );
  84          return parent && parent.attr( 'contenteditable' ) === 'false';
  85      }
  86  
  87      // Safari on iOS fails to select images in contentEditoble mode on touch.
  88      // Select them again.
  89      if ( iOS ) {
  90          editor.on( 'init', function() {
  91              editor.on( 'touchstart', function( event ) {
  92                  if ( event.target.nodeName === 'IMG' && ! isNonEditable( event.target ) ) {
  93                      touchOnImage = true;
  94                  }
  95              });
  96  
  97              editor.dom.bind( editor.getDoc(), 'touchmove', function() {
  98                  touchOnImage = false;
  99              });
 100  
 101              editor.on( 'touchend', function( event ) {
 102                  if ( touchOnImage && event.target.nodeName === 'IMG' && ! isNonEditable( event.target ) ) {
 103                      var node = event.target;
 104  
 105                      touchOnImage = false;
 106  
 107                      window.setTimeout( function() {
 108                          editor.selection.select( node );
 109                          editor.nodeChanged();
 110                      }, 100 );
 111                  } else if ( toolbar ) {
 112                      toolbar.hide();
 113                  }
 114              });
 115          });
 116      }
 117  
 118  	function parseShortcode( content ) {
 119          return content.replace( /(?:<p>)?\[(?:wp_)?caption([^\]]+)\]([\s\S]+?)\[\/(?:wp_)?caption\](?:<\/p>)?/g, function( a, b, c ) {
 120              var id, align, classes, caption, img, width;
 121  
 122              id = b.match( /id=['"]([^'"]*)['"] ?/ );
 123              if ( id ) {
 124                  b = b.replace( id[0], '' );
 125              }
 126  
 127              align = b.match( /align=['"]([^'"]*)['"] ?/ );
 128              if ( align ) {
 129                  b = b.replace( align[0], '' );
 130              }
 131  
 132              classes = b.match( /class=['"]([^'"]*)['"] ?/ );
 133              if ( classes ) {
 134                  b = b.replace( classes[0], '' );
 135              }
 136  
 137              width = b.match( /width=['"]([0-9]*)['"] ?/ );
 138              if ( width ) {
 139                  b = b.replace( width[0], '' );
 140              }
 141  
 142              c = trim( c );
 143              img = c.match( /((?:<a [^>]+>)?<img [^>]+>(?:<\/a>)?)([\s\S]*)/i );
 144  
 145              if ( img && img[2] ) {
 146                  caption = trim( img[2] );
 147                  img = trim( img[1] );
 148              } else {
 149                  // Old captions shortcode style.
 150                  caption = trim( b ).replace( /caption=['"]/, '' ).replace( /['"]$/, '' );
 151                  img = c;
 152              }
 153  
 154              id = ( id && id[1] ) ? id[1].replace( /[<>&]+/g,  '' ) : '';
 155              align = ( align && align[1] ) ? align[1] : 'alignnone';
 156              classes = ( classes && classes[1] ) ? ' ' + classes[1].replace( /[<>&]+/g,  '' ) : '';
 157  
 158              if ( ! width && img ) {
 159                  width = img.match( /width=['"]([0-9]*)['"]/ );
 160              }
 161  
 162              if ( width && width[1] ) {
 163                  width = width[1];
 164              }
 165  
 166              if ( ! width || ! caption ) {
 167                  return c;
 168              }
 169  
 170              width = parseInt( width, 10 );
 171              if ( ! editor.getParam( 'wpeditimage_html5_captions' ) ) {
 172                  width += 10;
 173              }
 174  
 175              return '<div class="mceTemp"><dl id="' + id + '" class="wp-caption ' + align + classes + '" style="width: ' + width + 'px">' +
 176                  '<dt class="wp-caption-dt">'+ img +'</dt><dd class="wp-caption-dd">'+ caption +'</dd></dl></div>';
 177          });
 178      }
 179  
 180  	function getShortcode( content ) {
 181          return content.replace( /(?:<div [^>]+mceTemp[^>]+>)?\s*(<dl [^>]+wp-caption[^>]+>[\s\S]+?<\/dl>)\s*(?:<\/div>)?/g, function( all, dl ) {
 182              var out = '';
 183  
 184              if ( dl.indexOf('<img ') === -1 || dl.indexOf('</p>') !== -1 ) {
 185                  // Broken caption. The user managed to drag the image out or type in the wrapper div?
 186                  // Remove the <dl>, <dd> and <dt> and return the remaining text.
 187                  return dl.replace( /<d[ldt]( [^>]+)?>/g, '' ).replace( /<\/d[ldt]>/g, '' );
 188              }
 189  
 190              out = dl.replace( /\s*<dl ([^>]+)>\s*<dt [^>]+>([\s\S]+?)<\/dt>\s*<dd [^>]+>([\s\S]*?)<\/dd>\s*<\/dl>\s*/gi, function( a, b, c, caption ) {
 191                  var id, classes, align, width;
 192  
 193                  width = c.match( /width="([0-9]*)"/ );
 194                  width = ( width && width[1] ) ? width[1] : '';
 195  
 196                  classes = b.match( /class="([^"]*)"/ );
 197                  classes = ( classes && classes[1] ) ? classes[1] : '';
 198                  align = classes.match( /align[a-z]+/i ) || 'alignnone';
 199  
 200                  if ( ! width || ! caption ) {
 201                      if ( 'alignnone' !== align[0] ) {
 202                          c = c.replace( /><img/, ' class="' + align[0] + '"><img' );
 203                      }
 204                      return c;
 205                  }
 206  
 207                  id = b.match( /id="([^"]*)"/ );
 208                  id = ( id && id[1] ) ? id[1] : '';
 209  
 210                  classes = classes.replace( /wp-caption ?|align[a-z]+ ?/gi, '' );
 211  
 212                  if ( classes ) {
 213                      classes = ' class="' + classes + '"';
 214                  }
 215  
 216                  caption = caption.replace( /\r\n|\r/g, '\n' ).replace( /<[a-zA-Z0-9]+( [^<>]+)?>/g, function( a ) {
 217                      // No line breaks inside HTML tags.
 218                      return a.replace( /[\r\n\t]+/, ' ' );
 219                  });
 220  
 221                  // Convert remaining line breaks to <br>.
 222                  caption = caption.replace( /\s*\n\s*/g, '<br />' );
 223  
 224                  return '[caption id="' + id + '" align="' + align + '" width="' + width + '"' + classes + ']' + c + ' ' + caption + '[/caption]';
 225              });
 226  
 227              if ( out.indexOf('[caption') === -1 ) {
 228                  // The caption html seems broken, try to find the image that may be wrapped in a link
 229                  // and may be followed by <p> with the caption text.
 230                  out = dl.replace( /[\s\S]*?((?:<a [^>]+>)?<img [^>]+>(?:<\/a>)?)(<p>[\s\S]*<\/p>)?[\s\S]*/gi, '<p>$1</p>$2' );
 231              }
 232  
 233              return out;
 234          });
 235      }
 236  
 237  	function extractImageData( imageNode ) {
 238          var classes, extraClasses, metadata, captionBlock, caption, link, width, height,
 239              captionClassName = [],
 240              dom = editor.dom,
 241              isIntRegExp = /^\d+$/;
 242  
 243          // Default attributes.
 244          metadata = {
 245              attachment_id: false,
 246              size: 'custom',
 247              caption: '',
 248              align: 'none',
 249              extraClasses: '',
 250              link: false,
 251              linkUrl: '',
 252              linkClassName: '',
 253              linkTargetBlank: false,
 254              linkRel: '',
 255              title: ''
 256          };
 257  
 258          metadata.url = dom.getAttrib( imageNode, 'src' );
 259          metadata.alt = dom.getAttrib( imageNode, 'alt' );
 260          metadata.title = dom.getAttrib( imageNode, 'title' );
 261  
 262          width = dom.getAttrib( imageNode, 'width' );
 263          height = dom.getAttrib( imageNode, 'height' );
 264  
 265          if ( ! isIntRegExp.test( width ) || parseInt( width, 10 ) < 1 ) {
 266              width = imageNode.naturalWidth || imageNode.width;
 267          }
 268  
 269          if ( ! isIntRegExp.test( height ) || parseInt( height, 10 ) < 1 ) {
 270              height = imageNode.naturalHeight || imageNode.height;
 271          }
 272  
 273          metadata.customWidth = metadata.width = width;
 274          metadata.customHeight = metadata.height = height;
 275  
 276          classes = tinymce.explode( imageNode.className, ' ' );
 277          extraClasses = [];
 278  
 279          tinymce.each( classes, function( name ) {
 280  
 281              if ( /^wp-image/.test( name ) ) {
 282                  metadata.attachment_id = parseInt( name.replace( 'wp-image-', '' ), 10 );
 283              } else if ( /^align/.test( name ) ) {
 284                  metadata.align = name.replace( 'align', '' );
 285              } else if ( /^size/.test( name ) ) {
 286                  metadata.size = name.replace( 'size-', '' );
 287              } else {
 288                  extraClasses.push( name );
 289              }
 290  
 291          } );
 292  
 293          metadata.extraClasses = extraClasses.join( ' ' );
 294  
 295          // Extract caption.
 296          captionBlock = dom.getParents( imageNode, '.wp-caption' );
 297  
 298          if ( captionBlock.length ) {
 299              captionBlock = captionBlock[0];
 300  
 301              classes = captionBlock.className.split( ' ' );
 302              tinymce.each( classes, function( name ) {
 303                  if ( /^align/.test( name ) ) {
 304                      metadata.align = name.replace( 'align', '' );
 305                  } else if ( name && name !== 'wp-caption' ) {
 306                      captionClassName.push( name );
 307                  }
 308              } );
 309  
 310              metadata.captionClassName = captionClassName.join( ' ' );
 311  
 312              caption = dom.select( 'dd.wp-caption-dd', captionBlock );
 313              if ( caption.length ) {
 314                  caption = caption[0];
 315  
 316                  metadata.caption = editor.serializer.serialize( caption )
 317                      .replace( /<br[^>]*>/g, '$&\n' ).replace( /^<p>/, '' ).replace( /<\/p>$/, '' );
 318              }
 319          }
 320  
 321          // Extract linkTo.
 322          if ( imageNode.parentNode && imageNode.parentNode.nodeName === 'A' ) {
 323              link = imageNode.parentNode;
 324              metadata.linkUrl = dom.getAttrib( link, 'href' );
 325              metadata.linkTargetBlank = dom.getAttrib( link, 'target' ) === '_blank' ? true : false;
 326              metadata.linkRel = dom.getAttrib( link, 'rel' );
 327              metadata.linkClassName = link.className;
 328          }
 329  
 330          return metadata;
 331      }
 332  
 333  	function hasTextContent( node ) {
 334          return node && !! ( node.textContent || node.innerText ).replace( /\ufeff/g, '' );
 335      }
 336  
 337      // Verify HTML in captions.
 338  	function verifyHTML( caption ) {
 339          if ( ! caption || ( caption.indexOf( '<' ) === -1 && caption.indexOf( '>' ) === -1 ) ) {
 340              return caption;
 341          }
 342  
 343          if ( ! serializer ) {
 344              serializer = new tinymce.html.Serializer( {}, editor.schema );
 345          }
 346  
 347          return serializer.serialize( editor.parser.parse( caption, { forced_root_block: false } ) );
 348      }
 349  
 350  	function updateImage( $imageNode, imageData ) {
 351          var classes, className, node, html, parent, wrap, linkNode, imageNode,
 352              captionNode, dd, dl, id, attrs, linkAttrs, width, height, align,
 353              $imageNode, srcset, src,
 354              dom = editor.dom;
 355  
 356          if ( ! $imageNode || ! $imageNode.length ) {
 357              return;
 358          }
 359  
 360          imageNode = $imageNode[0];
 361          classes = tinymce.explode( imageData.extraClasses, ' ' );
 362  
 363          if ( ! classes ) {
 364              classes = [];
 365          }
 366  
 367          if ( ! imageData.caption ) {
 368              classes.push( 'align' + imageData.align );
 369          }
 370  
 371          if ( imageData.attachment_id ) {
 372              classes.push( 'wp-image-' + imageData.attachment_id );
 373              if ( imageData.size && imageData.size !== 'custom' ) {
 374                  classes.push( 'size-' + imageData.size );
 375              }
 376          }
 377  
 378          width = imageData.width;
 379          height = imageData.height;
 380  
 381          if ( imageData.size === 'custom' ) {
 382              width = imageData.customWidth;
 383              height = imageData.customHeight;
 384          }
 385  
 386          attrs = {
 387              src: imageData.url,
 388              width: width || null,
 389              height: height || null,
 390              title: imageData.title || null,
 391              'class': classes.join( ' ' ) || null
 392          };
 393  
 394          dom.setAttribs( imageNode, attrs );
 395  
 396          // Preserve empty alt attributes.
 397          $imageNode.attr( 'alt', imageData.alt || '' );
 398  
 399          linkAttrs = {
 400              href: imageData.linkUrl,
 401              rel: imageData.linkRel || null,
 402              target: imageData.linkTargetBlank ? '_blank': null,
 403              'class': imageData.linkClassName || null
 404          };
 405  
 406          if ( imageNode.parentNode && imageNode.parentNode.nodeName === 'A' && ! hasTextContent( imageNode.parentNode ) ) {
 407              // Update or remove an existing link wrapped around the image.
 408              if ( imageData.linkUrl ) {
 409                  dom.setAttribs( imageNode.parentNode, linkAttrs );
 410              } else {
 411                  dom.remove( imageNode.parentNode, true );
 412              }
 413          } else if ( imageData.linkUrl ) {
 414              if ( linkNode = dom.getParent( imageNode, 'a' ) ) {
 415                  // The image is inside a link together with other nodes,
 416                  // or is nested in another node, move it out.
 417                  dom.insertAfter( imageNode, linkNode );
 418              }
 419  
 420              // Add link wrapped around the image.
 421              linkNode = dom.create( 'a', linkAttrs );
 422              imageNode.parentNode.insertBefore( linkNode, imageNode );
 423              linkNode.appendChild( imageNode );
 424          }
 425  
 426          captionNode = editor.dom.getParent( imageNode, '.mceTemp' );
 427  
 428          if ( imageNode.parentNode && imageNode.parentNode.nodeName === 'A' && ! hasTextContent( imageNode.parentNode ) ) {
 429              node = imageNode.parentNode;
 430          } else {
 431              node = imageNode;
 432          }
 433  
 434          if ( imageData.caption ) {
 435              imageData.caption = verifyHTML( imageData.caption );
 436  
 437              id = imageData.attachment_id ? 'attachment_' + imageData.attachment_id : null;
 438              align = 'align' + ( imageData.align || 'none' );
 439              className = 'wp-caption ' + align;
 440  
 441              if ( imageData.captionClassName ) {
 442                  className += ' ' + imageData.captionClassName.replace( /[<>&]+/g,  '' );
 443              }
 444  
 445              if ( ! editor.getParam( 'wpeditimage_html5_captions' ) ) {
 446                  width = parseInt( width, 10 );
 447                  width += 10;
 448              }
 449  
 450              if ( captionNode ) {
 451                  dl = dom.select( 'dl.wp-caption', captionNode );
 452  
 453                  if ( dl.length ) {
 454                      dom.setAttribs( dl, {
 455                          id: id,
 456                          'class': className,
 457                          style: 'width: ' + width + 'px'
 458                      } );
 459                  }
 460  
 461                  dd = dom.select( '.wp-caption-dd', captionNode );
 462  
 463                  if ( dd.length ) {
 464                      dom.setHTML( dd[0], imageData.caption );
 465                  }
 466  
 467              } else {
 468                  id = id ? 'id="'+ id +'" ' : '';
 469  
 470                  // Should create a new function for generating the caption markup.
 471                  html =  '<dl ' + id + 'class="' + className +'" style="width: '+ width +'px">' +
 472                      '<dt class="wp-caption-dt"></dt><dd class="wp-caption-dd">'+ imageData.caption +'</dd></dl>';
 473  
 474                  wrap = dom.create( 'div', { 'class': 'mceTemp' }, html );
 475  
 476                  if ( parent = dom.getParent( node, 'p' ) ) {
 477                      parent.parentNode.insertBefore( wrap, parent );
 478                  } else {
 479                      node.parentNode.insertBefore( wrap, node );
 480                  }
 481  
 482                  editor.$( wrap ).find( 'dt.wp-caption-dt' ).append( node );
 483  
 484                  if ( parent && dom.isEmpty( parent ) ) {
 485                      dom.remove( parent );
 486                  }
 487              }
 488          } else if ( captionNode ) {
 489              // Remove the caption wrapper and place the image in new paragraph.
 490              parent = dom.create( 'p' );
 491              captionNode.parentNode.insertBefore( parent, captionNode );
 492              parent.appendChild( node );
 493              dom.remove( captionNode );
 494          }
 495  
 496          $imageNode = editor.$( imageNode );
 497          srcset = $imageNode.attr( 'srcset' );
 498          src = $imageNode.attr( 'src' );
 499  
 500          // Remove srcset and sizes if the image file was edited or the image was replaced.
 501          if ( srcset && src ) {
 502              src = src.replace( /[?#].*/, '' );
 503  
 504              if ( srcset.indexOf( src ) === -1 ) {
 505                  $imageNode.attr( 'srcset', null ).attr( 'sizes', null );
 506              }
 507          }
 508  
 509          if ( wp.media.events ) {
 510              wp.media.events.trigger( 'editor:image-update', {
 511                  editor: editor,
 512                  metadata: imageData,
 513                  image: imageNode
 514              } );
 515          }
 516  
 517          editor.nodeChanged();
 518      }
 519  
 520  	function editImage( img ) {
 521          var frame, callback, metadata, imageNode;
 522  
 523          if ( typeof wp === 'undefined' || ! wp.media ) {
 524              editor.execCommand( 'mceImage' );
 525              return;
 526          }
 527  
 528          metadata = extractImageData( img );
 529  
 530          // Mark the image node so we can select it later.
 531          editor.$( img ).attr( 'data-wp-editing', 1 );
 532  
 533          // Manipulate the metadata by reference that is fed into the PostImage model used in the media modal.
 534          wp.media.events.trigger( 'editor:image-edit', {
 535              editor: editor,
 536              metadata: metadata,
 537              image: img
 538          } );
 539  
 540          frame = wp.media({
 541              frame: 'image',
 542              state: 'image-details',
 543              metadata: metadata
 544          } );
 545  
 546          wp.media.events.trigger( 'editor:frame-create', { frame: frame } );
 547  
 548          callback = function( imageData ) {
 549              editor.undoManager.transact( function() {
 550                  updateImage( imageNode, imageData );
 551              } );
 552              frame.detach();
 553          };
 554  
 555          frame.state('image-details').on( 'update', callback );
 556          frame.state('replace-image').on( 'replace', callback );
 557          frame.on( 'close', function() {
 558              editor.focus();
 559              frame.detach();
 560  
 561              /*
 562               * `close` fires first...
 563               * To be able to update the image node, we need to find it here,
 564               * and use it in the callback.
 565               */
 566              imageNode = editor.$( 'img[data-wp-editing]' )
 567              imageNode.removeAttr( 'data-wp-editing' );
 568          });
 569  
 570          frame.open();
 571      }
 572  
 573  	function removeImage( node ) {
 574          var wrap = editor.dom.getParent( node, 'div.mceTemp' );
 575  
 576          if ( ! wrap && node.nodeName === 'IMG' ) {
 577              wrap = editor.dom.getParent( node, 'a' );
 578          }
 579  
 580          if ( wrap ) {
 581              if ( wrap.nextSibling ) {
 582                  editor.selection.select( wrap.nextSibling );
 583              } else if ( wrap.previousSibling ) {
 584                  editor.selection.select( wrap.previousSibling );
 585              } else {
 586                  editor.selection.select( wrap.parentNode );
 587              }
 588  
 589              editor.selection.collapse( true );
 590              editor.dom.remove( wrap );
 591          } else {
 592              editor.dom.remove( node );
 593          }
 594  
 595          editor.nodeChanged();
 596          editor.undoManager.add();
 597      }
 598  
 599      editor.on( 'init', function() {
 600          var dom = editor.dom,
 601              captionClass = editor.getParam( 'wpeditimage_html5_captions' ) ? 'html5-captions' : 'html4-captions';
 602  
 603          dom.addClass( editor.getBody(), captionClass );
 604  
 605          // Prevent IE11 from making dl.wp-caption resizable.
 606          if ( tinymce.Env.ie && tinymce.Env.ie > 10 ) {
 607              // The 'mscontrolselect' event is supported only in IE11+.
 608              dom.bind( editor.getBody(), 'mscontrolselect', function( event ) {
 609                  if ( event.target.nodeName === 'IMG' && dom.getParent( event.target, '.wp-caption' ) ) {
 610                      // Hide the thick border with resize handles around dl.wp-caption.
 611                      editor.getBody().focus(); // :(
 612                  } else if ( event.target.nodeName === 'DL' && dom.hasClass( event.target, 'wp-caption' ) ) {
 613                      // Trigger the thick border with resize handles...
 614                      // This will make the caption text editable.
 615                      event.target.focus();
 616                  }
 617              });
 618          }
 619      });
 620  
 621      editor.on( 'ObjectResized', function( event ) {
 622          var node = event.target;
 623  
 624          if ( node.nodeName === 'IMG' ) {
 625              editor.undoManager.transact( function() {
 626                  var parent, width,
 627                      dom = editor.dom;
 628  
 629                  node.className = node.className.replace( /\bsize-[^ ]+/, '' );
 630  
 631                  if ( parent = dom.getParent( node, '.wp-caption' ) ) {
 632                      width = event.width || dom.getAttrib( node, 'width' );
 633  
 634                      if ( width ) {
 635                          width = parseInt( width, 10 );
 636  
 637                          if ( ! editor.getParam( 'wpeditimage_html5_captions' ) ) {
 638                              width += 10;
 639                          }
 640  
 641                          dom.setStyle( parent, 'width', width + 'px' );
 642                      }
 643                  }
 644              });
 645          }
 646      });
 647  
 648      editor.on( 'pastePostProcess', function( event ) {
 649          // Pasting in a caption node.
 650          if ( editor.dom.getParent( editor.selection.getNode(), 'dd.wp-caption-dd' ) ) {
 651              // Remove "non-block" elements that should not be in captions.
 652              editor.$( 'img, audio, video, object, embed, iframe, script, style', event.node ).remove();
 653  
 654              editor.$( '*', event.node ).each( function( i, node ) {
 655                  if ( editor.dom.isBlock( node ) ) {
 656                      // Insert <br> where the blocks used to be. Makes it look better after pasting in the caption.
 657                      if ( tinymce.trim( node.textContent || node.innerText ) ) {
 658                          editor.dom.insertAfter( editor.dom.create( 'br' ), node );
 659                          editor.dom.remove( node, true );
 660                      } else {
 661                          editor.dom.remove( node );
 662                      }
 663                  }
 664              });
 665  
 666              // Trim <br> tags.
 667              editor.$( 'br',  event.node ).each( function( i, node ) {
 668                  if ( ! node.nextSibling || node.nextSibling.nodeName === 'BR' ||
 669                      ! node.previousSibling || node.previousSibling.nodeName === 'BR' ) {
 670  
 671                      editor.dom.remove( node );
 672                  }
 673              } );
 674  
 675              // Pasted HTML is cleaned up for inserting in the caption.
 676              pasteInCaption = true;
 677          }
 678      });
 679  
 680      editor.on( 'BeforeExecCommand', function( event ) {
 681          var node, p, DL, align, replacement, captionParent,
 682              cmd = event.command,
 683              dom = editor.dom;
 684  
 685          if ( cmd === 'mceInsertContent' || cmd === 'Indent' || cmd === 'Outdent' ) {
 686              node = editor.selection.getNode();
 687              captionParent = dom.getParent( node, 'div.mceTemp' );
 688  
 689              if ( captionParent ) {
 690                  if ( cmd === 'mceInsertContent' ) {
 691                      if ( pasteInCaption ) {
 692                          pasteInCaption = false;
 693                          /*
 694                           * We are in the caption element, and in 'paste' context,
 695                           * and the pasted HTML was cleaned up on 'pastePostProcess' above.
 696                           * Let it be pasted in the caption.
 697                           */
 698                          return;
 699                      }
 700  
 701                      /*
 702                       * The paste is somewhere else in the caption DL element.
 703                       * Prevent pasting in there as it will break the caption.
 704                       * Make new paragraph under the caption DL and move the caret there.
 705                       */
 706                      p = dom.create( 'p' );
 707                      dom.insertAfter( p, captionParent );
 708                      editor.selection.setCursorLocation( p, 0 );
 709  
 710                      /*
 711                       * If the image is selected and the user pastes "over" it,
 712                       * replace both the image and the caption elements with the pasted content.
 713                       * This matches the behavior when pasting over non-caption images.
 714                       */
 715                      if ( node.nodeName === 'IMG' ) {
 716                          editor.$( captionParent ).remove();
 717                      }
 718  
 719                      editor.nodeChanged();
 720                  } else {
 721                      // Clicking Indent or Outdent while an image with a caption is selected breaks the caption.
 722                      // See #38313.
 723                      event.preventDefault();
 724                      event.stopImmediatePropagation();
 725                      return false;
 726                  }
 727              }
 728          } else if ( cmd === 'JustifyLeft' || cmd === 'JustifyRight' || cmd === 'JustifyCenter' || cmd === 'wpAlignNone' ) {
 729              node = editor.selection.getNode();
 730              align = 'align' + cmd.slice( 7 ).toLowerCase();
 731              DL = editor.dom.getParent( node, '.wp-caption' );
 732  
 733              if ( node.nodeName !== 'IMG' && ! DL ) {
 734                  return;
 735              }
 736  
 737              node = DL || node;
 738  
 739              if ( editor.dom.hasClass( node, align ) ) {
 740                  replacement = ' alignnone';
 741              } else {
 742                  replacement = ' ' + align;
 743              }
 744  
 745              node.className = trim( node.className.replace( / ?align(left|center|right|none)/g, '' ) + replacement );
 746  
 747              editor.nodeChanged();
 748              event.preventDefault();
 749  
 750              if ( toolbar ) {
 751                  toolbar.reposition();
 752              }
 753  
 754              editor.fire( 'ExecCommand', {
 755                  command: cmd,
 756                  ui: event.ui,
 757                  value: event.value
 758              } );
 759          }
 760      });
 761  
 762      editor.on( 'keydown', function( event ) {
 763          var node, wrap, P, spacer,
 764              selection = editor.selection,
 765              keyCode = event.keyCode,
 766              dom = editor.dom,
 767              VK = tinymce.util.VK;
 768  
 769          if ( keyCode === VK.ENTER ) {
 770              // When pressing Enter inside a caption move the caret to a new parapraph under it.
 771              node = selection.getNode();
 772              wrap = dom.getParent( node, 'div.mceTemp' );
 773  
 774              if ( wrap ) {
 775                  dom.events.cancel( event ); // Doesn't cancel all :(
 776  
 777                  // Remove any extra dt and dd cleated on pressing Enter...
 778                  tinymce.each( dom.select( 'dt, dd', wrap ), function( element ) {
 779                      if ( dom.isEmpty( element ) ) {
 780                          dom.remove( element );
 781                      }
 782                  });
 783  
 784                  spacer = tinymce.Env.ie && tinymce.Env.ie < 11 ? '' : '<br data-mce-bogus="1" />';
 785                  P = dom.create( 'p', null, spacer );
 786  
 787                  if ( node.nodeName === 'DD' ) {
 788                      dom.insertAfter( P, wrap );
 789                  } else {
 790                      wrap.parentNode.insertBefore( P, wrap );
 791                  }
 792  
 793                  editor.nodeChanged();
 794                  selection.setCursorLocation( P, 0 );
 795              }
 796          } else if ( keyCode === VK.DELETE || keyCode === VK.BACKSPACE ) {
 797              node = selection.getNode();
 798  
 799              if ( node.nodeName === 'DIV' && dom.hasClass( node, 'mceTemp' ) ) {
 800                  wrap = node;
 801              } else if ( node.nodeName === 'IMG' || node.nodeName === 'DT' || node.nodeName === 'A' ) {
 802                  wrap = dom.getParent( node, 'div.mceTemp' );
 803              }
 804  
 805              if ( wrap ) {
 806                  dom.events.cancel( event );
 807                  removeImage( node );
 808                  return false;
 809              }
 810          }
 811      });
 812  
 813      /*
 814       * After undo/redo FF seems to set the image height very slowly when it is set to 'auto' in the CSS.
 815       * This causes image.getBoundingClientRect() to return wrong values and the resize handles are shown in wrong places.
 816       * Collapse the selection to remove the resize handles.
 817       */
 818      if ( tinymce.Env.gecko ) {
 819          editor.on( 'undo redo', function() {
 820              if ( editor.selection.getNode().nodeName === 'IMG' ) {
 821                  editor.selection.collapse();
 822              }
 823          });
 824      }
 825  
 826      editor.wpSetImgCaption = function( content ) {
 827          return parseShortcode( content );
 828      };
 829  
 830      editor.wpGetImgCaption = function( content ) {
 831          return getShortcode( content );
 832      };
 833  
 834      editor.on( 'beforeGetContent', function( event ) {
 835          if ( event.format !== 'raw' ) {
 836              editor.$( 'img[id="__wp-temp-img-id"]' ).removeAttr( 'id' );
 837          }
 838      });
 839  
 840      editor.on( 'BeforeSetContent', function( event ) {
 841          if ( event.format !== 'raw' ) {
 842              event.content = editor.wpSetImgCaption( event.content );
 843          }
 844      });
 845  
 846      editor.on( 'PostProcess', function( event ) {
 847          if ( event.get ) {
 848              event.content = editor.wpGetImgCaption( event.content );
 849          }
 850      });
 851  
 852      ( function() {
 853          var wrap;
 854  
 855          editor.on( 'dragstart', function() {
 856              var node = editor.selection.getNode();
 857  
 858              if ( node.nodeName === 'IMG' ) {
 859                  wrap = editor.dom.getParent( node, '.mceTemp' );
 860  
 861                  if ( ! wrap && node.parentNode.nodeName === 'A' && ! hasTextContent( node.parentNode ) ) {
 862                      wrap = node.parentNode;
 863                  }
 864              }
 865          } );
 866  
 867          editor.on( 'drop', function( event ) {
 868              var dom = editor.dom,
 869                  rng = tinymce.dom.RangeUtils.getCaretRangeFromPoint( event.clientX, event.clientY, editor.getDoc() );
 870  
 871              // Don't allow anything to be dropped in a captioned image.
 872              if ( rng && dom.getParent( rng.startContainer, '.mceTemp' ) ) {
 873                  event.preventDefault();
 874              } else if ( wrap ) {
 875                  event.preventDefault();
 876  
 877                  editor.undoManager.transact( function() {
 878                      if ( rng ) {
 879                          editor.selection.setRng( rng );
 880                      }
 881  
 882                      editor.selection.setNode( wrap );
 883                      dom.remove( wrap );
 884                  } );
 885              }
 886  
 887              wrap = null;
 888          } );
 889      } )();
 890  
 891      // Add to editor.wp.
 892      editor.wp = editor.wp || {};
 893      editor.wp.isPlaceholder = isPlaceholder;
 894  
 895      // Back-compat.
 896      return {
 897          _do_shcode: parseShortcode,
 898          _get_shcode: getShortcode
 899      };
 900  });