Merge branch 'master' into i/164

.eslintrc

@@ -0,0 +1,33 @@
+{
+  "env": {
+    "es6": true,
+    "node": true,
+    "mocha": true
+  },
+  "parser": "babel-eslint",
+  "extends": [
+    "eslint:recommended",
+    "ckeditor5",
+    "plugin:react/recommended"
+  ],
+  "globals": {
+    "expect": true,
+    "sinon": true,
+    "shallow": true,
+    "mount": true
+  },
+  "rules": {
+    "react/prop-types": "off",
+    "no-console": "off",
+    "max-len": [
+      "error",
+      140
+    ],
+    "no-trailing-spaces": "error"
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  }
+}

.travis.yml

@@ -2,20 +2,16 @@ sudo: required
 dist: xenial
 addons:
   chrome: stable
-  firefox: latest
 language: node_js
 services:
 - xvfb
 node_js:
-- '8'
+- '12'
 cache:
 - node_modules
 install:
 - npm install
 script:
+- npm run lint
 - npm run build
-- npm run coverage && npm t -- --browsers=Firefox
-env:
-  global:
-  - secure: ZNswdUStpHjer4LfNPhzIcsIUtv6R3wzaLIkQIhuXN+THZUwIBtPRjKU6XIBH29GoiSBsYrpjoq9m91iW9nkGhUFq+N/seeHvqDMj2eH5qmWK0jB8pPkrBBEe/70FdhncEeOhfX0KHhsFarpmmW6dcshrAvz35gp6DKuzs/a0QgV+XUnduc3OZ39yz5hQAaMfBJEaci0ZmMI52z9Q4Jf2FmljosznDQZ6ZU808vWxSZMeqknDqLcMRQ4X8okj1+7345K28X3uDetAY7EcmeBKUMJa/d/J1lzMD6DpqSwNiYRZ2FFXf8TZqZscCn4lB9SEW8YRkO1teO3stXQp+aeG7GS3o2c4nhNN4poeERmfa4c/ydSAGV+tsfzSV8Ye5pMUWfFtGvfiq8gkFNtLqL2B2N3fAhQlO5rYSx77f0mWpFGx3ys9UJCTUEExtpeK99ENSLQrgGukovxWRKZlbxDp4NxGnxK2RuSn0WmS1BUXRFxAxL0UdSkoeWDvw6me3WlfrQxEboR19BTHaMLFjJBrmbVylTHI7OsNrSFSuva/Mh2BKl3fYta2OnW2T9T79/NIsmgcDw9A9DeNwkFqdPaqCE+vgrEefly2oaUDl9nyCqu9yCkiATyVHkskniDhihSvz0FYScCYcyQ2OIUx2heMrXA1Nforhmnt7N2+3bnodE=
-  - secure: H++mTZEIu0MQr1zsxHhFcJ5Kuf8rspWOEnt9GyvJmE6YIaU4+cYmWcDorqOL/q9AftHGg65Rn4quoA4WWBpSkWoMctRl1ySp2r4qz+o9D6LM1Nm+HLXMkoEyB9eYVdXkaPO2BK9DgugLMwWSx1IT4l3lY6UIXFsJhdFpBB3mT9TfNC5mRcXtknM9I+7tcfgDKx1lkhl/YCBspyXmJdC/ntN3UlBofTGwPG92XWJ2JOZFEXm3H8gpSTy8m3KWPt1lOMlfT1tZWNEHWMVduYjMZz+AKqNY9OKe/nHDRoe5GRqTLvhnlSjGyrtBtMTj3f1lwJ6bez4lONiU8qNyDIZ2IHcCDjaP5im0hyY6zsczHrOLJeTajr4eQ7NxQERGgohu33wGVvNG7zLeRByZf85PQYTx28HcQRwYfCvEBA9sifs/VddiLyjkwFrrWx/dFbIwFL2/Fiwz6wQN/FLpg5bG9crCA2JMA/5+ua3HSXZtoZkF5W7bSS9+pHfgcU2DLEid9Q/IGxg/CKmMESITAXwyA8Mwd5YZVhargHLkUMRMMtjiXi30srbXsp/ICQXMuYr/0l/nnwQISZuBGnwSHfDuqhJxok5TdHnbhXvXNWkXcIJF7Iy7BEDe73XOE9VohszTXBSIqOMEkAdgMwNsxI8CXeIh68xZURPGatcd/g9K+Yg=
+- npm run coverage

package.json

@@ -25,39 +25,45 @@
     "@ckeditor/ckeditor5-build-classic": "^20.0.0",
     "@ckeditor/ckeditor5-dev-env": "^23.0.0",
     "@ckeditor/ckeditor5-dev-utils": "^23.0.0",
