RTL for TinyMCE:

- Add _dir: 'rtl' to the TinyMCE translation object.
- Fix editor.css for RTL.
- Fix the Edit and Delete buttons position for wpview and images.
- For _mce_set_direction(), update documentation and fix adding the 'ltr' button.
Fixes #27773
Built from https://develop.svn.wordpress.org/trunk@28094


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

wp-includes/class-wp-editor.php

@@ -982,6 +982,11 @@ final class _WP_Editors {
 		$baseurl = self::$baseurl;
 		$mce_locale = self::$mce_locale;
 
+		// Set direction
+		if ( is_rtl() ) {
+			$mce_translation['_dir'] = 'rtl';
+		}
+
 		/**
 		 * Filter translated strings prepared for TinyMCE.
 		 *

wp-includes/css/editor-rtl.css

@@ -1851,6 +1851,16 @@ i.mce-i-hr:before {
 	font-family: Tahoma, sans-serif;
 }
 
+/* @noflip */
+.mce-rtl .mce-flow-layout .mce-flow-layout-item > div {
+	direction: rtl;
+}
+
+/* @noflip */
+.mce-rtl .mce-listbox i.mce-caret {
+	left: 6px;
+}
+
 html:lang(he-il) .rtl .wp-switch-editor,
 html:lang(he-il) .rtl .quicktags-toolbar input  {
  	font-family: Arial, sans-serif;

wp-includes/css/editor.css

@@ -1851,6 +1851,16 @@ i.mce-i-hr:before {
 	font-family: Tahoma, sans-serif;
 }
 
+/* @noflip */
+.mce-rtl .mce-flow-layout .mce-flow-layout-item > div {
+	direction: rtl;
+}
+
+/* @noflip */
+.mce-rtl .mce-listbox i.mce-caret {
+	left: 6px;
+}
+
 html:lang(he-il) .rtl .wp-switch-editor,
 html:lang(he-il) .rtl .quicktags-toolbar input  {
  	font-family: Arial, sans-serif;

wp-includes/functions.php

@@ -2457,20 +2457,21 @@ function _config_wp_siteurl( $url = '' ) {
  * Will only set the direction to 'rtl', if the WordPress locale has the text
  * direction set to 'rtl'.
  *
- * Fills in the 'directionality', 'plugins', and 'theme_advanced_button1' array
- * keys. These keys are then returned in the $input array.
+ * Fills in the 'directionality' setting, enables the 'directionality' plugin,
+ * and adds the 'ltr' button to 'toolbar1', formerly 'theme_advanced_buttons1' array
+ * keys. These keys are then returned in the $input (TinyMCE settings) array.
  *
  * @access private
  * @since 2.1.0
  *
- * @param array $input MCE plugin array.
+ * @param array $input MCE settings array.
  * @return array Direction set for 'rtl', if needed by locale.
  */
 function _mce_set_direction( $input ) {
 	if ( is_rtl() ) {
 		$input['directionality'] = 'rtl';
 		$input['plugins'] .= ',directionality';
-		$input['theme_advanced_buttons1'] .= ',ltr';
+		$input['toolbar1'] .= ',ltr';
 	}
 
 	return $input;

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

@@ -279,6 +279,7 @@ tinymce.PluginManager.add( 'wordpress', function( editor ) {
 
 		if ( editor.getParam( 'directionality' ) === 'rtl' ) {
 			bodyClass.push('rtl');
+			dom.setAttrib( doc.documentElement, 'dir', 'rtl' );
 		}
 
 		if ( env.ie ) {

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

@@ -403,7 +403,7 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
 	}
 
 	function addToolbar( node ) {
-		var rectangle, toolbarHtml, toolbar, toolbarSize,
+		var rectangle, toolbarHtml, toolbar, left,
 			dom = editor.dom;
 
 		removeToolbar();
@@ -425,12 +425,16 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
 			'contenteditable': false
 		}, toolbarHtml );
 
-		editor.getBody().appendChild( toolbar );
-		toolbarSize = dom.getSize( toolbar );
+		if ( editor.rtl ) {
+			left = rectangle.x + rectangle.w - 82;
+		} else {
+			left = rectangle.x;
+		}
 
+		editor.getBody().appendChild( toolbar );
 		dom.setStyles( toolbar, {
 			top: rectangle.y,
-			left: rectangle.x
+			left: left
 		});
 
 		toolbarActive = true;

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

@@ -453,6 +453,22 @@ img.wp-oembed {
 	outline: 0;
 }
 
+/* rtl */
+.rtl .gallery .gallery-item {
+	float: right;
+}
+
+.rtl .wpview-wrap .toolbar {
+	left: auto;
+	right: 0;
+}
+
+.rtl .wpview-wrap .toolbar div,
+.rtl #wp-image-toolbar div {
+	margin-left: auto;
+	margin-right: 7px;
+}
+
 @media print,
 	(-o-min-device-pixel-ratio: 5/4),
 	(-webkit-min-device-pixel-ratio: 1.25),