Przeglądaj źródła

Added `.ck-read-only` class to `EditableUIView` when `#isReadOnly` is true

dkonopka 7 lat temu
rodzic
commit
8eaa48dd10

+ 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.to( 'isReadOnly', value => value ? '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;
 			} );
 		} );
 	} );