plugin.js000066600000074640152140536300006416 0ustar00/* global tinymce */ tinymce.PluginManager.add( 'wpeditimage', function( editor ) { 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, align, classes, caption, img, width; id = b.match( /id=['"]([^'"]*)['"] ?/ ); if ( id ) { b = b.replace( id[0], '' ); } align = b.match( /align=['"]([^'"]*)['"] ?/ ); if ( align ) { b = b.replace( align[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] ) { caption = trim( img[2] ); img = trim( img[1] ); } else { // old captions shortcode style caption = trim( b ).replace( /caption=['"]/, '' ).replace( /['"]$/, '' ); img = c; } id = ( id && id[1] ) ? id[1].replace( /[<>&]+/g, '' ) : ''; align = ( align && align[1] ) ? align[1] : 'alignnone'; classes = ( classes && classes[1] ) ? ' ' + classes[1].replace( /[<>&]+/g, '' ) : ''; if ( ! width && img ) { width = img.match( /width=['"]([0-9]*)['"]/ ); } if ( width && width[1] ) { width = width[1]; } if ( ! width || ! caption ) { return c; } width = parseInt( width, 10 ); if ( ! editor.getParam( 'wpeditimage_html5_captions' ) ) { width += 10; } return '

' + '
'+ img +'
'+ caption +'
'; }); } function getShortcode( content ) { return content.replace( /(?:
]+mceTemp[^>]+>)?\s*(
]+wp-caption[^>]+>[\s\S]+?<\/dl>)\s*(?:<\/div>)?/g, function( all, dl ) { var out = ''; if ( dl.indexOf('') !== -1 ) { // Broken caption. The user managed to drag the image out or type in the wrapper div? // Remove the
,
and
and return the remaining text. return dl.replace( /]+)?>/g, '' ).replace( /<\/d[ldt]>/g, '' ); } out = dl.replace( /\s*
]+)>\s*
]+>([\s\S]+?)<\/dt>\s*
]+>([\s\S]*?)<\/dd>\s*<\/dl>\s*/gi, function( a, b, c, caption ) { var id, classes, align, width; width = c.match( /width="([0-9]*)"/ ); width = ( width && width[1] ) ? width[1] : ''; classes = b.match( /class="([^"]*)"/ ); classes = ( classes && classes[1] ) ? classes[1] : ''; align = classes.match( /align[a-z]+/i ) || 'alignnone'; if ( ! width || ! caption ) { if ( 'alignnone' !== align[0] ) { c = c.replace( />]+)?>/g, function( a ) { // no line breaks inside HTML tags return a.replace( /[\r\n\t]+/, ' ' ); }); // convert remaining line breaks to
caption = caption.replace( /\s*\n\s*/g, '
' ); return '[caption id="' + id + '" align="' + align + '" width="' + width + '"' + classes + ']' + c + ' ' + caption + '[/caption]'; }); 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

with the caption text. out = dl.replace( /[\s\S]*?((?:]+>)?]+>(?:<\/a>)?)(

[\s\S]*<\/p>)?[\s\S]*/gi, '

$1

