--- a/wp/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js Tue Jun 09 11:14:17 2015 +0000
+++ b/wp/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js Mon Oct 14 17:39:30 2019 +0200
@@ -1,7 +1,8 @@
/* global tinymce */
tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
- var toolbar, serializer,
+ var toolbar, serializer, touchOnImage, pasteInCaption,
each = tinymce.each,
+ trim = tinymce.trim,
iOS = tinymce.Env.iOS;
function isPlaceholder( node ) {
@@ -17,7 +18,7 @@
} );
editor.addButton( 'wp_img_edit', {
- tooltip: 'Edit ', // trailing space is needed, used for context
+ tooltip: 'Edit|button', // '|button' is not displayed, only used for context
icon: 'dashicon dashicons-edit',
onclick: function() {
editImage( editor.selection.getNode() );
@@ -36,7 +37,7 @@
tooltip: tooltip,
icon: 'dashicon dashicons-align-' + direction,
cmd: 'alignnone' === name ? 'wpAlignNone' : 'Justify' + direction.slice( 0, 1 ).toUpperCase() + direction.slice( 1 ),
- onPostRender: function() {
+ onPostRender: function() {
var self = this;
editor.on( 'NodeChange', function( event ) {
@@ -60,14 +61,16 @@
} );
editor.once( 'preinit', function() {
- toolbar = editor.wp._createToolbar( [
- 'wp_img_alignleft',
- 'wp_img_aligncenter',
- 'wp_img_alignright',
- 'wp_img_alignnone',
- 'wp_img_edit',
- 'wp_img_remove'
- ] );
+ if ( editor.wp && editor.wp._createToolbar ) {
+ toolbar = editor.wp._createToolbar( [
+ 'wp_img_alignleft',
+ 'wp_img_aligncenter',
+ 'wp_img_alignright',
+ 'wp_img_alignnone',
+ 'wp_img_edit',
+ 'wp_img_remove'
+ ] );
+ }
} );
editor.on( 'wptoolbar', function( event ) {
@@ -76,27 +79,45 @@
}
} );
- // Safari on iOS fails to select image nodes in contentEditoble mode on touch/click.
+ function isNonEditable( node ) {
+ var parent = editor.$( node ).parents( '[contenteditable]' );
+ return parent && parent.attr( 'contenteditable' ) === 'false';
+ }
+
+ // Safari on iOS fails to select images in contentEditoble mode on touch.
// Select them again.
if ( iOS ) {
- editor.on( 'click', function( event ) {
- if ( event.target.nodeName === 'IMG' ) {
- var node = event.target;
+ editor.on( 'init', function() {
+ editor.on( 'touchstart', function( event ) {
+ if ( event.target.nodeName === 'IMG' && ! isNonEditable( event.target ) ) {
+ touchOnImage = true;
+ }
+ });
+
+ editor.dom.bind( editor.getDoc(), 'touchmove', function() {
+ touchOnImage = false;
+ });
- window.setTimeout( function() {
- editor.selection.select( node );
- editor.nodeChanged();
- }, 200 );
- } else {
- toolbar.hide();
- }
- } );
+ editor.on( 'touchend', function( event ) {
+ if ( touchOnImage && event.target.nodeName === 'IMG' && ! isNonEditable( event.target ) ) {
+ var node = event.target;
+
+ touchOnImage = false;
+
+ window.setTimeout( function() {
+ editor.selection.select( node );
+ editor.nodeChanged();
+ }, 100 );
+ } else if ( toolbar ) {
+ toolbar.hide();
+ }
+ });
+ });
}
function parseShortcode( content ) {
return content.replace( /(?:<p>)?\[(?:wp_)?caption([^\]]+)\]([\s\S]+?)\[\/(?:wp_)?caption\](?:<\/p>)?/g, function( a, b, c ) {
- var id, align, classes, caption, img, width,
- trim = tinymce.trim;
+ var id, align, classes, caption, img, width;
id = b.match( /id=['"]([^'"]*)['"] ?/ );
if ( id ) {
@@ -157,22 +178,16 @@
}
function getShortcode( content ) {
- return content.replace( /<div (?:id="attachment_|class="mceTemp)[^>]*>([\s\S]+?)<\/div>/g, function( a, b ) {
+ return content.replace( /(?:<div [^>]+mceTemp[^>]+>)?\s*(<dl [^>]+wp-caption[^>]+>[\s\S]+?<\/dl>)\s*(?:<\/div>)?/g, function( all, dl ) {
var out = '';
- if ( b.indexOf('<img ') === -1 ) {
- // Broken caption. The user managed to drag the image out?
- // Try to return the caption text as a paragraph.
- out = b.match( /<dd [^>]+>([\s\S]+?)<\/dd>/i );
-
- if ( out && out[1] ) {
- return '<p>' + out[1] + '</p>';
- }
-
- return '';
+ if ( dl.indexOf('<img ') === -1 || dl.indexOf('</p>') !== -1 ) {
+ // Broken caption. The user managed to drag the image out or type in the wrapper div?
+ // Remove the <dl>, <dd> and <dt> and return the remaining text.
+ return dl.replace( /<d[ldt]( [^>]+)?>/g, '' ).replace( /<\/d[ldt]>/g, '' );
}
- out = b.replace( /\s*<dl ([^>]+)>\s*<dt [^>]+>([\s\S]+?)<\/dt>\s*<dd [^>]+>([\s\S]*?)<\/dd>\s*<\/dl>\s*/gi, function( a, b, c, caption ) {
+ out = dl.replace( /\s*<dl ([^>]+)>\s*<dt [^>]+>([\s\S]+?)<\/dt>\s*<dd [^>]+>([\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 <p> with the caption text.
- out = b.replace( /[\s\S]*?((?:<a [^>]+>)?<img [^>]+>(?:<\/a>)?)(<p>[\s\S]*<\/p>)?[\s\S]*/gi, '<p>$1</p>$2' );
+ out = dl.replace( /[\s\S]*?((?:<a [^>]+>)?<img [^>]+>(?:<\/a>)?)(<p>[\s\S]*<\/p>)?[\s\S]*/gi, '<p>$1</p>$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 <br>
- caption = caption.replace( /(<br[^>]*>)\s*\n\s*/g, '$1' ).replace( /\s*\n\s*/g, '<br />' );
- 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 = '<dl class="wp-caption alignnone"' + captionWidth + '>' +
- '<dt class="wp-caption-dt">'+ html +'</dt><dd class="wp-caption-dd">'+ caption +'</dd></dl>';
-
- if ( node.nodeName === 'P' ) {
- parent = node;
- } else {
- parent = dom.getParent( node, 'p' );
- }
-
- if ( parent && parent.nodeName === 'P' ) {
- wrap = dom.create( 'div', { 'class': 'mceTemp' }, html );
- parent.parentNode.insertBefore( wrap, parent );
- editor.selection.select( wrap );
- editor.nodeChanged();
-
- if ( dom.isEmpty( parent ) ) {
- dom.remove( parent );
- }
- } else {
- editor.selection.setContent( '<div class="mceTemp">' + html + '</div>' );
- }
- } 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 = '<dl ' + captionId + captionAlign + captionWidth + '>' +
- '<dt class="wp-caption-dt"></dt><dd class="wp-caption-dd">'+ caption +'</dd></dl>';
-
- wrap = dom.create( 'div', { 'class': 'mceTemp' }, html );
-
- if ( parent = dom.getParent( node, 'p' ) ) {
- parent.parentNode.insertBefore( wrap, 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 ) {
- // Remove the caption wrapper and place the image in new paragraph
- if ( imgNode.parentNode.nodeName === 'A' ) {
- html = dom.getOuterHTML( imgNode.parentNode );
- } else {
- html = dom.getOuterHTML( imgNode );
- }
-
- parent = dom.create( 'p', {}, html );
- dom.insertAfter( parent, wrap.parentNode );
- editor.selection.select( parent );
- editor.nodeChanged();
- dom.remove( wrap.parentNode );
- }
- }
- }
-
- imgNode = dom.get('__wp-temp-img-id');
- dom.setAttrib( imgNode, 'id', imgId );
- event.imgData.node = imgNode;
- });
-
- editor.on( 'wpLoadImageData', function( event ) {
- var parent,
- data = event.imgData.data,
- imgNode = event.imgData.node;
-
- if ( parent = dom.getParent( imgNode, 'dl.wp-caption' ) ) {
- parent = dom.select( 'dd.wp-caption-dd', parent )[0];
-
- if ( parent ) {
- data.caption = editor.serializer.serialize( parent )
- .replace( /<br[^>]*>/g, '$&\n' ).replace( /^<p>/, '' ).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 <br> 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 <br> 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;