Introduced a check that prevents creating the editor using the same element more than once

src/inlineeditor.js

@@ -19,6 +19,7 @@ import getDataFromElement from '@ckeditor/ckeditor5-utils/src/dom/getdatafromele
 import mix from '@ckeditor/ckeditor5-utils/src/mix';
 import { isElement } from 'lodash-es';
 import CKEditorError from '@ckeditor/ckeditor5-utils/src/ckeditorerror';
+import secureSourceElement from '@ckeditor/ckeditor5-core/src/editor/utils/securesourceelement';
 
 /**
  * The {@glink builds/guides/overview#inline-editor inline editor} implementation.
@@ -69,6 +70,7 @@ export default class InlineEditor extends Editor {
 
 		if ( isElement( sourceElementOrData ) ) {
 			this.sourceElement = sourceElementOrData;
+			secureSourceElement( this );
 		}
 
 		const view = new InlineEditorUIView( this.locale, this.editing.view, this.sourceElement );

tests/inlineeditor.js

@@ -83,6 +83,23 @@ describe( 'InlineEditor', () => {
 				expect( editor.editing.view.getDomRoot() ).to.equal( editor.ui.element );
 			} );
 		} );
+
+		// See: https://github.com/ckeditor/ckeditor5/issues/746
+		it( 'should throw when trying to create the editor using the same source element more than once', done => {
+			InlineEditor.create( editorElement )
+				.then(
+					() => {
+						expect.fail( 'Inline editor should not initialize on an element already used by other instance.' );
+					},
+					err => {
+						assertCKEditorError( err,
+							/^editor-source-element-already-used/
+						);
+					}
+				)
+				.then( done )
+				.catch( done );
+		} );
 	} );
 
 	describe( 'create()', () => {
@@ -117,6 +134,9 @@ describe( 'InlineEditor', () => {
 		} );
 
 		it( 'should not require config object', () => {
+			const editorElement = document.createElement( 'div' );
+			editorElement.innerHTML = '<p><strong>foo</strong> bar</p>';
+
 			// Just being safe with `builtinPlugins` static property.
 			class CustomInlineEditor extends InlineEditor {}
 			CustomInlineEditor.builtinPlugins = [ Paragraph, Bold ];
@@ -126,6 +146,9 @@ describe( 'InlineEditor', () => {
 					expect( newEditor.getData() ).to.equal( '<p><strong>foo</strong> bar</p>' );
 
 					return newEditor.destroy();
+				} )
+				.then( () => {
+					editorElement.remove();
 				} );
 		} );
 
@@ -140,13 +163,18 @@ describe( 'InlineEditor', () => {
 		} );
 
 		it( 'initializes with config.initialData', () => {
+			const editorElement = document.createElement( 'div' );
+			editorElement.innerHTML = '<p>Hello world!</p>';
+
 			return InlineEditor.create( editorElement, {
 				initialData: '<p>Hello world!</p>',
 				plugins: [ Paragraph ]
 			} ).then( editor => {
 				expect( editor.getData() ).to.equal( '<p>Hello world!</p>' );
 
-				editor.destroy();
+				return editor.destroy();
+			} ).then( () => {
+				editorElement.remove();
 			} );
 		} );