X-Git-Url: https://scripts.mit.edu/gitweb/autoinstalls/wordpress.git/blobdiff_plain/53f4633144ed68c8b8fb5861f992b5489894a940..16e7b37c7914d753890c1a05a9335f3b43751eb8:/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js diff --git a/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js b/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js index 662a92a1..25d33562 100644 --- a/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js +++ b/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js @@ -1,6 +1,6 @@ /* 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; @@ -37,7 +37,7 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) { 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 ) { @@ -61,14 +61,16 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) { } ); 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 ) { @@ -77,21 +79,40 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) { } } ); - // 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; + } + }); - window.setTimeout( function() { - editor.selection.select( node ); - editor.nodeChanged(); - }, 200 ); - } else { - toolbar.hide(); - } - } ); + editor.dom.bind( editor.getDoc(), 'touchmove', function() { + touchOnImage = false; + }); + + 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 ) { @@ -157,22 +178,16 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) { } function getShortcode( content ) { - return content.replace( /
' + out[1] + '
'; - } - - return ''; + if ( dl.indexOf('') !== -1 ) { + // Broken caption. The user managed to drag the image out or type in the wrapper div? + // Remove the with the caption text.
- out = b.replace( /[\s\S]*?((?:]+>)?]+>(?:<\/a>)?)( [\s\S]*<\/p>)?[\s\S]*/gi, ' $1 [\s\S]*<\/p>)?[\s\S]*/gi, ' $1 /, '' ).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+
@@ -830,21 +851,73 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
}
});
}
- });
+ });
+
+ 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
]*>/g, '$&\n' ).replace( /^
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 );
+ 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();
@@ -950,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 );
@@ -962,6 +1041,45 @@ 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;