$2' ); } return out; }); } function extractImageData( imageNode ) { var classes, extraClasses, metadata, captionBlock, caption, link, width, height, captionClassName = [], dom = editor.dom, isIntRegExp = /^\d+$/; // default attributes metadata = { attachment_id: false, size: 'custom', caption: '', align: 'none', extraClasses: '', link: false, linkUrl: '', linkClassName: '', linkTargetBlank: false, linkRel: '', title: '' }; metadata.url = dom.getAttrib( imageNode, 'src' ); metadata.alt = dom.getAttrib( imageNode, 'alt' ); metadata.title = dom.getAttrib( imageNode, 'title' ); width = dom.getAttrib( imageNode, 'width' ); height = dom.getAttrib( imageNode, 'height' ); if ( ! isIntRegExp.test( width ) || parseInt( width, 10 ) < 1 ) { width = imageNode.naturalWidth || imageNode.width; } if ( ! isIntRegExp.test( height ) || parseInt( height, 10 ) < 1 ) { height = imageNode.naturalHeight || imageNode.height; } metadata.customWidth = metadata.width = width; metadata.customHeight = metadata.height = height; classes = tinymce.explode( imageNode.className, ' ' ); extraClasses = []; tinymce.each( classes, function( name ) { if ( /^wp-image/.test( name ) ) { metadata.attachment_id = parseInt( name.replace( 'wp-image-', '' ), 10 ); } else if ( /^align/.test( name ) ) { metadata.align = name.replace( 'align', '' ); } else if ( /^size/.test( name ) ) { metadata.size = name.replace( 'size-', '' ); } else { extraClasses.push( name ); } } ); metadata.extraClasses = extraClasses.join( ' ' ); // Extract caption captionBlock = dom.getParents( imageNode, '.wp-caption' ); if ( captionBlock.length ) { captionBlock = captionBlock[0]; classes = captionBlock.className.split( ' ' ); tinymce.each( classes, function( name ) { if ( /^align/.test( name ) ) { metadata.align = name.replace( 'align', '' ); } else if ( name && name !== 'wp-caption' ) { captionClassName.push( name ); } } ); metadata.captionClassName = captionClassName.join( ' ' ); caption = dom.select( 'dd.wp-caption-dd', captionBlock ); if ( caption.length ) { caption = caption[0]; metadata.caption = editor.serializer.serialize( caption ) .replace( /]*>/g, '$&\n' ).replace( /^

/, '' ).replace( /<\/p>$/, '' ); } } // Extract linkTo if ( imageNode.parentNode && imageNode.parentNode.nodeName === 'A' ) { link = imageNode.parentNode; metadata.linkUrl = dom.getAttrib( link, 'href' ); metadata.linkTargetBlank = dom.getAttrib( link, 'target' ) === '_blank' ? true : false; metadata.linkRel = dom.getAttrib( link, 'rel' ); metadata.linkClassName = link.className; } return metadata; } function hasTextContent( node ) { return node && !! ( node.textContent || node.innerText ); } // Verify HTML in captions function verifyHTML( caption ) { if ( ! caption || ( caption.indexOf( '<' ) === -1 && caption.indexOf( '>' ) === -1 ) ) { return caption; } if ( ! serializer ) { serializer = new tinymce.html.Serializer( {}, editor.schema ); } return serializer.serialize( editor.parser.parse( caption, { forced_root_block: false } ) ); } 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, ' ' ); if ( ! classes ) { classes = []; } if ( ! imageData.caption ) { classes.push( 'align' + imageData.align ); } if ( imageData.attachment_id ) { classes.push( 'wp-image-' + imageData.attachment_id ); if ( imageData.size && imageData.size !== 'custom' ) { classes.push( 'size-' + imageData.size ); } } width = imageData.width; height = imageData.height; if ( imageData.size === 'custom' ) { width = imageData.customWidth; height = imageData.customHeight; } attrs = { src: imageData.url, width: width || null, height: height || null, 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, target: imageData.linkTargetBlank ? '_blank': null, 'class': imageData.linkClassName || null }; if ( imageNode.parentNode && imageNode.parentNode.nodeName === 'A' && ! hasTextContent( imageNode.parentNode ) ) { // Update or remove an existing link wrapped around the image if ( imageData.linkUrl ) { dom.setAttribs( imageNode.parentNode, linkAttrs ); } else { dom.remove( imageNode.parentNode, true ); } } else if ( imageData.linkUrl ) { if ( linkNode = dom.getParent( imageNode, 'a' ) ) { // The image is inside a link together with other nodes, // or is nested in another node, move it out dom.insertAfter( imageNode, linkNode ); } // Add link wrapped around the image linkNode = dom.create( 'a', linkAttrs ); imageNode.parentNode.insertBefore( linkNode, imageNode ); linkNode.appendChild( imageNode ); } captionNode = editor.dom.getParent( imageNode, '.mceTemp' ); if ( imageNode.parentNode && imageNode.parentNode.nodeName === 'A' && ! hasTextContent( imageNode.parentNode ) ) { node = imageNode.parentNode; } else { node = imageNode; } if ( imageData.caption ) { imageData.caption = verifyHTML( imageData.caption ); id = imageData.attachment_id ? 'attachment_' + imageData.attachment_id : null; align = 'align' + ( imageData.align || 'none' ); className = 'wp-caption ' + align; if ( imageData.captionClassName ) { className += ' ' + imageData.captionClassName.replace( /[<>&]+/g, '' ); } if ( ! editor.getParam( 'wpeditimage_html5_captions' ) ) { width = parseInt( width, 10 ); width += 10; } if ( captionNode ) { dl = dom.select( 'dl.wp-caption', captionNode ); if ( dl.length ) { dom.setAttribs( dl, { id: id, 'class': className, style: 'width: ' + width + 'px' } ); } dd = dom.select( '.wp-caption-dd', captionNode ); if ( dd.length ) { dom.setHTML( dd[0], imageData.caption ); } } else { id = id ? 'id="'+ id +'" ' : ''; // should create a new function for generating the caption markup html = '

