2 tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
3 var toolbar, serializer,
8 function isPlaceholder( node ) {
9 return !! ( editor.dom.getAttrib( node, 'data-mce-placeholder' ) || editor.dom.getAttrib( node, 'data-mce-object' ) );
12 editor.addButton( 'wp_img_remove', {
14 icon: 'dashicon dashicons-no',
16 removeImage( editor.selection.getNode() );
20 editor.addButton( 'wp_img_edit', {
21 tooltip: 'Edit ', // trailing space is needed, used for context
22 icon: 'dashicon dashicons-edit',
24 editImage( editor.selection.getNode() );
29 alignleft: 'Align left',
30 aligncenter: 'Align center',
31 alignright: 'Align right',
32 alignnone: 'No alignment'
33 }, function( tooltip, name ) {
34 var direction = name.slice( 5 );
36 editor.addButton( 'wp_img_' + name, {
38 icon: 'dashicon dashicons-align-' + direction,
39 cmd: 'alignnone' === name ? 'wpAlignNone' : 'Justify' + direction.slice( 0, 1 ).toUpperCase() + direction.slice( 1 ),
40 onPostRender: function() {
43 editor.on( 'NodeChange', function( event ) {
47 if ( event.element.nodeName !== 'IMG' ) {
51 node = editor.dom.getParent( event.element, '.wp-caption' ) || event.element;
53 if ( 'alignnone' === name ) {
54 self.active( ! /\balign(left|center|right)\b/.test( node.className ) );
56 self.active( editor.dom.hasClass( node, name ) );
63 editor.once( 'preinit', function() {
64 toolbar = editor.wp._createToolbar( [
74 editor.on( 'wptoolbar', function( event ) {
75 if ( event.element.nodeName === 'IMG' && ! isPlaceholder( event.element ) ) {
76 event.toolbar = toolbar;
80 // Safari on iOS fails to select image nodes in contentEditoble mode on touch/click.
83 editor.on( 'click', function( event ) {
84 if ( event.target.nodeName === 'IMG' ) {
85 var node = event.target;
87 window.setTimeout( function() {
88 editor.selection.select( node );
97 function parseShortcode( content ) {
98 return content.replace( /(?:<p>)?\[(?:wp_)?caption([^\]]+)\]([\s\S]+?)\[\/(?:wp_)?caption\](?:<\/p>)?/g, function( a, b, c ) {
99 var id, align, classes, caption, img, width;
101 id = b.match( /id=['"]([^'"]*)['"] ?/ );
103 b = b.replace( id[0], '' );
106 align = b.match( /align=['"]([^'"]*)['"] ?/ );
108 b = b.replace( align[0], '' );
111 classes = b.match( /class=['"]([^'"]*)['"] ?/ );
113 b = b.replace( classes[0], '' );
116 width = b.match( /width=['"]([0-9]*)['"] ?/ );
118 b = b.replace( width[0], '' );
122 img = c.match( /((?:<a [^>]+>)?<img [^>]+>(?:<\/a>)?)([\s\S]*)/i );
124 if ( img && img[2] ) {
125 caption = trim( img[2] );
126 img = trim( img[1] );
128 // old captions shortcode style
129 caption = trim( b ).replace( /caption=['"]/, '' ).replace( /['"]$/, '' );
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, '' ) : '';
137 if ( ! width && img ) {
138 width = img.match( /width=['"]([0-9]*)['"]/ );
141 if ( width && width[1] ) {
145 if ( ! width || ! caption ) {
149 width = parseInt( width, 10 );
150 if ( ! editor.getParam( 'wpeditimage_html5_captions' ) ) {
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>';
159 function getShortcode( content ) {
160 return content.replace( /<div (?:id="attachment_|class="mceTemp)[^>]*>([\s\S]+?)<\/div>/g, function( a, b ) {
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 );
168 if ( out && out[1] ) {
169 return '<p>' + out[1] + '</p>';
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;
178 width = c.match( /width="([0-9]*)"/ );
179 width = ( width && width[1] ) ? width[1] : '';
181 classes = b.match( /class="([^"]*)"/ );
182 classes = ( classes && classes[1] ) ? classes[1] : '';
183 align = classes.match( /align[a-z]+/i ) || 'alignnone';
185 if ( ! width || ! caption ) {
186 if ( 'alignnone' !== align[0] ) {
187 c = c.replace( /><img/, ' class="' + align[0] + '"><img' );
192 id = b.match( /id="([^"]*)"/ );
193 id = ( id && id[1] ) ? id[1] : '';
195 classes = classes.replace( /wp-caption ?|align[a-z]+ ?/gi, '' );
198 classes = ' class="' + classes + '"';
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]+/, ' ' );
206 // convert remaining line breaks to <br>
207 caption = caption.replace( /\s*\n\s*/g, '<br />' );
209 return '[caption id="' + id + '" align="' + align + '" width="' + width + '"' + classes + ']' + c + ' ' + caption + '[/caption]';
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' );
222 function extractImageData( imageNode ) {
223 var classes, extraClasses, metadata, captionBlock, caption, link, width, height,
224 captionClassName = [],
226 isIntRegExp = /^\d+$/;
228 // default attributes
230 attachment_id: false,
238 linkTargetBlank: false,
243 metadata.url = dom.getAttrib( imageNode, 'src' );
244 metadata.alt = dom.getAttrib( imageNode, 'alt' );
245 metadata.title = dom.getAttrib( imageNode, 'title' );
247 width = dom.getAttrib( imageNode, 'width' );
248 height = dom.getAttrib( imageNode, 'height' );
250 if ( ! isIntRegExp.test( width ) || parseInt( width, 10 ) < 1 ) {
251 width = imageNode.naturalWidth || imageNode.width;
254 if ( ! isIntRegExp.test( height ) || parseInt( height, 10 ) < 1 ) {
255 height = imageNode.naturalHeight || imageNode.height;
258 metadata.customWidth = metadata.width = width;
259 metadata.customHeight = metadata.height = height;
261 classes = tinymce.explode( imageNode.className, ' ' );
264 tinymce.each( classes, function( name ) {
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-', '' );
273 extraClasses.push( name );
278 metadata.extraClasses = extraClasses.join( ' ' );
281 captionBlock = dom.getParents( imageNode, '.wp-caption' );
283 if ( captionBlock.length ) {
284 captionBlock = captionBlock[0];
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 );
295 metadata.captionClassName = captionClassName.join( ' ' );
297 caption = dom.select( 'dd.wp-caption-dd', captionBlock );
298 if ( caption.length ) {
299 caption = caption[0];
301 metadata.caption = editor.serializer.serialize( caption )
302 .replace( /<br[^>]*>/g, '$&\n' ).replace( /^<p>/, '' ).replace( /<\/p>$/, '' );
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;
318 function hasTextContent( node ) {
319 return node && !! ( node.textContent || node.innerText );
322 // Verify HTML in captions
323 function verifyHTML( caption ) {
324 if ( ! caption || ( caption.indexOf( '<' ) === -1 && caption.indexOf( '>' ) === -1 ) ) {
328 if ( ! serializer ) {
329 serializer = new tinymce.html.Serializer( {}, editor.schema );
332 return serializer.serialize( editor.parser.parse( caption, { forced_root_block: false } ) );
335 function updateImage( imageNode, imageData ) {
336 var classes, className, node, html, parent, wrap, linkNode,
337 captionNode, dd, dl, id, attrs, linkAttrs, width, height, align,
340 classes = tinymce.explode( imageData.extraClasses, ' ' );
346 if ( ! imageData.caption ) {
347 classes.push( 'align' + imageData.align );
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 );
357 width = imageData.width;
358 height = imageData.height;
360 if ( imageData.size === 'custom' ) {
361 width = imageData.customWidth;
362 height = imageData.customHeight;
367 width: width || null,
368 height: height || null,
370 title: imageData.title || null,
371 'class': classes.join( ' ' ) || null
374 dom.setAttribs( imageNode, attrs );
377 href: imageData.linkUrl,
378 rel: imageData.linkRel || null,
379 target: imageData.linkTargetBlank ? '_blank': null,
380 'class': imageData.linkClassName || null
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 );
388 dom.remove( imageNode.parentNode, true );
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 );
397 // Add link wrapped around the image
398 linkNode = dom.create( 'a', linkAttrs );
399 imageNode.parentNode.insertBefore( linkNode, imageNode );
400 linkNode.appendChild( imageNode );
403 captionNode = editor.dom.getParent( imageNode, '.mceTemp' );
405 if ( imageNode.parentNode && imageNode.parentNode.nodeName === 'A' && ! hasTextContent( imageNode.parentNode ) ) {
406 node = imageNode.parentNode;
411 if ( imageData.caption ) {
412 imageData.caption = verifyHTML( imageData.caption );
414 id = imageData.attachment_id ? 'attachment_' + imageData.attachment_id : null;
415 align = 'align' + ( imageData.align || 'none' );
416 className = 'wp-caption ' + align;
418 if ( imageData.captionClassName ) {
419 className += ' ' + imageData.captionClassName.replace( /[<>&]+/g, '' );
422 if ( ! editor.getParam( 'wpeditimage_html5_captions' ) ) {
423 width = parseInt( width, 10 );
428 dl = dom.select( 'dl.wp-caption', captionNode );
431 dom.setAttribs( dl, {
434 style: 'width: ' + width + 'px'
438 dd = dom.select( '.wp-caption-dd', captionNode );
441 dom.setHTML( dd[0], imageData.caption );
445 id = id ? 'id="'+ id +'" ' : '';
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>';
451 wrap = dom.create( 'div', { 'class': 'mceTemp' }, html );
453 if ( parent = dom.getParent( node, 'p' ) ) {
454 parent.parentNode.insertBefore( wrap, parent );
456 node.parentNode.insertBefore( wrap, node );
459 editor.$( wrap ).find( 'dt.wp-caption-dt' ).append( node );
461 if ( parent && dom.isEmpty( parent ) ) {
462 dom.remove( parent );
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 );
473 if ( wp.media.events ) {
474 wp.media.events.trigger( 'editor:image-update', {
481 editor.nodeChanged();
484 function editImage( img ) {
485 var frame, callback, metadata;
487 if ( typeof wp === 'undefined' || ! wp.media ) {
488 editor.execCommand( 'mceImage' );
492 metadata = extractImageData( img );
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', {
503 state: 'image-details',
507 wp.media.events.trigger( 'editor:frame-create', { frame: frame } );
509 callback = function( imageData ) {
511 editor.undoManager.transact( function() {
512 updateImage( img, imageData );
517 frame.state('image-details').on( 'update', callback );
518 frame.state('replace-image').on( 'replace', callback );
519 frame.on( 'close', function() {
527 function removeImage( node ) {
528 var wrap = editor.dom.getParent( node, 'div.mceTemp' );
530 if ( ! wrap && node.nodeName === 'IMG' ) {
531 wrap = editor.dom.getParent( node, 'a' );
535 if ( wrap.nextSibling ) {
536 editor.selection.select( wrap.nextSibling );
537 } else if ( wrap.previousSibling ) {
538 editor.selection.select( wrap.previousSibling );
540 editor.selection.select( wrap.parentNode );
543 editor.selection.collapse( true );
544 editor.dom.remove( wrap );
546 editor.dom.remove( node );
549 editor.nodeChanged();
550 editor.undoManager.add();
553 editor.on( 'init', function() {
554 var dom = editor.dom,
555 captionClass = editor.getParam( 'wpeditimage_html5_captions' ) ? 'html5-captions' : 'html4-captions';
557 dom.addClass( editor.getBody(), captionClass );
559 // Add caption field to the default image dialog
560 editor.on( 'wpLoadImageForm', function( event ) {
561 if ( editor.getParam( 'wpeditimage_disable_captions' ) ) {
572 label: 'Image caption'
575 event.data.splice( event.data.length - 1, 0, captionField );
578 // Fix caption parent width for images added from URL
579 editor.on( 'wpNewImageRefresh', function( event ) {
580 var parent, captionWidth;
582 if ( parent = dom.getParent( event.node, 'dl.wp-caption' ) ) {
583 if ( ! parent.style.width ) {
584 captionWidth = parseInt( event.node.clientWidth, 10 ) + 10;
585 captionWidth = captionWidth ? captionWidth + 'px' : '50%';
586 dom.setStyle( parent, 'width', captionWidth );
591 editor.on( 'wpImageFormSubmit', function( event ) {
592 var data = event.imgData.data,
593 imgNode = event.imgData.node,
594 caption = event.imgData.caption,
598 wrap, parent, node, html, imgId;
600 // Temp image id so we can find the node later
601 data.id = '__wp-temp-img-id';
602 // Cancel the original callback
603 event.imgData.cancel = true;
605 if ( ! data.style ) {
610 // Delete the image and the caption
612 if ( wrap = dom.getParent( imgNode, 'div.mceTemp' ) ) {
614 } else if ( imgNode.parentNode.nodeName === 'A' ) {
615 dom.remove( imgNode.parentNode );
617 dom.remove( imgNode );
620 editor.nodeChanged();
626 caption = caption.replace( /\r\n|\r/g, '\n' ).replace( /<\/?[a-zA-Z0-9]+( [^<>]+)?>/g, function( a ) {
627 // No line breaks inside HTML tags
628 return a.replace( /[\r\n\t]+/, ' ' );
631 // Convert remaining line breaks to <br>
632 caption = caption.replace( /(<br[^>]*>)\s*\n\s*/g, '$1' ).replace( /\s*\n\s*/g, '<br />' );
633 caption = verifyHTML( caption );
637 // New image inserted
638 html = dom.createHTML( 'img', data );
641 node = editor.selection.getNode();
644 captionWidth = parseInt( data.width, 10 );
646 if ( ! editor.getParam( 'wpeditimage_html5_captions' ) ) {
650 captionWidth = ' style="width: ' + captionWidth + 'px"';
653 html = '<dl class="wp-caption alignnone"' + captionWidth + '>' +
654 '<dt class="wp-caption-dt">'+ html +'</dt><dd class="wp-caption-dd">'+ caption +'</dd></dl>';
656 if ( node.nodeName === 'P' ) {
659 parent = dom.getParent( node, 'p' );
662 if ( parent && parent.nodeName === 'P' ) {
663 wrap = dom.create( 'div', { 'class': 'mceTemp' }, html );
664 parent.parentNode.insertBefore( wrap, parent );
665 editor.selection.select( wrap );
666 editor.nodeChanged();
668 if ( dom.isEmpty( parent ) ) {
669 dom.remove( parent );
672 editor.selection.setContent( '<div class="mceTemp">' + html + '</div>' );
675 editor.selection.setContent( html );
678 // Edit existing image
680 // Store the original image id if any
681 imgId = imgNode.id || null;
682 // Update the image node
683 dom.setAttribs( imgNode, data );
684 wrap = dom.getParent( imgNode, 'dl.wp-caption' );
688 if ( parent = dom.select( 'dd.wp-caption-dd', wrap )[0] ) {
689 parent.innerHTML = caption;
692 if ( imgNode.className ) {
693 captionId = imgNode.className.match( /wp-image-([0-9]+)/ );
694 captionAlign = imgNode.className.match( /align(left|right|center|none)/ );
697 if ( captionAlign ) {
698 captionAlign = captionAlign[0];
699 imgNode.className = imgNode.className.replace( /align(left|right|center|none)/g, '' );
701 captionAlign = 'alignnone';
704 captionAlign = ' class="wp-caption ' + captionAlign + '"';
707 captionId = ' id="attachment_' + captionId[1] + '"';
710 captionWidth = data.width || imgNode.clientWidth;
712 if ( captionWidth ) {
713 captionWidth = parseInt( captionWidth, 10 );
715 if ( ! editor.getParam( 'wpeditimage_html5_captions' ) ) {
719 captionWidth = ' style="width: '+ captionWidth +'px"';
722 if ( imgNode.parentNode && imgNode.parentNode.nodeName === 'A' ) {
723 node = imgNode.parentNode;
728 html = '<dl ' + captionId + captionAlign + captionWidth + '>' +
729 '<dt class="wp-caption-dt"></dt><dd class="wp-caption-dd">'+ caption +'</dd></dl>';
731 wrap = dom.create( 'div', { 'class': 'mceTemp' }, html );
733 if ( parent = dom.getParent( node, 'p' ) ) {
734 parent.parentNode.insertBefore( wrap, parent );
736 node.parentNode.insertBefore( wrap, node );
739 editor.$( wrap ).find( 'dt.wp-caption-dt' ).append( node );
741 if ( parent && dom.isEmpty( parent ) ) {
742 dom.remove( parent );
747 // Remove the caption wrapper and place the image in new paragraph
748 if ( imgNode.parentNode.nodeName === 'A' ) {
749 html = dom.getOuterHTML( imgNode.parentNode );
751 html = dom.getOuterHTML( imgNode );
754 parent = dom.create( 'p', {}, html );
755 dom.insertAfter( parent, wrap.parentNode );
756 editor.selection.select( parent );
757 editor.nodeChanged();
758 dom.remove( wrap.parentNode );
763 imgNode = dom.get('__wp-temp-img-id');
764 dom.setAttrib( imgNode, 'id', imgId );
765 event.imgData.node = imgNode;
768 editor.on( 'wpLoadImageData', function( event ) {
770 data = event.imgData.data,
771 imgNode = event.imgData.node;
773 if ( parent = dom.getParent( imgNode, 'dl.wp-caption' ) ) {
774 parent = dom.select( 'dd.wp-caption-dd', parent )[0];
777 data.caption = editor.serializer.serialize( parent )
778 .replace( /<br[^>]*>/g, '$&\n' ).replace( /^<p>/, '' ).replace( /<\/p>$/, '' );
783 dom.bind( editor.getDoc(), 'dragstart', function( event ) {
784 var node = editor.selection.getNode();
786 // Prevent dragging images out of the caption elements
787 if ( node.nodeName === 'IMG' && dom.getParent( node, '.wp-caption' ) ) {
788 event.preventDefault();
792 // Prevent IE11 from making dl.wp-caption resizable
793 if ( tinymce.Env.ie && tinymce.Env.ie > 10 ) {
794 // The 'mscontrolselect' event is supported only in IE11+
795 dom.bind( editor.getBody(), 'mscontrolselect', function( event ) {
796 if ( event.target.nodeName === 'IMG' && dom.getParent( event.target, '.wp-caption' ) ) {
797 // Hide the thick border with resize handles around dl.wp-caption
798 editor.getBody().focus(); // :(
799 } else if ( event.target.nodeName === 'DL' && dom.hasClass( event.target, 'wp-caption' ) ) {
800 // Trigger the thick border with resize handles...
801 // This will make the caption text editable.
802 event.target.focus();
808 editor.on( 'ObjectResized', function( event ) {
809 var node = event.target;
811 if ( node.nodeName === 'IMG' ) {
812 editor.undoManager.transact( function() {
816 node.className = node.className.replace( /\bsize-[^ ]+/, '' );
818 if ( parent = dom.getParent( node, '.wp-caption' ) ) {
819 width = event.width || dom.getAttrib( node, 'width' );
822 width = parseInt( width, 10 );
824 if ( ! editor.getParam( 'wpeditimage_html5_captions' ) ) {
828 dom.setStyle( parent, 'width', width + 'px' );
835 editor.on( 'BeforeExecCommand', function( event ) {
836 var node, p, DL, align, replacement,
840 if ( cmd === 'mceInsertContent' ) {
841 // When inserting content, if the caret is inside a caption create new paragraph under
842 // and move the caret there
843 if ( node = dom.getParent( editor.selection.getNode(), 'div.mceTemp' ) ) {
844 p = dom.create( 'p' );
845 dom.insertAfter( p, node );
846 editor.selection.setCursorLocation( p, 0 );
847 editor.nodeChanged();
849 } else if ( cmd === 'JustifyLeft' || cmd === 'JustifyRight' || cmd === 'JustifyCenter' || cmd === 'wpAlignNone' ) {
850 node = editor.selection.getNode();
851 align = 'align' + cmd.slice( 7 ).toLowerCase();
852 DL = editor.dom.getParent( node, '.wp-caption' );
854 if ( node.nodeName !== 'IMG' && ! DL ) {
860 if ( editor.dom.hasClass( node, align ) ) {
861 replacement = ' alignnone';
863 replacement = ' ' + align;
866 node.className = trim( node.className.replace( / ?align(left|center|right|none)/g, '' ) + replacement );
868 editor.nodeChanged();
869 event.preventDefault();
872 toolbar.reposition();
875 editor.fire( 'ExecCommand', {
883 editor.on( 'keydown', function( event ) {
884 var node, wrap, P, spacer,
885 selection = editor.selection,
886 keyCode = event.keyCode,
888 VK = tinymce.util.VK;
890 if ( keyCode === VK.ENTER ) {
891 // When pressing Enter inside a caption move the caret to a new parapraph under it
892 node = selection.getNode();
893 wrap = dom.getParent( node, 'div.mceTemp' );
896 dom.events.cancel( event ); // Doesn't cancel all :(
898 // Remove any extra dt and dd cleated on pressing Enter...
899 tinymce.each( dom.select( 'dt, dd', wrap ), function( element ) {
900 if ( dom.isEmpty( element ) ) {
901 dom.remove( element );
905 spacer = tinymce.Env.ie && tinymce.Env.ie < 11 ? '' : '<br data-mce-bogus="1" />';
906 P = dom.create( 'p', null, spacer );
908 if ( node.nodeName === 'DD' ) {
909 dom.insertAfter( P, wrap );
911 wrap.parentNode.insertBefore( P, wrap );
914 editor.nodeChanged();
915 selection.setCursorLocation( P, 0 );
917 } else if ( keyCode === VK.DELETE || keyCode === VK.BACKSPACE ) {
918 node = selection.getNode();
920 if ( node.nodeName === 'DIV' && dom.hasClass( node, 'mceTemp' ) ) {
922 } else if ( node.nodeName === 'IMG' || node.nodeName === 'DT' || node.nodeName === 'A' ) {
923 wrap = dom.getParent( node, 'div.mceTemp' );
927 dom.events.cancel( event );
934 // After undo/redo FF seems to set the image height very slowly when it is set to 'auto' in the CSS.
935 // This causes image.getBoundingClientRect() to return wrong values and the resize handles are shown in wrong places.
936 // Collapse the selection to remove the resize handles.
937 if ( tinymce.Env.gecko ) {
938 editor.on( 'undo redo', function() {
939 if ( editor.selection.getNode().nodeName === 'IMG' ) {
940 editor.selection.collapse();
945 editor.wpSetImgCaption = function( content ) {
946 return parseShortcode( content );
949 editor.wpGetImgCaption = function( content ) {
950 return getShortcode( content );
953 editor.on( 'BeforeSetContent', function( event ) {
954 if ( event.format !== 'raw' ) {
955 event.content = editor.wpSetImgCaption( event.content );
959 editor.on( 'PostProcess', function( event ) {
961 event.content = editor.wpGetImgCaption( event.content );
966 editor.wp = editor.wp || {};
967 editor.wp.isPlaceholder = isPlaceholder;
971 _do_shcode: parseShortcode,
972 _get_shcode: getShortcode