diff --git a/src/wp-includes/css/editor.css b/src/wp-includes/css/editor.css index 4e3bf348c3..af2d901e59 100644 --- a/src/wp-includes/css/editor.css +++ b/src/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 -------------------------------------------------------------- */ diff --git a/src/wp-includes/js/tinymce/plugins/wplink/plugin.js b/src/wp-includes/js/tinymce/plugins/wplink/plugin.js index 419c1cf622..ffecb967b2 100644 --- a/src/wp-includes/js/tinymce/plugins/wplink/plugin.js +++ b/src/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; }