Browse Source

Configured the `BlockToolbar` plugin to display on both sides of editable depending on the direction of the language.

Aleksander Nowodzinski 6 years ago
parent
commit
05012ce60e

+ 10 - 2
packages/ckeditor5-ui/src/toolbar/block/blocktoolbar.js

@@ -361,9 +361,17 @@ export default class BlockToolbar extends Plugin {
 			target: targetElement,
 			positions: [
 				( contentRect, buttonRect ) => {
+					let left;
+
+					if ( this.editor.locale.languageDirection === 'ltr' ) {
+						left = editableRect.left - buttonRect.width;
+					} else {
+						left = editableRect.right;
+					}
+
 					return {
-						top: contentRect.top + contentPaddingTop + ( ( contentLineHeight - buttonRect.height ) / 2 ),
-						left: editableRect.left - buttonRect.width
+						top: contentRect.top + contentPaddingTop + ( contentLineHeight - buttonRect.height ) / 2,
+						left
 					};
 				}
 			]

+ 4 - 0
packages/ckeditor5-ui/tests/manual/blocktoolbar/blocktoolbar.html

@@ -56,4 +56,8 @@
 	.ck-block-toolbar-button {
 		transform: translateX( -10px );
 	}
+
+	[dir="rtl"] .ck-block-toolbar-button {
+		transform: translateX( 10px );
+	}
 </style>