<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[30318] trunk/src/wp-includes: TinyMCE: enhance the inline toolbar for images:</title>
</head>
<body>

<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt;  }
#msg dl a { font-weight: bold}
#msg dl a:link    { color:#fc3; }
#msg dl a:active  { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff  {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta" style="font-size: 105%">
<dt style="float: left; width: 6em; font-weight: bold">Revision</dt> <dd><a style="font-weight: bold" href="https://core.trac.wordpress.org/changeset/30318">30318</a><script type="application/ld+json">{"@context":"http://schema.org","@type":"EmailMessage","description":"Review this Commit","action":{"@type":"ViewAction","url":"https://core.trac.wordpress.org/changeset/30318","name":"Review Commit"}}</script></dd>
<dt style="float: left; width: 6em; font-weight: bold">Author</dt> <dd>azaozz</dd>
<dt style="float: left; width: 6em; font-weight: bold">Date</dt> <dd>2014-11-13 00:55:22 +0000 (Thu, 13 Nov 2014)</dd>
</dl>

<pre style='padding-left: 1em; margin: 2em 0; border-left: 2px solid #ccc; line-height: 1.25; font-size: 105%; font-family: sans-serif'>TinyMCE: enhance the inline toolbar for images:
- Add alignment (left, center, right, none) buttons.
- Position the menu above the image when possible, except on iOS.
- Fix selecting images on iOS.
First run, part props avryl. See <a href="https://core.trac.wordpress.org/ticket/30147">#30147</a>.</pre>

<h3>Modified Paths</h3>
<ul>
<li><a href="#trunksrcwpincludesclasswpeditorphp">trunk/src/wp-includes/class-wp-editor.php</a></li>
<li><a href="#trunksrcwpincludescsseditorcss">trunk/src/wp-includes/css/editor.css</a></li>
<li><a href="#trunksrcwpincludesjstinymcepluginswpeditimagepluginjs">trunk/src/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js</a></li>
</ul>

