Fix CKEDITOR.inlineAll inlining also elements with editor already attached to them

CHANGES.md

@@ -5,6 +5,7 @@ CKEditor 4 Changelog
 
 Fixed Issues:
 
+* [#4293](https://github.com/ckeditor/ckeditor4/issues/4293): Fixed: [`CKEDITOR.inlineAll()`](https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR.html#method-inlineAll) method tries to initialize inline editor also on elements with editor already attached to them.
 * [#3961](https://github.com/ckeditor/ckeditor4/issues/3961): Fixed: [Table Resize](https://ckeditor.com/cke4/addon/tableresize) prevents editing of merged cells.
 
 Other Changes:

core/creators/inline.js

@@ -122,20 +122,21 @@
 	};
 
 	/**
-	 * Calls {@link CKEDITOR#inline} for all page elements with
-	 * the `contenteditable` attribute set to `true`.
-	 *
+	 * Calls {@link CKEDITOR#inline `CKEDITOR.inline()`} method for all page elements with the `contenteditable` attribute set to `true`
+	 * that are allowed in the {@link `CKEDITOR.dtd#$editable`} object.
 	 */
 	CKEDITOR.inlineAll = function() {
-		var el, data;
+		var el,
+			data;
 
 		for ( var name in CKEDITOR.dtd.$editable ) {
 			var elements = CKEDITOR.document.getElementsByTag( name );
 
 			for ( var i = 0, len = elements.count(); i < len; i++ ) {
 				el = elements.getItem( i );
 
-				if ( el.getAttribute( 'contenteditable' ) == 'true' ) {
+				// Check if element is editable and if there isn't an editor attached to it already (#4293).
+				if ( el.getAttribute( 'contenteditable' ) == 'true' && !el.getEditor() ) {
 					// Fire the "inline" event, making it possible to customize
 					// the instance settings and eventually cancel the creation.
 
@@ -144,8 +145,9 @@
 						config: {}
 					};
 
-					if ( CKEDITOR.fire( 'inline', data ) !== false )
+					if ( CKEDITOR.fire( 'inline', data ) !== false ) {
 						CKEDITOR.inline( el, data.config );
+					}
 				}
 			}
 		}

tests/core/creators/inlineallonalreadyinlined.html

@@ -0,0 +1,3 @@
+<div id="editorInlined">
+	<p>Lorem ipsum</p>
+</div>

tests/core/creators/inlineallonalreadyinlined.js

@@ -0,0 +1,33 @@
+/* bender-tags: editor */
+
+'use strict';
+
+bender.editor = {};
+
+bender.test( {
+	// (#4293)
+	'test invoke CKEDITOR.inlineAll after creating some editor': function() {
+		var spy = sinon.spy( CKEDITOR, 'error' ),
+			elementId = 'editorInlined',
+			element = CKEDITOR.document.getById( elementId );
+
+		// Make sure the element won't be inlined on CKEDITOR.domReady.
+		element.$.contentEditable = true;
+
+		CKEDITOR.inline( elementId, {
+			on: {
+				instanceReady: function() {
+					resume( function() {
+						spy.restore();
+						assert.areSame( 0, spy.callCount, 'Error count' );
+					} );
+				}
+			}
+		} );
+
+		// We simulate running it after asynchronously loading CKEditor (e.g. in framework integration).
+		CKEDITOR.inlineAll();
+
+		wait();
+	}
+} );

tests/core/creators/manual/inlineallonalreadyinlined.html

@@ -0,0 +1,24 @@
+<p>
+	<button id="inlineAll">Inline all</button>
+</p>
+
+<div id="editor1">
+	<p>Lorem ipsum dolor sit amet</p>
+</div>
+
+<div id="editor2">
+	<p>Lorem ipsum dolor sit amet</p>
+</div>
+
+<script>
+	CKEDITOR.inline( 'editor1', {
+		readOnly: false
+	} );
+
+	CKEDITOR.document.getById( 'inlineAll' ).on( 'click', function() {
+		// Make sure the element won't be inlined on CKEDITOR.domReady.
+		CKEDITOR.document.getById( 'editor2' ).$.contentEditable = true;
+
+		CKEDITOR.inlineAll();
+	} );
+</script>

tests/core/creators/manual/inlineallonalreadyinlined.md

@@ -0,0 +1,16 @@
+@bender-tags: 4.15.1, bug, 4293
+@bender-ui: collapsed
+@bender-ckeditor-plugins: toolbar, wysiwygarea, basicstyles, floatingspace
+
+1. Open the console.
+2. Press "Inline all" button.
+
+## Expected
+
+1. There are no errors in the console.
+2. The second editor is created.
+
+## Unexpected
+
+1. There are errors in the console, especially `editor-element-conflict` one.
+2. The second editor is not created.