]*>/g, '$&\n' ).replace( /^/, '' ).replace( /<\/p>$/, '' );
+
+ }
+ }
+
+ // extract linkTo
+ if ( imageNode.parentNode.nodeName === 'A' ) {
+ metadata.linkUrl = editor.dom.getAttrib( imageNode.parentNode, 'href' );
+ }
+
+ return metadata;
+
+ }
+
+ function updateImage( imageNode, imageData ) {
+ var className, width, node, html, captionNode, nodeToReplace, uid;
+
+ if ( imageData.caption ) {
+
+ html = createImageAndLink( imageData, 'html' );
+
+ width = imageData.width + 10;
+ className = 'align' + imageData.align;
+
+ //TODO: shouldn't add the id attribute if it isn't an attachment
+
+ // should create a new function for genrating the caption markup
+ html = '
' +
+ '- '+ html + '
- '+ imageData.caption +'
';
+
+ node = editor.dom.create( 'div', { 'class': 'mceTemp', draggable: 'true' }, html );
+ } else {
+ node = createImageAndLink( imageData, 'node' );
+ }
+
+ nodeToReplace = imageNode;
+
+ captionNode = editor.dom.getParent( imageNode, '.mceTemp' );
+
+ if ( captionNode ) {
+ nodeToReplace = captionNode;
+ } else {
+ if ( imageNode.parentNode.nodeName === 'A' ) {
+ nodeToReplace = imageNode.parentNode;
+ }
+ }
+ // uniqueId isn't super exciting, so maybe we want to use something else
+ uid = editor.dom.uniqueId( 'wp_' );
+ editor.dom.setAttrib( node, 'data-wp-replace-id', uid );
+ editor.dom.replace( node, nodeToReplace );
+
+ // find the updated node
+ node = editor.dom.select( '[data-wp-replace-id="' + uid + '"]' )[0];
+
+ editor.dom.setAttrib( node, 'data-wp-replace-id', '' );
+
+ if ( node.nodeName === 'IMG' ) {
+ editor.selection.select( node );
+ } else {
+ editor.selection.select( editor.dom.select( 'img', node )[0] );
+ }
+ editor.nodeChanged();
+
+ }
+
+ function createImageAndLink( imageData, mode ) {
+ var classes = [],
+ props;
+
+ mode = mode ? mode : 'node';
+
+
+ if ( ! imageData.caption ) {
+ classes.push( 'align' + imageData.align );
+ }
+
+ if ( imageData.attachment_id ) {
+ classes.push( 'wp-image-' + imageData.attachment_id );
+ if ( imageData.size ) {
+ classes.push( 'size-' + imageData.size );
+ }
+ }
+
+ props = {
+ src: imageData.url,
+ width: imageData.width,
+ height: imageData.height,
+ alt: imageData.alt
+ };
+
+ if ( classes.length ) {
+ props['class'] = classes.join( ' ' );
+ }
+
+ if ( imageData.linkUrl ) {
+ if ( mode === 'node' ) {
+ return editor.dom.create( 'a', { href: imageData.linkUrl }, editor.dom.createHTML( 'img', props ) );
+ } else if ( mode === 'html' ) {
+ return editor.dom.createHTML( 'a', { href: imageData.linkUrl }, editor.dom.createHTML( 'img', props ) );
+ }
+ } else {
+ if ( mode === 'node' ) {
+ return editor.dom.create( 'img', props );
+ } else if ( mode === 'html' ) {
+ return editor.dom.createHTML( 'img', props );
+ }
+
+ }
+ }
+
editor.on( 'init', function() {
var dom = editor.dom;
@@ -452,6 +622,40 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
}
});
+ editor.on( 'mousedown', function( e ) {
+ var imageNode, frame, callback;
+ if ( e.target.nodeName === 'IMG' && editor.selection.getNode() === e.target ) {
+ // Don't trigger on right-click
+ if ( e.button !== 2 ) {
+
+ // Don't attempt to edit placeholders
+ if ( editor.dom.hasClass( e.target, 'mceItem' ) || '1' === editor.dom.getAttrib( e.target, 'data-mce-placeholder' ) ) {
+ return;
+ }
+
+ imageNode = e.target;
+
+ frame = wp.media({
+ frame: 'image',
+ state: 'image-details',
+ metadata: extractImageData( imageNode )
+ } );
+
+ callback = function( imageData ) {
+ updateImage( imageNode, imageData );
+ editor.focus();
+ };
+
+ frame.state('image-details').on( 'update', callback );
+ frame.state('replace-image').on( 'replace', callback );
+
+ frame.open();
+
+
+ }
+ }
+ } );
+
editor.wpSetImgCaption = function( content ) {
return parseShortcode( content );
};
diff --git a/src/wp-includes/media-template.php b/src/wp-includes/media-template.php
index 57d1c0087d..71e9c8282d 100644
--- a/src/wp-includes/media-template.php
+++ b/src/wp-includes/media-template.php
@@ -500,6 +500,117 @@ function wp_print_media_templates() {
}
+
+
__( 'Search' ),
'select' => __( 'Select' ),
'cancel' => __( 'Cancel' ),
+ 'update' => __( 'Update' ),
+ 'replace' => __( 'Replace' ),
/* translators: This is a would-be plural string used in the media manager.
If there is not a word you can use in your language to avoid issues with the
lack of plural support here, turn it into "selected: %d" then translate it.
@@ -2005,6 +2007,12 @@ function wp_enqueue_media( $args = array() ) {
'addToGallery' => __( 'Add to gallery' ),
'addToGalleryTitle' => __( 'Add to Gallery' ),
'reverseOrder' => __( 'Reverse order' ),
+
+
+ // Edit Image
+ 'imageDetailsTitle' => __( 'Image Details' ),
+ 'imageReplaceTitle' => __( 'Replace Image' ),
+ 'imageDetailsCancel' => __( 'Cancel Edit' )
);
$settings = apply_filters( 'media_view_settings', $settings, $post );