Merge pull request #453 from ckeditor/t/ckeditor5/1261

Feature: Added the `.ck-read-only` CSS class to the `EditableUIView` when `#isReadOnly` is `true`.
ckeditor · Nov 6, 2018 · 4119822 · 4119822
2 parents 07c4fdb + 37bbb23
commit 4119822
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 1 deletion.
diff --git a/src/editableui/editableuiview.js b/src/editableui/editableuiview.js
@@ -39,7 +39,9 @@ export default class EditableUIView extends View {
 					'ck-content',
 					'ck-editor__editable',
 					'ck-rounded-corners',
-					bind.to( 'isFocused', value => value ? 'ck-focused' : 'ck-blurred' )
+					bind.to( 'isFocused', value => value ? 'ck-focused' : 'ck-blurred' ),
+					bind.if( 'isReadOnly', 'ck-read-only' )
+
 				],
 				contenteditable: bind.to( 'isReadOnly', value => !value ),
 			}

diff --git a/tests/editableui/editableuiview.js b/tests/editableui/editableuiview.js
@@ -75,9 +75,11 @@ describe( 'EditableUIView', () => {
 			it( 'reacts on view#isReadOnly', () => {
 				view.isReadOnly = true;
 				expect( view.element.hasAttribute( 'contenteditable' ) ).to.be.false;
+				expect( view.element.classList.contains( 'ck-read-only' ) ).to.be.true;
 
 				view.isReadOnly = false;
 				expect( view.element.hasAttribute( 'contenteditable' ) ).to.be.true;
+				expect( view.element.classList.contains( 'ck-read-only' ) ).to.be.false;
 			} );
 		} );
 	} );