8
0
Просмотр исходного кода

Merge branch 't/ckeditor5/1449' into t/ckeditor5/479

Aleksander Nowodzinski 7 лет назад
Родитель
Сommit
018220229f

+ 2 - 1
packages/ckeditor5-editor-decoupled/src/decouplededitor.js

@@ -15,6 +15,7 @@ import DecoupledEditorUIView from './decouplededitoruiview';
 import getDataFromElement from '@ckeditor/ckeditor5-utils/src/dom/getdatafromelement';
 import setDataInElement from '@ckeditor/ckeditor5-utils/src/dom/setdatainelement';
 import mix from '@ckeditor/ckeditor5-utils/src/mix';
+import log from '@ckeditor/ckeditor5-utils/src/log';
 import { isElement } from 'lodash-es';
 
 /**
@@ -81,6 +82,7 @@ export default class DecoupledEditor extends Editor {
 	 * @inheritDoc
 	 */
 	get element() {
+		log.warn( 'deprecated-editor-element: The editor#element is deprecated.' );
 		// This editor has no single "main UI element". Its editable and toolbar are exposed separately and need
 		// to be added to the DOM manually by the consumer.
 		return null;
@@ -199,7 +201,6 @@ export default class DecoupledEditor extends Editor {
 				editor.initPlugins()
 					.then( () => {
 						editor.ui.init();
-						editor.fire( 'uiReady' );
 					} )
 					.then( () => {
 						const initialData = isElement( sourceElementOrData ) ?

+ 29 - 4
packages/ckeditor5-editor-decoupled/src/decouplededitorui.js

@@ -19,10 +19,21 @@ import { attachPlaceholder, getPlaceholderElement } from '@ckeditor/ckeditor5-en
  */
 export default class DecoupledEditorUI extends EditorUI {
 	/**
-	 * @inheritDoc
+	 * Creates an instance of the decoupled editor UI class.
+	 *
+	 * @param {module:core/editor/editor~Editor} editor The editor instance.
+	 * @param {module:ui/editorui/editoruiview~EditorUIView} view The view of the UI.
 	 */
 	constructor( editor, view ) {
-		super( editor, view );
+		super( editor );
+
+		/**
+		 * The main (top–most) view of the editor UI.
+		 *
+		 * @private
+		 * @member {module:ui/editorui/editoruiview~EditorUIView} #_view
+		 */
+		this._view = view;
 
 		/**
 		 * A normalized `config.toolbar` object.
@@ -33,6 +44,16 @@ export default class DecoupledEditorUI extends EditorUI {
 		this._toolbarConfig = normalizeToolbarConfig( editor.config.get( 'toolbar' ) );
 	}
 
+	/**
+	 * The main (top–most) view of the editor UI.
+	 *
+	 * @readonly
+	 * @member {module:ui/editorui/editoruiview~EditorUIView} #view
+	 */
+	get view() {
+		return this._view;
+	}
+
 	/**
 	 * Initializes the UI.
 	 */
@@ -43,7 +64,7 @@ export default class DecoupledEditorUI extends EditorUI {
 
 		view.render();
 
-		editor.editing.view.attachDomRoot( view.editableElement );
+		editor.editing.view.attachDomRoot( view.editable.editableElement );
 
 		const editingRoot = editor.editing.view.document.getRoot();
 
@@ -58,7 +79,9 @@ export default class DecoupledEditorUI extends EditorUI {
 		// Set up the editable.
 		view.editable.bind( 'isFocused' ).to( editor.editing.view.document );
 
-		this.focusTracker.add( this.view.editableElement );
+		this._editableElements.push( view.editable );
+
+		this.focusTracker.add( view.editable.editableElement );
 		this.view.toolbar.fillFromConfig( this._toolbarConfig.items, this.componentFactory );
 
 		enableToolbarKeyboardFocus( {
@@ -67,5 +90,7 @@ export default class DecoupledEditorUI extends EditorUI {
 			originKeystrokeHandler: editor.keystrokes,
 			toolbar: this.view.toolbar
 		} );
+
+		this.ready();
 	}
 }

+ 13 - 2
packages/ckeditor5-editor-decoupled/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;
 	}
 }

+ 29 - 1
packages/ckeditor5-editor-decoupled/tests/decouplededitor.js

@@ -18,6 +18,7 @@ import DataApiMixin from '@ckeditor/ckeditor5-core/src/editor/utils/dataapimixin
 import RootElement from '@ckeditor/ckeditor5-engine/src/model/rootelement';
 
 import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
+import log from '@ckeditor/ckeditor5-utils/src/log';
 
 const editorData = '<p><strong>foo</strong> bar</p>';
 
@@ -26,6 +27,10 @@ describe( 'DecoupledEditor', () => {
 
 	testUtils.createSinonSandbox();
 
+	beforeEach( () => {
+		testUtils.sinon.stub( log, 'warn' ).callsFake( () => {} );
+	} );
+
 	describe( 'constructor()', () => {
 		beforeEach( () => {
 			editor = new DecoupledEditor();
@@ -189,6 +194,7 @@ describe( 'DecoupledEditor', () => {
 					class EventWatcher extends Plugin {
 						init() {
 							this.editor.on( 'pluginsReady', spy );
+							this.editor.ui.on( 'ready', spy );
 							this.editor.on( 'uiReady', spy );
 							this.editor.on( 'dataReady', spy );
 							this.editor.on( 'ready', spy );
@@ -200,7 +206,7 @@ describe( 'DecoupledEditor', () => {
 							plugins: [ EventWatcher ]
 						} )
 						.then( newEditor => {
-							expect( fired ).to.deep.equal( [ 'pluginsReady', 'uiReady', 'dataReady', 'ready' ] );
+							expect( fired ).to.deep.equal( [ 'pluginsReady', 'ready', 'uiReady', 'dataReady', 'ready' ] );
 
 							return newEditor.destroy();
 						} );
@@ -249,6 +255,28 @@ describe( 'DecoupledEditor', () => {
 							return newEditor.destroy();
 						} );
 				} );
+
+				it( 'fires ready once UI is rendered', () => {
+					let isReady;
+
+					class EventWatcher extends Plugin {
+						init() {
+							this.editor.ui.on( 'ready', () => {
+								isReady = this.editor.ui.view.isRendered;
+							} );
+						}
+					}
+
+					return DecoupledEditor
+						.create( getElementOrData(), {
+							plugins: [ EventWatcher ]
+						} )
+						.then( newEditor => {
+							expect( isReady ).to.be.true;
+
+							return newEditor.destroy();
+						} );
+				} );
 			} );
 		}
 	} );

+ 15 - 0
packages/ckeditor5-editor-decoupled/tests/decouplededitorui.js

@@ -150,6 +150,20 @@ describe( 'DecoupledEditorUI', () => {
 				} );
 		} );
 	} );
+
+	describe( 'getEditableElement()', () => {
+		it( 'returns editable element (default)', () => {
+			expect( ui.getEditableElement() ).to.equal( view.editable.element );
+		} );
+
+		it( 'returns editable element (root name passed)', () => {
+			expect( ui.getEditableElement( 'main' ) ).to.equal( view.editable.element );
+		} );
+
+		it( 'returns null if editable with the given name is absent', () => {
+			expect( ui.getEditableElement( 'absent' ) ).to.null;
+		} );
+	} );
 } );
 
 function viewCreator( name ) {
@@ -188,6 +202,7 @@ class VirtualDecoupledTestEditor extends VirtualTestEditor {
 				editor.initPlugins()
 					.then( () => {
 						editor.ui.init();
+						editor.ui.ready();
 						editor.fire( 'uiReady' );
 						editor.fire( 'dataReady' );
 						editor.fire( 'ready' );

+ 7 - 0
packages/ckeditor5-editor-decoupled/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();