- ]+wp-caption[^>]+>[\s\S]+?<\/dl>)\s*(?:<\/div>)?/g, function( all, dl ) {
var out = '';
- if ( b.indexOf('
- and
- and return the remaining text.
+ return dl.replace( /
- ]+)>\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]*)"/ );
@@ -212,7 +227,7 @@
if ( out.indexOf('[caption') === -1 ) {
// the caption html seems broken, try to find the image that may be wrapped in a link
// and may be followed by
with the caption text. - out = b.replace( /[\s\S]*?((?:]+>)?
]+>(?:<\/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; @@ -316,7 +331,7 @@ } function hasTextContent( node ) { - return node && !! ( node.textContent || node.innerText ); + return node && !! ( node.textContent || node.innerText ).replace( /\ufeff/g, '' ); } // Verify HTML in captions @@ -335,6 +350,7 @@ 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, ' ' ); @@ -366,13 +382,15 @@ src: imageData.url, width: width || null, height: height || null, - alt: imageData.alt, title: imageData.title || null, 'class': classes.join( ' ' ) || null }; dom.setAttribs( imageNode, attrs ); + // Preserve empty alt attributes. + editor.$( imageNode ).attr( 'alt', imageData.alt || '' ); + linkAttrs = { href: imageData.linkUrl, rel: imageData.linkRel || null, @@ -470,6 +488,19 @@ 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, @@ -525,12 +556,10 @@ } 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 ) { @@ -558,239 +587,6 @@ dom.addClass( editor.getBody(), captionClass ); - // Add caption field to the default image dialog - editor.on( 'wpLoadImageForm', function( event ) { - if ( editor.getParam( 'wpeditimage_disable_captions' ) ) { - return; - } - - var captionField = { - type: 'textbox', - flex: 1, - name: 'caption', - minHeight: 60, - multiline: true, - scroll: true, - label: 'Image caption' - }; - - event.data.splice( event.data.length - 1, 0, captionField ); - }); - - // Fix caption parent width for images added from URL - editor.on( 'wpNewImageRefresh', function( event ) { - var parent, captionWidth; - - if ( parent = dom.getParent( event.node, 'dl.wp-caption' ) ) { - if ( ! parent.style.width ) { - captionWidth = parseInt( event.node.clientWidth, 10 ) + 10; - captionWidth = captionWidth ? captionWidth + 'px' : '50%'; - dom.setStyle( parent, 'width', captionWidth ); - } - } - }); - - editor.on( 'wpImageFormSubmit', function( event ) { - var data = event.imgData.data, - imgNode = event.imgData.node, - caption = event.imgData.caption, - captionId = '', - captionAlign = '', - captionWidth = '', - wrap, parent, node, html, imgId; - - // Temp image id so we can find the node later - data.id = '__wp-temp-img-id'; - // Cancel the original callback - event.imgData.cancel = true; - - if ( ! data.style ) { - data.style = null; - } - - if ( ! data.src ) { - // Delete the image and the caption - if ( imgNode ) { - if ( wrap = dom.getParent( imgNode, 'div.mceTemp' ) ) { - dom.remove( wrap ); - } else if ( imgNode.parentNode.nodeName === 'A' ) { - dom.remove( imgNode.parentNode ); - } else { - dom.remove( imgNode ); - } - - editor.nodeChanged(); - } - return; - } - - if ( caption ) { - caption = caption.replace( /\r\n|\r/g, '\n' ).replace( /<\/?[a-zA-Z0-9]+( [^<>]+)?>/g, function( a ) { - // No line breaks inside HTML tags - return a.replace( /[\r\n\t]+/, ' ' ); - }); - - // Convert remaining line breaks to
- caption = caption.replace( /(
' ); - caption = verifyHTML( caption ); - } - - if ( ! imgNode ) { - // New image inserted - html = dom.createHTML( 'img', data ); - - if ( caption ) { - node = editor.selection.getNode(); - - if ( data.width ) { - captionWidth = parseInt( data.width, 10 ); - - if ( ! editor.getParam( 'wpeditimage_html5_captions' ) ) { - captionWidth += 10; - } - - captionWidth = ' style="width: ' + captionWidth + 'px"'; - } - - html = '- ' +
- '
- '+ html +'
- '+ caption +'
' + html + '' ); - } - } else { - editor.selection.setContent( html ); - } - } else { - // Edit existing image - - // Store the original image id if any - imgId = imgNode.id || null; - // Update the image node - dom.setAttribs( imgNode, data ); - wrap = dom.getParent( imgNode, 'dl.wp-caption' ); - - if ( caption ) { - if ( wrap ) { - if ( parent = dom.select( 'dd.wp-caption-dd', wrap )[0] ) { - parent.innerHTML = caption; - } - } else { - if ( imgNode.className ) { - captionId = imgNode.className.match( /wp-image-([0-9]+)/ ); - captionAlign = imgNode.className.match( /align(left|right|center|none)/ ); - } - - if ( captionAlign ) { - captionAlign = captionAlign[0]; - imgNode.className = imgNode.className.replace( /align(left|right|center|none)/g, '' ); - } else { - captionAlign = 'alignnone'; - } - - captionAlign = ' class="wp-caption ' + captionAlign + '"'; - - if ( captionId ) { - captionId = ' id="attachment_' + captionId[1] + '"'; - } - - captionWidth = data.width || imgNode.clientWidth; - - if ( captionWidth ) { - captionWidth = parseInt( captionWidth, 10 ); - - if ( ! editor.getParam( 'wpeditimage_html5_captions' ) ) { - captionWidth += 10; - } - - captionWidth = ' style="width: '+ captionWidth +'px"'; - } - - if ( imgNode.parentNode && imgNode.parentNode.nodeName === 'A' ) { - node = imgNode.parentNode; - } else { - node = imgNode; - } - - html = '- ' +
- '
- '+ caption +'
/, '' ).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+ @@ -832,21 +628,81 @@ } }); } - }); + }); + + editor.on( 'pastePostProcess', function( event ) { + // Pasting in a caption node. + if ( editor.dom.getParent( editor.selection.getNode(), 'dd.wp-caption-dd' ) ) { + // Remove "non-block" elements that should not be in captions. + editor.$( 'img, audio, video, object, embed, iframe, script, style', event.node ).remove(); + + editor.$( '*', event.node ).each( function( i, node ) { + if ( editor.dom.isBlock( node ) ) { + // Insert
where the blocks used to be. Makes it look better after pasting in the caption. + if ( tinymce.trim( node.textContent || node.innerText ) ) { + editor.dom.insertAfter( editor.dom.create( 'br' ), node ); + editor.dom.remove( node, true ); + } else { + editor.dom.remove( node ); + } + } + }); + + // Trim
tags. + editor.$( 'br', event.node ).each( function( i, node ) { + if ( ! node.nextSibling || node.nextSibling.nodeName === 'BR' || + ! node.previousSibling || node.previousSibling.nodeName === 'BR' ) { + + editor.dom.remove( node ); + } + } ); + + // Pasted HTML is cleaned up for inserting in the caption. + pasteInCaption = true; + } + }); editor.on( 'BeforeExecCommand', function( event ) { - var node, p, DL, align, replacement, + var node, p, DL, align, replacement, captionParent, cmd = event.command, dom = editor.dom; - if ( cmd === 'mceInsertContent' ) { - // When inserting content, if the caret is inside a caption create new paragraph under - // and move the caret there - if ( node = dom.getParent( editor.selection.getNode(), 'div.mceTemp' ) ) { - p = dom.create( 'p' ); - dom.insertAfter( p, node ); - editor.selection.setCursorLocation( p, 0 ); - editor.nodeChanged(); + if ( cmd === 'mceInsertContent' || cmd === 'Indent' || cmd === 'Outdent' ) { + node = editor.selection.getNode(); + captionParent = dom.getParent( node, 'div.mceTemp' ); + + if ( captionParent ) { + if ( cmd === 'mceInsertContent' ) { + if ( pasteInCaption ) { + pasteInCaption = false; + // We are in the caption element, and in 'paste' context, + // and the pasted HTML was cleaned up on 'pastePostProcess' above. + // Let it be pasted in the caption. + return; + } + + // The paste is somewhere else in the caption DL element. + // Prevent pasting in there as it will break the caption. + // Make new paragraph under the caption DL and move the caret there. + p = dom.create( 'p' ); + dom.insertAfter( p, captionParent ); + editor.selection.setCursorLocation( p, 0 ); + + // If the image is selected and the user pastes "over" it, + // replace both the image and the caption elements with the pasted content. + // This matches the behavior when pasting over non-caption images. + if ( node.nodeName === 'IMG' ) { + editor.$( captionParent ).remove(); + } + + editor.nodeChanged(); + } else { + // Clicking Indent or Outdent while an image with a caption is selected breaks the caption. + // See #38313. + event.preventDefault(); + event.stopImmediatePropagation(); + return false; + } } } else if ( cmd === 'JustifyLeft' || cmd === 'JustifyRight' || cmd === 'JustifyCenter' || cmd === 'wpAlignNone' ) { node = editor.selection.getNode(); @@ -865,7 +721,7 @@ 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(); @@ -952,6 +808,12 @@ return getShortcode( content ); }; + editor.on( 'beforeGetContent', function( event ) { + if ( event.format !== 'raw' ) { + editor.$( 'img[id="__wp-temp-img-id"]' ).attr( 'id', null ); + } + }); + editor.on( 'BeforeSetContent', function( event ) { if ( event.format !== 'raw' ) { event.content = editor.wpSetImgCaption( event.content ); @@ -964,6 +826,45 @@ } }); + ( 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;
' + out[1] + '
'; - } - - return ''; + if ( dl.indexOf('- ,