' + '
'+ imageData.caption +'
'; 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 ( captionNode ) { // Remove the caption wrapper and place the image in new paragraph parent = dom.create( 'p' ); captionNode.parentNode.insertBefore( parent, captionNode ); parent.appendChild( node ); 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, metadata: imageData, image: imageNode } ); } editor.nodeChanged(); } function editImage( img ) { var frame, callback, metadata; if ( typeof wp === 'undefined' || ! wp.media ) { editor.execCommand( 'mceImage' ); return; } metadata = extractImageData( img ); // Manipulate the metadata by reference that is fed into the PostImage model used in the media modal wp.media.events.trigger( 'editor:image-edit', { editor: editor, metadata: metadata, image: img } ); frame = wp.media({ frame: 'image', state: 'image-details', metadata: metadata } ); wp.media.events.trigger( 'editor:frame-create', { frame: frame } ); callback = function( imageData ) { editor.focus(); editor.undoManager.transact( function() { updateImage( img, imageData ); } ); frame.detach(); }; frame.state('image-details').on( 'update', callback ); frame.state('replace-image').on( 'replace', callback ); frame.on( 'close', function() { editor.focus(); frame.detach(); }); frame.open(); } function removeImage( node ) { var wrap = editor.dom.getParent( node, 'div.mceTemp' ); if ( ! wrap && node.nodeName === 'IMG' ) { wrap = editor.dom.getParent( node, 'a' ); } if ( wrap ) { if ( wrap.nextSibling ) { editor.selection.select( wrap.nextSibling ); } else if ( wrap.previousSibling ) { editor.selection.select( wrap.previousSibling ); } else { editor.selection.select( wrap.parentNode ); } editor.selection.collapse( true ); editor.dom.remove( wrap ); } else { editor.dom.remove( node ); } editor.nodeChanged(); editor.undoManager.add(); } editor.on( 'init', function() { var dom = editor.dom, captionClass = editor.getParam( 'wpeditimage_html5_captions' ) ? 'html5-captions' : 'html4-captions'; 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: 'wpcaption', 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.wpcaption, captionId = '', captionAlign = '', captionWidth = '', imgId = null, wrap, parent, node, html; // 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
caption = caption.replace( /(]*>)\s*\n\s*/g, '$1' ).replace( /\s*\n\s*/g, '
' ); 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 = '
' + '
'+ html +'
'+ caption +'
'; 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( '
' + html + '
' ); } } 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 = '
' + '
'+ caption +'
'; 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 || null ); 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.wpcaption = editor.serializer.serialize( parent ) .replace( /]*>/g, '$&\n' ).replace( /^

/, '' ).replace( /<\/p>$/, '' ); } } }); // 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( 'ObjectResized', function( event ) { var node = event.target; if ( node.nodeName === 'IMG' ) { editor.undoManager.transact( function() { var parent, width, dom = editor.dom; node.className = node.className.replace( /\bsize-[^ ]+/, '' ); if ( parent = dom.getParent( node, '.wp-caption' ) ) { width = event.width || dom.getAttrib( node, 'width' ); if ( width ) { width = parseInt( width, 10 ); if ( ! editor.getParam( 'wpeditimage_html5_captions' ) ) { width += 10; } 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
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, captionParent, cmd = event.command, dom = editor.dom; 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(); align = 'align' + cmd.slice( 7 ).toLowerCase(); DL = editor.dom.getParent( node, '.wp-caption' ); if ( node.nodeName !== 'IMG' && ! DL ) { return; } node = DL || node; if ( editor.dom.hasClass( node, align ) ) { replacement = ' alignnone'; } else { replacement = ' ' + align; } node.className = trim( node.className.replace( / ?align(left|center|right|none)/g, '' ) + replacement ); editor.nodeChanged(); event.preventDefault(); if ( toolbar ) { toolbar.reposition(); } editor.fire( 'ExecCommand', { command: cmd, ui: event.ui, value: event.value } ); } }); editor.on( 'keydown', function( event ) { var node, wrap, P, spacer, selection = editor.selection, keyCode = event.keyCode, dom = editor.dom, VK = tinymce.util.VK; 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' ); 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 ? '' : '
'; 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 ( keyCode === VK.DELETE || keyCode === 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; } } }); // 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(); } }); } editor.wpSetImgCaption = function( content ) { return parseShortcode( content ); }; editor.wpGetImgCaption = function( content ) { 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 ); } }); editor.on( 'PostProcess', function( event ) { if ( event.get ) { event.content = editor.wpGetImgCaption( event.content ); } }); ( 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 }; }); plugin.min.js000066600000034710152140536300007172 0ustar00tinymce.PluginManager.add("wpeditimage",function(g){var r,t,n,c,a,e=tinymce.each,l=tinymce.trim,i=tinymce.Env.iOS;function o(e){return!(!g.dom.getAttrib(e,"data-mce-placeholder")&&!g.dom.getAttrib(e,"data-mce-object"))}function d(e){e=g.$(e).parents("[contenteditable]");return e&&"false"===e.attr("contenteditable")}function s(e){return e.replace(/(?:

)?\[(?:wp_)?caption([^\]]+)\]([\s\S]+?)\[\/(?:wp_)?caption\](?:<\/p>)?/g,function(e,t,n){var a,i,o,r,c,d=t.match(/id=['"]([^'"]*)['"] ?/);return(c=(t=(i=(t=(a=(t=d?t.replace(d[0],""):t).match(/align=['"]([^'"]*)['"] ?/))?t.replace(a[0],""):t).match(/class=['"]([^'"]*)['"] ?/))?t.replace(i[0],""):t).match(/width=['"]([0-9]*)['"] ?/))&&(t=t.replace(c[0],"")),r=(r=(n=l(n)).match(/((?:]+>)?]+>(?:<\/a>)?)([\s\S]*)/i))&&r[2]?(o=l(r[2]),l(r[1])):(o=l(t).replace(/caption=['"]/,"").replace(/['"]$/,""),n),d=d&&d[1]?d[1].replace(/[<>&]+/g,""):"",a=a&&a[1]?a[1]:"alignnone",i=i&&i[1]?" "+i[1].replace(/[<>&]+/g,""):"",(c=(c=!c&&r?r.match(/width=['"]([0-9]*)['"]/):c)&&c[1]?c[1]:c)&&o?(c=parseInt(c,10),g.getParam("wpeditimage_html5_captions")||(c+=10),'

'+r+'
'+o+"
"):n})}function p(e){return e.replace(/(?:
]+mceTemp[^>]+>)?\s*(
]+wp-caption[^>]+>[\s\S]+?<\/dl>)\s*(?:<\/div>)?/g,function(e,t){var n="";return-1===t.indexOf("")?t.replace(/]+)?>/g,"").replace(/<\/d[ldt]>/g,""):-1===(n=t.replace(/\s*
]+)>\s*
]+>([\s\S]+?)<\/dt>\s*
]+>([\s\S]*?)<\/dd>\s*<\/dl>\s*/gi,function(e,t,n,a){var i,o,r=n.match(/width="([0-9]*)"/);return r=r&&r[1]?r[1]:"",o=(i=(i=t.match(/class="([^"]*)"/))&&i[1]?i[1]:"").match(/align[a-z]+/i)||"alignnone",r&&a?'[caption id="'+(t=(t=t.match(/id="([^"]*)"/))&&t[1]?t[1]:"")+'" align="'+o+'" width="'+r+'"'+(i=(i=i.replace(/wp-caption ?|align[a-z]+ ?/gi,""))&&' class="'+i+'"')+"]"+n+" "+(a=(a=a.replace(/\r\n|\r/g,"\n").replace(/<[a-zA-Z0-9]+( [^<>]+)?>/g,function(e){return e.replace(/[\r\n\t]+/," ")})).replace(/\s*\n\s*/g,"
"))+"[/caption]":"alignnone"!==o[0]?n.replace(/>]+>)?]+>(?:<\/a>)?)(

[\s\S]*<\/p>)?[\s\S]*/gi,"

