Sfoglia il codice sorgente

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

Feature: Added the `.ck-read-only` CSS class to the `EditableUIView` when `#isReadOnly` is `true`.
Aleksander Nowodzinski 7 anni fa
parent
commit
3a93be70bb

+ 3 - 1
packages/ckeditor5-ui/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 ),
 			}

+ 2 - 0
packages/ckeditor5-ui/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;
 			} );
 		} );
 	} );