- ]+wp-caption[^>]+>[\s\S]+?<\/dl>)\s*(?:<\/div>)?/g, function( all, dl ) {
var out = '';
- if ( b.indexOf('
- ]+>([\s\S]+?)<\/dd>/i );
if ( out && out[1] ) {
return '
' + out[1] + '
'; @@ -431,23 +193,26 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) { return ''; } - out = b.replace( /\s*- ]+)>\s*
- ]+>([\s\S]+?)<\/dt>\s*
- ]+>([\s\S]*?)<\/dd>\s*<\/dl>\s*/gi, function( a, b, c, caption ) {
+ out = dl.replace( /\s*
- ]+)>\s*
- ]+>([\s\S]+?)<\/dt>\s*
- ]+>([\s\S]*?)<\/dd>\s*<\/dl>\s*/gi, function( a, b, c, caption ) {
var id, classes, align, width;
width = c.match( /width="([0-9]*)"/ );
width = ( width && width[1] ) ? width[1] : '';
+ classes = b.match( /class="([^"]*)"/ );
+ classes = ( classes && classes[1] ) ? classes[1] : '';
+ align = classes.match( /align[a-z]+/i ) || 'alignnone';
+
if ( ! width || ! caption ) {
+ if ( 'alignnone' !== align[0] ) {
+ c = c.replace( />
]+>(?:<\/a>)?)(
[\s\S]*<\/p>)?[\s\S]*/gi, '
$1
$2' ); + out = dl.replace( /[\s\S]*?((?:]+>)?]+>(?:<\/a>)?)(
[\s\S]*<\/p>)?[\s\S]*/gi, '
$1
$2' ); } return out; @@ -591,6 +356,7 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) { function updateImage( imageNode, imageData ) { var classes, className, node, html, parent, wrap, linkNode, captionNode, dd, dl, id, attrs, linkAttrs, width, height, align, + $imageNode, srcset, src, dom = editor.dom; classes = tinymce.explode( imageData.extraClasses, ' ' ); @@ -708,15 +474,15 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) { if ( parent = dom.getParent( node, 'p' ) ) { parent.parentNode.insertBefore( wrap, parent ); - - if ( dom.isEmpty( parent ) ) { - dom.remove( parent ); - } } else { node.parentNode.insertBefore( wrap, node ); } editor.$( wrap ).find( 'dt.wp-caption-dt' ).append( node ); + + if ( parent && dom.isEmpty( parent ) ) { + dom.remove( parent ); + } } } else if ( captionNode ) { // Remove the caption wrapper and place the image in new paragraph @@ -726,6 +492,19 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) { dom.remove( captionNode ); } + $imageNode = editor.$( imageNode ); + srcset = $imageNode.attr( 'srcset' ); + src = $imageNode.attr( 'src' ); + + // Remove srcset and sizes if the image file was edited or the image was replaced. + if ( srcset && src ) { + src = src.replace( /[?#].*/, '' ); + + if ( srcset.indexOf( src ) === -1 ) { + $imageNode.attr( 'srcset', null ).attr( 'sizes', null ); + } + } + if ( wp.media.events ) { wp.media.events.trigger( 'editor:image-update', { editor: editor, @@ -781,12 +560,10 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) { } function removeImage( node ) { - var wrap; + var wrap = editor.dom.getParent( node, 'div.mceTemp' ); - if ( node.nodeName === 'DIV' && editor.dom.hasClass( node, 'mceTemp' ) ) { - wrap = node; - } else if ( node.nodeName === 'IMG' || node.nodeName === 'DT' || node.nodeName === 'A' ) { - wrap = editor.dom.getParent( node, 'div.mceTemp' ); + if ( ! wrap && node.nodeName === 'IMG' ) { + wrap = editor.dom.getParent( node, 'a' ); } if ( wrap ) { @@ -823,7 +600,7 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) { var captionField = { type: 'textbox', flex: 1, - name: 'caption', + name: 'wpcaption', minHeight: 60, multiline: true, scroll: true, @@ -849,7 +626,7 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) { editor.on( 'wpImageFormSubmit', function( event ) { var data = event.imgData.data, imgNode = event.imgData.node, - caption = event.imgData.caption, + caption = event.imgData.wpcaption, captionId = '', captionAlign = '', captionWidth = '', @@ -990,15 +767,15 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) { if ( parent = dom.getParent( node, 'p' ) ) { parent.parentNode.insertBefore( wrap, parent ); - - if ( dom.isEmpty( parent ) ) { - dom.remove( parent ); - } } else { node.parentNode.insertBefore( wrap, node ); } editor.$( wrap ).find( 'dt.wp-caption-dt' ).append( node ); + + if ( parent && dom.isEmpty( parent ) ) { + dom.remove( parent ); + } } } else { if ( wrap ) { @@ -1032,21 +809,12 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) { parent = dom.select( 'dd.wp-caption-dd', parent )[0]; if ( parent ) { - data.caption = editor.serializer.serialize( parent ) + data.wpcaption = editor.serializer.serialize( parent ) .replace( //, '' ).replace( /<\/p>$/, '' ); } } }); - dom.bind( editor.getDoc(), 'dragstart', function( event ) { - var node = editor.selection.getNode(); - - // Prevent dragging images out of the caption elements - if ( node.nodeName === 'IMG' && dom.getParent( node, '.wp-caption' ) ) { - event.preventDefault(); - } - }); - // Prevent IE11 from making dl.wp-caption resizable if ( tinymce.Env.ie && tinymce.Env.ie > 10 ) { // The 'mscontrolselect' event is supported only in IE11+ @@ -1121,13 +889,13 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) { replacement = ' ' + align; } - node.className = node.className.replace( / ?align(left|center|right|none)/g, '' ) + replacement; + node.className = trim( node.className.replace( / ?align(left|center|right|none)/g, '' ) + replacement ); editor.nodeChanged(); event.preventDefault(); - if ( floatingToolbar ) { - floatingToolbar.reposition(); + if ( toolbar ) { + toolbar.reposition(); } editor.fire( 'ExecCommand', { @@ -1220,6 +988,50 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) { } }); + ( function() { + var wrap; + + editor.on( 'dragstart', function() { + var node = editor.selection.getNode(); + + if ( node.nodeName === 'IMG' ) { + wrap = editor.dom.getParent( node, '.mceTemp' ); + + if ( ! wrap && node.parentNode.nodeName === 'A' && ! hasTextContent( node.parentNode ) ) { + wrap = node.parentNode; + } + } + } ); + + editor.on( 'drop', function( event ) { + var dom = editor.dom, + rng = tinymce.dom.RangeUtils.getCaretRangeFromPoint( event.clientX, event.clientY, editor.getDoc() ); + + // Don't allow anything to be dropped in a captioned image. + if ( rng && dom.getParent( rng.startContainer, '.mceTemp' ) ) { + event.preventDefault(); + } else if ( wrap ) { + event.preventDefault(); + + editor.undoManager.transact( function() { + if ( rng ) { + editor.selection.setRng( rng ); + } + + editor.selection.setNode( wrap ); + dom.remove( wrap ); + } ); + } + + wrap = null; + } ); + } )(); + + // Add to editor.wp + editor.wp = editor.wp || {}; + editor.wp.isPlaceholder = isPlaceholder; + + // Back-compat. return { _do_shcode: parseShortcode, _get_shcode: getShortcode