Browse Source

Merge pull request #8 from ckeditor/t/7

Internal: Made the `config.toolbarContainer` and `config.editableContainer` accept only `HTMLElement` (previously also String). Closes #7.
Piotrek Koszuliński 7 years ago
parent
commit
ed186d21f2

File diff suppressed because it is too large
+ 3 - 3
packages/ckeditor5-editor-decoupled/docs/framework/guides/document-editor.md


+ 8 - 38
packages/ckeditor5-editor-decoupled/src/decouplededitor.js

@@ -86,10 +86,10 @@ export default class DecoupledEditor extends Editor {
 	 *		DecoupledEditor
 	 *			.create( '<p>Editor data</p>', {
 	 *				// The location of the toolbar in DOM.
-	 *				toolbarContainer: 'body div.toolbar-container',
+	 *				toolbarContainer: document.querySelector( 'body div.toolbar-container' ),
 	 *
 	 *				// The location of the editable in DOM.
-	 *				editableContainer: 'body div.editable-container'
+	 *				editableContainer: document.querySelector( 'body div.editable-container' )
 	 *			} )
 	 *			.then( editor => {
 	 *				console.log( 'Editor was initialized', editor );
@@ -112,10 +112,10 @@ export default class DecoupledEditor extends Editor {
 	 *				toolbar: [ 'bold', 'italic', ... ],
 	 *
 	 *				// The location of the toolbar in DOM.
-	 *				toolbarContainer: 'div.toolbar-container',
+	 *				toolbarContainer: document.querySelector( 'div.toolbar-container' ),
 	 *
 	 *				// The location of the editable in DOM.
-	 *				editableContainer: 'div.editable-container'
+	 *				editableContainer: document.querySelector( 'div.editable-container' )
 	 *			} )
 	 *			.then( editor => {
 	 *				console.log( 'Editor was initialized', editor );
@@ -173,8 +173,7 @@ mix( DecoupledEditor, DataApiMixin );
 /**
  * A configuration of the {@link module:editor-decoupled/decouplededitor~DecoupledEditor}.
  *
- * When specified, it controls the location of the {@link module:editor-decoupled/decouplededitoruiview~DecoupledEditorUIView#toolbar}.
- * It can be defined as a DOM element:
+ * When specified, it controls the location of the {@link module:editor-decoupled/decouplededitoruiview~DecoupledEditorUIView#toolbar}:
  *
  *		DecoupledEditor
  *			.create( '<p>Hello world!</p>', {
@@ -188,32 +187,17 @@ mix( DecoupledEditor, DataApiMixin );
  *				console.error( error );
  *			} );
  *
- * or a selector string corresponding to the CSS selector:
- *
- *		DecoupledEditor
- *			.create( '<p>Hello world!</p>', {
- *				// Append the toolbar to the <div class="container">...</div>
- *				toolbarContainer: 'div.container'
- *			} )
- *			.then( editor => {
- *				console.log( editor );
- *			} )
- *			.catch( error => {
- *				console.error( error );
- *			} );
- *
  * **Note**: If not specified, the toolbar must be manually injected into DOM. See
  * {@link module:editor-decoupled/decouplededitor~DecoupledEditor.create `DecoupledEditor.create()`}
  * to learn more.
  *
- * @member {String|HTMLElement} module:core/editor/editorconfig~EditorConfig#toolbarContainer
+ * @member {HTMLElement} module:core/editor/editorconfig~EditorConfig#toolbarContainer
  */
 
 /**
  * A configuration of the {@link module:editor-decoupled/decouplededitor~DecoupledEditor}.
  *
- * When specified, it controls the location of the {@link module:editor-decoupled/decouplededitoruiview~DecoupledEditorUIView#editable}.
- * It can be defined as a DOM element:
+ * When specified, it controls the location of the {@link module:editor-decoupled/decouplededitoruiview~DecoupledEditorUIView#editable}:
  *
  *		DecoupledEditor
  *			.create( '<p>Hello world!</p>', {
@@ -227,23 +211,9 @@ mix( DecoupledEditor, DataApiMixin );
  *				console.error( error );
  *			} );
  *
- * or a selector string corresponding to the CSS selector:
- *
- *		DecoupledEditor
- *			.create( '<p>Hello world!</p>', {
- *				// Append the editable to the <div class="container">...</div>.
- *				editableContainer: 'div.container'
- *			} )
- *			.then( editor => {
- *				console.log( editor );
- *			} )
- *			.catch( error => {
- *				console.error( error );
- *			} );
- *
  * **Note**: If not specified, the editable must be manually injected into DOM. See
  * {@link module:editor-decoupled/decouplededitor~DecoupledEditor.create `DecoupledEditor.create()`}
  * to learn more.
  *
- * @member {String|HTMLElement} module:core/editor/editorconfig~EditorConfig#editableContainer
+ * @member {HTMLElement} module:core/editor/editorconfig~EditorConfig#editableContainer
  */

+ 0 - 9
packages/ckeditor5-editor-decoupled/src/decouplededitorui.js

@@ -11,7 +11,6 @@ import ComponentFactory from '@ckeditor/ckeditor5-ui/src/componentfactory';
 import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
 import enableToolbarKeyboardFocus from '@ckeditor/ckeditor5-ui/src/toolbar/enabletoolbarkeyboardfocus';
 import normalizeToolbarConfig from '@ckeditor/ckeditor5-ui/src/toolbar/normalizetoolbarconfig';
-import global from '@ckeditor/ckeditor5-utils/src/dom/global';
 
 /**
  * The decoupled editor UI class.
@@ -69,14 +68,6 @@ export default class DecoupledEditorUI {
 		 * @private
 		 */
 		this._editableContainer = editor.config.get( 'editableContainer' );
-
-		if ( this._toolbarContainer && typeof this._toolbarContainer == 'string' ) {
-			this._toolbarContainer = global.document.querySelector( this._toolbarContainer );
-		}
-
-		if ( this._editableContainer && typeof this._editableContainer == 'string' ) {
-			this._editableContainer = global.document.querySelector( this._editableContainer );
-		}
 	}
 
 	/**

+ 28 - 64
packages/ckeditor5-editor-decoupled/tests/decouplededitorui.js

@@ -69,72 +69,36 @@ describe( 'DecoupledEditorUI', () => {
 				expect( view.editable.element.parentElement ).to.be.null;
 			} );
 
-			describe( 'toolbarContainer', () => {
-				it( 'allocates view#toolbar (selector)', () => {
-					return VirtualDecoupledTestEditor
-						.create( {
-							toolbar: [ 'foo', 'bar' ],
-							toolbarContainer: 'body'
-						} )
-						.then( newEditor => {
-							expect( newEditor.ui.view.toolbar.element.parentElement ).to.equal( document.body );
-
-							return newEditor;
-						} )
-						.then( newEditor => {
-							newEditor.destroy();
-						} );
-				} );
+			it( 'allocates view#toolbar', () => {
+				return VirtualDecoupledTestEditor
+					.create( {
+						toolbar: [ 'foo', 'bar' ],
+						toolbarContainer: document.body
+					} )
+					.then( newEditor => {
+						expect( newEditor.ui.view.toolbar.element.parentElement ).to.equal( document.body );
 
-				it( 'allocates view#toolbar (element)', () => {
-					return VirtualDecoupledTestEditor
-						.create( {
-							toolbar: [ 'foo', 'bar' ],
-							toolbarContainer: document.body
-						} )
-						.then( newEditor => {
-							expect( newEditor.ui.view.toolbar.element.parentElement ).to.equal( document.body );
-
-							return newEditor;
-						} )
-						.then( newEditor => {
-							newEditor.destroy();
-						} );
-				} );
+						return newEditor;
+					} )
+					.then( newEditor => {
+						newEditor.destroy();
+					} );
 			} );
 
-			describe( 'editableContainer', () => {
-				it( 'allocates view#toolbar (selector)', () => {
-					return VirtualDecoupledTestEditor
-						.create( {
-							toolbar: [ 'foo', 'bar' ],
-							editableContainer: 'body'
-						} )
-						.then( newEditor => {
-							expect( newEditor.ui.view.editable.element.parentElement ).to.equal( document.body );
-
-							return newEditor;
-						} )
-						.then( newEditor => {
-							newEditor.destroy();
-						} );
-				} );
+			it( 'allocates view#editable', () => {
+				return VirtualDecoupledTestEditor
+					.create( {
+						toolbar: [ 'foo', 'bar' ],
+						editableContainer: document.body
+					} )
+					.then( newEditor => {
+						expect( newEditor.ui.view.editable.element.parentElement ).to.equal( document.body );
 
-				it( 'allocates view#toolbar (element)', () => {
-					return VirtualDecoupledTestEditor
-						.create( {
-							toolbar: [ 'foo', 'bar' ],
-							editableContainer: document.body
-						} )
-						.then( newEditor => {
-							expect( newEditor.ui.view.editable.element.parentElement ).to.equal( document.body );
-
-							return newEditor;
-						} )
-						.then( newEditor => {
-							newEditor.destroy();
-						} );
-				} );
+						return newEditor;
+					} )
+					.then( newEditor => {
+						newEditor.destroy();
+					} );
 			} );
 		} );
 
@@ -253,7 +217,7 @@ describe( 'DecoupledEditorUI', () => {
 			return VirtualDecoupledTestEditor
 				.create( {
 					toolbar: [ 'foo', 'bar' ],
-					toolbarContainer: 'body'
+					toolbarContainer: document.body
 				} )
 				.then( newEditor => {
 					spy = sinon.spy( newEditor.ui.view, 'destroy' );
@@ -271,7 +235,7 @@ describe( 'DecoupledEditorUI', () => {
 			return VirtualDecoupledTestEditor
 				.create( {
 					toolbar: [ 'foo', 'bar' ],
-					editableContainer: 'body'
+					editableContainer: document.body
 				} )
 				.then( newEditor => {
 					spy = sinon.spy( newEditor.ui.view, 'destroy' );

+ 2 - 2
packages/ckeditor5-editor-decoupled/tests/manual/decouplededitor.js

@@ -24,8 +24,8 @@ function initEditor() {
 			plugins: [ Enter, Typing, Paragraph, Undo, Heading, Bold, Italic ],
 			toolbar: [ 'heading', '|', 'bold', 'italic', 'undo', 'redo' ],
 
-			toolbarContainer: '.toolbar-container',
-			editableContainer: '.editable-container',
+			toolbarContainer: document.querySelector( '.toolbar-container' ),
+			editableContainer: document.querySelector( '.editable-container' )
 		} )
 		.then( newEditor => {
 			console.log( 'Editor was initialized', newEditor );