Merge pull request #73 from ckeditor/t/72

Fix: Handled element refs to be properly recognized by the Editor. Closes #72.

package.json

@@ -17,6 +17,7 @@
     "ckeditor 5"
   ],
   "dependencies": {
+    "lodash-es": "^4.17.11",
     "prop-types": "^15.6.1"
   },
   "devDependencies": {

src/ckeditor.jsx

@@ -5,6 +5,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import { cloneDeepWith, isPlainObject, isElement } from 'lodash-es';
 
 export default class CKEditor extends React.Component {
 	constructor( props ) {
@@ -52,7 +53,7 @@ export default class CKEditor extends React.Component {
 
 	_initializeEditor() {
 		this.props.editor
-			.create( this.domContainer.current , this.props.config )
+			.create( this.domContainer.current , parseConfig( this.props.config ) )
 			.then( editor => {
 				this.editor = editor;
 
@@ -120,3 +121,11 @@ CKEditor.defaultProps = {
 	config: {}
 };
 
+function parseConfig( config ) {
+	// Replaces all DOM references created using React.createRef() with the "current" DOM node.
+	return cloneDeepWith( config, value => {
+		if ( isPlainObject( value ) && isElement( value.current ) && Object.keys( value ).length === 1 ) {
+			return value.current;
+		}
+	} );
+}

tests/ckeditor.jsx

@@ -161,6 +161,66 @@ describe( 'CKEditor Component', () => {
 			expect( editorInstance.setData.called ).to.be.false;
 		} );
 
+		describe( '#config', () => {
+			it( 'should replace all react DOM references with the `current` DOM element', done => {
+				const spy = sinon.spy( Editor, 'create' );
+
+				const domElement = document.createElement( 'div' );
+				const domElementRef = React.createRef();
+				const similarToDomElementRef = {
+					current: domElement,
+					foo: 'bar'
+				};
+
+				const config = {
+					domElement,
+					domElementRef,
+					nested: {
+						domElementRef
+					},
+					similarToDomElementRef,
+					array: [
+						domElementRef, domElement, similarToDomElementRef
+					]
+				};
+
+				wrapper = mount(
+					<div>
+						<div ref={ domElementRef }></div>
+						<CKEditor editor={ Editor } config={ config } />
+					</div>
+				);
+
+				setTimeout( () => {
+					const parsedConfig = spy.lastCall.args[ 1 ];
+
+					// Not changed.
+					expect( parsedConfig.domElement ).to.equal( domElement ).to.instanceof( HTMLElement );
+
+					// Changed.
+					expect( parsedConfig.domElementRef ).to.equal( domElementRef.current ).to.instanceof( HTMLElement );
+
+					// Changed.
+					expect( parsedConfig.nested.domElementRef ).to.equal( domElementRef.current ).to.instanceof( HTMLElement );
+
+					// Not changed.
+					expect( parsedConfig.similarToDomElementRef ).to.deep.equal( similarToDomElementRef );
+					expect( parsedConfig.similarToDomElementRef.current ).to.equal( domElement );
+
+					// Changed.
+					expect( parsedConfig.array[ 0 ] ).to.equal( domElementRef.current ).to.instanceof( HTMLElement );
+
+					// Not changed.
+					expect( parsedConfig.array[ 1 ] ).to.equal( domElement );
+					expect( parsedConfig.array[ 2 ] ).to.deep.equal( similarToDomElementRef );
+					expect( parsedConfig.array[ 2 ].current ).to.equal( domElement );
+
+					spy.restore();
+					done();
+				} );
+			} );
+		} );
+
 		describe( '#onInit', () => {
 			it( 'calls "onInit" callback if specified when the editor is ready to use', done => {
 				const editorInstance = new Editor();