$1

$2"):n})}function m(e){return e&&(e.textContent||e.innerText)}function u(e){return!e||-1===e.indexOf("<")&&-1===e.indexOf(">")?e:(t=t||new tinymce.html.Serializer({},g.schema)).serialize(g.parser.parse(e,{forced_root_block:!1}))}function h(e){var t=g.dom.getParent(e,"div.mceTemp");(t=!t&&"IMG"===e.nodeName?g.dom.getParent(e,"a"):t)?(t.nextSibling?g.selection.select(t.nextSibling):t.previousSibling?g.selection.select(t.previousSibling):g.selection.select(t.parentNode),g.selection.collapse(!0),g.dom.remove(t)):g.dom.remove(e),g.nodeChanged(),g.undoManager.add()}return g.addButton("wp_img_remove",{tooltip:"Remove",icon:"dashicon dashicons-no",onclick:function(){h(g.selection.getNode())}}),g.addButton("wp_img_edit",{tooltip:"Edit ",icon:"dashicon dashicons-edit",onclick:function(){var p,e,t;p=g.selection.getNode(),"undefined"!=typeof wp&&wp.media?(t=function(e){var t,n,a,i,o=[],r=g.dom,c=/^\d+$/;(n={attachment_id:!1,size:"custom",caption:"",align:"none",extraClasses:"",link:!1,linkUrl:"",linkClassName:"",linkTargetBlank:!1,linkRel:"",title:""}).url=r.getAttrib(e,"src"),n.alt=r.getAttrib(e,"alt"),n.title=r.getAttrib(e,"title"),a=r.getAttrib(e,"width"),i=r.getAttrib(e,"height"),(!c.test(a)||parseInt(a,10)<1)&&(a=e.naturalWidth||e.width);(!c.test(i)||parseInt(i,10)<1)&&(i=e.naturalHeight||e.height);n.customWidth=n.width=a,n.customHeight=n.height=i,a=tinymce.explode(e.className," "),t=[],tinymce.each(a,function(e){/^wp-image/.test(e)?n.attachment_id=parseInt(e.replace("wp-image-",""),10):/^align/.test(e)?n.align=e.replace("align",""):/^size/.test(e)?n.size=e.replace("size-",""):t.push(e)}),n.extraClasses=t.join(" "),(i=r.getParents(e,".wp-caption")).length&&(i=i[0],a=i.className.split(" "),tinymce.each(a,function(e){/^align/.test(e)?n.align=e.replace("align",""):e&&"wp-caption"!==e&&o.push(e)}),n.captionClassName=o.join(" "),(i=r.select("dd.wp-caption-dd",i)).length&&(i=i[0],n.caption=g.serializer.serialize(i).replace(/]*>/g,"$&\n").replace(/^

