Browse Source

Data instead of element in constructor.

Szymon Kupś 7 years ago
parent
commit
499bde9ff2

+ 14 - 9
packages/ckeditor5-editor-inline/src/inlineeditor.js

@@ -17,6 +17,7 @@ import InlineEditorUIView from './inlineeditoruiview';
 import setDataInElement from '@ckeditor/ckeditor5-utils/src/dom/setdatainelement';
 import getDataFromElement from '@ckeditor/ckeditor5-utils/src/dom/getdatafromelement';
 import mix from '@ckeditor/ckeditor5-utils/src/mix';
+import isElement from '@ckeditor/ckeditor5-utils/src/lib/lodash/isElement';
 
 /**
  * The {@glink builds/guides/overview#inline-editor inline editor} implementation.
@@ -53,20 +54,24 @@ export default class InlineEditor extends Editor {
 	 * {@link module:editor-inline/inlineeditor~InlineEditor.create `InlineEditor.create()`} method instead.
 	 *
 	 * @protected
-	 * @param {HTMLElement} element The DOM element that will be the source for the created editor
+	 * @param {HTMLElement} elementOrData The DOM element that will be the source for the created editor
 	 * (on which the editor will be initialized).
 	 * @param {module:core/editor/editorconfig~EditorConfig} config The editor configuration.
 	 */
-	constructor( element, config ) {
+	constructor( elementOrData, config ) {
 		super( config );
 
-		this.element = element;
-
 		this.data.processor = new HtmlDataProcessor();
 
 		this.model.document.createRoot();
 
-		this.ui = new InlineEditorUI( this, new InlineEditorUIView( this.locale, element ) );
+		if ( isElement( elementOrData ) ) {
+			this.element = elementOrData;
+		} else {
+			this.element = document.createElement( 'div' );
+		}
+
+		this.ui = new InlineEditorUI( this, new InlineEditorUIView( this.locale, this.element ) );
 
 		attachToForm( this );
 	}
@@ -123,15 +128,15 @@ export default class InlineEditor extends Editor {
 	 *				console.error( err.stack );
 	 *			} );
 	 *
-	 * @param {HTMLElement} element The DOM element that will be the source for the created editor
+	 * @param {HTMLElement} elementOrData The DOM element that will be the source for the created editor
 	 * (on which the editor will be initialized).
 	 * @param {module:core/editor/editorconfig~EditorConfig} config The editor configuration.
 	 * @returns {Promise} A promise resolved once the editor is ready.
 	 * The promise returns the created {@link module:editor-inline/inlineeditor~InlineEditor} instance.
 	 */
-	static create( element, config ) {
+	static create( elementOrData, config ) {
 		return new Promise( resolve => {
-			const editor = new this( element, config );
+			const editor = new this( elementOrData, config );
 
 			resolve(
 				editor.initPlugins()
@@ -139,7 +144,7 @@ export default class InlineEditor extends Editor {
 						editor.ui.init();
 						editor.fire( 'uiReady' );
 					} )
-					.then( () => editor.data.init( getDataFromElement( element ) ) )
+					.then( () => editor.data.init( isElement( elementOrData ) ? getDataFromElement( elementOrData ) : elementOrData ) )
 					.then( () => {
 						editor.fire( 'dataReady' );
 						editor.fire( 'ready' );

+ 18 - 0
packages/ckeditor5-editor-inline/tests/manual/inlineeditor-data.html

@@ -0,0 +1,18 @@
+<p>
+	<button id="destroyEditor">Destroy editor</button>
+	<button id="initEditor">Init editor</button>
+</p>
+
+<style>
+	body {
+		width: 10000px;
+		height: 10000px;
+	}
+
+	.custom-class {
+		margin-top: 100px;
+		margin-left: 100px;
+		margin-bottom: 100px;
+		width: 450px;
+	}
+</style>

+ 38 - 0
packages/ckeditor5-editor-inline/tests/manual/inlineeditor-data.js

@@ -0,0 +1,38 @@
+/**
+ * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* globals console:false, document, window */
+
+import InlineEditor from '../../src/inlineeditor';
+import ArticlePluginSet from '@ckeditor/ckeditor5-core/tests/_utils/articlepluginset';
+
+window.editors = [];
+
+function initEditor() {
+	InlineEditor
+		.create( '<h2>Editor 1</h2><p>This is an editor instance.</p>', {
+			plugins: [ ArticlePluginSet ],
+			toolbar: [ 'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote', 'undo', 'redo' ]
+		} )
+		.then( editor => {
+			window.editors.push( editor );
+			document.body.appendChild( editor.element );
+		} )
+		.catch( err => {
+			console.error( err.stack );
+		} );
+}
+
+function destroyEditor() {
+	window.editors.forEach( editor => {
+		editor.destroy()
+			.then( () => {
+				editor.element.remove();
+			} );
+	} );
+}
+
+document.getElementById( 'initEditor' ).addEventListener( 'click', initEditor );
+document.getElementById( 'destroyEditor' ).addEventListener( 'click', destroyEditor );

+ 20 - 0
packages/ckeditor5-editor-inline/tests/manual/inlineeditor-data.md

@@ -0,0 +1,20 @@
+1. Click "Init editors".
+2. Expected:
+  * Two inline editor should be created.
+  * Elements used as editables should remain visible.
+    * They should preserve `.custom-class` and `custom-attr="foo"`.
+  * There should be floating toolbars with "Bold", "Italic", "Undo", "Redo", "Link" and "Unlink" buttons.
+3. Scroll the webpage.
+4. Expected:
+  * Focused editor's toolbar should float around but always stick to editable.
+  * Focused editor's toolbar should stick to the bottom of the editable if there's not enough space above.
+5. Press <kbd>Alt+F10</kbd> when focusing the editor.
+6. Expected:
+  * Toolbar should gain focus. Editable should keep its styling.
+7. Click "Destroy editors".
+8. Expected:
+  * Editors should be destroyed.
+  * Element used as editables should remain visible.
+    * They should preserve `.custom-class` and `custom-attr="foo"`.
+  * Elements should contain its data (updated).
+  * `.ck-body` regions should be removed from `<body>`.