</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunksrcwpincludesclasswpeditorphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/class-wp-editor.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/class-wp-editor.php 2014-11-12 23:38:02 UTC (rev 30317)
+++ trunk/src/wp-includes/class-wp-editor.php   2014-11-13 00:55:22 UTC (rev 30318)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -957,6 +957,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">                        'Insert Read More tag' => __( 'Insert Read More tag' ),
</span><span class="cx" style="display: block; padding: 0 10px">                        'Read more...' => __( 'Read more...' ), // Title on the placeholder inside the editor
</span><span class="cx" style="display: block; padding: 0 10px">                        'Distraction Free Writing' => __( 'Distraction Free Writing' ),
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                        'Remove Alignment' => __( 'Remove alignment' ), // Tooltip for the 'alignnone' button in the image toolbar
</ins><span class="cx" style="display: block; padding: 0 10px">                 );
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">                /**
</span></span></pre></div>
<a id="trunksrcwpincludescsseditorcss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/css/editor.css</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/css/editor.css      2014-11-12 23:38:02 UTC (rev 30317)
+++ trunk/src/wp-includes/css/editor.css        2014-11-13 00:55:22 UTC (rev 30318)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -154,6 +154,106 @@
</span><span class="cx" style="display: block; padding: 0 10px">        position: relative;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+div.mce-inline-toolbar-grp {
+       border: 1px solid #aaa;
+       -webkit-border-radius: 2px;
+       border-radius: 2px;
+       -webkit-box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.2 )
+       box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.2 )
+       -webkit-box-sizing: border-box;
+       -moz-box-sizing: border-box;
+       -webkit-box-sizing: border-box;
+       box-sizing: border-box;
+       margin-bottom: 8px;
+       position: absolute;
+       opacity: 0;
+       -moz-user-select: none;
+       -webkit-user-select: none;
+       -ms-user-select: none;
+       user-select: none;
+}
+
+div.mce-wp-image-toolbar > div.mce-stack-layout {
+       padding: 1px;
+}
+
+div.mce-inline-toolbar-grp.mce-arrow-up {
+       margin-bottom: 0;
+       margin-top: 8px;
+}
+
+div.mce-inline-toolbar-grp.mce-inline-toolbar-grp-active {
+       -webkit-transition:
+               top 0.1s ease-out,
+               left 0.1s ease-out,
+               opacity 0.1s ease-in-out;
+       transition:
+               top 0.1s ease-out,
+               left 0.1s ease-out,
+               opacity 0.1s ease-in-out;
+       opacity: 1;
+}
+
+div.mce-inline-toolbar-grp:before,
+div.mce-inline-toolbar-grp:after {
+       position: absolute;
+       left: 50%;
+       display: block;
+       width: 0;
+       height: 0;
+       border-style: solid;
+       border-color: transparent;
+       content: '';
+}
+
+div.mce-inline-toolbar-grp.mce-arrow-up:before {
+       top: -18px;
+       border-bottom-color: #aaa;
+       border-width: 9px;
+       margin-left: -9px;
+}
+
+div.mce-inline-toolbar-grp.mce-arrow-down:before {
+       bottom: -18px;
+       border-top-color: #aaa;
+       border-width: 9px;
+       margin-left: -9px;
+}
+
+div.mce-inline-toolbar-grp.mce-arrow-up:after {
+       top: -16px;
+       border-bottom-color: #f5f5f5;
+       border-width: 8px;
+       margin-left: -8px;
+}
+
+div.mce-inline-toolbar-grp.mce-arrow-down:after {
+       bottom: -16px;
+       border-top-color: #f5f5f5;
+       border-width: 8px;
+       margin-left: -8px;
+}
+
+div.mce-inline-toolbar-grp.mce-arrow-left:before,
+div.mce-inline-toolbar-grp.mce-arrow-left:after {
+       left: 20px;
+}
+
+div.mce-inline-toolbar-grp.mce-arrow-right:before,
+div.mce-inline-toolbar-grp.mce-arrow-right:after {
+       right: 11px;
+       left: auto;
+}
+
+div.mce-inline-toolbar-grp.mce-arrow-full {
+       right: 0;
+}
+
+div.mce-inline-toolbar-grp.mce-arrow-full > div {
+       width: 100%;
+       overflow-x: auto;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> div.mce-toolbar-grp > div {
</span><span class="cx" style="display: block; padding: 0 10px">        padding: 3px;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -621,6 +721,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> i.mce-i-ltr,
</span><span class="cx" style="display: block; padding: 0 10px"> i.mce-i-wp_page,
</span><span class="cx" style="display: block; padding: 0 10px"> i.mce-i-hr,
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+i.mce-i-dashicon,
</ins><span class="cx" style="display: block; padding: 0 10px"> .mce-close {
</span><span class="cx" style="display: block; padding: 0 10px">        font: normal 20px/1 'dashicons';
</span><span class="cx" style="display: block; padding: 0 10px">        padding: 0;
</span></span></pre></div>
<a id="trunksrcwpincludesjstinymcepluginswpeditimagepluginjs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js    2014-11-12 23:38:02 UTC (rev 30317)
+++ trunk/src/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js      2014-11-13 00:55:22 UTC (rev 30318)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1,8 +1,337 @@
</span><span class="cx" style="display: block; padding: 0 10px"> /* global tinymce */
</span><span class="cx" style="display: block; padding: 0 10px"> tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        var toolbarActive = false,
-               editingImage = false;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ var DOM = tinymce.DOM,
+               settings = editor.settings,
+               Factory = tinymce.ui.Factory,
+               each = tinymce.each,
+               iOS = tinymce.Env.iOS,
+               toolbarIsHidden = true,
+               editorWrapParent = tinymce.$( '#postdivrich' ),
+               tb;
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+        editor.addButton( 'wp_img_remove', {
+               tooltip: 'Remove',
+               icon: 'dashicon dashicons-no',
+               onclick: function() {
+                       removeImage( editor.selection.getNode() );
+               }
+       } );
+
+       editor.addButton( 'wp_img_edit', {
+               tooltip: 'Edit',
+               icon: 'dashicon dashicons-edit',
+               onclick: function() {
+                       editImage( editor.selection.getNode() );
+               }
+       } );
+
+       each( {
+               alignleft: 'Align left',
+               aligncenter: 'Align center',
+               alignright: 'Align right',
+               alignnone: 'Remove 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 ) );
+                                       }
+                               } );
+                       }
+               } );
+       } );
+
+       function toolbarConfig() {
+               var toolbarItems = [],
+                       buttonGroup;
+
+               each( [ 'wp_img_alignleft', 'wp_img_aligncenter', 'wp_img_alignright', 'wp_img_alignnone', 'wp_img_edit', 'wp_img_remove' ], function( item ) {
+                       var itemName;
+
+                       function bindSelectorChanged() {
+                               var selection = editor.selection;
+
+                               if ( item.settings.stateSelector ) {
+                                       selection.selectorChanged( item.settings.stateSelector, function( state ) {
+                                               item.active( state );
+                                       }, true );
+                               }
+
+                               if ( item.settings.disabledStateSelector ) {
+                                       selection.selectorChanged( item.settings.disabledStateSelector, function( state ) {
+                                               item.disabled( state );
+                                       } );
+                               }
+                       }
+
+                       if ( item === '|' ) {
+                               buttonGroup = null;
+                       } else {
+                               if ( Factory.has( item ) ) {
+                                       item = {
+                                               type: item
+                                       };
+
+                                       if ( settings.toolbar_items_size ) {
+                                               item.size = settings.toolbar_items_size;
+                                       }
+
+                                       toolbarItems.push( item );
+
+                                       buttonGroup = null;
+                               } else {
+                                       if ( ! buttonGroup ) {
+                                               buttonGroup = {
+                                                       type: 'buttongroup',
+                                                       items: []
+                                               };
+
+                                               toolbarItems.push( buttonGroup );
+                                       }
+
+                                       if ( editor.buttons[ item ] ) {
+                                               itemName = item;
+                                               item = editor.buttons[ itemName ];
+
+                                               if ( typeof item === 'function' ) {
+                                                       item = item();
+                                               }
+
+                                               item.type = item.type || 'button';
+
+                                               if ( settings.toolbar_items_size ) {
+                                                       item.size = settings.toolbar_items_size;
+                                               }
+
+                                               item = Factory.create( item );
+                                               buttonGroup.items.push( item );
+
+                                               if ( editor.initialized ) {
+                                                       bindSelectorChanged();
+                                               } else {
+                                                       editor.on( 'init', bindSelectorChanged );
+                                               }
+                                       }
+                               }
+                       }
+               } );
+
+               return {
+                       type: 'panel',
+                       layout: 'stack',
+                       classes: 'toolbar-grp inline-toolbar-grp wp-image-toolbar',
+                       ariaRoot: true,
+                       ariaRemember: true,
+                       items: [
+                               {
+                                       type: 'toolbar',
+                                       layout: 'flow',
+                                       items: toolbarItems
+                               }
+                       ]
+               };
+       }
+
+       tb = Factory.create( toolbarConfig() ).renderTo( document.body ).hide();
+
+       tb.reposition = function() {
+               var top, left, minTop, className,
+                       toolbarNode = this.getEl(),
+                       buffer = 5,
+                       margin = 8,
+                       windowPos = window.pageYOffset || document.documentElement.scrollTop,
+                       adminbar = tinymce.$( '#wpadminbar' )[0],
+                       mceToolbar = tinymce.$( '.mce-tinymce .mce-toolbar-grp' )[0],
+                       adminbarHeight = 0,
+                       boundary = editor.selection.getRng().getBoundingClientRect(),
+                       boundaryMiddle = ( boundary.left + boundary.right ) / 2,
+                       boundaryVerticalMiddle = ( boundary.top + boundary.bottom ) / 2,
+                       spaceTop = boundary.top,
+                       spaceBottom = iframeHeigth - boundary.bottom,
+                       windowWidth = window.innerWidth,
+                       toolbarWidth = toolbarNode.offsetWidth,
+                       toolbarHalf = toolbarWidth / 2,
+                       iframe = editor.getContentAreaContainer().firstChild,
+                       iframePos = DOM.getPos( iframe ),
+                       iframeWidth = iframe.offsetWidth,
+                       iframeHeigth = iframe.offsetHeight,
+                       toolbarNodeHeight = toolbarNode.offsetHeight,
+                       verticalSpaceNeeded = toolbarNodeHeight + margin + buffer;
+
+               if ( iOS ) {
+                       top = boundary.top + iframePos.y + margin;
+               } else {
+                       if ( spaceTop >= verticalSpaceNeeded ) {
+                               className = ' mce-arrow-down';
+                               top = boundary.top + iframePos.y - toolbarNodeHeight - margin;
+                       } else if ( spaceBottom >= verticalSpaceNeeded ) {
+                               className = ' mce-arrow-up';
+                               top = boundary.bottom + iframePos.y;
+                       } else {
+                               top = buffer;
+
+                               if ( boundaryVerticalMiddle >= verticalSpaceNeeded ) {
+                                       className = ' mce-arrow-down';
+                               } else {
+                                       className = ' mce-arrow-up';
+                               }
+                       }
+               }
+
+               // Make sure the image toolbar is below the main toolbar.
+               if ( mceToolbar ) {
+                       minTop = DOM.getPos( mceToolbar ).y + mceToolbar.clientHeight;
+               } else {
+                       minTop = iframePos.y;
+               }
+
+               // Make sure the image toolbar is below the adminbar (if visible) or below the top of the window.
+               if ( windowPos ) {
+                       if ( adminbar && adminbar.getBoundingClientRect().top === 0 ) {
+                               adminbarHeight = adminbar.clientHeight;
+                       }
+
+                       if ( windowPos + adminbarHeight > minTop ) {
+                               minTop = windowPos + adminbarHeight;
+                       }
+               }
+
+               if ( top && minTop && ( minTop + buffer > top ) ) {
+                       top = minTop + buffer;
+                       className = '';
+               }
+
+               left = boundaryMiddle - toolbarHalf;
+               left += iframePos.x;
+
+               if ( toolbarWidth >= windowWidth ) {
+                       className += ' mce-arrow-full';
+                       left = 0;
+               } else if ( ( left < 0 && boundary.left + toolbarWidth > windowWidth ) ||
+                       ( left + toolbarWidth > windowWidth && boundary.right - toolbarWidth < 0 ) ) {
+
+                       left = ( windowWidth - toolbarWidth ) / 2;
+               } else if ( left < iframePos.x ) {
+                       className += ' mce-arrow-left';
+                       left = boundary.left + iframePos.x;
+               } else if ( left + toolbarWidth > iframeWidth + iframePos.x ) {
+                       className += ' mce-arrow-right';
+                       left = boundary.right - toolbarWidth + iframePos.x;
+               }
+
+               if ( ! iOS ) {
+                       toolbarNode.className = toolbarNode.className.replace( / ?mce-arrow-[\w]+/g, '' );
+                       toolbarNode.className += className;
+               }
+
+               DOM.setStyles( toolbarNode, { 'left': left, 'top': top } );
+
+               return this;
+       };
+
+       if ( iOS ) {
+               // Safari on iOS fails to select image nodes in contentEditoble mode on touch/click.
+               // Select them again.
+               editor.on( 'click', function( event ) {
+                       if ( event.target.nodeName === 'IMG' ) {
+                               var node = event.target;
+
+                               window.setTimeout( function() {
+                                       editor.selection.select( node );
+                               }, 200 );
+                       } else {
+                               tb.hide();
+                       }
+               });
+       }
+
+       editor.on( 'nodechange', function( event ) {
+               var delay = iOS ? 350 : 100;
+
+               if ( event.element.nodeName !== 'IMG' ) {
+                       tb.hide();
+                       return;
+               }
+
+               setTimeout( function() {
+                       var element = editor.selection.getNode();
+
+                       if ( element.nodeName === 'IMG' ) {
+                               if ( tb._visible ) {
+                                       tb.reposition();
+                               } else {
+                                       tb.show();
+                               }
+                       } else {
+                               tb.hide();
+                       }
+               }, delay );
+       } );
+
+       tb.on( 'show', function() {
+               var self = this;
+
+               toolbarIsHidden = false;
+
+               setTimeout( function() {
+                       if ( self._visible ) {
+                               DOM.addClass( self.getEl(), 'mce-inline-toolbar-grp-active' );
+                               self.reposition();
+                       }
+               }, 100 );
+       } );
+
+       tb.on( 'hide', function() {
+               toolbarIsHidden = true;
+               DOM.removeClass( this.getEl(), 'mce-inline-toolbar-grp-active' );
+       } );
+
+       function hide() {
+               if ( ! toolbarIsHidden ) {
+                       tb.hide();
+               }
+       }
+
+       DOM.bind( window, 'resize scroll', function() {
+               if ( ! toolbarIsHidden && editorWrapParent.hasClass( 'wp-editor-expand' ) ) {
+                       hide();
+               }
+       });
+
+       editor.on( 'init', function() {
+               DOM.bind( editor.getWin(), 'resize scroll', hide );
+       } );
+
+       editor.on( 'blur hide', hide );
+
+       // 119 = F8
+       editor.shortcuts.add( 'Alt+119', '', function() {
+               var node = tb.find( 'toolbar' )[0];
+
+               if ( node ) {
+                       node.focus( true );
+               }
+       } );
+
</ins><span class="cx" style="display: block; padding: 0 10px">         function parseShortcode( content ) {
</span><span class="cx" style="display: block; padding: 0 10px">                return content.replace( /(?:<p>)?\[(?:wp_)?caption([^\]]+)\]([\s\S]+?)\[\/(?:wp_)?caption\](?:<\/p>)?/g, function( a, b, c ) {
</span><span class="cx" style="display: block; padding: 0 10px">                        var id, align, classes, caption, img, width,
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -372,8 +701,6 @@
</span><span class="cx" style="display: block; padding: 0 10px">                }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">                editor.nodeChanged();
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                // Refresh the toolbar
-               addToolbar( imageNode );
</del><span class="cx" style="display: block; padding: 0 10px">         }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">        function editImage( img ) {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -414,7 +741,6 @@
</span><span class="cx" style="display: block; padding: 0 10px">                frame.on( 'close', function() {
</span><span class="cx" style="display: block; padding: 0 10px">                        editor.focus();
</span><span class="cx" style="display: block; padding: 0 10px">                        frame.detach();
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                        editingImage = false;
</del><span class="cx" style="display: block; padding: 0 10px">                 });
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">                frame.open();
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -444,129 +770,10 @@
</span><span class="cx" style="display: block; padding: 0 10px">                        editor.dom.remove( node );
</span><span class="cx" style="display: block; padding: 0 10px">                }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                removeToolbar();
</del><span class="cx" style="display: block; padding: 0 10px">                 editor.nodeChanged();
</span><span class="cx" style="display: block; padding: 0 10px">                editor.undoManager.add();
</span><span class="cx" style="display: block; padding: 0 10px">        }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        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 = '<i class="dashicons dashicons-edit edit" data-mce-bogus="all"></i>' +
-                       '<i class="dashicons dashicons-no-alt remove" data-mce-bogus="all"></i>';
-
-               toolbar = dom.create( 'p', {
-                       'id': 'wp-image-toolbar',
-                       'data-mce-bogus': 'all',
-                       '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 );
-
-               editingImage = false;
-               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;
-       }
-
-       function isToolbarButton( node ) {
-               return ( node && node.nodeName === 'I' && node.parentNode.id === 'wp-image-toolbar' );
-       }
-
-       function edit( event ) {
-               var image,
-                       node = event.target,
-                       dom = editor.dom;
-
-               // Don't trigger on right-click
-               if ( event.button && event.button > 1 ) {
-                       return;
-               }
-
-               if ( isToolbarButton( node ) ) {
-                       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' ) ) {
-                                       if ( ! editingImage ) {
-                                               editImage( image );
-                                               editingImage = true;
-                                       }
-                               }
-                       }
-
-                       event.preventDefault();
-               } else if ( node.nodeName === 'IMG' && ! editor.dom.getAttrib( node, 'data-wp-imgselect' ) && ! isPlaceholder( node ) ) {
-                       addToolbar( node );
-               } else if ( node.nodeName !== 'IMG' ) {
-                       removeToolbar();
-               }
-       }
-
-       if ( 'ontouchend' in document ) {
-               editor.on( 'click', function( event ) {
-                       var target = event.target;
-
-                       if ( editingImage && target.nodeName === 'IMG' ) {
-                               event.preventDefault();
-                       }
-
-                       if ( isToolbarButton( target ) ) {
-                               event.preventDefault();
-                               event.stopPropagation();
-                       }
-               });
-       }
-
-       editor.on( 'mouseup touchend', edit );
-
</del><span class="cx" style="display: block; padding: 0 10px">         editor.on( 'init', function() {
</span><span class="cx" style="display: block; padding: 0 10px">                var dom = editor.dom,
</span><span class="cx" style="display: block; padding: 0 10px">                        captionClass = editor.getParam( 'wpeditimage_html5_captions' ) ? 'html5-captions' : 'html4-captions';
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -803,9 +1010,6 @@
</span><span class="cx" style="display: block; padding: 0 10px">                        if ( node.nodeName === 'IMG' && dom.getParent( node, '.wp-caption' ) ) {
</span><span class="cx" style="display: block; padding: 0 10px">                                event.preventDefault();
</span><span class="cx" style="display: block; padding: 0 10px">                        }
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-
-                       // Remove toolbar to avoid an orphaned toolbar when dragging an image to a new location
-                       removeToolbar();
</del><span class="cx" style="display: block; padding: 0 10px">                 });
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">                // Prevent IE11 from making dl.wp-caption resizable
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -821,14 +1025,6 @@
</span><span class="cx" style="display: block; padding: 0 10px">                                        event.target.focus();
</span><span class="cx" style="display: block; padding: 0 10px">                                }
</span><span class="cx" style="display: block; padding: 0 10px">                        });
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-
-                       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();
-                               }
-                       });
</del><span class="cx" style="display: block; padding: 0 10px">                 }
</span><span class="cx" style="display: block; padding: 0 10px">        });
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -855,14 +1051,12 @@
</span><span class="cx" style="display: block; padding: 0 10px">                                                dom.setStyle( parent, 'width', width + 'px' );
</span><span class="cx" style="display: block; padding: 0 10px">                                        }
</span><span class="cx" style="display: block; padding: 0 10px">                                }
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                // refresh toolbar
-                               addToolbar( node );
</del><span class="cx" style="display: block; padding: 0 10px">                         });
</span><span class="cx" style="display: block; padding: 0 10px">                }
</span><span class="cx" style="display: block; padding: 0 10px">     });
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">        editor.on( 'BeforeExecCommand', function( event ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                var node, p, DL, align,
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         var node, p, DL, align, replacement,
</ins><span class="cx" style="display: block; padding: 0 10px">                         cmd = event.command,
</span><span class="cx" style="display: block; padding: 0 10px">                        dom = editor.dom;
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -875,39 +1069,30 @@
</span><span class="cx" style="display: block; padding: 0 10px">                                editor.selection.setCursorLocation( p, 0 );
</span><span class="cx" style="display: block; padding: 0 10px">                                editor.nodeChanged();
</span><span class="cx" style="display: block; padding: 0 10px">                        }
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                } else if ( cmd === 'JustifyLeft' || cmd === 'JustifyRight' || cmd === 'JustifyCenter' ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         } else if ( cmd === 'JustifyLeft' || cmd === 'JustifyRight' || cmd === 'JustifyCenter' || cmd === 'wpAlignNone' ) {
</ins><span class="cx" style="display: block; padding: 0 10px">                         node = editor.selection.getNode();
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                        align = cmd.substr(7).toLowerCase();
-                       align = 'align' + align;
-                       DL = dom.getParent( node, 'dl.wp-caption' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 align = 'align' + cmd.slice( 7 ).toLowerCase();
+                       DL = editor.dom.getParent( node, '.wp-caption' );
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                        removeToolbar();
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 if ( node.nodeName !== 'IMG' && ! DL ) {
+                               return;
+                       }
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                        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 );
-                               }
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 node = DL || node;
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                if ( node.nodeName === 'IMG' ) {
-                                       // Re-select the image to update resize handles, etc.
-                                       editor.nodeChanged();
-                               }
-
-                               event.preventDefault();
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 if ( editor.dom.hasClass( node, align ) ) {
+                               replacement = ' alignnone';
+                       } else {
+                               replacement = ' ' + align;
</ins><span class="cx" style="display: block; padding: 0 10px">                         }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                        if ( node.nodeName === 'IMG' ) {
-                               if ( dom.hasClass( node, align ) ) {
-                                       // The align class is being removed
-                                       dom.addClass( node, 'alignnone' );
-                               } else {
-                                       dom.removeClass( node, 'alignnone' );
-                               }
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 node.className = node.className.replace( / ?align(left|center|right|none)/g, '' ) + replacement;
+
+                       editor.nodeChanged();
+                       event.preventDefault();
+
+                       if ( tb ) {
+                               tb.reposition();
</ins><span class="cx" style="display: block; padding: 0 10px">                         }
</span><span class="cx" style="display: block; padding: 0 10px">                }
</span><span class="cx" style="display: block; padding: 0 10px">        });
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -960,36 +1145,9 @@
</span><span class="cx" style="display: block; padding: 0 10px">                                removeImage( node );
</span><span class="cx" style="display: block; padding: 0 10px">                                return false;
</span><span class="cx" style="display: block; padding: 0 10px">                        }
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-
-                       removeToolbar();
</del><span class="cx" style="display: block; padding: 0 10px">                 }
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-
-               // Most 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 !== VK.SPACEBAR ) ) {
-                               return;
-                       }
-
-                       removeToolbar();
-               }
</del><span class="cx" style="display: block; padding: 0 10px">         });
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        editor.on( 'mousedown', function( event ) {
-               if ( isToolbarButton( event.target ) ) {
-                       if ( tinymce.Env.ie ) {
-                               // Stop IE > 8 from making the wrapper resizable on mousedown
-                               event.preventDefault();
-                       }
-               } else if ( event.target.nodeName !== 'IMG' ) {
-                       removeToolbar();
-               }
-       });
-
-       // Remove from undo levels
-       editor.on( 'BeforeAddUndo', function( event ) {
-               event.level.content = event.level.content.replace( / data-wp-imgselect="1"/g, '' );
-       });
-
</del><span class="cx" style="display: block; padding: 0 10px">         // After undo/redo FF seems to set the image height very slowly when it is set to 'auto' in the CSS.
</span><span class="cx" style="display: block; padding: 0 10px">        // This causes image.getBoundingClientRect() to return wrong values and the resize handles are shown in wrong places.
</span><span class="cx" style="display: block; padding: 0 10px">        // Collapse the selection to remove the resize handles.
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1001,10 +1159,6 @@
</span><span class="cx" style="display: block; padding: 0 10px">                });
</span><span class="cx" style="display: block; padding: 0 10px">        }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        editor.on( 'cut wpview-selected', function() {
-               removeToolbar();
-       });
-
</del><span class="cx" style="display: block; padding: 0 10px">         editor.wpSetImgCaption = function( content ) {
</span><span class="cx" style="display: block; padding: 0 10px">                return parseShortcode( content );
</span><span class="cx" style="display: block; padding: 0 10px">        };
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1022,7 +1176,6 @@
</span><span class="cx" style="display: block; padding: 0 10px">        editor.on( 'PostProcess', function( event ) {
</span><span class="cx" style="display: block; padding: 0 10px">                if ( event.get ) {
</span><span class="cx" style="display: block; padding: 0 10px">                        event.content = editor.wpGetImgCaption( event.content );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                        event.content = event.content.replace( / data-wp-imgselect="1"/g, '' );
</del><span class="cx" style="display: block; padding: 0 10px">                 }
</span><span class="cx" style="display: block; padding: 0 10px">        });
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span></span></pre>
</div>
</div>

</body>
</html>