From 6040047f04fef44ee516b3ef194a28992914264d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Krzysztof=20Krzto=C5=84?= <k.krzton@cksource.com>
Date: Fri, 11 Jan 2019 14:43:05 +0100
Subject: [PATCH] Deprecate `DecoupledEditorUIView#editableElement`.

---
 src/decouplededitorui.js       |  4 ++--
 src/decouplededitoruiview.js   | 15 +++++++++++++--
 tests/decouplededitoruiview.js |  7 +++++++
 3 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/src/decouplededitorui.js b/src/decouplededitorui.js
index b23df4a..39c1632 100644
--- a/src/decouplededitorui.js
+++ b/src/decouplededitorui.js
@@ -45,10 +45,10 @@ export default class DecoupledEditorUI extends EditorUI {
 		const editingRoot = editor.editing.view.document.getRoot();
 		view.editable.bind( 'isReadOnly' ).to( editingRoot );
 		view.editable.bind( 'isFocused' ).to( editor.editing.view.document );
-		editor.editing.view.attachDomRoot( view.editableElement );
+		editor.editing.view.attachDomRoot( view.editable.editableElement );
 		view.editable.name = editingRoot.rootName;
 
-		this.focusTracker.add( this.view.editableElement );
+		this.focusTracker.add( this.view.editable.editableElement );
 		this.view.toolbar.fillFromConfig( this._toolbarConfig.items, this.componentFactory );
 
 		enableToolbarKeyboardFocus( {
diff --git a/src/decouplededitoruiview.js b/src/decouplededitoruiview.js
index 03e7283..3fb570e 100644
--- a/src/decouplededitoruiview.js
+++ b/src/decouplededitoruiview.js
@@ -12,6 +12,8 @@ import InlineEditableUIView from '@ckeditor/ckeditor5-ui/src/editableui/inline/i
 import ToolbarView from '@ckeditor/ckeditor5-ui/src/toolbar/toolbarview';
 import Template from '@ckeditor/ckeditor5-ui/src/template';
 
+import log from '@ckeditor/ckeditor5-utils/src/log';
+
 /**
  * The decoupled editor UI view. It is a virtual view providing an inline
  * {@link module:editor-decoupled/decouplededitoruiview~DecoupledEditorUIView#editable} and a
@@ -72,9 +74,18 @@ export default class DecoupledEditorUIView extends EditorUIView {
 	}
 
 	/**
-	 * @inheritDoc
+	 * **Deprecated** since `v12.0.0`. The {@link module:ui/editableui/editableuiview~EditableUIView#editableElement
+	 * `EditableUIView editableElement`} could be used instead.
+	 *
+	 * The element which is the main editable element (usually the one with `contentEditable="true"`).
+	 *
+	 * @deprecated v12.0.0 The {@link module:ui/editableui/editableuiview~EditableUIView#editableElement
+	 * `EditableUIView editableElement`} could be used instead.
+	 * @readonly
+	 * @member {HTMLElement} #editableElement
 	 */
 	get editableElement() {
-		return this.editable.element;
+		log.warn( 'deprecated-ui-view-editableElement: The DecoupledEditorUIView#editableElement property is deprecated.' );
+		return this.editable.editableElement;
 	}
 }
diff --git a/tests/decouplededitoruiview.js b/tests/decouplededitoruiview.js
index fa3b33a..6f0fbd7 100644
--- a/tests/decouplededitoruiview.js
+++ b/tests/decouplededitoruiview.js
@@ -10,9 +10,14 @@ import ToolbarView from '@ckeditor/ckeditor5-ui/src/toolbar/toolbarview';
 import InlineEditableUIView from '@ckeditor/ckeditor5-ui/src/editableui/inline/inlineeditableuiview';
 import Locale from '@ckeditor/ckeditor5-utils/src/locale';
 
+import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
+import log from '@ckeditor/ckeditor5-utils/src/log';
+
 describe( 'DecoupledEditorUIView', () => {
 	let locale, view;
 
+	testUtils.createSinonSandbox();
+
 	beforeEach( () => {
 		locale = new Locale( 'en' );
 		view = new DecoupledEditorUIView( locale );
@@ -124,6 +129,8 @@ describe( 'DecoupledEditorUIView', () => {
 
 	describe( 'editableElement', () => {
 		it( 'returns editable\'s view element', () => {
+			testUtils.sinon.stub( log, 'warn' ).callsFake( () => {} );
+
 			view.render();
 			expect( view.editableElement.getAttribute( 'contentEditable' ) ).to.equal( 'true' );
 			view.destroy();