Browse Source

Renamed editor.element to editor.sourceElement. Implemented EditorWithUI interface (added editor.element property).

Kamil Piechaczek 7 years ago
parent
commit
1acdc0fa09

+ 24 - 11
packages/ckeditor5-editor-inline/src/inlineeditor.js

@@ -55,13 +55,13 @@ export default class InlineEditor extends Editor {
 	 * {@link module:editor-inline/inlineeditor~InlineEditor.create `InlineEditor.create()`} method instead.
 	 *
 	 * @protected
-	 * @param {HTMLElement|String} elementOrData The DOM element that will be the source for the created editor
+	 * @param {HTMLElement|String} sourceElementOrData The DOM element that will be the source for the created editor
 	 * (on which the editor will be initialized) or initial data for the editor. If data is provided, `editor.element`
 	 * will be created automatically and need to be added manually to the DOM. For more information see
 	 * {@link module:editor-inline/inlineeditor~InlineEditor.create `InlineEditor.create()`}.
 	 * @param {module:core/editor/editorconfig~EditorConfig} config The editor configuration.
 	 */
-	constructor( elementOrData, config ) {
+	constructor( sourceElementOrData, config ) {
 		super( config );
 
 		/**
@@ -78,18 +78,27 @@ export default class InlineEditor extends Editor {
 
 		this.model.document.createRoot();
 
-		if ( isElement( elementOrData ) ) {
-			this.element = elementOrData;
+		if ( isElement( sourceElementOrData ) ) {
+			this.sourceElement = sourceElementOrData;
 		} else {
-			this.element = global.document.createElement( 'div' );
+			this.sourceElement = global.document.createElement( 'div' );
 		}
 
-		this.ui = new InlineEditorUI( this, new InlineEditorUIView( this.locale, this.element ) );
+		this.ui = new InlineEditorUI( this, new InlineEditorUIView( this.locale, this.sourceElement ) );
 
 		attachToForm( this );
 	}
 
 	/**
+	 * An HTML element that represents the whole editor. See the {@link module:core/editor/editorwithui~EditorWithUI} interface.
+	 *
+	 * @returns {HTMLElement|null}
+	 */
+	get element() {
+		return this.ui.view.editable.element;
+	}
+
+	/**
 	 * Destroys the editor instance, releasing all resources used by it.
 	 *
 	 * Updates the original editor element with the data.
@@ -104,7 +113,7 @@ export default class InlineEditor extends Editor {
 		this.ui.destroy();
 
 		return super.destroy()
-			.then( () => setDataInElement( this.element, data ) );
+			.then( () => setDataInElement( this.sourceElement, data ) );
 	}
 
 	/**
@@ -164,7 +173,7 @@ export default class InlineEditor extends Editor {
 	 *				console.error( err.stack );
 	 *			} );
 	 *
-	 * @param {HTMLElement|String} elementOrData The DOM element that will be the source for the created editor
+	 * @param {HTMLElement|String} sourceElementOrData The DOM element that will be the source for the created editor
 	 * (on which the editor will be initialized) or initial data for the editor. If data is provided, `editor.element`
 	 * will be created automatically and need to be added manually to the DOM. The element is initialized as a `div`
 	 * element crated in current document's context.
@@ -172,9 +181,9 @@ export default class InlineEditor extends Editor {
 	 * @returns {Promise} A promise resolved once the editor is ready.
 	 * The promise returns the created {@link module:editor-inline/inlineeditor~InlineEditor} instance.
 	 */
-	static create( elementOrData, config ) {
+	static create( sourceElementOrData, config ) {
 		return new Promise( resolve => {
-			const editor = new this( elementOrData, config );
+			const editor = new this( sourceElementOrData, config );
 
 			resolve(
 				editor.initPlugins()
@@ -182,7 +191,11 @@ export default class InlineEditor extends Editor {
 						editor.ui.init();
 						editor.fire( 'uiReady' );
 					} )
-					.then( () => editor.data.init( isElement( elementOrData ) ? getDataFromElement( elementOrData ) : elementOrData ) )
+					.then( () => {
+						const data = isElement( sourceElementOrData ) ? getDataFromElement( sourceElementOrData ) : sourceElementOrData;
+
+						return editor.data.init( data );
+					} )
 					.then( () => {
 						editor.fire( 'dataReady' );
 						editor.fire( 'ready' );

+ 11 - 4
packages/ckeditor5-editor-inline/tests/inlineeditor.js

@@ -54,11 +54,11 @@ describe( 'InlineEditor', () => {
 		} );
 
 		it( 'has a Data Interface', () => {
-			testUtils.isMixed( InlineEditor, DataApiMixin );
+			expect( testUtils.isMixed( InlineEditor, DataApiMixin ) ).to.be.true;
 		} );
 
 		it( 'has a Element Interface', () => {
-			testUtils.isMixed( InlineEditor, ElementApiMixin );
+			expect( testUtils.isMixed( InlineEditor, ElementApiMixin ) ).to.be.true;
 		} );
 
 		it( 'creates main root element', () => {
@@ -104,12 +104,19 @@ describe( 'InlineEditor', () => {
 			} );
 		} );
 
+		it( 'editor.sourceElement should contain created div element', () => {
+			return InlineEditor.create( '<p>Hello world!</p>', {
+				plugins: [ Paragraph ]
+			} ).then( editor => {
+				expect( editor.sourceElement ).to.be.instanceOf( HTMLElement );
+				expect( editor.sourceElement.tagName ).to.equal( 'DIV' );
+			} );
+		} );
+
 		it( 'editor.element should contain created div element', () => {
 			return InlineEditor.create( '<p>Hello world!</p>', {
 				plugins: [ Paragraph ]
 			} ).then( editor => {
-				expect( editor.element ).to.be.instanceOf( HTMLElement );
-				expect( editor.element.tagName ).to.equal( 'DIV' );
 				expect( editor.editing.view.getDomRoot() ).to.equal( editor.element );
 			} );
 		} );