X-Git-Url: https://scripts.mit.edu/gitweb/autoinstalls/wordpress.git/blobdiff_plain/41578db67d72562346e4dbb2a14889b23d522813..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 050a1f53..25d33562 100644 --- a/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js +++ b/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js @@ -1,112 +1,233 @@ /* global tinymce */ tinymce.PluginManager.add( 'wpeditimage', function( editor ) { - var toolbarActive = false; + var toolbar, serializer, touchOnImage, pasteInCaption, + each = tinymce.each, + trim = tinymce.trim, + iOS = tinymce.Env.iOS; + + function isPlaceholder( node ) { + return !! ( editor.dom.getAttrib( node, 'data-mce-placeholder' ) || editor.dom.getAttrib( node, 'data-mce-object' ) ); + } + + editor.addButton( 'wp_img_remove', { + tooltip: 'Remove', + icon: 'dashicon dashicons-no', + onclick: function() { + removeImage( editor.selection.getNode() ); + } + } ); + + editor.addButton( 'wp_img_edit', { + tooltip: 'Edit ', // trailing space is needed, used for context + icon: 'dashicon dashicons-edit', + onclick: function() { + editImage( editor.selection.getNode() ); + } + } ); + + each( { + alignleft: 'Align left', + aligncenter: 'Align center', + alignright: 'Align right', + alignnone: 'No alignment' + }, function( tooltip, name ) { + var direction = name.slice( 5 ); + + editor.addButton( 'wp_img_' + name, { + tooltip: tooltip, + icon: 'dashicon dashicons-align-' + direction, + cmd: 'alignnone' === name ? 'wpAlignNone' : 'Justify' + direction.slice( 0, 1 ).toUpperCase() + direction.slice( 1 ), + onPostRender: function() { + var self = this; + + editor.on( 'NodeChange', function( event ) { + var node; + + // Don't bother. + if ( event.element.nodeName !== 'IMG' ) { + return; + } + + node = editor.dom.getParent( event.element, '.wp-caption' ) || event.element; + + if ( 'alignnone' === name ) { + self.active( ! /\balign(left|center|right)\b/.test( node.className ) ); + } else { + self.active( editor.dom.hasClass( node, name ) ); + } + } ); + } + } ); + } ); + + editor.once( 'preinit', function() { + 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 ) { + if ( event.element.nodeName === 'IMG' && ! isPlaceholder( event.element ) ) { + event.toolbar = toolbar; + } + } ); + + 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( '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; + }); + + 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( /(?:
)?\[(?:wp_)?caption([^\]]+)\]([\s\S]+?)\[\/(?:wp_)?caption\](?:<\/p>)?/g, function( a, b, c ) {
- var id, cls, w, cap, img, width,
- trim = tinymce.trim;
+ var id, align, classes, caption, img, width;
id = b.match( /id=['"]([^'"]*)['"] ?/ );
if ( id ) {
b = b.replace( id[0], '' );
}
- cls = b.match( /align=['"]([^'"]*)['"] ?/ );
- if ( cls ) {
- b = b.replace( cls[0], '' );
+ align = b.match( /align=['"]([^'"]*)['"] ?/ );
+ if ( align ) {
+ b = b.replace( align[0], '' );
}
- w = b.match( /width=['"]([0-9]*)['"] ?/ );
- if ( w ) {
- b = b.replace( w[0], '' );
+ classes = b.match( /class=['"]([^'"]*)['"] ?/ );
+ if ( classes ) {
+ b = b.replace( classes[0], '' );
+ }
+
+ width = b.match( /width=['"]([0-9]*)['"] ?/ );
+ if ( width ) {
+ b = b.replace( width[0], '' );
}
c = trim( c );
img = c.match( /((?:]+>)?]+>(?:<\/a>)?)([\s\S]*)/i );
if ( img && img[2] ) {
- cap = trim( img[2] );
+ caption = trim( img[2] );
img = trim( img[1] );
} else {
// old captions shortcode style
- cap = trim( b ).replace( /caption=['"]/, '' ).replace( /['"]$/, '' );
+ caption = trim( b ).replace( /caption=['"]/, '' ).replace( /['"]$/, '' );
img = c;
}
- id = ( id && id[1] ) ? id[1] : '';
- cls = ( cls && cls[1] ) ? cls[1] : 'alignnone';
+ id = ( id && id[1] ) ? id[1].replace( /[<>&]+/g, '' ) : '';
+ align = ( align && align[1] ) ? align[1] : 'alignnone';
+ classes = ( classes && classes[1] ) ? ' ' + classes[1].replace( /[<>&]+/g, '' ) : '';
- if ( ! w && img ) {
- w = img.match( /width=['"]([0-9]*)['"]/ );
+ if ( ! width && img ) {
+ width = img.match( /width=['"]([0-9]*)['"]/ );
}
- if ( w && w[1] ) {
- w = w[1];
+ if ( width && width[1] ) {
+ width = width[1];
}
- if ( ! w || ! cap ) {
+ if ( ! width || ! caption ) {
return c;
}
- width = parseInt( w, 10 );
+ width = parseInt( width, 10 );
if ( ! editor.getParam( 'wpeditimage_html5_captions' ) ) {
width += 10;
}
- return ' ' + out[1] + ' 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();
- }
-
- // 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+
@@ -741,100 +823,133 @@ 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();
- }
- });
}
});
editor.on( 'ObjectResized', function( event ) {
- var parent, width,
- node = event.target,
- dom = editor.dom;
+ var node = event.target;
if ( node.nodeName === 'IMG' ) {
- node.className = node.className.replace( /\bsize-[^ ]+/, '' );
+ editor.undoManager.transact( function() {
+ var parent, width,
+ dom = editor.dom;
- if ( parent = dom.getParent( node, '.wp-caption' ) ) {
- width = event.width || dom.getAttrib( node, 'width' );
+ node.className = node.className.replace( /\bsize-[^ ]+/, '' );
- if ( width ) {
- width = parseInt( width, 10 );
+ if ( parent = dom.getParent( node, '.wp-caption' ) ) {
+ width = event.width || dom.getAttrib( node, 'width' );
- if ( ! editor.getParam( 'wpeditimage_html5_captions' ) ) {
- width += 10;
+ if ( width ) {
+ width = parseInt( width, 10 );
+
+ if ( ! editor.getParam( 'wpeditimage_html5_captions' ) ) {
+ width += 10;
+ }
+
+ dom.setStyle( parent, 'width', width + 'px' );
}
+ }
+ });
+ }
+ });
- dom.setStyle( parent, 'width', width + 'px' );
+ 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 ]+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 '
,
]+)>\s*
';
- // Delete the old image node
- dom.remove( node );
+ wrap = dom.create( 'div', { 'class': 'mceTemp' }, html );
- if ( dom.isEmpty( parent ) ) {
- dom.remove( parent );
- }
+ if ( parent = dom.getParent( node, 'p' ) ) {
+ parent.parentNode.insertBefore( wrap, parent );
} else {
- editor.selection.setContent( ']+)>\s*
';
- if ( parent = dom.getParent( node, 'p' ) ) {
- wrap = dom.create( 'div', { 'class': 'mceTemp' }, html );
- dom.insertAfter( wrap, parent );
- dom.remove( node );
+ wrap = dom.create( 'div', { 'class': 'mceTemp' }, html );
- if ( dom.isEmpty( parent ) ) {
- dom.remove( parent );
- }
+ if ( parent = dom.getParent( node, 'p' ) ) {
+ parent.parentNode.insertBefore( wrap, parent );
} else {
- dom.setOuterHTML( node, '
- cap = cap.replace( /\s*\n\s*/g, '
' );
+ caption = caption.replace( /\s*\n\s*/g, '
' );
- return '[caption id="'+ id +'" align="'+ cls +'" width="'+ w +'"]'+ c +' '+ cap +'[/caption]';
+ return '[caption id="' + id + '" align="' + align + '" width="' + width + '"' + classes + ']' + c + ' ' + caption + '[/caption]';
});
- if ( out.indexOf('[caption') !== 0 ) {
+ 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 ' +
- '
';
+ '
caption = caption.replace( /(
]*>)\s*\n\s*/g, '$1' ).replace( /\s*\n\s*/g, '
' );
+ caption = verifyHTML( caption );
}
if ( ! imgNode ) {
@@ -593,7 +691,7 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
if ( parent && parent.nodeName === 'P' ) {
wrap = dom.create( 'div', { 'class': 'mceTemp' }, html );
- dom.insertAfter( wrap, parent );
+ parent.parentNode.insertBefore( wrap, parent );
editor.selection.select( wrap );
editor.nodeChanged();
@@ -652,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 = '' +
- '
';
-
- if ( parent = dom.getParent( imgNode, 'p' ) ) {
- wrap = dom.create( 'div', { 'class': 'mceTemp' }, html );
- dom.insertAfter( wrap, parent );
- editor.selection.select( wrap );
- editor.nodeChanged();
+ '
]*>/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 );
+ }
}
- }
- // refresh toolbar
- addToolbar( 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();
-
- if ( tinymce.Env.ie > 8 ) {
- setTimeout( function() {
- editor.selection.setCursorLocation( p, 0 );
- editor.selection.setContent( event.value );
- }, 500 );
+ 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' ) {
+ } else if ( cmd === 'JustifyLeft' || cmd === 'JustifyRight' || cmd === 'JustifyCenter' || cmd === 'wpAlignNone' ) {
node = editor.selection.getNode();
- align = cmd.substr(7).toLowerCase();
- align = 'align' + align;
+ align = 'align' + cmd.slice( 7 ).toLowerCase();
+ DL = editor.dom.getParent( node, '.wp-caption' );
- removeToolbar();
+ if ( node.nodeName !== 'IMG' && ! DL ) {
+ return;
+ }
- if ( dom.is( node, 'dl.wp-caption' ) ) {
- DL = node;
+ node = DL || node;
+
+ if ( editor.dom.hasClass( node, align ) ) {
+ replacement = ' alignnone';
} else {
- DL = dom.getParent( node, 'dl.wp-caption' );
+ replacement = ' ' + align;
}
- 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' );
- } else {
- DL.className = DL.className.replace( /align[^ ]+/g, '' );
- dom.addClass( DL, align );
- }
+ node.className = trim( node.className.replace( / ?align(left|center|right|none)/g, '' ) + replacement );
- return false;
- }
+ editor.nodeChanged();
+ event.preventDefault();
- if ( node.nodeName === 'IMG' ) {
- if ( dom.hasClass( node, align ) ) {
- // The align class is being removed
- dom.addClass( node, 'alignnone' );
- } else {
- dom.removeClass( node, 'alignnone' );
- }
+ if ( toolbar ) {
+ toolbar.reposition();
}
+
+ editor.fire( 'ExecCommand', {
+ command: cmd,
+ ui: event.ui,
+ value: event.value
+ } );
}
});
@@ -842,9 +957,10 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
var node, wrap, P, spacer,
selection = editor.selection,
keyCode = event.keyCode,
- dom = editor.dom;
+ dom = editor.dom,
+ VK = tinymce.util.VK;
- if ( keyCode === tinymce.util.VK.ENTER ) {
+ if ( keyCode === VK.ENTER ) {
// When pressing Enter inside a caption move the caret to a new parapraph under it
node = selection.getNode();
wrap = dom.getParent( node, 'div.mceTemp' );
@@ -871,7 +987,7 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
editor.nodeChanged();
selection.setCursorLocation( P, 0 );
}
- } else if ( keyCode === tinymce.util.VK.DELETE || keyCode === tinymce.util.VK.BACKSPACE ) {
+ } else if ( keyCode === VK.DELETE || keyCode === VK.BACKSPACE ) {
node = selection.getNode();
if ( node.nodeName === 'DIV' && dom.hasClass( node, 'mceTemp' ) ) {
@@ -885,64 +1001,19 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
removeImage( node );
return false;
}
-
- removeToolbar();
- }
-
- // 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 > 90 ) || keyCode > 186 ) {
- return;
- }
-
- removeToolbar();
}
});
- editor.on( 'mousedown', function( event ) {
- if ( editor.dom.getParent( event.target, '#wp-image-toolbar' ) ) {
- if ( tinymce.Env.ie ) {
- // Stop IE > 8 from making the wrapper resizable on mousedown
- event.preventDefault();
+ // 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.
+ if ( tinymce.Env.gecko ) {
+ editor.on( 'undo redo', function() {
+ if ( editor.selection.getNode().nodeName === 'IMG' ) {
+ editor.selection.collapse();
}
- } else if ( event.target.nodeName !== 'IMG' ) {
- removeToolbar();
- }
- });
-
- editor.on( 'mouseup', function( event ) {
- var image,
- node = event.target,
- dom = editor.dom;
-
- // Don't trigger on right-click
- if ( event.button && event.button > 1 ) {
- return;
- }
-
- if ( node.nodeName === 'DIV' && dom.getParent( node, '#wp-image-toolbar' ) ) {
- 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' ) ) {
- editImage( image );
- }
- }
- } else if ( node.nodeName === 'IMG' && ! editor.dom.getAttrib( node, 'data-wp-imgselect' ) && ! isPlaceholder( node ) ) {
- addToolbar( node );
- } else if ( node.nodeName !== 'IMG' ) {
- removeToolbar();
- }
- });
-
- editor.on( 'cut', function() {
- removeToolbar();
- });
+ });
+ }
editor.wpSetImgCaption = function( content ) {
return parseShortcode( content );
@@ -952,17 +1023,68 @@ 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 ) {
- event.content = editor.wpSetImgCaption( event.content );
+ if ( event.format !== 'raw' ) {
+ event.content = editor.wpSetImgCaption( event.content );
+ }
});
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