X-Git-Url: https://scripts.mit.edu/gitweb/autoinstalls/wordpress.git/blobdiff_plain/0f684a09c03e547d3132bddc970cbeafcd1102f4..7f1521bf193b382565eb753043c161f4cb3fcda7:/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 8894cd8f..025603b4 100644 --- a/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js +++ b/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js @@ -1,10 +1,101 @@ /* global tinymce */ tinymce.PluginManager.add( 'wpeditimage', function( editor ) { - var toolbarActive = false; + var toolbar, serializer, + each = tinymce.each, + 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() { + 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; + } + } ); + + // Safari on iOS fails to select image nodes in contentEditoble mode on touch/click. + // Select them again. + if ( iOS ) { + editor.on( 'click', function( event ) { + if ( event.target.nodeName === 'IMG' ) { + var node = event.target; + + window.setTimeout( function() { + editor.selection.select( node ); + editor.nodeChanged(); + }, 200 ); + } else { + 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, + var id, align, classes, caption, img, width, trim = tinymce.trim; id = b.match( /id=['"]([^'"]*)['"] ?/ ); @@ -12,50 +103,56 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) { 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 '

' + - '
'+ img +'
'+ cap +'
'; + return '
' + + '
'+ img +'
'+ caption +'
'; }); } @@ -75,35 +172,44 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) { return ''; } - out = b.replace( /
]+)>\s*
]+>([\s\S]+?)<\/dt>\s*
]+>([\s\S]*?)<\/dd>\s*<\/dl>/gi, function( a, b, c, cap ) { - var id, cls, w; + out = b.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] : ''; - w = c.match( /width="([0-9]*)"/ ); - w = ( w && w[1] ) ? w[1] : ''; + classes = b.match( /class="([^"]*)"/ ); + classes = ( classes && classes[1] ) ? classes[1] : ''; + align = classes.match( /align[a-z]+/i ) || 'alignnone'; - if ( ! w || ! cap ) { + if ( ! width || ! caption ) { + if ( 'alignnone' !== align[0] ) { + c = c.replace( />]+)?>/g, function( a ) { + if ( classes ) { + classes = ' class="' + classes + '"'; + } + + 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
- 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

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

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

$1

$2' ); @@ -115,6 +221,7 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) { function extractImageData( imageNode ) { var classes, extraClasses, metadata, captionBlock, caption, link, width, height, + captionClassName = [], dom = editor.dom, isIntRegExp = /^\d+$/; @@ -180,9 +287,13 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) { 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]; @@ -208,9 +319,22 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) { 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, + captionNode, dd, dl, id, attrs, linkAttrs, width, height, align, dom = editor.dom; classes = tinymce.explode( imageData.extraClasses, ' ' ); @@ -285,9 +409,15 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) { } if ( imageData.caption ) { + imageData.caption = verifyHTML( imageData.caption ); id = imageData.attachment_id ? 'attachment_' + imageData.attachment_id : null; - className = 'wp-caption align' + ( imageData.align || 'none' ); + 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 ); @@ -316,18 +446,20 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) { // should create a new function for generating the caption markup html = '
' + - '
' + dom.getOuterHTML( node ) + '
'+ imageData.caption +'
'; + '
'+ imageData.caption +'
'; + + wrap = dom.create( 'div', { 'class': 'mceTemp' }, html ); if ( parent = dom.getParent( node, 'p' ) ) { - wrap = dom.create( 'div', { 'class': 'mceTemp' }, html ); parent.parentNode.insertBefore( wrap, parent ); - dom.remove( node ); - - if ( dom.isEmpty( parent ) ) { - dom.remove( parent ); - } } else { - dom.setOuterHTML( node, '
' + html + '
' ); + 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 ) { @@ -347,8 +479,6 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) { } editor.nodeChanged(); - // Refresh the toolbar - addToolbar( imageNode ); } function editImage( img ) { @@ -413,74 +543,13 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) { } editor.selection.collapse( true ); - editor.nodeChanged(); editor.dom.remove( wrap ); } else { editor.dom.remove( node ); } - removeToolbar(); - } - - function addToolbar( node ) { - var rectangle, toolbarHtml, toolbar, left, - dom = editor.dom; - - removeToolbar(); - - // Don't add to placeholders - if ( ! node || node.nodeName !== 'IMG' || isPlaceholder( node ) ) { - return; - } - - dom.setAttrib( node, 'data-wp-imgselect', 1 ); - rectangle = dom.getRect( node ); - - toolbarHtml = '
' + - '
'; - - toolbar = dom.create( 'div', { - 'id': 'wp-image-toolbar', - 'data-mce-bogus': '1', - 'contenteditable': false - }, toolbarHtml ); - - if ( editor.rtl ) { - left = rectangle.x + rectangle.w - 82; - } else { - left = rectangle.x; - } - - editor.getBody().appendChild( toolbar ); - dom.setStyles( toolbar, { - top: rectangle.y, - left: left - }); - - toolbarActive = true; - } - - function removeToolbar() { - var toolbar = editor.dom.get( 'wp-image-toolbar' ); - - if ( toolbar ) { - editor.dom.remove( toolbar ); - } - - editor.dom.setAttrib( editor.dom.select( 'img[data-wp-imgselect]' ), 'data-wp-imgselect', null ); - - toolbarActive = false; - } - - function isPlaceholder( node ) { - var dom = editor.dom; - - if ( dom.hasClass( node, 'mceItem' ) || dom.getAttrib( node, 'data-mce-placeholder' ) || - dom.getAttrib( node, 'data-mce-object' ) ) { - - return true; - } - return false; + editor.nodeChanged(); + editor.undoManager.add(); } editor.on( 'init', function() { @@ -563,6 +632,7 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) { // Convert remaining line breaks to
caption = caption.replace( /(]*>)\s*\n\s*/g, '$1' ).replace( /\s*\n\s*/g, '
' ); + caption = verifyHTML( caption ); } if ( ! imgNode ) { @@ -652,30 +722,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 = '
' + - '
'+ html +'
'+ caption +'
'; + '
'+ caption +'
'; - 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 ); + 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( '
' + html + '
' ); + node.parentNode.insertBefore( wrap, node ); + } + + editor.$( wrap ).find( 'dt.wp-caption-dt' ).append( node ); + + if ( parent && dom.isEmpty( parent ) ) { + dom.remove( parent ); } } } else { @@ -723,9 +789,6 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) { 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 @@ -741,45 +804,38 @@ 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' ); + } } - } - // refresh toolbar - addToolbar( node ); + }); } }); editor.on( 'BeforeExecCommand', function( event ) { - var node, p, DL, align, + var node, p, DL, align, replacement, cmd = event.command, dom = editor.dom; @@ -791,50 +847,38 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) { 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' ) { + } 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' ); + + if ( node.nodeName !== 'IMG' && ! DL ) { + return; + } - removeToolbar(); + node = DL || node; - if ( dom.is( node, 'dl.wp-caption' ) ) { - 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 = 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 +886,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 +916,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 +930,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 ); @@ -953,16 +953,22 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) { }; 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, '' ); } }); + // Add to editor.wp + editor.wp = editor.wp || {}; + editor.wp.isPlaceholder = isPlaceholder; + + // Back-compat. return { _do_shcode: parseShortcode, _get_shcode: getShortcode