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

   1 /* global tinymce */
   2 tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
   3         var toolbarActive = false;
   4
   5         function parseShortcode( content ) {
   6                 return content.replace( /(?:<p>)?\[(?:wp_)?caption([^\]]+)\]([\s\S]+?)\[\/(?:wp_)?caption\](?:<\/p>)?/g, function( a, b, c ) {
   7                         var id, cls, w, cap, img, width,
   8                                 trim = tinymce.trim;
   9
  10                         id = b.match( /id=['"]([^'"]*)['"] ?/ );
  11                         if ( id ) {
  12                                 b = b.replace( id[0], '' );
  13                         }
  14
  15                         cls = b.match( /align=['"]([^'"]*)['"] ?/ );
  16                         if ( cls ) {
  17                                 b = b.replace( cls[0], '' );
  18                         }
  19
  20                         w = b.match( /width=['"]([0-9]*)['"] ?/ );
  21                         if ( w ) {
  22                                 b = b.replace( w[0], '' );
  23                         }
  24
  25                         c = trim( c );
  26                         img = c.match( /((?:<a [^>]+>)?<img [^>]+>(?:<\/a>)?)([\s\S]*)/i );
  27
  28                         if ( img && img[2] ) {
  29                                 cap = trim( img[2] );
  30                                 img = trim( img[1] );
  31                         } else {
  32                                 // old captions shortcode style
  33                                 cap = trim( b ).replace( /caption=['"]/, '' ).replace( /['"]$/, '' );
  34                                 img = c;
  35                         }
  36
  37                         id = ( id && id[1] ) ? id[1] : '';
  38                         cls = ( cls && cls[1] ) ? cls[1] : 'alignnone';
  39
  40                         if ( ! w && img ) {
  41                                 w = img.match( /width=['"]([0-9]*)['"]/ );
  42                         }
  43
  44                         if ( w && w[1] ) {
  45                                 w = w[1];
  46                         }
  47
  48                         if ( ! w || ! cap ) {
  49                                 return c;
  50                         }
  51
  52                         width = parseInt( w, 10 );
  53                         if ( ! editor.getParam( 'wpeditimage_html5_captions' ) ) {
  54                                 width += 10;
  55                         }
  56
  57                         return '<div class="mceTemp"><dl id="'+ id +'" class="wp-caption '+ cls +'" style="width: '+ width +'px">' +
  58                                 '<dt class="wp-caption-dt">'+ img +'</dt><dd class="wp-caption-dd">'+ cap +'</dd></dl></div>';
  59                 });
  60         }
  61
  62         function getShortcode( content ) {
  63                 return content.replace( /<div (?:id="attachment_|class="mceTemp)[^>]*>([\s\S]+?)<\/div>/g, function( a, b ) {
  64                         var out = '';
  65
  66                         if ( b.indexOf('<img ') === -1 ) {
  67                                 // Broken caption. The user managed to drag the image out?
  68                                 // Try to return the caption text as a paragraph.
  69                                 out = b.match( /<dd [^>]+>([\s\S]+?)<\/dd>/i );
  70
  71                                 if ( out && out[1] ) {
  72                                         return '<p>' + out[1] + '</p>';
  73                                 }
  74
  75                                 return '';
  76                         }
  77
  78                         out = b.replace( /<dl ([^>]+)>\s*<dt [^>]+>([\s\S]+?)<\/dt>\s*<dd [^>]+>([\s\S]*?)<\/dd>\s*<\/dl>/gi, function( a, b, c, cap ) {
  79                                 var id, cls, w;
  80
  81                                 w = c.match( /width="([0-9]*)"/ );
  82                                 w = ( w && w[1] ) ? w[1] : '';
  83
  84                                 if ( ! w || ! cap ) {
  85                                         return c;
  86                                 }
  87
  88                                 id = b.match( /id="([^"]*)"/ );
  89                                 id = ( id && id[1] ) ? id[1] : '';
  90
  91                                 cls = b.match( /class="([^"]*)"/ );
  92                                 cls = ( cls && cls[1] ) ? cls[1] : '';
  93                                 cls = cls.match( /align[a-z]+/ ) || 'alignnone';
  94
  95                                 cap = cap.replace( /\r\n|\r/g, '\n' ).replace( /<[a-zA-Z0-9]+( [^<>]+)?>/g, function( a ) {
  96                                         // no line breaks inside HTML tags
  97                                         return a.replace( /[\r\n\t]+/, ' ' );
  98                                 });
  99
 100                                 // convert remaining line breaks to <br>
 101                                 cap = cap.replace( /\s*\n\s*/g, '<br />' );
 102
 103                                 return '[caption id="'+ id +'" align="'+ cls +'" width="'+ w +'"]'+ c +' '+ cap +'[/caption]';
 104                         });
 105
 106                         if ( out.indexOf('[caption') !== 0 ) {
 107                                 // the caption html seems broken, try to find the image that may be wrapped in a link
 108                                 // and may be followed by <p> with the caption text.
 109                                 out = b.replace( /[\s\S]*?((?:<a [^>]+>)?<img [^>]+>(?:<\/a>)?)(<p>[\s\S]*<\/p>)?[\s\S]*/gi, '<p>$1</p>$2' );
 110                         }
 111
 112                         return out;
 113                 });
 114         }
 115
 116         function extractImageData( imageNode ) {
 117                 var classes, extraClasses, metadata, captionBlock, caption, link, width, height,
 118                         dom = editor.dom,
 119                         isIntRegExp = /^\d+$/;
 120
 121                 // default attributes
 122                 metadata = {
 123                         attachment_id: false,
 124                         size: 'custom',
 125                         caption: '',
 126                         align: 'none',
 127                         extraClasses: '',
 128                         link: false,
 129                         linkUrl: '',
 130                         linkClassName: '',
 131                         linkTargetBlank: false,
 132                         linkRel: '',
 133                         title: ''
 134                 };
 135
 136                 metadata.url = dom.getAttrib( imageNode, 'src' );
 137                 metadata.alt = dom.getAttrib( imageNode, 'alt' );
 138                 metadata.title = dom.getAttrib( imageNode, 'title' );
 139
 140                 width = dom.getAttrib( imageNode, 'width' );
 141                 height = dom.getAttrib( imageNode, 'height' );
 142
 143                 if ( ! isIntRegExp.test( width ) || parseInt( width, 10 ) < 1 ) {
 144                         width = imageNode.naturalWidth || imageNode.width;
 145                 }
 146
 147                 if ( ! isIntRegExp.test( height ) || parseInt( height, 10 ) < 1 ) {
 148                         height = imageNode.naturalHeight || imageNode.height;
 149                 }
 150
 151                 metadata.customWidth = metadata.width = width;
 152                 metadata.customHeight = metadata.height = height;
 153
 154                 classes = tinymce.explode( imageNode.className, ' ' );
 155                 extraClasses = [];
 156
 157                 tinymce.each( classes, function( name ) {
 158
 159                         if ( /^wp-image/.test( name ) ) {
 160                                 metadata.attachment_id = parseInt( name.replace( 'wp-image-', '' ), 10 );
 161                         } else if ( /^align/.test( name ) ) {
 162                                 metadata.align = name.replace( 'align', '' );
 163                         } else if ( /^size/.test( name ) ) {
 164                                 metadata.size = name.replace( 'size-', '' );
 165                         } else {
 166                                 extraClasses.push( name );
 167                         }
 168
 169                 } );
 170
 171                 metadata.extraClasses = extraClasses.join( ' ' );
 172
 173                 // Extract caption
 174                 captionBlock = dom.getParents( imageNode, '.wp-caption' );
 175
 176                 if ( captionBlock.length ) {
 177                         captionBlock = captionBlock[0];
 178
 179                         classes = captionBlock.className.split( ' ' );
 180                         tinymce.each( classes, function( name ) {
 181                                 if ( /^align/.test( name ) ) {
 182                                         metadata.align = name.replace( 'align', '' );
 183                                 }
 184                         } );
 185
 186                         caption = dom.select( 'dd.wp-caption-dd', captionBlock );
 187                         if ( caption.length ) {
 188                                 caption = caption[0];
 189
 190                                 metadata.caption = editor.serializer.serialize( caption )
 191                                         .replace( /<br[^>]*>/g, '$&\n' ).replace( /^<p>/, '' ).replace( /<\/p>$/, '' );
 192                         }
 193                 }
 194
 195                 // Extract linkTo
 196                 if ( imageNode.parentNode && imageNode.parentNode.nodeName === 'A' ) {
 197                         link = imageNode.parentNode;
 198                         metadata.linkUrl = dom.getAttrib( link, 'href' );
 199                         metadata.linkTargetBlank = dom.getAttrib( link, 'target' ) === '_blank' ? true : false;
 200                         metadata.linkRel = dom.getAttrib( link, 'rel' );
 201                         metadata.linkClassName = link.className;
 202                 }
 203
 204                 return metadata;
 205         }
 206
 207         function hasTextContent( node ) {
 208                 return node && !! ( node.textContent || node.innerText );
 209         }
 210
 211         function updateImage( imageNode, imageData ) {
 212                 var classes, className, node, html, parent, wrap, linkNode,
 213                         captionNode, dd, dl, id, attrs, linkAttrs, width, height,
 214                         dom = editor.dom;
 215
 216                 classes = tinymce.explode( imageData.extraClasses, ' ' );
 217
 218                 if ( ! classes ) {
 219                         classes = [];
 220                 }
 221
 222                 if ( ! imageData.caption ) {
 223                         classes.push( 'align' + imageData.align );
 224                 }
 225
 226                 if ( imageData.attachment_id ) {
 227                         classes.push( 'wp-image-' + imageData.attachment_id );
 228                         if ( imageData.size && imageData.size !== 'custom' ) {
 229                                 classes.push( 'size-' + imageData.size );
 230                         }
 231                 }
 232
 233                 width = imageData.width;
 234                 height = imageData.height;
 235
 236                 if ( imageData.size === 'custom' ) {
 237                         width = imageData.customWidth;
 238                         height = imageData.customHeight;
 239                 }
 240
 241                 attrs = {
 242                         src: imageData.url,
 243                         width: width || null,
 244                         height: height || null,
 245                         alt: imageData.alt,
 246                         title: imageData.title || null,
 247                         'class': classes.join( ' ' ) || null
 248                 };
 249
 250                 dom.setAttribs( imageNode, attrs );
 251
 252                 linkAttrs = {
 253                         href: imageData.linkUrl,
 254                         rel: imageData.linkRel || null,
 255                         target: imageData.linkTargetBlank ? '_blank': null,
 256                         'class': imageData.linkClassName || null
 257                 };
 258
 259                 if ( imageNode.parentNode && imageNode.parentNode.nodeName === 'A' && ! hasTextContent( imageNode.parentNode ) ) {
 260                         // Update or remove an existing link wrapped around the image
 261                         if ( imageData.linkUrl ) {
 262                                 dom.setAttribs( imageNode.parentNode, linkAttrs );
 263                         } else {
 264                                 dom.remove( imageNode.parentNode, true );
 265                         }
 266                 } else if ( imageData.linkUrl ) {
 267                         if ( linkNode = dom.getParent( imageNode, 'a' ) ) {
 268                                 // The image is inside a link together with other nodes,
 269                                 // or is nested in another node, move it out
 270                                 dom.insertAfter( imageNode, linkNode );
 271                         }
 272
 273                         // Add link wrapped around the image
 274                         linkNode = dom.create( 'a', linkAttrs );
 275                         imageNode.parentNode.insertBefore( linkNode, imageNode );
 276                         linkNode.appendChild( imageNode );
 277                 }
 278
 279                 captionNode = editor.dom.getParent( imageNode, '.mceTemp' );
 280
 281                 if ( imageNode.parentNode && imageNode.parentNode.nodeName === 'A' && ! hasTextContent( imageNode.parentNode ) ) {
 282                         node = imageNode.parentNode;
 283                 } else {
 284                         node = imageNode;
 285                 }
 286
 287                 if ( imageData.caption ) {
 288
 289                         id = imageData.attachment_id ? 'attachment_' + imageData.attachment_id : null;
 290                         className = 'wp-caption align' + ( imageData.align || 'none' );
 291
 292                         if ( ! editor.getParam( 'wpeditimage_html5_captions' ) ) {
 293                                 width = parseInt( width, 10 );
 294                                 width += 10;
 295                         }
 296
 297                         if ( captionNode ) {
 298                                 dl = dom.select( 'dl.wp-caption', captionNode );
 299
 300                                 if ( dl.length ) {
 301                                         dom.setAttribs( dl, {
 302                                                 id: id,
 303                                                 'class': className,
 304                                                 style: 'width: ' + width + 'px'
 305                                         } );
 306                                 }
 307
 308                                 dd = dom.select( '.wp-caption-dd', captionNode );
 309
 310                                 if ( dd.length ) {
 311                                         dom.setHTML( dd[0], imageData.caption );
 312                                 }
 313
 314                         } else {
 315                                 id = id ? 'id="'+ id +'" ' : '';
 316
 317                                 // should create a new function for generating the caption markup
 318                                 html =  '<dl ' + id + 'class="' + className +'" style="width: '+ width +'px">' +
 319                                         '<dt class="wp-caption-dt">' + dom.getOuterHTML( node ) + '</dt><dd class="wp-caption-dd">'+ imageData.caption +'</dd></dl>';
 320
 321                                 if ( parent = dom.getParent( node, 'p' ) ) {
 322                                         wrap = dom.create( 'div', { 'class': 'mceTemp' }, html );
 323                                         parent.parentNode.insertBefore( wrap, parent );
 324                                         dom.remove( node );
 325
 326                                         if ( dom.isEmpty( parent ) ) {
 327                                                 dom.remove( parent );
 328                                         }
 329                                 } else {
 330                                         dom.setOuterHTML( node, '<div class="mceTemp">' + html + '</div>' );
 331                                 }
 332                         }
 333                 } else if ( captionNode ) {
 334                         // Remove the caption wrapper and place the image in new paragraph
 335                         parent = dom.create( 'p' );
 336                         captionNode.parentNode.insertBefore( parent, captionNode );
 337                         parent.appendChild( node );
 338                         dom.remove( captionNode );
 339                 }
 340
 341                 if ( wp.media.events ) {
 342                         wp.media.events.trigger( 'editor:image-update', {
 343                                 editor: editor,
 344                                 metadata: imageData,
 345                                 image: imageNode
 346                         } );
 347                 }
 348
 349                 editor.nodeChanged();
 350                 // Refresh the toolbar
 351                 addToolbar( imageNode );
 352         }
 353
 354         function editImage( img ) {
 355                 var frame, callback, metadata;
 356
 357                 if ( typeof wp === 'undefined' || ! wp.media ) {
 358                         editor.execCommand( 'mceImage' );
 359                         return;
 360                 }
 361
 362                 metadata = extractImageData( img );
 363
 364                 // Manipulate the metadata by reference that is fed into the PostImage model used in the media modal
 365                 wp.media.events.trigger( 'editor:image-edit', {
 366                         editor: editor,
 367                         metadata: metadata,
 368                         image: img
 369                 } );
 370
 371                 frame = wp.media({
 372                         frame: 'image',
 373                         state: 'image-details',
 374                         metadata: metadata
 375                 } );
 376
 377                 wp.media.events.trigger( 'editor:frame-create', { frame: frame } );
 378
 379                 callback = function( imageData ) {
 380                         editor.focus();
 381                         editor.undoManager.transact( function() {
 382                                 updateImage( img, imageData );
 383                         } );
 384                         frame.detach();
 385                 };
 386
 387                 frame.state('image-details').on( 'update', callback );
 388                 frame.state('replace-image').on( 'replace', callback );
 389                 frame.on( 'close', function() {
 390                         editor.focus();
 391                         frame.detach();
 392                 });
 393
 394                 frame.open();
 395         }
 396
 397         function removeImage( node ) {
 398                 var wrap;
 399
 400                 if ( node.nodeName === 'DIV' && editor.dom.hasClass( node, 'mceTemp' ) ) {
 401                         wrap = node;
 402                 } else if ( node.nodeName === 'IMG' || node.nodeName === 'DT' || node.nodeName === 'A' ) {
 403                         wrap = editor.dom.getParent( node, 'div.mceTemp' );
 404                 }
 405
 406                 if ( wrap ) {
 407                         if ( wrap.nextSibling ) {
 408                                 editor.selection.select( wrap.nextSibling );
 409                         } else if ( wrap.previousSibling ) {
 410                                 editor.selection.select( wrap.previousSibling );
 411                         } else {
 412                                 editor.selection.select( wrap.parentNode );
 413                         }
 414
 415                         editor.selection.collapse( true );
 416                         editor.nodeChanged();
 417                         editor.dom.remove( wrap );
 418                 } else {
 419                         editor.dom.remove( node );
 420                 }
 421                 removeToolbar();
 422         }
 423
 424         function addToolbar( node ) {
 425                 var rectangle, toolbarHtml, toolbar, left,
 426                         dom = editor.dom;
 427
 428                 removeToolbar();
 429
 430                 // Don't add to placeholders
 431                 if ( ! node || node.nodeName !== 'IMG' || isPlaceholder( node ) ) {
 432                         return;
 433                 }
 434
 435                 dom.setAttrib( node, 'data-wp-imgselect', 1 );
 436                 rectangle = dom.getRect( node );
 437
 438                 toolbarHtml = '<div class="dashicons dashicons-edit edit" data-mce-bogus="1"></div>' +
 439                         '<div class="dashicons dashicons-no-alt remove" data-mce-bogus="1"></div>';
 440
 441                 toolbar = dom.create( 'div', {
 442                         'id': 'wp-image-toolbar',
 443                         'data-mce-bogus': '1',
 444                         'contenteditable': false
 445                 }, toolbarHtml );
 446
 447                 if ( editor.rtl ) {
 448                         left = rectangle.x + rectangle.w - 82;
 449                 } else {
 450                         left = rectangle.x;
 451                 }
 452
 453                 editor.getBody().appendChild( toolbar );
 454                 dom.setStyles( toolbar, {
 455                         top: rectangle.y,
 456                         left: left
 457                 });
 458
 459                 toolbarActive = true;
 460         }
 461
 462         function removeToolbar() {
 463                 var toolbar = editor.dom.get( 'wp-image-toolbar' );
 464
 465                 if ( toolbar ) {
 466                         editor.dom.remove( toolbar );
 467                 }
 468
 469                 editor.dom.setAttrib( editor.dom.select( 'img[data-wp-imgselect]' ), 'data-wp-imgselect', null );
 470
 471                 toolbarActive = false;
 472         }
 473
 474         function isPlaceholder( node ) {
 475                 var dom = editor.dom;
 476
 477                 if ( dom.hasClass( node, 'mceItem' ) || dom.getAttrib( node, 'data-mce-placeholder' ) ||
 478                         dom.getAttrib( node, 'data-mce-object' ) ) {
 479
 480                         return true;
 481                 }
 482
 483                 return false;
 484         }
 485
 486         editor.on( 'init', function() {
 487                 var dom = editor.dom,
 488                         captionClass = editor.getParam( 'wpeditimage_html5_captions' ) ? 'html5-captions' : 'html4-captions';
 489
 490                 dom.addClass( editor.getBody(), captionClass );
 491
 492                 // Add caption field to the default image dialog
 493                 editor.on( 'wpLoadImageForm', function( event ) {
 494                         if ( editor.getParam( 'wpeditimage_disable_captions' ) ) {
 495                                 return;
 496                         }
 497
 498                         var captionField = {
 499                                 type: 'textbox',
 500                                 flex: 1,
 501                                 name: 'caption',
 502                                 minHeight: 60,
 503                                 multiline: true,
 504                                 scroll: true,
 505                                 label: 'Image caption'
 506                         };
 507
 508                         event.data.splice( event.data.length - 1, 0, captionField );
 509                 });
 510
 511                 // Fix caption parent width for images added from URL
 512                 editor.on( 'wpNewImageRefresh', function( event ) {
 513                         var parent, captionWidth;
 514
 515                         if ( parent = dom.getParent( event.node, 'dl.wp-caption' ) ) {
 516                                 if ( ! parent.style.width ) {
 517                                         captionWidth = parseInt( event.node.clientWidth, 10 ) + 10;
 518                                         captionWidth = captionWidth ? captionWidth + 'px' : '50%';
 519                                         dom.setStyle( parent, 'width', captionWidth );
 520                                 }
 521                         }
 522                 });
 523
 524                 editor.on( 'wpImageFormSubmit', function( event ) {
 525                         var data = event.imgData.data,
 526                                 imgNode = event.imgData.node,
 527                                 caption = event.imgData.caption,
 528                                 captionId = '',
 529                                 captionAlign = '',
 530                                 captionWidth = '',
 531                                 wrap, parent, node, html, imgId;
 532
 533                         // Temp image id so we can find the node later
 534                         data.id = '__wp-temp-img-id';
 535                         // Cancel the original callback
 536                         event.imgData.cancel = true;
 537
 538                         if ( ! data.style ) {
 539                                 data.style = null;
 540                         }
 541
 542                         if ( ! data.src ) {
 543                                 // Delete the image and the caption
 544                                 if ( imgNode ) {
 545                                         if ( wrap = dom.getParent( imgNode, 'div.mceTemp' ) ) {
 546                                                 dom.remove( wrap );
 547                                         } else if ( imgNode.parentNode.nodeName === 'A' ) {
 548                                                 dom.remove( imgNode.parentNode );
 549                                         } else {
 550                                                 dom.remove( imgNode );
 551                                         }
 552
 553                                         editor.nodeChanged();
 554                                 }
 555                                 return;
 556                         }
 557
 558                         if ( caption ) {
 559                                 caption = caption.replace( /\r\n|\r/g, '\n' ).replace( /<\/?[a-zA-Z0-9]+( [^<>]+)?>/g, function( a ) {
 560                                         // No line breaks inside HTML tags
 561                                         return a.replace( /[\r\n\t]+/, ' ' );
 562                                 });
 563
 564                                 // Convert remaining line breaks to <br>
 565                                 caption = caption.replace( /(<br[^>]*>)\s*\n\s*/g, '$1' ).replace( /\s*\n\s*/g, '<br />' );
 566                         }
 567
 568                         if ( ! imgNode ) {
 569                                 // New image inserted
 570                                 html = dom.createHTML( 'img', data );
 571
 572                                 if ( caption ) {
 573                                         node = editor.selection.getNode();
 574
 575                                         if ( data.width ) {
 576                                                 captionWidth = parseInt( data.width, 10 );
 577
 578                                                 if ( ! editor.getParam( 'wpeditimage_html5_captions' ) ) {
 579                                                         captionWidth += 10;
 580                                                 }
 581
 582                                                 captionWidth = ' style="width: ' + captionWidth + 'px"';
 583                                         }
 584
 585                                         html = '<dl class="wp-caption alignnone"' + captionWidth + '>' +
 586                                                 '<dt class="wp-caption-dt">'+ html +'</dt><dd class="wp-caption-dd">'+ caption +'</dd></dl>';
 587
 588                                         if ( node.nodeName === 'P' ) {
 589                                                 parent = node;
 590                                         } else {
 591                                                 parent = dom.getParent( node, 'p' );
 592                                         }
 593
 594                                         if ( parent && parent.nodeName === 'P' ) {
 595                                                 wrap = dom.create( 'div', { 'class': 'mceTemp' }, html );
 596                                                 parent.parentNode.insertBefore( wrap, parent );
 597                                                 editor.selection.select( wrap );
 598                                                 editor.nodeChanged();
 599
 600                                                 if ( dom.isEmpty( parent ) ) {
 601                                                         dom.remove( parent );
 602                                                 }
 603                                         } else {
 604                                                 editor.selection.setContent( '<div class="mceTemp">' + html + '</div>' );
 605                                         }
 606                                 } else {
 607                                         editor.selection.setContent( html );
 608                                 }
 609                         } else {
 610                                 // Edit existing image
 611
 612                                 // Store the original image id if any
 613                                 imgId = imgNode.id || null;
 614                                 // Update the image node
 615                                 dom.setAttribs( imgNode, data );
 616                                 wrap = dom.getParent( imgNode, 'dl.wp-caption' );
 617
 618                                 if ( caption ) {
 619                                         if ( wrap ) {
 620                                                 if ( parent = dom.select( 'dd.wp-caption-dd', wrap )[0] ) {
 621                                                         parent.innerHTML = caption;
 622                                                 }
 623                                         } else {
 624                                                 if ( imgNode.className ) {
 625                                                         captionId = imgNode.className.match( /wp-image-([0-9]+)/ );
 626                                                         captionAlign = imgNode.className.match( /align(left|right|center|none)/ );
 627                                                 }
 628
 629                                                 if ( captionAlign ) {
 630                                                         captionAlign = captionAlign[0];
 631                                                         imgNode.className = imgNode.className.replace( /align(left|right|center|none)/g, '' );
 632                                                 } else {
 633                                                         captionAlign = 'alignnone';
 634                                                 }
 635
 636                                                 captionAlign = ' class="wp-caption ' + captionAlign + '"';
 637
 638                                                 if ( captionId ) {
 639                                                         captionId = ' id="attachment_' + captionId[1] + '"';
 640                                                 }
 641
 642                                                 captionWidth = data.width || imgNode.clientWidth;
 643
 644                                                 if ( captionWidth ) {
 645                                                         captionWidth = parseInt( captionWidth, 10 );
 646
 647                                                         if ( ! editor.getParam( 'wpeditimage_html5_captions' ) ) {
 648                                                                 captionWidth += 10;
 649                                                         }
 650
 651                                                         captionWidth = ' style="width: '+ captionWidth +'px"';
 652                                                 }
 653
 654                                                 if ( imgNode.parentNode && imgNode.parentNode.nodeName === 'A' ) {
 655                                                         html = dom.getOuterHTML( imgNode.parentNode );
 656                                                         node = imgNode.parentNode;
 657                                                 } else {
 658                                                         html = dom.getOuterHTML( imgNode );
 659                                                         node = imgNode;
 660                                                 }
 661
 662                                                 html = '<dl ' + captionId + captionAlign + captionWidth + '>' +
 663                                                         '<dt class="wp-caption-dt">'+ html +'</dt><dd class="wp-caption-dd">'+ caption +'</dd></dl>';
 664
 665                                                 if ( parent = dom.getParent( imgNode, 'p' ) ) {
 666                                                         wrap = dom.create( 'div', { 'class': 'mceTemp' }, html );
 667                                                         dom.insertAfter( wrap, parent );
 668                                                         editor.selection.select( wrap );
 669                                                         editor.nodeChanged();
 670
 671                                                         // Delete the old image node
 672                                                         dom.remove( node );
 673
 674                                                         if ( dom.isEmpty( parent ) ) {
 675                                                                 dom.remove( parent );
 676                                                         }
 677                                                 } else {
 678                                                         editor.selection.setContent( '<div class="mceTemp">' + html + '</div>' );
 679                                                 }
 680                                         }
 681                                 } else {
 682                                         if ( wrap ) {
 683                                                 // Remove the caption wrapper and place the image in new paragraph
 684                                                 if ( imgNode.parentNode.nodeName === 'A' ) {
 685                                                         html = dom.getOuterHTML( imgNode.parentNode );
 686                                                 } else {
 687                                                         html = dom.getOuterHTML( imgNode );
 688                                                 }
 689
 690                                                 parent = dom.create( 'p', {}, html );
 691                                                 dom.insertAfter( parent, wrap.parentNode );
 692                                                 editor.selection.select( parent );
 693                                                 editor.nodeChanged();
 694                                                 dom.remove( wrap.parentNode );
 695                                         }
 696                                 }
 697                         }
 698
 699                         imgNode = dom.get('__wp-temp-img-id');
 700                         dom.setAttrib( imgNode, 'id', imgId );
 701                         event.imgData.node = imgNode;
 702                 });
 703
 704                 editor.on( 'wpLoadImageData', function( event ) {
 705                         var parent,
 706                                 data = event.imgData.data,
 707                                 imgNode = event.imgData.node;
 708
 709                         if ( parent = dom.getParent( imgNode, 'dl.wp-caption' ) ) {
 710                                 parent = dom.select( 'dd.wp-caption-dd', parent )[0];
 711
 712                                 if ( parent ) {
 713                                         data.caption = editor.serializer.serialize( parent )
 714                                                 .replace( /<br[^>]*>/g, '$&\n' ).replace( /^<p>/, '' ).replace( /<\/p>$/, '' );
 715                                 }
 716                         }
 717                 });
 718
 719                 dom.bind( editor.getDoc(), 'dragstart', function( event ) {
 720                         var node = editor.selection.getNode();
 721
 722                         // Prevent dragging images out of the caption elements
 723                         if ( node.nodeName === 'IMG' && dom.getParent( node, '.wp-caption' ) ) {
 724                                 event.preventDefault();
 725                         }
 726
 727                         // Remove toolbar to avoid an orphaned toolbar when dragging an image to a new location
 728                         removeToolbar();
 729                 });
 730
 731                 // Prevent IE11 from making dl.wp-caption resizable
 732                 if ( tinymce.Env.ie && tinymce.Env.ie > 10 ) {
 733                         // The 'mscontrolselect' event is supported only in IE11+
 734                         dom.bind( editor.getBody(), 'mscontrolselect', function( event ) {
 735                                 if ( event.target.nodeName === 'IMG' && dom.getParent( event.target, '.wp-caption' ) ) {
 736                                         // Hide the thick border with resize handles around dl.wp-caption
 737                                         editor.getBody().focus(); // :(
 738                                 } else if ( event.target.nodeName === 'DL' && dom.hasClass( event.target, 'wp-caption' ) ) {
 739                                         // Trigger the thick border with resize handles...
 740                                         // This will make the caption text editable.
 741                                         event.target.focus();
 742                                 }
 743                         });
 744
 745                         editor.on( 'click', function( event ) {
 746                                 if ( event.target.nodeName === 'IMG' && dom.getAttrib( event.target, 'data-wp-imgselect' ) &&
 747                                         dom.getParent( event.target, 'dl.wp-caption' ) ) {
 748
 749                                         editor.getBody().focus();
 750                                 }
 751                         });
 752                 }
 753         });
 754
 755         editor.on( 'ObjectResized', function( event ) {
 756         var parent, width,
 757                         node = event.target,
 758                         dom = editor.dom;
 759
 760                 if ( node.nodeName === 'IMG' ) {
 761                         node.className = node.className.replace( /\bsize-[^ ]+/, '' );
 762
 763                         if ( parent = dom.getParent( node, '.wp-caption' ) ) {
 764                                 width = event.width || dom.getAttrib( node, 'width' );
 765
 766                                 if ( width ) {
 767                                         width = parseInt( width, 10 );
 768
 769                                         if ( ! editor.getParam( 'wpeditimage_html5_captions' ) ) {
 770                                                 width += 10;
 771                                         }
 772
 773                                         dom.setStyle( parent, 'width', width + 'px' );
 774                                 }
 775                         }
 776                         // refresh toolbar
 777                         addToolbar( node );
 778                 }
 779     });
 780
 781         editor.on( 'BeforeExecCommand', function( event ) {
 782                 var node, p, DL, align,
 783                         cmd = event.command,
 784                         dom = editor.dom;
 785
 786                 if ( cmd === 'mceInsertContent' ) {
 787                         // When inserting content, if the caret is inside a caption create new paragraph under
 788                         // and move the caret there
 789                         if ( node = dom.getParent( editor.selection.getNode(), 'div.mceTemp' ) ) {
 790                                 p = dom.create( 'p' );
 791                                 dom.insertAfter( p, node );
 792                                 editor.selection.setCursorLocation( p, 0 );
 793                                 editor.nodeChanged();
 794
 795                                 if ( tinymce.Env.ie > 8 ) {
 796                                         setTimeout( function() {
 797                                                 editor.selection.setCursorLocation( p, 0 );
 798                                                 editor.selection.setContent( event.value );
 799                                         }, 500 );
 800
 801                                         return false;
 802                                 }
 803                         }
 804                 } else if ( cmd === 'JustifyLeft' || cmd === 'JustifyRight' || cmd === 'JustifyCenter' ) {
 805                         node = editor.selection.getNode();
 806                         align = cmd.substr(7).toLowerCase();
 807                         align = 'align' + align;
 808
 809                         removeToolbar();
 810
 811                         if ( dom.is( node, 'dl.wp-caption' ) ) {
 812                                 DL = node;
 813                         } else {
 814                                 DL = dom.getParent( node, 'dl.wp-caption' );
 815                         }
 816
 817                         if ( DL ) {
 818                                 // When inside an image caption, set the align* class on dl.wp-caption
 819                                 if ( dom.hasClass( DL, align ) ) {
 820                                         dom.removeClass( DL, align );
 821                                         dom.addClass( DL, 'alignnone' );
 822                                 } else {
 823                                         DL.className = DL.className.replace( /align[^ ]+/g, '' );
 824                                         dom.addClass( DL, align );
 825                                 }
 826
 827                                 return false;
 828                         }
 829
 830                         if ( node.nodeName === 'IMG' ) {
 831                                 if ( dom.hasClass( node, align ) ) {
 832                                         // The align class is being removed
 833                                         dom.addClass( node, 'alignnone' );
 834                                 } else {
 835                                         dom.removeClass( node, 'alignnone' );
 836                                 }
 837                         }
 838                 }
 839         });
 840
 841         editor.on( 'keydown', function( event ) {
 842                 var node, wrap, P, spacer,
 843                         selection = editor.selection,
 844                         keyCode = event.keyCode,
 845                         dom = editor.dom;
 846
 847                 if ( keyCode === tinymce.util.VK.ENTER ) {
 848                         // When pressing Enter inside a caption move the caret to a new parapraph under it
 849                         node = selection.getNode();
 850                         wrap = dom.getParent( node, 'div.mceTemp' );
 851
 852                         if ( wrap ) {
 853                                 dom.events.cancel( event ); // Doesn't cancel all :(
 854
 855                                 // Remove any extra dt and dd cleated on pressing Enter...
 856                                 tinymce.each( dom.select( 'dt, dd', wrap ), function( element ) {
 857                                         if ( dom.isEmpty( element ) ) {
 858                                                 dom.remove( element );
 859                                         }
 860                                 });
 861
 862                                 spacer = tinymce.Env.ie && tinymce.Env.ie < 11 ? '' : '<br data-mce-bogus="1" />';
 863                                 P = dom.create( 'p', null, spacer );
 864
 865                                 if ( node.nodeName === 'DD' ) {
 866                                         dom.insertAfter( P, wrap );
 867                                 } else {
 868                                         wrap.parentNode.insertBefore( P, wrap );
 869                                 }
 870
 871                                 editor.nodeChanged();
 872                                 selection.setCursorLocation( P, 0 );
 873                         }
 874                 } else if ( keyCode === tinymce.util.VK.DELETE || keyCode === tinymce.util.VK.BACKSPACE ) {
 875                         node = selection.getNode();
 876
 877                         if ( node.nodeName === 'DIV' && dom.hasClass( node, 'mceTemp' ) ) {
 878                                 wrap = node;
 879                         } else if ( node.nodeName === 'IMG' || node.nodeName === 'DT' || node.nodeName === 'A' ) {
 880                                 wrap = dom.getParent( node, 'div.mceTemp' );
 881                         }
 882
 883                         if ( wrap ) {
 884                                 dom.events.cancel( event );
 885                                 removeImage( node );
 886                                 return false;
 887                         }
 888
 889                         removeToolbar();
 890                 }
 891
 892                 // Key presses will replace the image so we need to remove the toolbar
 893                 if ( toolbarActive ) {
 894                         if ( event.ctrlKey || event.metaKey || event.altKey ||
 895                                 ( keyCode < 48 && keyCode > 90 ) || keyCode > 186 ) {
 896                                 return;
 897                         }
 898
 899                         removeToolbar();
 900                 }
 901         });
 902
 903         editor.on( 'mousedown', function( event ) {
 904                 if ( editor.dom.getParent( event.target, '#wp-image-toolbar' ) ) {
 905                         if ( tinymce.Env.ie ) {
 906                                 // Stop IE > 8 from making the wrapper resizable on mousedown
 907                                 event.preventDefault();
 908                         }
 909                 } else if ( event.target.nodeName !== 'IMG' ) {
 910                         removeToolbar();
 911                 }
 912         });
 913
 914         editor.on( 'mouseup', function( event ) {
 915                 var image,
 916                         node = event.target,
 917                         dom = editor.dom;
 918
 919                 // Don't trigger on right-click
 920                 if ( event.button && event.button > 1 ) {
 921                         return;
 922                 }
 923
 924                 if ( node.nodeName === 'DIV' && dom.getParent( node, '#wp-image-toolbar' ) ) {
 925                         image = dom.select( 'img[data-wp-imgselect]' )[0];
 926
 927                         if ( image ) {
 928                                 editor.selection.select( image );
 929
 930                                 if ( dom.hasClass( node, 'remove' ) ) {
 931                                         removeImage( image );
 932                                 } else if ( dom.hasClass( node, 'edit' ) ) {
 933                                         editImage( image );
 934                                 }
 935                         }
 936                 } else if ( node.nodeName === 'IMG' && ! editor.dom.getAttrib( node, 'data-wp-imgselect' ) && ! isPlaceholder( node ) ) {
 937                         addToolbar( node );
 938                 } else if ( node.nodeName !== 'IMG' ) {
 939                         removeToolbar();
 940                 }
 941         });
 942
 943         editor.on( 'cut', function() {
 944                 removeToolbar();
 945         });
 946
 947         editor.wpSetImgCaption = function( content ) {
 948                 return parseShortcode( content );
 949         };
 950
 951         editor.wpGetImgCaption = function( content ) {
 952                 return getShortcode( content );
 953         };
 954
 955         editor.on( 'BeforeSetContent', function( event ) {
 956                 event.content = editor.wpSetImgCaption( event.content );
 957         });
 958
 959         editor.on( 'PostProcess', function( event ) {
 960                 if ( event.get ) {
 961                         event.content = editor.wpGetImgCaption( event.content );
 962                         event.content = event.content.replace( / data-wp-imgselect="1"/g, '' );
 963                 }
 964         });
 965
 966         return {
 967                 _do_shcode: parseShortcode,
 968                 _get_shcode: getShortcode
 969         };
 970 });