Przeglądaj źródła

Made EditableUIView revert its template if #editableElement was passed as an argument.

Aleksander Nowodzinski 8 lat temu
rodzic
commit
11ee8d712f

+ 13 - 2
packages/ckeditor5-ui/src/editableui/editableuiview.js

@@ -60,6 +60,15 @@ export default class EditableUIView extends View {
 		this.set( 'isFocused', false );
 
 		/**
+		 * Indicates whether the view operates on an external {@link #editableElement} or
+		 * rendered it on its own.
+		 *
+		 * @observable
+		 * @member {Boolean} #isRendered
+		 */
+		this.set( 'isRendered', !editableElement );
+
+		/**
 		 * The element which is the main editable element (usually the one with `contentEditable="true"`).
 		 *
 		 * @readonly
@@ -74,7 +83,7 @@ export default class EditableUIView extends View {
 	 * @returns {Promise}
 	 */
 	init() {
-		if ( this.editableElement ) {
+		if ( !this.isRendered ) {
 			this.template.apply( this.editableElement );
 		} else {
 			this.editableElement = this.element;
@@ -87,7 +96,9 @@ export default class EditableUIView extends View {
 	 * @inheritDoc
 	 */
 	destroy() {
-		this.editableElement.contentEditable = false;
+		if ( !this.isRendered ) {
+			this.template.revert( this.editableElement );
+		}
 
 		return super.destroy();
 	}

+ 46 - 8
packages/ckeditor5-ui/tests/editableui/editableuiview.js

@@ -6,7 +6,11 @@
 /* globals document */
 
 import EditableUIView from '../../src/editableui/editableuiview';
+import View from '../../src/view';
 import Locale from '@ckeditor/ckeditor5-utils/src/locale';
+import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
+
+testUtils.createSinonSandbox();
 
 describe( 'EditableUIView', () => {
 	let view, editableElement, locale;
@@ -22,6 +26,7 @@ describe( 'EditableUIView', () => {
 		it( 'sets initial values of attributes', () => {
 			expect( view.isReadOnly ).to.be.false;
 			expect( view.isFocused ).to.be.false;
+			expect( view.isRendered ).to.be.true;
 		} );
 
 		it( 'renders element from template when no editableElement', () => {
@@ -40,6 +45,7 @@ describe( 'EditableUIView', () => {
 				expect( view.element ).to.equal( editableElement );
 				expect( view.element ).to.equal( view.editableElement );
 				expect( view.element.classList.contains( 'ck-editor__editable' ) ).to.be.true;
+				expect( view.isRendered ).to.be.false;
 			} );
 		} );
 	} );
@@ -69,14 +75,46 @@ describe( 'EditableUIView', () => {
 		} );
 	} );
 
-	describe( 'destroy', () => {
-		it( 'updates contentEditable property of editableElement', () => {
-			return new EditableUIView( locale, editableElement ).init().then( () => {
-				expect( view.editableElement.contentEditable ).to.equal( 'true' );
-			} )
-			.then( () => view.destroy() )
-			.then( () => {
-				expect( view.editableElement.contentEditable ).to.equal( 'false' );
+	describe( 'destroy()', () => {
+		it( 'calls super#destroy()', () => {
+			const spy = testUtils.sinon.spy( View.prototype, 'destroy' );
+
+			return view.destroy().then( () => {
+				sinon.assert.calledOnce( spy );
+			} );
+		} );
+
+		describe( 'when #editableElement as an argument', () => {
+			it( 'reverts contentEditable property of editableElement (was false)', () => {
+				editableElement = document.createElement( 'div' );
+				editableElement.contentEditable = false;
+
+				view = new EditableUIView( locale, editableElement );
+
+				return view.init()
+					.then( () => {
+						expect( editableElement.contentEditable ).to.equal( 'true' );
+					} )
+					.then( () => view.destroy() )
+					.then( () => {
+						expect( editableElement.contentEditable ).to.equal( 'false' );
+					} );
+			} );
+
+			it( 'reverts contentEditable property of editableElement (was true)', () => {
+				editableElement = document.createElement( 'div' );
+				editableElement.contentEditable = true;
+
+				view = new EditableUIView( locale, editableElement );
+
+				return view.init()
+					.then( () => {
+						expect( editableElement.contentEditable ).to.equal( 'true' );
+					} )
+					.then( () => view.destroy() )
+					.then( () => {
+						expect( editableElement.contentEditable ).to.equal( 'true' );
+					} );
 			} );
 		} );
 	} );