8
0
Просмотр исходного кода

Internal: Enabled the .ck-read-only class support on view root element. Originally introduced in ckeditor/ckeditor5-ui#453 but forgotten in ckeditor/ckeditor5-ui#463 refactoring. Closes #1680.

Aleksander Nowodzinski 7 лет назад
Родитель
Сommit
0f001eaf0e

+ 6 - 0
packages/ckeditor5-engine/src/view/view.js

@@ -240,6 +240,12 @@ export default class View {
 
 
 		const updateContenteditableAttribute = () => {
 		const updateContenteditableAttribute = () => {
 			this._writer.setAttribute( 'contenteditable', !viewRoot.isReadOnly, viewRoot );
 			this._writer.setAttribute( 'contenteditable', !viewRoot.isReadOnly, viewRoot );
+
+			if ( viewRoot.isReadOnly ) {
+				this._writer.addClass( 'ck-read-only', viewRoot );
+			} else {
+				this._writer.removeClass( 'ck-read-only', viewRoot );
+			}
 		};
 		};
 
 
 		// Set initial value.
 		// Set initial value.

+ 30 - 0
packages/ckeditor5-engine/tests/view/view/view.js

@@ -132,6 +132,19 @@ describe( 'view', () => {
 			expect( viewRoot.getAttribute( 'contenteditable' ) ).to.equal( 'false' );
 			expect( viewRoot.getAttribute( 'contenteditable' ) ).to.equal( 'false' );
 		} );
 		} );
 
 
+		it( 'should handle the ".ck-read-only" class management on #isReadOnly change', () => {
+			const domDiv = document.createElement( 'div' );
+			const viewRoot = createViewRoot( viewDocument, 'div', 'main' );
+
+			view.attachDomRoot( domDiv );
+
+			viewRoot.isReadOnly = false;
+			expect( viewRoot.hasClass( 'ck-read-only' ) ).to.be.false;
+
+			viewRoot.isReadOnly = true;
+			expect( viewRoot.hasClass( 'ck-read-only' ) ).to.be.true;
+		} );
+
 		it( 'should call observe on each observer', () => {
 		it( 'should call observe on each observer', () => {
 			// The variable will be overwritten.
 			// The variable will be overwritten.
 			view.destroy();
 			view.destroy();
@@ -222,6 +235,23 @@ describe( 'view', () => {
 
 
 			domDiv.remove();
 			domDiv.remove();
 		} );
 		} );
+
+		it( 'should remove the ".ck-read-only" class from the DOM root', () => {
+			const domDiv = document.createElement( 'div' );
+			const viewRoot = createViewRoot( viewDocument, 'div', 'main' );
+
+			view.attachDomRoot( domDiv );
+			view.forceRender();
+
+			viewRoot.isReadOnly = true;
+			expect( domDiv.classList.contains( 'ck-read-only' ) ).to.be.true;
+
+			view.detachDomRoot( 'main' );
+
+			expect( domDiv.classList.contains( 'ck-read-only' ) ).to.be.false;
+
+			domDiv.remove();
+		} );
 	} );
 	} );
 
 
 	describe( 'addObserver()', () => {
 	describe( 'addObserver()', () => {