/,"").replace(/<\/p>$/,"")));e.parentNode&&"A"===e.parentNode.nodeName&&(e=e.parentNode,n.linkUrl=r.getAttrib(e,"href"),n.linkTargetBlank="_blank"===r.getAttrib(e,"target"),n.linkRel=r.getAttrib(e,"rel"),n.linkClassName=e.className);return n}(p),wp.media.events.trigger("editor:image-edit",{editor:g,metadata:t,image:p}),e=wp.media({frame:"image",state:"image-details",metadata:t}),wp.media.events.trigger("editor:frame-create",{frame:e}),t=function(s){g.focus(),g.undoManager.transact(function(){var e,t,n,a,i,o,r,c,d,l;e=p,t=s,l=g.dom,(c=tinymce.explode(t.extraClasses," "))||(c=[]),t.caption||c.push("align"+t.align),t.attachment_id&&(c.push("wp-image-"+t.attachment_id),t.size&&"custom"!==t.size&&c.push("size-"+t.size)),o=t.width,d=t.height,"custom"===t.size&&(o=t.customWidth,d=t.customHeight),i={src:t.url,width:o||null,height:d||null,title:t.title||null,"class":c.join(" ")||null},l.setAttribs(e,i),g.$(e).attr("alt",t.alt||""),r={href:t.linkUrl,rel:t.linkRel||null,target:t.linkTargetBlank?"_blank":null,"class":t.linkClassName||null},e.parentNode&&"A"===e.parentNode.nodeName&&!m(e.parentNode)?t.linkUrl?l.setAttribs(e.parentNode,r):l.remove(e.parentNode,!0):t.linkUrl&&((a=l.getParent(e,"a"))&&l.insertAfter(e,a),a=l.create("a",r),e.parentNode.insertBefore(a,e),a.appendChild(e)),d=g.dom.getParent(e,".mceTemp"),c=e.parentNode&&"A"===e.parentNode.nodeName&&!m(e.parentNode)?e.parentNode:e,t.caption?(t.caption=u(t.caption),i=t.attachment_id?"attachment_"+t.attachment_id:null,r="align"+(t.align||"none"),a="wp-caption "+r,t.captionClassName&&(a+=" "+t.captionClassName.replace(/[<>&]+/g,"")),g.getParam("wpeditimage_html5_captions")||(o=parseInt(o,10),o+=10),d?((r=l.select("dl.wp-caption",d)).length&&l.setAttribs(r,{id:i,"class":a,style:"width: "+o+"px"}),(r=l.select(".wp-caption-dd",d)).length&&l.setHTML(r[0],t.caption)):(n="

'+t.caption+"
",o=l.create("div",{"class":"mceTemp"},n),(n=l.getParent(c,"p"))?n.parentNode.insertBefore(o,n):c.parentNode.insertBefore(o,c),g.$(o).find("dt.wp-caption-dt").append(c),n&&l.isEmpty(n)&&l.remove(n))):d&&(n=l.create("p"),d.parentNode.insertBefore(n,d),n.appendChild(c),l.remove(d)),c=g.$(e),l=c.attr("srcset"),d=c.attr("src"),l&&d&&(d=d.replace(/[?#].*/,""),-1===l.indexOf(d)&&c.attr("srcset",null).attr("sizes",null)),wp.media.events&&wp.media.events.trigger("editor:image-update",{editor:g,metadata:t,image:e}),g.nodeChanged()}),e.detach()},e.state("image-details").on("update",t),e.state("replace-image").on("replace",t),e.on("close",function(){g.focus(),e.detach()}),e.open()):g.execCommand("mceImage")}}),e({alignleft:"Align left",aligncenter:"Align center",alignright:"Align right",alignnone:"No alignment"},function(e,n){var t=n.slice(5);g.addButton("wp_img_"+n,{tooltip:e,icon:"dashicon dashicons-align-"+t,cmd:"alignnone"===n?"wpAlignNone":"Justify"+t.slice(0,1).toUpperCase()+t.slice(1),onPostRender:function(){var t=this;g.on("NodeChange",function(e){"IMG"===e.element.nodeName&&(e=g.dom.getParent(e.element,".wp-caption")||e.element,"alignnone"===n?t.active(!/\balign(left|center|right)\b/.test(e.className)):t.active(g.dom.hasClass(e,n)))})}})}),g.once("preinit",function(){g.wp&&g.wp._createToolbar&&(r=g.wp._createToolbar(["wp_img_alignleft","wp_img_aligncenter","wp_img_alignright","wp_img_alignnone","wp_img_edit","wp_img_remove"]))}),g.on("wptoolbar",function(e){"IMG"!==e.element.nodeName||o(e.element)||(e.toolbar=r)}),i&&g.on("init",function(){g.on("touchstart",function(e){"IMG"!==e.target.nodeName||d(e.target)||(n=!0)}),g.dom.bind(g.getDoc(),"touchmove",function(){n=!1}),g.on("touchend",function(e){var t;n&&"IMG"===e.target.nodeName&&!d(e.target)?(t=e.target,n=!1,window.setTimeout(function(){g.selection.select(t),g.nodeChanged()},100)):r&&r.hide()})}),g.on("init",function(){var m=g.dom,e=g.getParam("wpeditimage_html5_captions")?"html5-captions":"html4-captions";m.addClass(g.getBody(),e),g.on("wpLoadImageForm",function(e){g.getParam("wpeditimage_disable_captions")||e.data.splice(e.data.length-1,0,{type:"textbox",flex:1,name:"wpcaption",minHeight:60,multiline:!0,scroll:!0,label:"Image caption"})}),g.on("wpNewImageRefresh",function(e){var t;(t=m.getParent(e.node,"dl.wp-caption"))&&(t.style.width||(e=(e=parseInt(e.node.clientWidth,10)+10)?e+"px":"50%",m.setStyle(t,"width",e)))}),g.on("wpImageFormSubmit",function(e){var t,n,a,i,o=e.imgData.data,r=e.imgData.node,c=e.imgData.wpcaption,d="",l="",s="",p=null;o.id="__wp-temp-img-id",e.imgData.cancel=!0,o.style||(o.style=null),o.src?(c=c&&u(c=(c=c.replace(/\r\n|\r/g,"\n").replace(/<\/?[a-zA-Z0-9]+( [^<>]+)?>/g,function(e){return e.replace(/[\r\n\t]+/," ")})).replace(/(]*>)\s*\n\s*/g,"$1").replace(/\s*\n\s*/g,"
")),r?(p=r.id||null,m.setAttribs(r,o),t=m.getParent(r,"dl.wp-caption"),c?t?(n=m.select("dd.wp-caption-dd",t)[0])&&(n.innerHTML=c):(r.className&&(d=r.className.match(/wp-image-([0-9]+)/),l=r.className.match(/align(left|right|center|none)/)),l?(l=l[0],r.className=r.className.replace(/align(left|right|center|none)/g,"")):l="alignnone",l=' class="wp-caption '+l+'"',d=d&&' id="attachment_'+d[1]+'"',(s=o.width||r.clientWidth)&&(s=parseInt(s,10),g.getParam("wpeditimage_html5_captions")||(s+=10),s=' style="width: '+s+'px"'),a=r.parentNode&&"A"===r.parentNode.nodeName?r.parentNode:r,i="
'+c+"
",t=m.create("div",{"class":"mceTemp"},i),(n=m.getParent(a,"p"))?n.parentNode.insertBefore(t,n):a.parentNode.insertBefore(t,a),g.$(t).find("dt.wp-caption-dt").append(a),n&&m.isEmpty(n)&&m.remove(n)):t&&(i="A"===r.parentNode.nodeName?m.getOuterHTML(r.parentNode):m.getOuterHTML(r),n=m.create("p",{},i),m.insertAfter(n,t.parentNode),g.selection.select(n),g.nodeChanged(),m.remove(t.parentNode))):(i=m.createHTML("img",o),c?(a=g.selection.getNode(),o.width&&(s=parseInt(o.width,10),g.getParam("wpeditimage_html5_captions")||(s+=10),s=' style="width: '+s+'px"'),i='
'+i+'
'+c+"
",(n="P"===a.nodeName?a:m.getParent(a,"p"))&&"P"===n.nodeName?(t=m.create("div",{"class":"mceTemp"},i),n.parentNode.insertBefore(t,n),g.selection.select(t),g.nodeChanged(),m.isEmpty(n)&&m.remove(n)):g.selection.setContent('
'+i+"
")):g.selection.setContent(i)),r=m.get("__wp-temp-img-id"),m.setAttrib(r,"id",p||null),e.imgData.node=r):r&&((t=m.getParent(r,"div.mceTemp"))?m.remove(t):"A"===r.parentNode.nodeName?m.remove(r.parentNode):m.remove(r),g.nodeChanged())}),g.on("wpLoadImageData",function(e){var t=e.imgData.data,e=e.imgData.node;(e=m.getParent(e,"dl.wp-caption"))&&(e=m.select("dd.wp-caption-dd",e)[0])&&(t.wpcaption=g.serializer.serialize(e).replace(/]*>/g,"$&\n").replace(/^

/,"").replace(/<\/p>$/,""))}),tinymce.Env.ie&&10',a=r.create("p",null,a),"DD"===t.nodeName?r.insertAfter(a,n):n.parentNode.insertBefore(a,n),g.nodeChanged(),i.setCursorLocation(a,0));else if((o===c.DELETE||o===c.BACKSPACE)&&("DIV"===(t=i.getNode()).nodeName&&r.hasClass(t,"mceTemp")?n=t:"IMG"!==t.nodeName&&"DT"!==t.nodeName&&"A"!==t.nodeName||(n=r.getParent(t,"div.mceTemp")),n))return r.events.cancel(e),h(t),!1}),tinymce.Env.gecko&&g.on("undo redo",function(){"IMG"===g.selection.getNode().nodeName&&g.selection.collapse()}),g.wpSetImgCaption=s,g.wpGetImgCaption=p,g.on("beforeGetContent",function(e){"raw"!==e.format&&g.$('img[id="__wp-temp-img-id"]').attr("id",null)}),g.on("BeforeSetContent",function(e){"raw"!==e.format&&(e.content=g.wpSetImgCaption(e.content))}),g.on("PostProcess",function(e){e.get&&(e.content=g.wpGetImgCaption(e.content))}),g.on("dragstart",function(){var e=g.selection.getNode();"IMG"===e.nodeName&&((a=g.dom.getParent(e,".mceTemp"))||"A"!==e.parentNode.nodeName||m(e.parentNode)||(a=e.parentNode))}),g.on("drop",function(e){var t=g.dom,n=tinymce.dom.RangeUtils.getCaretRangeFromPoint(e.clientX,e.clientY,g.getDoc());n&&t.getParent(n.startContainer,".mceTemp")?e.preventDefault():a&&(e.preventDefault(),g.undoManager.transact(function(){n&&g.selection.setRng(n),g.selection.setNode(a),t.remove(a)})),a=null}),g.wp=g.wp||{},g.wp.isPlaceholder=o,{_do_shcode:s,_get_shcode:p}});