/* global tinymce */ tinymce.PluginManager.add( 'wpeditimage', function( editor ) { 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;
id = b.match( /id=['"]([^'"]*)['"] ?/ );
if ( id ) {
b = b.replace( id[0], '' );
}
cls = b.match( /align=['"]([^'"]*)['"] ?/ );
if ( cls ) {
b = b.replace( cls[0], '' );
}
w = b.match( /width=['"]([0-9]*)['"] ?/ );
if ( w ) {
b = b.replace( w[0], '' );
}
c = trim( c );
img = c.match( /((?:]+>)?]+>(?:<\/a>)?)([\s\S]*)/i );
if ( img && img[2] ) {
cap = trim( img[2] );
img = trim( img[1] );
} else {
// old captions shortcode style
cap = trim( b ).replace( /caption=['"]/, '' ).replace( /['"]$/, '' );
img = c;
}
id = ( id && id[1] ) ? id[1] : '';
cls = ( cls && cls[1] ) ? cls[1] : 'alignnone';
if ( ! w && img ) {
w = img.match( /width=['"]([0-9]*)['"]/ );
}
if ( w && w[1] ) {
w = w[1];
}
if ( ! w || ! cap ) {
return c;
}
width = parseInt( w, 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 /, '' ).replace( /<\/p>$/, '' );
}
}
// extract linkTo
if ( imageNode.parentNode && imageNode.parentNode.nodeName === 'A' ) {
metadata.linkUrl = dom.getAttrib( imageNode.parentNode, 'href' );
}
return metadata;
}
function updateImage( imageNode, imageData ) {
var className, width, node, html, captionNode, nodeToReplace, uid, editedImg;
if ( imageData.caption ) {
html = createImageAndLink( imageData, 'html' );
width = parseInt( imageData.width, 10 );
if ( ! editor.getParam( 'wpeditimage_html5_captions' ) ) {
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 generating the caption markup
html = ' /, '' ).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+
dom.bind( editor.getBody(), 'mscontrolselect', function( event ) {
if ( event.target.nodeName === 'IMG' && dom.getParent( event.target, '.wp-caption' ) ) {
// Hide the thick border with resize handles around dl.wp-caption
editor.getBody().focus(); // :(
} else if ( event.target.nodeName === 'DL' && dom.hasClass( event.target, 'wp-caption' ) ) {
// Trigger the thick border with resize handles...
// This will make the caption text editable.
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;
if ( node.nodeName === 'IMG' ) {
if ( parent = editor.dom.getParent( node, '.wp-caption' ) ) {
width = event.width || editor.dom.getAttrib( node, 'width' );
if ( width ) {
width = parseInt( width, 10 );
if ( ! editor.getParam( 'wpeditimage_html5_captions' ) ) {
width += 10;
}
editor.dom.setStyle( parent, 'width', width + 'px' );
}
}
// refresh toolbar
addToolbar( node );
}
});
editor.on( 'BeforeExecCommand', function( event ) {
var node, p, DL, align,
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 );
return false;
}
}
} else if ( cmd === 'JustifyLeft' || cmd === 'JustifyRight' || cmd === 'JustifyCenter' ) {
node = editor.selection.getNode();
align = cmd.substr(7).toLowerCase();
align = 'align' + align;
removeToolbar();
if ( dom.is( node, 'dl.wp-caption' ) ) {
DL = node;
} else {
DL = dom.getParent( node, 'dl.wp-caption' );
}
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 );
}
return false;
}
if ( node.nodeName === 'IMG' ) {
if ( dom.hasClass( node, align ) ) {
// The align class is being removed
dom.addClass( node, 'alignnone' );
} else {
dom.removeClass( node, 'alignnone' );
}
}
}
});
editor.on( 'keydown', function( event ) {
var node, wrap, P, spacer,
selection = editor.selection,
dom = editor.dom;
if ( event.keyCode === tinymce.util.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' );
if ( wrap ) {
dom.events.cancel( event ); // Doesn't cancel all :(
// Remove any extra dt and dd cleated on pressing Enter...
tinymce.each( dom.select( 'dt, dd', wrap ), function( element ) {
if ( dom.isEmpty( element ) ) {
dom.remove( element );
}
});
spacer = tinymce.Env.ie && tinymce.Env.ie < 11 ? '' : ']+)>\s*
cap = cap.replace( /\s*\n\s*/g, '
' );
return '[caption id="'+ id +'" align="'+ cls +'" width="'+ w +'"]'+ c +' '+ cap +'[/caption]';
});
if ( out.indexOf('[caption') !== 0 ) {
// the caption html seems brocken, try to find the image that may be wrapped in a link
// and may be followed by
]*>/g, '$&\n' ).replace( /^
caption = caption.replace( /(
]*>)\s*\n\s*/g, '$1' ).replace( /\s*\n\s*/g, '
' );
}
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 = ' ';
if ( node.nodeName === 'P' ) {
parent = node;
} else {
parent = dom.getParent( node, 'p' );
}
if ( parent && parent.nodeName === 'P' ) {
wrap = dom.create( 'div', { 'class': 'mceTemp' }, html );
dom.insertAfter( wrap, parent );
editor.selection.select( wrap );
editor.nodeChanged();
if ( dom.isEmpty( parent ) ) {
dom.remove( parent );
}
} else {
editor.selection.setContent( '' +
'
';
if ( parent = dom.getParent( imgNode, 'p' ) ) {
wrap = dom.create( 'div', { 'class': 'mceTemp' }, html );
dom.insertAfter( wrap, parent );
editor.selection.select( wrap );
editor.nodeChanged();
// Delete the old image node
dom.remove( node );
if ( dom.isEmpty( parent ) ) {
dom.remove( parent );
}
} else {
editor.selection.setContent( '
]*>/g, '$&\n' ).replace( /^
';
P = dom.create( 'p', null, spacer );
if ( node.nodeName === 'DD' ) {
dom.insertAfter( P, wrap );
} else {
wrap.parentNode.insertBefore( P, wrap );
}
editor.nodeChanged();
selection.setCursorLocation( P, 0 );
}
} else if ( event.keyCode === tinymce.util.VK.DELETE || event.keyCode === tinymce.util.VK.BACKSPACE ) {
node = selection.getNode();
if ( node.nodeName === 'DIV' && dom.hasClass( node, 'mceTemp' ) ) {
wrap = node;
} else if ( node.nodeName === 'IMG' || node.nodeName === 'DT' || node.nodeName === 'A' ) {
wrap = dom.getParent( node, 'div.mceTemp' );
}
if ( wrap ) {
dom.events.cancel( event );
removeImage( node );
return false;
}
}
});
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();
}
} 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 );
removeToolbar();
} 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 );
};
editor.wpGetImgCaption = function( content ) {
return getShortcode( content );
};
editor.on( 'BeforeSetContent', function( event ) {
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, '' );
}
});
return {
_do_shcode: parseShortcode,
_get_shcode: getShortcode
};
});