Merge pull request #22 from ckeditor/i/21

Fix: Synchronize the editor content after the editor is ready. Closes #21.

src/ckeditor.js

@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md.
  */
 
-/* eslint-env node */
+/* global window, console */
 
 import { debounce } from 'lodash-es';
 
@@ -84,13 +84,19 @@ export default {
 				// Save the reference to the $_instance for further use.
 				this.$_instance = editor;
 
+				this.$_setUpEditorEvents();
+
+				// Synchronize the editor content. The #value may change while the editor is being created, so the editor content has to be
+				// synchronized with these potential changes as soon as it is ready.
+				if ( this.value !== editorConfig.initialData ) {
+					editor.setData( this.value );
+				}
+
 				// Set initial disabled state.
 				if ( this.disabled ) {
 					editor.enableReadOnlyMode( SAMPLE_READ_ONLY_LOCK_ID );
 				}
 
-				this.$_setUpEditorEvents();
-
 				// Let the world know the editor is ready.
 				this.$emit( 'ready', editor );
 			} )
@@ -111,7 +117,7 @@ export default {
 	},
 
 	watch: {
-		value( newValue, oldValue ) {
+		value( value ) {
 			// Synchronize changes of #value. There are two sources of changes:
 			//
 			//                   External value change        ──────╮
@@ -134,8 +140,8 @@ export default {
 			//    * the new value is different than the last internal instance state (Case 2.)
 			//
 			// See: https://github.com/ckeditor/ckeditor5-vue/issues/42.
-			if ( newValue !== oldValue && newValue !== this.$_lastEditorData ) {
-				this.$_instance.setData( newValue );
+			if ( this.$_instance && value !== this.$_lastEditorData ) {
+				this.$_instance.setData( value );
 			}
 		},
 

tests/ckeditor.js

@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md.
  */
 
-/* eslint-env node */
+/* global console, setTimeout, window */
 
 import Vue from 'vue';
 import { mount } from '@vue/test-utils';
@@ -154,6 +154,21 @@ describe( 'CKEditor Component', () => {
 
 				wrapper.destroy();
 			} );
+
+			it( 'should sync the editor data after editor is ready', async () => {
+				const { wrapper, vm } = createComponent( {
+					value: 'foo'
+				} );
+
+				wrapper.setProps( { value: 'bar' } );
+
+				await Vue.nextTick();
+
+				expect( vm.$_instance.getData() ).to.equal( 'bar' );
+				expect( vm.$_instance.setDataCounter ).to.equal( 1 );
+
+				wrapper.destroy();
+			} );
 		} );
 
 		describe( '#tagName', () => {
@@ -328,6 +343,26 @@ describe( 'CKEditor Component', () => {
 			sinon.assert.calledWithExactly( spy.firstCall, 'foo' );
 			sinon.assert.calledWithExactly( spy.secondCall, 'bar' );
 		} );
+
+		it( '#value should trigger editor#setData only if data is changed', async () => {
+			await Vue.nextTick();
+
+			const spy = sandbox.spy( vm.$_instance, 'setData' );
+
+			wrapper.setProps( { value: 'foo' } );
+
+			await Vue.nextTick();
+
+			wrapper.setProps( { value: 'foo' } );
+
+			await Vue.nextTick();
+
+			wrapper.setProps( { value: 'foo' } );
+
+			await Vue.nextTick();
+
+			sinon.assert.calledOnce( spy );
+		} );
 	} );
 
 	describe( 'events', () => {

tests/plugin/integration.js

@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md.
  */
 
-/* eslint-env browser */
+/* global document */
 
 import Vue from 'vue';
 import { mount } from '@vue/test-utils';