From dded31f26eee270d3fb119d21dd5302fa901cf71 Mon Sep 17 00:00:00 2001 From: Kamil Piechaczek Date: Wed, 13 Jun 2018 11:26:24 +0200 Subject: [PATCH 1/5] Renamed editor.element to editor.sourceElement. Implemented the EditorWithUI interface (added editor.element property). --- src/decouplededitor.js | 34 +++++++++++++++++++++++----------- tests/decouplededitor.js | 6 +++++- 2 files changed, 28 insertions(+), 12 deletions(-) diff --git a/src/decouplededitor.js b/src/decouplededitor.js index 8ce0076..7d85467 100644 --- a/src/decouplededitor.js +++ b/src/decouplededitor.js @@ -57,15 +57,15 @@ export default class DecoupledEditor extends Editor { * {@link module:editor-decoupled/decouplededitor~DecoupledEditor.create `DecoupledEditor.create()`} method instead. * * @protected - * @param {HTMLElement|String} elementOrData The DOM element that serves as an editable. + * @param {HTMLElement|String} sourceElementOrData The DOM element that serves as an editable. * The data will be loaded from it and loaded back to it once the editor is destroyed. * Alternatively, a data string to be loaded into the editor. * @param {module:core/editor/editorconfig~EditorConfig} config The editor configuration. */ - constructor( elementOrData, config ) { + constructor( sourceElementOrData, config ) { super( config ); - if ( isElement( elementOrData ) ) { + if ( isElement( sourceElementOrData ) ) { /** * The element used as an editable. The data will be loaded from it and loaded back to * it once the editor is destroyed. @@ -76,14 +76,26 @@ export default class DecoupledEditor extends Editor { * @readonly * @member {HTMLElement} */ - this.element = elementOrData; + this.sourceElement = sourceElementOrData; } this.data.processor = new HtmlDataProcessor(); this.model.document.createRoot(); - this.ui = new DecoupledEditorUI( this, new DecoupledEditorUIView( this.locale, this.element ) ); + this.ui = new DecoupledEditorUI( this, new DecoupledEditorUIView( this.locale, this.sourceElement ) ); + } + + /** + * {@link editor-decoupled/decouplededitor~DecoupledEditor} has split UI and the editable elements. + * + * In order to get the UI (toolbar) you should use `editor.ui.view.toolbar.element` and `editor.ui.view.editable.element` for + * the editable area. + * + * @returns {null} + */ + get element() { + return null; } /** @@ -114,8 +126,8 @@ export default class DecoupledEditor extends Editor { return super.destroy() .then( () => { - if ( this.element ) { - setDataInElement( this.element, data ); + if ( this.sourceElement ) { + setDataInElement( this.sourceElement, data ); } } ); } @@ -178,16 +190,16 @@ export default class DecoupledEditor extends Editor { * console.error( err.stack ); * } ); * - * @param {HTMLElement|String} elementOrData The DOM element that serves as an editable. + * @param {HTMLElement|String} sourceElementOrData The DOM element that serves as an editable. * The data will be loaded from it and loaded back to it once the editor is destroyed. * Alternatively, a data string to be loaded into the editor. * @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-decoupled/decouplededitor~DecoupledEditor} 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() @@ -196,7 +208,7 @@ export default class DecoupledEditor extends Editor { editor.fire( 'uiReady' ); } ) .then( () => { - return editor.data.init( editor.element ? getDataFromElement( editor.element ) : elementOrData ); + return editor.data.init( editor.sourceElement ? getDataFromElement( editor.sourceElement ) : sourceElementOrData ); } ) .then( () => { editor.fire( 'dataReady' ); diff --git a/tests/decouplededitor.js b/tests/decouplededitor.js index 9752773..6da9fec 100644 --- a/tests/decouplededitor.js +++ b/tests/decouplededitor.js @@ -41,7 +41,11 @@ describe( 'DecoupledEditor', () => { } ); it( 'has a Data Interface', () => { - testUtils.isMixed( DecoupledEditor, DataApiMixin ); + expect( testUtils.isMixed( DecoupledEditor, DataApiMixin ) ).to.be.true; + } ); + + it( 'implements the EditorWithUI interface', () => { + expect( editor.element ).to.be.null; } ); it( 'creates main root element', () => { From c250ba9f5a558b26519bd16b279eabcd3eaf22fd Mon Sep 17 00:00:00 2001 From: Kamil Piechaczek Date: Wed, 13 Jun 2018 14:59:36 +0200 Subject: [PATCH 2/5] Docs: Fixed invalid link. --- src/decouplededitor.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/decouplededitor.js b/src/decouplededitor.js index 7d85467..16840a1 100644 --- a/src/decouplededitor.js +++ b/src/decouplededitor.js @@ -87,7 +87,7 @@ export default class DecoupledEditor extends Editor { } /** - * {@link editor-decoupled/decouplededitor~DecoupledEditor} has split UI and the editable elements. + * {@link module:editor-decoupled/decouplededitor~DecoupledEditor} has split UI and the editable elements. * * In order to get the UI (toolbar) you should use `editor.ui.view.toolbar.element` and `editor.ui.view.editable.element` for * the editable area. From ae5fba6740cd9a5b079b7769d3fe5cb2cc3a15e6 Mon Sep 17 00:00:00 2001 From: Kamil Piechaczek Date: Mon, 2 Jul 2018 08:58:09 +0200 Subject: [PATCH 3/5] Minor fixes. --- src/decouplededitor.js | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/src/decouplededitor.js b/src/decouplededitor.js index 16840a1..6647d42 100644 --- a/src/decouplededitor.js +++ b/src/decouplededitor.js @@ -87,12 +87,7 @@ export default class DecoupledEditor extends Editor { } /** - * {@link module:editor-decoupled/decouplededitor~DecoupledEditor} has split UI and the editable elements. - * - * In order to get the UI (toolbar) you should use `editor.ui.view.toolbar.element` and `editor.ui.view.editable.element` for - * the editable area. - * - * @returns {null} + * @inheritDoc */ get element() { return null; @@ -208,7 +203,9 @@ export default class DecoupledEditor extends Editor { editor.fire( 'uiReady' ); } ) .then( () => { - return editor.data.init( editor.sourceElement ? getDataFromElement( editor.sourceElement ) : sourceElementOrData ); + const data = editor.sourceElement ? getDataFromElement( editor.sourceElement ) : sourceElementOrData; + + return editor.data.init( data ); } ) .then( () => { editor.fire( 'dataReady' ); From 76aeef3944220a9cfa4a13e3cf5e56a2e207d318 Mon Sep 17 00:00:00 2001 From: Kamil Piechaczek Date: Tue, 3 Jul 2018 08:33:02 +0200 Subject: [PATCH 4/5] Used better variable name. --- src/decouplededitor.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/decouplededitor.js b/src/decouplededitor.js index 6647d42..74baaaf 100644 --- a/src/decouplededitor.js +++ b/src/decouplededitor.js @@ -203,9 +203,11 @@ export default class DecoupledEditor extends Editor { editor.fire( 'uiReady' ); } ) .then( () => { - const data = editor.sourceElement ? getDataFromElement( editor.sourceElement ) : sourceElementOrData; + const initialData = isElement( sourceElementOrData ) ? + getDataFromElement( sourceElementOrData ) : + sourceElementOrData; - return editor.data.init( data ); + return editor.data.init( initialData ); } ) .then( () => { editor.fire( 'dataReady' ); From d0da6549713965e58b110726c58c127d59c02e3d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotrek=20Koszuli=C5=84ski?= Date: Tue, 3 Jul 2018 18:14:34 +0200 Subject: [PATCH 5/5] More docs polish. --- src/decouplededitor.js | 30 ++++++++++++++---------------- src/decouplededitoruiview.js | 3 ++- 2 files changed, 16 insertions(+), 17 deletions(-) diff --git a/src/decouplededitor.js b/src/decouplededitor.js index 74baaaf..e252f03 100644 --- a/src/decouplededitor.js +++ b/src/decouplededitor.js @@ -57,25 +57,15 @@ export default class DecoupledEditor extends Editor { * {@link module:editor-decoupled/decouplededitor~DecoupledEditor.create `DecoupledEditor.create()`} method instead. * * @protected - * @param {HTMLElement|String} sourceElementOrData The DOM element that serves as an editable. - * The data will be loaded from it and loaded back to it once the editor is destroyed. - * Alternatively, a data string to be loaded into the 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. For more information see + * {@link module:editor-balloon/ballooneditor~BalloonEditor.create `BalloonEditor.create()`}. * @param {module:core/editor/editorconfig~EditorConfig} config The editor configuration. */ constructor( sourceElementOrData, config ) { super( config ); if ( isElement( sourceElementOrData ) ) { - /** - * The element used as an editable. The data will be loaded from it and loaded back to - * it once the editor is destroyed. - * - * **Note:** The property is available only when such element has been passed - * to the {@link #constructor}. - * - * @readonly - * @member {HTMLElement} - */ this.sourceElement = sourceElementOrData; } @@ -90,6 +80,8 @@ export default class DecoupledEditor extends Editor { * @inheritDoc */ get element() { + // 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; } @@ -185,9 +177,15 @@ export default class DecoupledEditor extends Editor { * console.error( err.stack ); * } ); * - * @param {HTMLElement|String} sourceElementOrData The DOM element that serves as an editable. - * The data will be loaded from it and loaded back to it once the editor is destroyed. - * Alternatively, a data string to be loaded into the 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 a source element is passed, then its contents will be automatically + * {@link module:editor-decoupled/decouplededitor~DecoupledEditor#setData loaded} to the editor on startup and the element + * itself will be used as the editor's editable element. + * + * If data is provided, then `editor.ui.view.editable.element` will be created automatically and needs to be added + * to the DOM manually. * @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-decoupled/decouplededitor~DecoupledEditor} instance. diff --git a/src/decouplededitoruiview.js b/src/decouplededitoruiview.js index c7ef927..00688d9 100644 --- a/src/decouplededitoruiview.js +++ b/src/decouplededitoruiview.js @@ -28,7 +28,8 @@ export default class DecoupledEditorUIView extends EditorUIView { * Creates an instance of the decoupled editor UI view. * * @param {module:utils/locale~Locale} locale The {@link module:core/editor/editor~Editor#locale} instance. - * @param {HTMLElement} [editableElement] The DOM element to be used as editable. + * @param {HTMLElement} [editableElement] The editable element. If not specified, it will be automatically created by + * {@link module:ui/editableui/editableuiview~EditableUIView}. Otherwise, the given element will be used. */ constructor( locale, editableElement ) { super( locale );