TinyMCE, inline link toolbar:

- Add max-width for all floating toolbars.
- Ensure the inline link toolbar doesn't exceed the width on small screen devices.
- Do not cut/concatenate the URL when it is less than 40 characters long.
- Show more of the URL if the beginning part plus the ending part are less than 40 characters long.
See #32604.
Built from https://develop.svn.wordpress.org/trunk@32937


git-svn-id: http://core.svn.wordpress.org/trunk@32908 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-includes/css/editor-rtl.css

@@ -174,6 +174,7 @@ div.mce-inline-toolbar-grp {
 	-webkit-user-select: none;
 	-ms-user-select: none;
 	user-select: none;
+	max-width: 98%;
 	z-index: 100100; /* Same as the other TinyMCE "panels" */
 }
 
@@ -1602,6 +1603,9 @@ i.mce-i-wp_code:before {
 .wp-link-preview {
 	float: right;
 	margin: 5px;
+	max-width: 694px;
+	overflow: hidden;
+	text-overflow: ellipsis;
 }
 
 .wp-link-preview a {
@@ -1616,6 +1620,14 @@ i.mce-i-wp_code:before {
 	cursor: pointer;
 }
 
+@media screen and ( max-width: 782px ) {
+	.wp-link-preview {
+		max-width: 70%;
+		max-width: -webkit-calc(100% - 88px);
+		max-width: calc(100% - 88px);
+	}
+}
+
 /* =Overlay Body
 -------------------------------------------------------------- */
 

wp-includes/css/editor.css

@@ -174,6 +174,7 @@ div.mce-inline-toolbar-grp {
 	-webkit-user-select: none;
 	-ms-user-select: none;
 	user-select: none;
+	max-width: 98%;
 	z-index: 100100; /* Same as the other TinyMCE "panels" */
 }
 
@@ -1602,6 +1603,9 @@ i.mce-i-wp_code:before {
 .wp-link-preview {
 	float: left;
 	margin: 5px;
+	max-width: 694px;
+	overflow: hidden;
+	text-overflow: ellipsis;
 }
 
 .wp-link-preview a {
@@ -1616,6 +1620,14 @@ i.mce-i-wp_code:before {
 	cursor: pointer;
 }
 
+@media screen and ( max-width: 782px ) {
+	.wp-link-preview {
+		max-width: 70%;
+		max-width: -webkit-calc(100% - 88px);
+		max-width: calc(100% - 88px);
+	}
+}
+
 /* =Overlay Body
 -------------------------------------------------------------- */
 

wp-includes/js/tinymce/plugins/wplink/plugin.js

@@ -80,12 +80,18 @@ tinymce.PluginManager.add( 'wplink', function( editor ) {
 
 				url = url.replace( /(?:index)?\.html$/, '' );
 
-				if ( ( lastIndex = url.lastIndexOf( '/' ) ) === url.length - 1 ) {
-					url = url.slice( 0, lastIndex );
+				if ( url.charAt( url.length - 1 ) === '/' ) {
+					url = url.slice( 0, -1 );
 				}
 
-				if ( ( index = url.indexOf( '/' ) ) !== -1 && ( lastIndex = url.lastIndexOf( '/' ) ) !== -1 && lastIndex !== index ) {
-					url = url.slice( 0, index + 1 ) + '\u2026' + url.slice( lastIndex, url.length );
+				// If the URL is longer that 40 chars, concatenate the beginning (after the domain) and ending with ...
+				if ( url.length > 40 && ( index = url.indexOf( '/' ) ) !== -1 && ( lastIndex = url.lastIndexOf( '/' ) ) !== -1 && lastIndex !== index ) {
+					// If the beginning + ending are shorter that 40 chars, show more of the ending
+					if ( index + url.length - lastIndex < 40 ) {
+						lastIndex =  -( 40 - ( index + 1 ) );
+					}
+
+					url = url.slice( 0, index + 1 ) + '\u2026' + url.slice( lastIndex );
 				}
 
 				tinymce.$( this.getEl().firstChild ).attr( 'href', this.url ).text( url );
@@ -96,11 +102,13 @@ tinymce.PluginManager.add( 'wplink', function( editor ) {
 
 			editor.on( 'wptoolbar', function( event ) {
 				var anchor = editor.dom.getParent( event.element, 'a' ),
+					$ = editor.$,
 					href;
 
-				if ( anchor && ( href = editor.$( anchor ).attr( 'href' ) ) ) {
-					self.setURL( href );
+				if ( anchor && ! $( anchor ).find( 'img' ).length &&
+					( href = $( anchor ).attr( 'href' ) ) ) {
 
+					self.setURL( href );
 					event.element = anchor;
 					event.toolbar = toolbar;
 				}

wp-includes/js/tinymce/plugins/wplink/plugin.min.js

@@ -1 +1 @@
-tinymce.PluginManager.add("wplink",function(a){var b;a.addCommand("WP_Link",function(){window.wpLink&&window.wpLink.open(a.id)}),a.addShortcut("Alt+Shift+A","","WP_Link"),a.addShortcut("Meta+K","","WP_Link"),a.addButton("link",{icon:"link",tooltip:"Insert/edit link",cmd:"WP_Link",stateSelector:"a[href]"}),a.addButton("unlink",{icon:"unlink",tooltip:"Remove link",cmd:"unlink"}),a.addMenuItem("link",{icon:"link",text:"Insert/edit link",cmd:"WP_Link",stateSelector:"a[href]",context:"insert",prependToContext:!0}),a.on("pastepreprocess",function(b){var c=b.content,d=/^(?:https?:)?\/\/\S+$/i;a.selection.isCollapsed()||d.test(a.selection.getContent())||(c=c.replace(/<[^>]+>/g,""),c=tinymce.trim(c),d.test(c)&&(a.execCommand("mceInsertLink",!1,{href:a.dom.decode(c)}),b.preventDefault()))}),tinymce.ui.WPLinkPreview=tinymce.ui.Control.extend({url:"#",renderHtml:function(){return'<div id="'+this._id+'" class="wp-link-preview"><a href="'+this.url+'" target="_blank" tabindex="-1">'+this.url+"</a></div>"},setURL:function(a){var b,c;this.url!==a&&(this.url=a,a=window.decodeURIComponent(a),a=a.replace(/^(?:https?:)?\/\/(?:www\.)?/,""),-1!==(b=a.indexOf("?"))&&(a=a.slice(0,b)),-1!==(b=a.indexOf("#"))&&(a=a.slice(0,b)),a=a.replace(/(?:index)?\.html$/,""),(c=a.lastIndexOf("/"))===a.length-1&&(a=a.slice(0,c)),-1!==(b=a.indexOf("/"))&&-1!==(c=a.lastIndexOf("/"))&&c!==b&&(a=a.slice(0,b+1)+"…"+a.slice(c,a.length)),tinymce.$(this.getEl().firstChild).attr("href",this.url).text(a))},postRender:function(){var c=this;a.on("wptoolbar",function(d){var e,f=a.dom.getParent(d.element,"a");f&&(e=a.$(f).attr("href"))&&(c.setURL(e),d.element=f,d.toolbar=b)})}}),a.addButton("wp_link_edit",{tooltip:"Edit ",icon:"dashicon dashicons-edit",cmd:"WP_Link"}),a.addButton("wp_link_remove",{tooltip:"Remove",icon:"dashicon dashicons-no",cmd:"unlink"}),a.on("preinit",function(){b=a.wp._createToolbar(["WPLinkPreview","wp_link_edit","wp_link_remove"],!0)})});
+tinymce.PluginManager.add("wplink",function(a){var b;a.addCommand("WP_Link",function(){window.wpLink&&window.wpLink.open(a.id)}),a.addShortcut("Alt+Shift+A","","WP_Link"),a.addShortcut("Meta+K","","WP_Link"),a.addButton("link",{icon:"link",tooltip:"Insert/edit link",cmd:"WP_Link",stateSelector:"a[href]"}),a.addButton("unlink",{icon:"unlink",tooltip:"Remove link",cmd:"unlink"}),a.addMenuItem("link",{icon:"link",text:"Insert/edit link",cmd:"WP_Link",stateSelector:"a[href]",context:"insert",prependToContext:!0}),a.on("pastepreprocess",function(b){var c=b.content,d=/^(?:https?:)?\/\/\S+$/i;a.selection.isCollapsed()||d.test(a.selection.getContent())||(c=c.replace(/<[^>]+>/g,""),c=tinymce.trim(c),d.test(c)&&(a.execCommand("mceInsertLink",!1,{href:a.dom.decode(c)}),b.preventDefault()))}),tinymce.ui.WPLinkPreview=tinymce.ui.Control.extend({url:"#",renderHtml:function(){return'<div id="'+this._id+'" class="wp-link-preview"><a href="'+this.url+'" target="_blank" tabindex="-1">'+this.url+"</a></div>"},setURL:function(a){var b,c;this.url!==a&&(this.url=a,a=window.decodeURIComponent(a),a=a.replace(/^(?:https?:)?\/\/(?:www\.)?/,""),-1!==(b=a.indexOf("?"))&&(a=a.slice(0,b)),-1!==(b=a.indexOf("#"))&&(a=a.slice(0,b)),a=a.replace(/(?:index)?\.html$/,""),"/"===a.charAt(a.length-1)&&(a=a.slice(0,-1)),a.length>40&&-1!==(b=a.indexOf("/"))&&-1!==(c=a.lastIndexOf("/"))&&c!==b&&(b+a.length-c<40&&(c=-(40-(b+1))),a=a.slice(0,b+1)+"…"+a.slice(c)),tinymce.$(this.getEl().firstChild).attr("href",this.url).text(a))},postRender:function(){var c=this;a.on("wptoolbar",function(d){var e,f=a.dom.getParent(d.element,"a"),g=a.$;f&&!g(f).find("img").length&&(e=g(f).attr("href"))&&(c.setURL(e),d.element=f,d.toolbar=b)})}}),a.addButton("wp_link_edit",{tooltip:"Edit ",icon:"dashicon dashicons-edit",cmd:"WP_Link"}),a.addButton("wp_link_remove",{tooltip:"Remove",icon:"dashicon dashicons-no",cmd:"unlink"}),a.on("preinit",function(){b=a.wp._createToolbar(["WPLinkPreview","wp_link_edit","wp_link_remove"],!0)})});

wp-includes/version.php

@@ -4,7 +4,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '4.3-alpha-32936';
+$wp_version = '4.3-alpha-32937';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.