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

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