+    "babel-eslint": "^10.1.0",
     "babel-loader": "^8.1.0",
     "chai": "^4.2.0",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.2",
+    "eslint": "^7.5.0",
+    "eslint-config-ckeditor5": "^3.0.0",
+    "eslint-plugin-react": "^7.20.4",
+    "husky": "^4.2.5",
     "istanbul-instrumenter-loader": "^3.0.1",
     "karma": "^5.1.0",
     "karma-chai": "^0.1.0",
     "karma-chrome-launcher": "^3.1.0",
     "karma-coverage": "^2.0.3",
     "karma-coveralls": "^2.1.0",
-    "karma-firefox-launcher": "^1.3.0",
     "karma-mocha": "^2.0.1",
     "karma-mocha-reporter": "^2.2.5",
     "karma-sinon": "^1.0.5",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-webpack": "^4.0.2",
+    "lint-staged": "^10.2.11",
     "minimist": "^1.2.5",
     "mocha": "^8.0.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "sinon": "^9.0.2",
-    "terser-webpack-plugin": "^3.0.7",
+    "terser-webpack-plugin": "^3.0.8",
     "webpack": "^4.44.0",
     "webpack-cli": "^3.3.12"
   },
   "peerDependencies": {
-    "react": "^16.0.0"
+    "react": "^16.13.1"
   },
   "engines": {
     "node": ">=8.0.0",
     "npm": ">=5.7.1"
   },
   "scripts": {
+    "lint": "eslint --quiet '**/*.js' '**/*.jsx'",
     "build": "webpack --mode production",
     "develop": "webpack --mode development --watch",
     "changelog": "node ./scripts/changelog.js",
@@ -67,17 +73,34 @@
     "test": "node ./scripts/test.js",
     "coverage": "node ./scripts/test.js --coverage"
   },
+  "author": "CKSource (http://cksource.com/)",
+  "license": "GPL-2.0-or-later",
   "repository": {
     "type": "git",
     "url": "https://github.com/ckeditor/ckeditor5-react.git"
   },
+  "bugs": {
+    "url": "https://github.com/ckeditor/ckeditor5-react/issues"
+  },
+  "homepage": "https://github.com/ckeditor/ckeditor5-react",
   "files": [
     "dist"
   ],
-  "author": "CKSource (http://cksource.com/)",
-  "license": "GPL-2.0-or-later",
-  "bugs": {
-    "url": "https://github.com/ckeditor/ckeditor5-react/issues"
+  "lint-staged": {
+    "**/*.js": [
+      "eslint --quiet"
+    ],
+    "**/*.jsx": [
+      "eslint --quiet"
+    ]
   },
-  "homepage": "https://github.com/ckeditor/ckeditor5-react"
+  "eslintIgnore": [
+    "dist/**",
+    "coverage/**"
+  ],
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  }
 }

scripts/utils/getkarmaconfig.js

@@ -192,15 +192,15 @@ function parseArguments( args ) {
 			c: 'coverage',
 			r: 'reporter',
 			s: 'source-map',
-			w: 'watch',
+			w: 'watch'
 		},
 
 		default: {
 			browsers: 'Chrome',
 			reporter: 'mocha',
 			watch: false,
 			coverage: false,
-			'source-map': false,
+			'source-map': false
 		}
 	};
 

src/ckeditor.jsx

