- ]+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]*)"/ );
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; @@ -243,6 +350,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, ' ' ); @@ -354,18 +462,20 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) { // should create a new function for generating the caption markup html = '- ' +
- '
- ' + dom.getOuterHTML( node ) + '
- '+ imageData.caption +'
- '+ imageData.caption +'
' + html + '' ); + 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 ) { @@ -376,6 +486,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, @@ -385,8 +508,6 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) { } editor.nodeChanged(); - // Refresh the toolbar - addToolbar( imageNode ); } function editImage( img ) { @@ -427,19 +548,16 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) { frame.on( 'close', function() { editor.focus(); frame.detach(); - editingImage = false; }); frame.open(); } 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 ) { @@ -457,129 +575,10 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) { editor.dom.remove( node ); } - removeToolbar(); editor.nodeChanged(); editor.undoManager.add(); } - function addToolbar( node ) { - var rectangle, toolbarHtml, toolbar, left, - dom = editor.dom; - - removeToolbar(); - - // Don't add to placeholders - if ( ! node || node.nodeName !== 'IMG' || isPlaceholder( node ) ) { - return; - } - - dom.setAttrib( node, 'data-wp-imgselect', 1 ); - rectangle = dom.getRect( node ); - - toolbarHtml = '' + - ''; - - toolbar = dom.create( 'p', { - 'id': 'wp-image-toolbar', - 'data-mce-bogus': 'all', - 'contenteditable': false - }, toolbarHtml ); - - if ( editor.rtl ) { - left = rectangle.x + rectangle.w - 82; - } else { - left = rectangle.x; - } - - editor.getBody().appendChild( toolbar ); - dom.setStyles( toolbar, { - top: rectangle.y, - left: left - }); - - toolbarActive = true; - } - - function removeToolbar() { - var toolbar = editor.dom.get( 'wp-image-toolbar' ); - - if ( toolbar ) { - editor.dom.remove( toolbar ); - } - - editor.dom.setAttrib( editor.dom.select( 'img[data-wp-imgselect]' ), 'data-wp-imgselect', null ); - - editingImage = false; - toolbarActive = false; - } - - function isPlaceholder( node ) { - var dom = editor.dom; - - if ( dom.hasClass( node, 'mceItem' ) || dom.getAttrib( node, 'data-mce-placeholder' ) || - dom.getAttrib( node, 'data-mce-object' ) ) { - - return true; - } - - return false; - } - - function isToolbarButton( node ) { - return ( node && node.nodeName === 'I' && node.parentNode.id === 'wp-image-toolbar' ); - } - - function edit( event ) { - var image, - node = event.target, - dom = editor.dom; - - // Don't trigger on right-click - if ( event.button && event.button > 1 ) { - return; - } - - if ( isToolbarButton( node ) ) { - image = dom.select( 'img[data-wp-imgselect]' )[0]; - - if ( image ) { - editor.selection.select( image ); - - if ( dom.hasClass( node, 'remove' ) ) { - removeImage( image ); - } else if ( dom.hasClass( node, 'edit' ) ) { - if ( ! editingImage ) { - editImage( image ); - editingImage = true; - } - } - } - - event.preventDefault(); - } else if ( node.nodeName === 'IMG' && ! editor.dom.getAttrib( node, 'data-wp-imgselect' ) && ! isPlaceholder( node ) ) { - addToolbar( node ); - } else if ( node.nodeName !== 'IMG' ) { - removeToolbar(); - } - } - - if ( 'ontouchend' in document ) { - editor.on( 'click', function( event ) { - var target = event.target; - - if ( editingImage && target.nodeName === 'IMG' ) { - event.preventDefault(); - } - - if ( isToolbarButton( target ) ) { - event.preventDefault(); - event.stopPropagation(); - } - }); - } - - editor.on( 'mouseup touchend', edit ); - editor.on( 'init', function() { var dom = editor.dom, captionClass = editor.getParam( 'wpeditimage_html5_captions' ) ? 'html5-captions' : 'html4-captions'; @@ -595,7 +594,7 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) { var captionField = { type: 'textbox', flex: 1, - name: 'caption', + name: 'wpcaption', minHeight: 60, multiline: true, scroll: true, @@ -621,11 +620,12 @@ 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 = '', - wrap, parent, node, html, imgId; + imgId = null, + wrap, parent, node, html; // Temp image id so we can find the node later data.id = '__wp-temp-img-id'; @@ -750,30 +750,26 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) { } if ( imgNode.parentNode && imgNode.parentNode.nodeName === 'A' ) { - html = dom.getOuterHTML( imgNode.parentNode ); node = imgNode.parentNode; } else { - html = dom.getOuterHTML( imgNode ); node = imgNode; } html = '- ' +
- '
- '+ html +'
- '+ caption +'
- '+ caption +'
' + html + '' ); + node.parentNode.insertBefore( wrap, node ); + } + + editor.$( wrap ).find( 'dt.wp-caption-dt' ).append( node ); + + if ( parent && dom.isEmpty( parent ) ) { + dom.remove( parent ); } } } else { @@ -795,7 +791,7 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) { } imgNode = dom.get('__wp-temp-img-id'); - dom.setAttrib( imgNode, 'id', imgId ); + dom.setAttrib( imgNode, 'id', imgId || null ); event.imgData.node = imgNode; }); @@ -808,24 +804,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(); - } - - // Remove toolbar to avoid an orphaned toolbar when dragging an image to a new location - removeToolbar(); - }); - // Prevent IE11 from making dl.wp-caption resizable if ( tinymce.Env.ie && tinymce.Env.ie > 10 ) { // The 'mscontrolselect' event is supported only in IE11+ @@ -839,14 +823,6 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) { event.target.focus(); } }); - - editor.on( 'click', function( event ) { - if ( event.target.nodeName === 'IMG' && dom.getAttrib( event.target, 'data-wp-imgselect' ) && - dom.getParent( event.target, 'dl.wp-caption' ) ) { - - editor.getBody().focus(); - } - }); } }); @@ -873,60 +849,107 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) { dom.setStyle( parent, 'width', width + 'px' ); } } - // refresh toolbar - addToolbar( node ); }); } - }); + }); + + 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, + 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(); - } - } else if ( cmd === 'JustifyLeft' || cmd === 'JustifyRight' || cmd === 'JustifyCenter' ) { + if ( cmd === 'mceInsertContent' || cmd === 'Indent' || cmd === 'Outdent' ) { node = editor.selection.getNode(); - align = cmd.substr(7).toLowerCase(); - align = 'align' + align; - DL = dom.getParent( node, 'dl.wp-caption' ); - - removeToolbar(); + 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; + } - if ( DL ) { - // When inside an image caption, set the align* class on dl.wp-caption - if ( dom.hasClass( DL, align ) ) { - dom.removeClass( DL, align ); - dom.addClass( DL, 'alignnone' ); + // 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 ); + editor.nodeChanged(); } else { - DL.className = DL.className.replace( /align[^ ]+/g, '' ); - dom.addClass( DL, align ); + // 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(); + align = 'align' + cmd.slice( 7 ).toLowerCase(); + DL = editor.dom.getParent( node, '.wp-caption' ); - if ( node.nodeName === 'IMG' ) { - // Re-select the image to update resize handles, etc. - editor.nodeChanged(); - } + if ( node.nodeName !== 'IMG' && ! DL ) { + return; + } - event.preventDefault(); + node = DL || node; + + if ( editor.dom.hasClass( node, align ) ) { + replacement = ' alignnone'; + } else { + replacement = ' ' + align; } - if ( node.nodeName === 'IMG' ) { - if ( dom.hasClass( node, align ) ) { - // The align class is being removed - dom.addClass( node, 'alignnone' ); - } else { - dom.removeClass( node, 'alignnone' ); - } + node.className = trim( node.className.replace( / ?align(left|center|right|none)/g, '' ) + replacement ); + + editor.nodeChanged(); + event.preventDefault(); + + if ( toolbar ) { + toolbar.reposition(); } + + editor.fire( 'ExecCommand', { + command: cmd, + ui: event.ui, + value: event.value + } ); } }); @@ -978,36 +1001,9 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) { removeImage( node ); return false; } - - removeToolbar(); - } - - // Most key presses will replace the image so we need to remove the toolbar - if ( toolbarActive ) { - if ( event.ctrlKey || event.metaKey || event.altKey || ( keyCode < 48 && keyCode !== VK.SPACEBAR ) ) { - return; - } - - removeToolbar(); } }); - editor.on( 'mousedown', function( event ) { - if ( isToolbarButton( event.target ) ) { - if ( tinymce.Env.ie ) { - // Stop IE > 8 from making the wrapper resizable on mousedown - event.preventDefault(); - } - } else if ( event.target.nodeName !== 'IMG' ) { - removeToolbar(); - } - }); - - // Remove from undo levels - editor.on( 'BeforeAddUndo', function( event ) { - event.level.content = event.level.content.replace( / data-wp-imgselect="1"/g, '' ); - }); - // After undo/redo FF seems to set the image height very slowly when it is set to 'auto' in the CSS. // This causes image.getBoundingClientRect() to return wrong values and the resize handles are shown in wrong places. // Collapse the selection to remove the resize handles. @@ -1019,10 +1015,6 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) { }); } - editor.on( 'cut wpview-selected', function() { - removeToolbar(); - }); - editor.wpSetImgCaption = function( content ) { return parseShortcode( content ); }; @@ -1031,6 +1023,12 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) { 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 ); @@ -1040,10 +1038,53 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) { editor.on( 'PostProcess', function( event ) { if ( event.get ) { event.content = editor.wpGetImgCaption( event.content ); - event.content = event.content.replace( / data-wp-imgselect="1"/g, '' ); } }); + ( 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
' + out[1] + '
'; - } - - return ''; + if ( dl.indexOf('- ,