Merge pull request #66 from ckeditor/i/64

Fix: The inspector should render the RTL content in the trees properly. Closes #64.

sample/index.html

@@ -47,6 +47,13 @@ <h2>Second editor</h2>
 			<p>foo</p>
 		</div>
 
+		<h2>RTL editor</h2>
+		<div id="rtl-editor-content">
+			<p>مرحبا</p>
+			<p>مرحبا</p>
+			<p>مرحبا</p>
+		</div>
+
 		<h2>Actions</h2>
 		<button id="attach-inspector">Attach inspector to all editors</button>
 		<button id="detach-inspector-from-editors">Detach inspector from editors</button>
@@ -124,6 +131,21 @@ <h2>Actions</h2>
 				.catch( error => {
 					console.error( error );
 				} );
+
+			DecoupledEditor
+				.create( document.querySelector( '#rtl-editor-content' ), {
+					extraPlugins: [ UploadAdapter ],
+					language: 'ar'
+				} )
+				.then( editor => {
+					window.secondEditor = editor;
+					document.body.insertBefore( editor.ui.view.toolbar.element, editor.ui.getEditableElement() );
+					const [ name ] = CKEditorInspector.attach( { 'rtl': editor } );
+					editorNames.push( name );
+				} )
+				.catch( error => {
+					console.error( error );
+				} );
 		</script>
 	</body>
 	<style>

src/components/model/tree.js

@@ -63,6 +63,7 @@ class ModelTree extends Component {
 			]}
 			<Tree
 				items={tree}
+				textDirection={this.props.editor.locale.contentLanguageDirection}
 				onClick={this.props.onClick}
 				showCompactText={this.state.showCompactText}
 				activeNode={this.props.currentEditorNode}

src/components/tree.css

@@ -205,6 +205,16 @@
 	}
 }
 
+/*-- LTR vs. RTL text ------------------------------------------------------------------------*/
+
+.ck-inspector-tree.ck-inspector-tree_text-direction_ltr .ck-inspector-tree-node__content {
+	direction: ltr;
+}
+
+.ck-inspector-tree.ck-inspector-tree_text-direction_rtl .ck-inspector-tree-node__content {
+	direction: rtl;
+}
+
 /*-- Comment -----------------------------------------------------------------------------*/
 
 .ck-inspector-tree .ck-inspector-tree-comment {

src/components/tree.js

@@ -25,6 +25,7 @@ export default class Tree extends Component {
 
 		return <div className={[
 			'ck-inspector-tree',
+			this.props.textDirection ? 'ck-inspector-tree_text-direction_' + this.props.textDirection : '',
 			this.props.showCompactText ? 'ck-inspector-tree_compact-text' : ''
 		].join( ' ' )}>
 			{treeContent}

src/components/view/tree.js

@@ -69,6 +69,7 @@ class ViewTree extends Component {
 			]}
 			<Tree
 				items={tree}
+				textDirection={this.props.editor.locale.contentLanguageDirection}
 				onClick={this.props.onClick}
 				showCompactText="true"
 				activeNode={this.props.currentEditorNode}

tests/inspector/components/model/tree.js

@@ -116,6 +116,7 @@ describe( '<ModelTree />', () => {
 				expect( tree.props().onClick ).to.equal( clickSpy );
 				expect( tree.props().showCompactText ).to.be.false;
 				expect( tree.props().activeNode ).to.be.undefined;
+				expect( tree.props().textDirection ).to.equal( 'ltr' );
 			} );
 
 			it( 'renders a tree #1', () => {

tests/inspector/components/tree.js

@@ -29,6 +29,14 @@ describe( '<Tree />', () => {
 		wrapper.unmount();
 	} );
 
+	it( 'supports text direction', () => {
+		wrapper = mount( <Tree textDirection="rtl" /> );
+
+		expect( wrapper ).to.have.className( 'ck-inspector-tree_text-direction_rtl' );
+
+		wrapper.unmount();
+	} );
+
 	describe( 'elements', () => {
 		let wrapper, itemA, itemAA, itemB, activeNode;
 

tests/inspector/components/view/tree.js

@@ -125,6 +125,7 @@ describe( '<ViewTree />', () => {
 				expect( tree.props().onClick ).to.equal( clickSpy );
 				expect( tree.props().showCompactText ).to.equal( 'true' );
 				expect( tree.props().activeNode ).to.be.undefined;
+				expect( tree.props().textDirection ).to.equal( 'ltr' );
 			} );
 
 			it( 'renders empty elements', () => {