Ticket #30696: 30696.patch

src/wp-includes/js/tinymce/plugins/wpview/plugin.js

@@ -158 +158 @@
         }
 
         function adjustToolbarPosition( viewNode ) {
-                var delta = 0,
+                var viewNodeRect, iframeRect, toolbarWidth, bodyWidth, pageX,
+                        delta = 0,
+                        buffer = 5, // Used for keeping the toolbar a little bit (5px) on the inside of the editor.
+                        toolbarTopOffset = 43,
+                        body = editor.getBody(),
+                        prop = 'left',
                         toolbar = editor.$( viewNode ).find( '.toolbar' ),
                         editorToolbar = tinymce.$( editor.editorContainer ).find( '.mce-toolbar-grp' )[0],
                         editorToolbarBottom = ( editorToolbar && editorToolbar.getBoundingClientRect().bottom ) || 0;
-                
-                if ( toolbar.length && editor.iframeElement ) {
-                        // 48 = 43 for the toolbar + 5 buffer
-                        delta = viewNode.getBoundingClientRect().top + editor.iframeElement.getBoundingClientRect().top - editorToolbarBottom - 48;
+
+                if ( ! toolbar.length || ! editor.iframeElement ) {
+                        return;
                 }
 
+                viewNodeRect = viewNode.getBoundingClientRect();
+                iframeRect = editor.iframeElement.getBoundingClientRect();
+                bodyWidth = body.clientWidth;
+                toolbarWidth = toolbar[0].clientWidth;
+                delta = viewNodeRect.top + iframeRect.top - editorToolbarBottom - toolbarTopOffset - buffer;
+                pageX = editor.getWin().pageXOffset || editor.getDoc().documentElement.scrollLeft || 0;
+
+                if ( editor.$( body ).hasClass( 'rtl' ) ) {
+                        prop = 'right';
+                        pageX = pageX && pageX * -1;
+                }
+
                 if ( delta < 0 ) {
-                        toolbar.removeClass( 'mce-arrow-down' ).css({ top: ( -43 + delta * -1 ) });
+                        toolbar.removeClass( 'mce-arrow-down' ).css({ top: ( -toolbarTopOffset + delta * -1 ) });
                 } else if ( delta > 0 && ! toolbar.hasClass( 'mce-arrow-down' ) ) {
                         toolbar.addClass( 'mce-arrow-down' ).css({ top: '' });
                 }
+
+                if ( viewNode.clientWidth > bodyWidth ) {
+                        toolbar.css( prop, ( bodyWidth - toolbarWidth ) / 2 + pageX );
+                }
         }
 
         /**

src/wp-includes/js/tinymce/skins/wordpress/wp-content.css

@@ -340 +340 @@
         margin-bottom: 8px;
 }
 
+.rtl .wpview-wrap .toolbar {
+        left: auto;
+        right: 45%;
+        right: calc(50% - 32px);
+}
+
 .wpview-wrap[data-mce-selected] .toolbar {
         display: block;
 }