Merge pull request #48 from ckeditor/t/47

Fix: The data initialization should not break collaboration. Instead of using `editor.setData()`, the initial content is now set via `innerHTML` of the source element. Closes #47.

Author: oleq

Diff for: src/ckeditor.js

@@ -13,7 +13,11 @@ export default {
 	name: 'ckeditor',
 
 	render( createElement ) {
-		return createElement( this.tagName );
+		return createElement( this.tagName, {
+			domProps: {
+				innerHTML: this.value || ''
+			}
+		} );
 	},
 
 	props: {
@@ -58,9 +62,6 @@ export default {
 				// Save the reference to the instance for further use.
 				this.instance = editor;
 
-				// Set the initial data of the editor.
-				editor.setData( this.value );
-
 				// Set initial disabled state.
 				editor.isReadOnly = this.disabled;
 

Diff for: tests/_utils/mockeditor.js

@@ -7,23 +7,24 @@ export class ModelDocument {
 	on() {}
 }
 
-export class ViewlDocument {
+export class ViewDocument {
 	on() {}
 }
 
-export default class MockEditor {
+export class MockEditor {
 	constructor( el, config ) {
 		this.element = el;
 		this.config = config;
 		this.data = '';
+		this.setDataCounter = 0;
 
 		this.model = {
 			document: new ModelDocument()
 		};
 
 		this.editing = {
 			view: {
-				document: new ViewlDocument()
+				document: new ViewDocument()
 			}
 		};
 	}
@@ -39,6 +40,7 @@ export default class MockEditor {
 	}
 
 	setData( data ) {
+		this.setDataCounter++;
 		this.data = data;
 	}
 

Diff for: tests/ckeditor.js

@@ -8,8 +8,11 @@
 import Vue from 'vue';
 import { mount } from '@vue/test-utils';
 import CKEditorComponent from '../src/ckeditor';
-import MockEditor from './_utils/mockeditor';
-import { ModelDocument, ViewlDocument } from './_utils/mockeditor';
+import {
+	MockEditor,
+	ModelDocument,
+	ViewDocument
+} from './_utils/mockeditor';
 
 describe( 'CKEditor Component', () => {
 	let sandbox, wrapper, vm;
@@ -69,7 +72,8 @@ describe( 'CKEditor Component', () => {
 		const { wrapper } = createComponent();
 
 		setTimeout( () => {
-			consoleErrorStub.restore()
+			consoleErrorStub.restore();
+
 			expect( consoleErrorStub.calledOnce ).to.be.true;
 			expect( consoleErrorStub.firstCall.args[ 0 ] ).to.equal( error );
 
@@ -114,16 +118,17 @@ describe( 'CKEditor Component', () => {
 				expect( vm.value ).to.equal( '' );
 			} );
 
+			// See: https://github.com/ckeditor/ckeditor5-vue/issues/47.
 			it( 'should set the initial data', done => {
 				Vue.config.errorHandler = done;
 
-				const setDataStub = sandbox.stub( MockEditor.prototype, 'setData' );
-				const { wrapper } = createComponent( {
+				const { wrapper, vm } = createComponent( {
 					value: 'foo'
 				} );
 
 				Vue.nextTick( () => {
-					sinon.assert.calledWithExactly( setDataStub, 'foo' );
+					expect( vm.$el.innerHTML ).to.equal( 'foo' );
+					expect( vm.instance.setDataCounter ).to.equal( 0 );
 
 					wrapper.destroy();
 					done();
@@ -304,7 +309,7 @@ describe( 'CKEditor Component', () => {
 		it( 'emits #focus when editor editable is focused', done => {
 			Vue.config.errorHandler = done;
 
-			sandbox.stub( ViewlDocument.prototype, 'on' );
+			sandbox.stub( ViewDocument.prototype, 'on' );
 
 			Vue.nextTick( () => {
 				const on = vm.instance.editing.view.document.on;
@@ -330,7 +335,7 @@ describe( 'CKEditor Component', () => {
 		it( 'emits #blur when editor editable is focused', done => {
 			Vue.config.errorHandler = done;
 
-			sandbox.stub( ViewlDocument.prototype, 'on' );
+			sandbox.stub( ViewDocument.prototype, 'on' );
 
 			Vue.nextTick( () => {
 				const on = vm.instance.editing.view.document.on;

Diff for: tests/plugin/localcomponent.js

@@ -6,7 +6,7 @@
 import Vue from 'vue';
 import { mount } from '@vue/test-utils';
 import CKEditor from '../../src/plugin';
-import MockEditor from '../_utils/mockeditor';
+import { MockEditor } from '../_utils/mockeditor';
 
 class FooEditor extends MockEditor {}
 class BarEditor extends MockEditor {}