@@ -45,17 +45,14 @@ export default class CKEditor extends React.Component {
 
 	// Render a <div> element which will be replaced by CKEditor.
 	render() {
-		// We need to inject initial data to the container where the editable will be enabled. Using `editor.setData()`
-		// is a bad practice because it initializes the data after every new connection (in case of collaboration usage).
-		// It leads to reset the entire content. See: #68
 		return (
-			<div ref={ this.domContainer } dangerouslySetInnerHTML={ { __html: this.props.data || '' } }></div>
+			<div ref={ this.domContainer }></div>
 		);
 	}
 
 	_initializeEditor() {
 		this.props.editor
-			.create( this.domContainer.current , this.props.config )
+			.create( this.domContainer.current, this._getConfig() )
 			.then( editor => {
 				this.editor = editor;
 
@@ -123,6 +120,21 @@ export default class CKEditor extends React.Component {
 
 		return true;
 	}
+
+	_getConfig() {
+		if ( this.props.data && this.props.config.initialData ) {
+			console.warn(
+				'Editor data should be provided either using `config.initialData` or `data` properties. ' +
+				'The config property is over the data value and the first one will be used when specified both.'
+			);
+		}
+
+		// Merge two possible ways of providing data into the `config.initialData` field.
+		return {
+			...this.props.config,
+			initialData: this.props.config.initialData || this.props.data || ''
+		};
+	}
 }
 
 // Properties definition.

tests/39/1.jsx

@@ -3,19 +3,21 @@
  * For licensing, see LICENSE.md.
  */
 
+/* global document, ClassicEditor */
+
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { configure, mount } from 'enzyme';
+import { configure } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 
 import CKEditor from '../../src/ckeditor.jsx';
 
 configure( { adapter: new Adapter() } );
 
-const Editor = ( props ) => {
+const Editor = props => {
 	return (
 		<CKEditor editor={ ClassicEditor } { ...props } />
-	)
+	);
 };
 
 class App extends React.Component {
@@ -32,10 +34,12 @@ class App extends React.Component {
 	render() {
 		return (
 			<Editor
-				onChange={ (evt, editor) => this.setState( { content: editor.getData() } ) }
-				onInit={ _editor => this.editor = _editor }
+				onChange={ ( evt, editor ) => this.setState( { content: editor.getData() } ) }
+				onInit={ _editor => {
+					this.editor = _editor;
+				} }
 			/>
-		)
+		);
 	}
 }
 
@@ -47,7 +51,7 @@ describe( '#37 - bug: a browser is being froze', () => {
 		document.body.appendChild( div );
 
 		return new Promise( resolve => {
-			component = ReactDOM.render( <App />, div );
+			component = ReactDOM.render( <App />, div ); // eslint-disable-line react/no-render-return-value
 
 			setTimeout( resolve );
 		} );

tests/ckeditor-classiceditor.jsx

@@ -3,6 +3,8 @@
  * For licensing, see LICENSE.md.
  */
 
+/* global ClassicEditor */
+
 import React from 'react';
 import 'react-dom';
 import { configure, mount } from 'enzyme';

tests/ckeditor-integration.jsx

@@ -3,19 +3,21 @@
  * For licensing, see LICENSE.md.
  */
 
+/* global document, ClassicEditor */
+
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { configure, mount } from 'enzyme';
+import { configure } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 
 import CKEditor from '../src/ckeditor.jsx';
 
 configure( { adapter: new Adapter() } );
 
-const Editor = ( props ) => {
+const Editor = props => {
 	return (
 		<CKEditor editor={ ClassicEditor } { ...props } />
-	)
+	);
 };
 
 class AppUsingState extends React.Component {
@@ -33,10 +35,12 @@ class AppUsingState extends React.Component {
 		return (
 			<Editor
 				data={ this.state.content }
-				onChange={ (evt, editor) => this.setState( { content: editor.getData() } ) }
-				onInit={ _editor => this.editor = _editor }
+				onChange={ ( evt, editor ) => this.setState( { content: editor.getData() } ) }
+				onInit={ _editor => {
+					this.editor = _editor;
+				} }
 			/>
-		)
+		);
 	}
 }
 
@@ -45,15 +49,17 @@ class AppUsingStaticString extends AppUsingState {
 		return (
 			<Editor
 				data={ '<p>Initial data.</p>' }
-				onChange={ (evt, editor) => this.setState( { content: editor.getData() } ) }
-				onInit={ _editor => this.editor = _editor }
+				onChange={ ( evt, editor ) => this.setState( { content: editor.getData() } ) }
+				onInit={ _editor => {
+					this.editor = _editor;
+				} }
 			/>
-		)
+		);
 	}
 }
 
 describe( 'CKEditor Component - integration', () => {
-	describe('update the editor\'s content', () => {
+	describe( 'update the editor\'s content', () => {
 		// Common usage of the component - a component's state is passed to the <CKEditor> component.
 		describe( '#data is connected with the state', () => {
 			let div, component;
@@ -63,7 +69,7 @@ describe( 'CKEditor Component - integration', () => {
 				document.body.appendChild( div );
 
 				return new Promise( resolve => {
-					component = ReactDOM.render( <AppUsingState />, div );
+					component = ReactDOM.render( <AppUsingState />, div ); // eslint-disable-line react/no-render-return-value
 
 					setTimeout( resolve );
 				} );
@@ -111,7 +117,7 @@ describe( 'CKEditor Component - integration', () => {
 				document.body.appendChild( div );
 
 				return new Promise( resolve => {
-					component = ReactDOM.render( <AppUsingStaticString />, div );
+					component = ReactDOM.render( <AppUsingStaticString />, div ); // eslint-disable-line react/no-render-return-value
 
 					setTimeout( resolve );
 				} );