From a2ee2867b72a3595cb04168594402b00dfadf907 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krzysztof=20Krzto=C5=84?= Date: Thu, 10 Jan 2019 17:15:49 +0100 Subject: [PATCH 01/14] Adjust to changes in `core/EditorWithUI`. --- src/classiceditor.js | 8 ++++++-- src/classiceditorui.js | 7 +++++++ tests/classiceditor.js | 28 +++++++++++++++++++++++++++- tests/classiceditorui.js | 1 + 4 files changed, 41 insertions(+), 3 deletions(-) diff --git a/src/classiceditor.js b/src/classiceditor.js index 8b86317..0c17ade 100644 --- a/src/classiceditor.js +++ b/src/classiceditor.js @@ -17,6 +17,7 @@ import ClassicEditorUIView from './classiceditoruiview'; import ElementReplacer from '@ckeditor/ckeditor5-utils/src/elementreplacer'; import getDataFromElement from '@ckeditor/ckeditor5-utils/src/dom/getdatafromelement'; import mix from '@ckeditor/ckeditor5-utils/src/mix'; +import log from '@ckeditor/ckeditor5-utils/src/log'; import { isElement } from 'lodash-es'; /** @@ -87,7 +88,8 @@ export default class ClassicEditor extends Editor { * @inheritDoc */ get element() { - return this.ui.view.element; + log.warn( 'deprecated-editor-element: The editor#element is deprecated.' ); + return this.ui.element; } /** @@ -192,9 +194,11 @@ export default class ClassicEditor extends Editor { .then( () => editor.ui.init() ) .then( () => { if ( isElement( sourceElementOrData ) ) { - editor._elementReplacer.replace( sourceElementOrData, editor.element ); + editor._elementReplacer.replace( sourceElementOrData, editor.ui.element ); } + editor.ui.ready(); + editor.fire( 'uiReady' ); } ) .then( () => editor.editing.view.attachDomRoot( editor.ui.view.editableElement ) ) diff --git a/src/classiceditorui.js b/src/classiceditorui.js index 94de4e9..20116bd 100644 --- a/src/classiceditorui.js +++ b/src/classiceditorui.js @@ -32,6 +32,13 @@ export default class ClassicEditorUI extends EditorUI { this._toolbarConfig = normalizeToolbarConfig( editor.config.get( 'toolbar' ) ); } + /** + * @inheritDoc + */ + get element() { + return this.view.element; + } + /** * Initializes the UI. */ diff --git a/tests/classiceditor.js b/tests/classiceditor.js index 5f6b33b..473d208 100644 --- a/tests/classiceditor.js +++ b/tests/classiceditor.js @@ -19,6 +19,7 @@ import ElementApiMixin from '@ckeditor/ckeditor5-core/src/editor/utils/elementap 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'; describe( 'ClassicEditor', () => { let editor, editorElement; @@ -30,6 +31,8 @@ describe( 'ClassicEditor', () => { editorElement.innerHTML = '

foo bar

'; document.body.appendChild( editorElement ); + + testUtils.sinon.stub( log, 'warn' ).callsFake( () => {} ); } ); afterEach( () => { @@ -201,6 +204,7 @@ describe( 'ClassicEditor', () => { 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 ); @@ -212,7 +216,7 @@ describe( 'ClassicEditor', () => { plugins: [ EventWatcher ] } ) .then( newEditor => { - expect( fired ).to.deep.equal( [ 'pluginsReady', 'uiReady', 'dataReady', 'ready' ] ); + expect( fired ).to.deep.equal( [ 'pluginsReady', 'ready', 'uiReady', 'dataReady', 'ready' ] ); editor = newEditor; } ); @@ -261,6 +265,28 @@ describe( 'ClassicEditor', () => { editor = newEditor; } ); } ); + + 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 ClassicEditor + .create( editorElement, { + plugins: [ EventWatcher ] + } ) + .then( newEditor => { + expect( isReady ).to.be.true; + + editor = newEditor; + } ); + } ); } ); describe( 'destroy', () => { diff --git a/tests/classiceditorui.js b/tests/classiceditorui.js index 1365268..6734696 100644 --- a/tests/classiceditorui.js +++ b/tests/classiceditorui.js @@ -216,6 +216,7 @@ class VirtualClassicTestEditor extends VirtualTestEditor { editor.initPlugins() .then( () => { editor.ui.init(); + editor.ui.ready(); editor.fire( 'uiReady' ); editor.fire( 'dataReady' ); editor.fire( 'ready' ); From 05a23a6036be74def3fc54e2bf2a1da5f21c3f8f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krzysztof=20Krzto=C5=84?= Date: Fri, 11 Jan 2019 14:38:36 +0100 Subject: [PATCH 02/14] Deprecate `ClassicEditorUIView#editableElement`. --- src/classiceditor.js | 2 +- src/classiceditorui.js | 2 +- src/classiceditoruiview.js | 15 +++++++++++++-- tests/classiceditoruiview.js | 7 +++++++ 4 files changed, 22 insertions(+), 4 deletions(-) diff --git a/src/classiceditor.js b/src/classiceditor.js index 0c17ade..031babf 100644 --- a/src/classiceditor.js +++ b/src/classiceditor.js @@ -201,7 +201,7 @@ export default class ClassicEditor extends Editor { editor.fire( 'uiReady' ); } ) - .then( () => editor.editing.view.attachDomRoot( editor.ui.view.editableElement ) ) + .then( () => editor.editing.view.attachDomRoot( editor.ui.view.editable.editableElement ) ) .then( () => { const initialData = isElement( sourceElementOrData ) ? getDataFromElement( sourceElementOrData ) : diff --git a/src/classiceditorui.js b/src/classiceditorui.js index 20116bd..4f5eade 100644 --- a/src/classiceditorui.js +++ b/src/classiceditorui.js @@ -62,7 +62,7 @@ export default class ClassicEditorUI extends EditorUI { view.editable.bind( 'isFocused' ).to( editor.editing.view.document ); view.editable.name = editingRoot.rootName; - this.focusTracker.add( this.view.editableElement ); + this.focusTracker.add( this.view.editable.editableElement ); this.view.toolbar.fillFromConfig( this._toolbarConfig.items, this.componentFactory ); diff --git a/src/classiceditoruiview.js b/src/classiceditoruiview.js index d9826ff..0214235 100644 --- a/src/classiceditoruiview.js +++ b/src/classiceditoruiview.js @@ -12,6 +12,8 @@ import InlineEditableUIView from '@ckeditor/ckeditor5-ui/src/editableui/inline/i import StickyPanelView from '@ckeditor/ckeditor5-ui/src/panel/sticky/stickypanelview'; import ToolbarView from '@ckeditor/ckeditor5-ui/src/toolbar/toolbarview'; +import log from '@ckeditor/ckeditor5-utils/src/log'; + import '../theme/classiceditor.css'; /** @@ -69,9 +71,18 @@ export default class ClassicEditorUIView extends BoxedEditorUIView { } /** - * @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 ClassicEditorUIView#editableElement property is deprecated.' ); + return this.editable.editableElement; } } diff --git a/tests/classiceditoruiview.js b/tests/classiceditoruiview.js index b3e990d..926e30e 100644 --- a/tests/classiceditoruiview.js +++ b/tests/classiceditoruiview.js @@ -11,9 +11,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( 'ClassicEditorUIView', () => { let locale, view; + testUtils.createSinonSandbox(); + beforeEach( () => { locale = new Locale( 'en' ); view = new ClassicEditorUIView( locale ); @@ -70,6 +75,8 @@ describe( 'ClassicEditorUIView', () => { describe( 'editableElement', () => { it( 'returns editable\'s view element', () => { + testUtils.sinon.stub( log, 'warn' ).callsFake( () => {} ); + document.body.appendChild( view.element ); view.stickyPanel.limiterElement = view.element; From 442b578e2a725a1bba9b5972668a75aaedcf76ea Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krzysztof=20Krzto=C5=84?= Date: Mon, 14 Jan 2019 15:37:59 +0100 Subject: [PATCH 03/14] Adjust to changes in `EditorUI`. --- src/classiceditorui.js | 40 ++++++++++++++++++++++++++++++++++------ tests/classiceditorui.js | 20 ++++++++++++++++++++ 2 files changed, 54 insertions(+), 6 deletions(-) diff --git a/src/classiceditorui.js b/src/classiceditorui.js index 4f5eade..68268fe 100644 --- a/src/classiceditorui.js +++ b/src/classiceditorui.js @@ -18,20 +18,41 @@ import normalizeToolbarConfig from '@ckeditor/ckeditor5-ui/src/toolbar/normalize */ export default class ClassicEditorUI extends EditorUI { /** - * @inheritDoc + * Creates an instance of the classic 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. * - * @type {Object} * @private + * @member {Object} */ 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; + } + /** * @inheritDoc */ @@ -39,6 +60,13 @@ export default class ClassicEditorUI extends EditorUI { return this.view.element; } + /** + * @inheritDoc + */ + getEditableElement( rootName = 'main' ) { + return this.view.editable.name === rootName ? this.view.editable : null; + } + /** * Initializes the UI. */ @@ -62,15 +90,15 @@ export default class ClassicEditorUI extends EditorUI { view.editable.bind( 'isFocused' ).to( editor.editing.view.document ); view.editable.name = editingRoot.rootName; - this.focusTracker.add( this.view.editable.editableElement ); + this.focusTracker.add( view.editable.editableElement ); - this.view.toolbar.fillFromConfig( this._toolbarConfig.items, this.componentFactory ); + view.toolbar.fillFromConfig( this._toolbarConfig.items, this.componentFactory ); enableToolbarKeyboardFocus( { origin: editor.editing.view, originFocusTracker: this.focusTracker, originKeystrokeHandler: editor.keystrokes, - toolbar: this.view.toolbar + toolbar: view.toolbar } ); } } diff --git a/tests/classiceditorui.js b/tests/classiceditorui.js index 6734696..d3c82ce 100644 --- a/tests/classiceditorui.js +++ b/tests/classiceditorui.js @@ -178,6 +178,26 @@ describe( 'ClassicEditorUI', () => { } ); } ); } ); + + describe( 'view()', () => { + it( 'returns view instance', () => { + expect( ui.view ).to.equal( view ); + } ); + } ); + + describe( 'getEditableElement()', () => { + it( 'returns editable element (default)', () => { + expect( ui.getEditableElement() ).to.equal( view.editable ); + } ); + + it( 'returns editable element (root name passed)', () => { + expect( ui.getEditableElement( 'main' ) ).to.equal( view.editable ); + } ); + + it( 'returns null if editable with the given name is absent', () => { + expect( ui.getEditableElement( 'absent' ) ).to.null; + } ); + } ); } ); function viewCreator( name ) { From aa70eb6ab4fb5a14280b7344102627ebf4ef959c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krzysztof=20Krzto=C5=84?= Date: Thu, 17 Jan 2019 14:38:40 +0100 Subject: [PATCH 04/14] Refactoring. --- src/classiceditor.js | 21 +-------------------- src/classiceditorui.js | 28 +++++++++++++++++++++++++++- 2 files changed, 28 insertions(+), 21 deletions(-) diff --git a/src/classiceditor.js b/src/classiceditor.js index 031babf..4e97135 100644 --- a/src/classiceditor.js +++ b/src/classiceditor.js @@ -14,7 +14,6 @@ import attachToForm from '@ckeditor/ckeditor5-core/src/editor/utils/attachtoform import HtmlDataProcessor from '@ckeditor/ckeditor5-engine/src/dataprocessor/htmldataprocessor'; import ClassicEditorUI from './classiceditorui'; import ClassicEditorUIView from './classiceditoruiview'; -import ElementReplacer from '@ckeditor/ckeditor5-utils/src/elementreplacer'; import getDataFromElement from '@ckeditor/ckeditor5-utils/src/dom/getdatafromelement'; import mix from '@ckeditor/ckeditor5-utils/src/mix'; import log from '@ckeditor/ckeditor5-utils/src/log'; @@ -67,14 +66,6 @@ export default class ClassicEditor extends Editor { this.sourceElement = sourceElementOrData; } - /** - * The element replacer instance used to hide the editor's source element. - * - * @protected - * @member {module:utils/elementreplacer~ElementReplacer} - */ - this._elementReplacer = new ElementReplacer(); - this.data.processor = new HtmlDataProcessor(); this.model.document.createRoot(); @@ -104,7 +95,6 @@ export default class ClassicEditor extends Editor { this.updateSourceElement(); } - this._elementReplacer.restore(); this.ui.destroy(); return super.destroy(); @@ -191,16 +181,7 @@ export default class ClassicEditor extends Editor { resolve( editor.initPlugins() - .then( () => editor.ui.init() ) - .then( () => { - if ( isElement( sourceElementOrData ) ) { - editor._elementReplacer.replace( sourceElementOrData, editor.ui.element ); - } - - editor.ui.ready(); - - editor.fire( 'uiReady' ); - } ) + .then( () => editor.ui.init( isElement( sourceElementOrData ) ? sourceElementOrData : null ) ) .then( () => editor.editing.view.attachDomRoot( editor.ui.view.editable.editableElement ) ) .then( () => { const initialData = isElement( sourceElementOrData ) ? diff --git a/src/classiceditorui.js b/src/classiceditorui.js index 68268fe..1e56b67 100644 --- a/src/classiceditorui.js +++ b/src/classiceditorui.js @@ -10,6 +10,7 @@ import EditorUI from '@ckeditor/ckeditor5-core/src/editor/editorui'; import enableToolbarKeyboardFocus from '@ckeditor/ckeditor5-ui/src/toolbar/enabletoolbarkeyboardfocus'; import normalizeToolbarConfig from '@ckeditor/ckeditor5-ui/src/toolbar/normalizetoolbarconfig'; +import ElementReplacer from '@ckeditor/ckeditor5-utils/src/elementreplacer'; /** * The classic editor UI class. @@ -41,6 +42,14 @@ export default class ClassicEditorUI extends EditorUI { * @member {Object} */ this._toolbarConfig = normalizeToolbarConfig( editor.config.get( 'toolbar' ) ); + + /** + * The element replacer instance used to hide the editor's source element. + * + * @protected + * @member {module:utils/elementreplacer~ElementReplacer} + */ + this._elementReplacer = new ElementReplacer(); } /** @@ -69,8 +78,10 @@ export default class ClassicEditorUI extends EditorUI { /** * Initializes the UI. + * + * @param {HTMLElement|null} replacementElement The DOM element that will be the source for the created editor. */ - init() { + init( replacementElement ) { const editor = this.editor; const view = this.view; @@ -100,5 +111,20 @@ export default class ClassicEditorUI extends EditorUI { originKeystrokeHandler: editor.keystrokes, toolbar: view.toolbar } ); + + if ( replacementElement ) { + this._elementReplacer.replace( replacementElement, this.element ); + } + + this.ready(); + } + + /** + * @inheritDoc + */ + destroy() { + this._elementReplacer.restore(); + + super.destroy(); } } From 8c6a5e99e4257bbab45f03c23522ca9e32cf3620 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krzysztof=20Krzto=C5=84?= Date: Thu, 17 Jan 2019 15:19:32 +0100 Subject: [PATCH 05/14] Return HTMLElement in 'getEditableElement()' method. --- src/classiceditorui.js | 2 +- tests/classiceditorui.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/classiceditorui.js b/src/classiceditorui.js index 1e56b67..d714462 100644 --- a/src/classiceditorui.js +++ b/src/classiceditorui.js @@ -73,7 +73,7 @@ export default class ClassicEditorUI extends EditorUI { * @inheritDoc */ getEditableElement( rootName = 'main' ) { - return this.view.editable.name === rootName ? this.view.editable : null; + return this.view.editable.name === rootName ? this.view.editable.element : null; } /** diff --git a/tests/classiceditorui.js b/tests/classiceditorui.js index d3c82ce..de8e922 100644 --- a/tests/classiceditorui.js +++ b/tests/classiceditorui.js @@ -187,11 +187,11 @@ describe( 'ClassicEditorUI', () => { describe( 'getEditableElement()', () => { it( 'returns editable element (default)', () => { - expect( ui.getEditableElement() ).to.equal( view.editable ); + expect( ui.getEditableElement() ).to.equal( view.editable.element ); } ); it( 'returns editable element (root name passed)', () => { - expect( ui.getEditableElement( 'main' ) ).to.equal( view.editable ); + expect( ui.getEditableElement( 'main' ) ).to.equal( view.editable.element ); } ); it( 'returns null if editable with the given name is absent', () => { From e69bb11e9fe44dd332ae78d102b5d400a1f6c1d0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krzysztof=20Krzto=C5=84?= Date: Thu, 17 Jan 2019 17:55:57 +0100 Subject: [PATCH 06/14] The `getEditableElement()` method was moved to base class. --- src/classiceditorui.js | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/src/classiceditorui.js b/src/classiceditorui.js index d714462..a7df781 100644 --- a/src/classiceditorui.js +++ b/src/classiceditorui.js @@ -69,13 +69,6 @@ export default class ClassicEditorUI extends EditorUI { return this.view.element; } - /** - * @inheritDoc - */ - getEditableElement( rootName = 'main' ) { - return this.view.editable.name === rootName ? this.view.editable.element : null; - } - /** * Initializes the UI. * @@ -101,6 +94,8 @@ export default class ClassicEditorUI extends EditorUI { view.editable.bind( 'isFocused' ).to( editor.editing.view.document ); view.editable.name = editingRoot.rootName; + this._editableElements.push( view.editable ); + this.focusTracker.add( view.editable.editableElement ); view.toolbar.fillFromConfig( this._toolbarConfig.items, this.componentFactory ); From e2dada7c25580055d7c0dbca65e871caf177c6f1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krzysztof=20Krzto=C5=84?= Date: Fri, 18 Jan 2019 13:18:26 +0100 Subject: [PATCH 07/14] Fire `ready` event instead of using `ready()` method. --- src/classiceditorui.js | 2 +- tests/classiceditorui.js | 2 -- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/src/classiceditorui.js b/src/classiceditorui.js index a7df781..4798cb9 100644 --- a/src/classiceditorui.js +++ b/src/classiceditorui.js @@ -111,7 +111,7 @@ export default class ClassicEditorUI extends EditorUI { this._elementReplacer.replace( replacementElement, this.element ); } - this.ready(); + this.fire( 'ready' ); } /** diff --git a/tests/classiceditorui.js b/tests/classiceditorui.js index de8e922..8b0a396 100644 --- a/tests/classiceditorui.js +++ b/tests/classiceditorui.js @@ -236,8 +236,6 @@ class VirtualClassicTestEditor extends VirtualTestEditor { editor.initPlugins() .then( () => { editor.ui.init(); - editor.ui.ready(); - editor.fire( 'uiReady' ); editor.fire( 'dataReady' ); editor.fire( 'ready' ); } ) From 957a7298efb4181af453a396483935e95216fb70 Mon Sep 17 00:00:00 2001 From: Piotr Jasiun Date: Mon, 21 Jan 2019 13:18:05 +0100 Subject: [PATCH 08/14] Update src/classiceditor.js Co-Authored-By: f1ames --- src/classiceditor.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/classiceditor.js b/src/classiceditor.js index 4e97135..32bca0e 100644 --- a/src/classiceditor.js +++ b/src/classiceditor.js @@ -182,7 +182,7 @@ export default class ClassicEditor extends Editor { resolve( editor.initPlugins() .then( () => editor.ui.init( isElement( sourceElementOrData ) ? sourceElementOrData : null ) ) - .then( () => editor.editing.view.attachDomRoot( editor.ui.view.editable.editableElement ) ) + .then( () => editor.editing.view.attachDomRoot( editor.ui.view.editable.element ) ) .then( () => { const initialData = isElement( sourceElementOrData ) ? getDataFromElement( sourceElementOrData ) : From a448934568e1290029fddb96843d9499fce38d31 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krzysztof=20Krzto=C5=84?= Date: Mon, 21 Jan 2019 13:48:50 +0100 Subject: [PATCH 09/14] Refactoring. --- src/classiceditor.js | 5 ++--- src/classiceditorui.js | 9 +++++---- src/classiceditoruiview.js | 18 ------------------ tests/classiceditoruiview.js | 18 ------------------ 4 files changed, 7 insertions(+), 43 deletions(-) diff --git a/src/classiceditor.js b/src/classiceditor.js index 32bca0e..e1922cc 100644 --- a/src/classiceditor.js +++ b/src/classiceditor.js @@ -13,7 +13,6 @@ import ElementApiMixin from '@ckeditor/ckeditor5-core/src/editor/utils/elementap import attachToForm from '@ckeditor/ckeditor5-core/src/editor/utils/attachtoform'; import HtmlDataProcessor from '@ckeditor/ckeditor5-engine/src/dataprocessor/htmldataprocessor'; import ClassicEditorUI from './classiceditorui'; -import ClassicEditorUIView from './classiceditoruiview'; import getDataFromElement from '@ckeditor/ckeditor5-utils/src/dom/getdatafromelement'; import mix from '@ckeditor/ckeditor5-utils/src/mix'; import log from '@ckeditor/ckeditor5-utils/src/log'; @@ -70,7 +69,7 @@ export default class ClassicEditor extends Editor { this.model.document.createRoot(); - this.ui = new ClassicEditorUI( this, new ClassicEditorUIView( this.locale ) ); + this.ui = new ClassicEditorUI( this ); attachToForm( this ); } @@ -182,7 +181,7 @@ export default class ClassicEditor extends Editor { resolve( editor.initPlugins() .then( () => editor.ui.init( isElement( sourceElementOrData ) ? sourceElementOrData : null ) ) - .then( () => editor.editing.view.attachDomRoot( editor.ui.view.editable.element ) ) + .then( () => editor.editing.view.attachDomRoot( editor.ui.getEditableElement() ) ) .then( () => { const initialData = isElement( sourceElementOrData ) ? getDataFromElement( sourceElementOrData ) : diff --git a/src/classiceditorui.js b/src/classiceditorui.js index 4798cb9..3c407f8 100644 --- a/src/classiceditorui.js +++ b/src/classiceditorui.js @@ -8,6 +8,7 @@ */ import EditorUI from '@ckeditor/ckeditor5-core/src/editor/editorui'; +import ClassicEditorUIView from './classiceditoruiview'; import enableToolbarKeyboardFocus from '@ckeditor/ckeditor5-ui/src/toolbar/enabletoolbarkeyboardfocus'; import normalizeToolbarConfig from '@ckeditor/ckeditor5-ui/src/toolbar/normalizetoolbarconfig'; import ElementReplacer from '@ckeditor/ckeditor5-utils/src/elementreplacer'; @@ -24,7 +25,7 @@ export default class ClassicEditorUI extends EditorUI { * @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 ) { + constructor( editor ) { super( editor ); /** @@ -33,7 +34,7 @@ export default class ClassicEditorUI extends EditorUI { * @private * @member {module:ui/editorui/editoruiview~EditorUIView} #_view */ - this._view = view; + this._view = new ClassicEditorUIView( editor.locale ); /** * A normalized `config.toolbar` object. @@ -94,9 +95,9 @@ export default class ClassicEditorUI extends EditorUI { view.editable.bind( 'isFocused' ).to( editor.editing.view.document ); view.editable.name = editingRoot.rootName; - this._editableElements.push( view.editable ); + this._editableElements.set( view.editable.name, view.editable.element ); - this.focusTracker.add( view.editable.editableElement ); + this.focusTracker.add( view.editable.element ); view.toolbar.fillFromConfig( this._toolbarConfig.items, this.componentFactory ); diff --git a/src/classiceditoruiview.js b/src/classiceditoruiview.js index 0214235..c7c3745 100644 --- a/src/classiceditoruiview.js +++ b/src/classiceditoruiview.js @@ -12,8 +12,6 @@ import InlineEditableUIView from '@ckeditor/ckeditor5-ui/src/editableui/inline/i import StickyPanelView from '@ckeditor/ckeditor5-ui/src/panel/sticky/stickypanelview'; import ToolbarView from '@ckeditor/ckeditor5-ui/src/toolbar/toolbarview'; -import log from '@ckeditor/ckeditor5-utils/src/log'; - import '../theme/classiceditor.css'; /** @@ -69,20 +67,4 @@ export default class ClassicEditorUIView extends BoxedEditorUIView { this.top.add( this.stickyPanel ); this.main.add( this.editable ); } - - /** - * **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() { - log.warn( 'deprecated-ui-view-editableElement: The ClassicEditorUIView#editableElement property is deprecated.' ); - return this.editable.editableElement; - } } diff --git a/tests/classiceditoruiview.js b/tests/classiceditoruiview.js index 926e30e..bce939c 100644 --- a/tests/classiceditoruiview.js +++ b/tests/classiceditoruiview.js @@ -3,8 +3,6 @@ * For licensing, see LICENSE.md. */ -/* globals document */ - import ClassicEditorUIView from '../src/classiceditoruiview'; import StickyPanelView from '@ckeditor/ckeditor5-ui/src/panel/sticky/stickypanelview'; import ToolbarView from '@ckeditor/ckeditor5-ui/src/toolbar/toolbarview'; @@ -12,7 +10,6 @@ import InlineEditableUIView from '@ckeditor/ckeditor5-ui/src/editableui/inline/i 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( 'ClassicEditorUIView', () => { let locale, view; @@ -72,19 +69,4 @@ describe( 'ClassicEditorUIView', () => { } ); } ); } ); - - describe( 'editableElement', () => { - it( 'returns editable\'s view element', () => { - testUtils.sinon.stub( log, 'warn' ).callsFake( () => {} ); - - document.body.appendChild( view.element ); - - view.stickyPanel.limiterElement = view.element; - - expect( view.editableElement.getAttribute( 'contentEditable' ) ).to.equal( 'true' ); - - view.element.remove(); - view.destroy(); - } ); - } ); } ); From 8c730ed1a85d4d5a0f71f3c19c3f6b36ae77c54b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krzysztof=20Krzto=C5=84?= Date: Mon, 21 Jan 2019 13:50:41 +0100 Subject: [PATCH 10/14] Docs: Removed unused param. [skip ci] --- src/classiceditorui.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/classiceditorui.js b/src/classiceditorui.js index 3c407f8..0ad9990 100644 --- a/src/classiceditorui.js +++ b/src/classiceditorui.js @@ -23,7 +23,6 @@ export default class ClassicEditorUI extends EditorUI { * Creates an instance of the classic 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 ) { super( editor ); From 3babb31a83822d589fcb1288aebbf9f003c8c720 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krzysztof=20Krzto=C5=84?= Date: Mon, 21 Jan 2019 16:22:45 +0100 Subject: [PATCH 11/14] Create view instance in main editor class. --- src/classiceditor.js | 3 ++- src/classiceditorui.js | 6 +++--- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/classiceditor.js b/src/classiceditor.js index e1922cc..1ca2577 100644 --- a/src/classiceditor.js +++ b/src/classiceditor.js @@ -13,6 +13,7 @@ import ElementApiMixin from '@ckeditor/ckeditor5-core/src/editor/utils/elementap import attachToForm from '@ckeditor/ckeditor5-core/src/editor/utils/attachtoform'; import HtmlDataProcessor from '@ckeditor/ckeditor5-engine/src/dataprocessor/htmldataprocessor'; import ClassicEditorUI from './classiceditorui'; +import ClassicEditorUIView from './classiceditoruiview'; import getDataFromElement from '@ckeditor/ckeditor5-utils/src/dom/getdatafromelement'; import mix from '@ckeditor/ckeditor5-utils/src/mix'; import log from '@ckeditor/ckeditor5-utils/src/log'; @@ -69,7 +70,7 @@ export default class ClassicEditor extends Editor { this.model.document.createRoot(); - this.ui = new ClassicEditorUI( this ); + this.ui = new ClassicEditorUI( this, new ClassicEditorUIView( this.locale ) ); attachToForm( this ); } diff --git a/src/classiceditorui.js b/src/classiceditorui.js index 0ad9990..680d793 100644 --- a/src/classiceditorui.js +++ b/src/classiceditorui.js @@ -8,7 +8,6 @@ */ import EditorUI from '@ckeditor/ckeditor5-core/src/editor/editorui'; -import ClassicEditorUIView from './classiceditoruiview'; import enableToolbarKeyboardFocus from '@ckeditor/ckeditor5-ui/src/toolbar/enabletoolbarkeyboardfocus'; import normalizeToolbarConfig from '@ckeditor/ckeditor5-ui/src/toolbar/normalizetoolbarconfig'; import ElementReplacer from '@ckeditor/ckeditor5-utils/src/elementreplacer'; @@ -23,8 +22,9 @@ export default class ClassicEditorUI extends EditorUI { * Creates an instance of the classic 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 ) { + constructor( editor, view ) { super( editor ); /** @@ -33,7 +33,7 @@ export default class ClassicEditorUI extends EditorUI { * @private * @member {module:ui/editorui/editoruiview~EditorUIView} #_view */ - this._view = new ClassicEditorUIView( editor.locale ); + this._view = view; /** * A normalized `config.toolbar` object. From 93bcb116f88dba4c715a056ddbb4824fd5126671 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krzysztof=20Krzto=C5=84?= Date: Tue, 22 Jan 2019 11:46:13 +0100 Subject: [PATCH 12/14] Removed deprecated code. --- src/classiceditor.js | 9 --------- src/classiceditorui.js | 2 ++ tests/classiceditor.js | 39 +-------------------------------------- tests/classiceditorui.js | 9 ++++++++- 4 files changed, 11 insertions(+), 48 deletions(-) diff --git a/src/classiceditor.js b/src/classiceditor.js index 1ca2577..b9a01e8 100644 --- a/src/classiceditor.js +++ b/src/classiceditor.js @@ -16,7 +16,6 @@ import ClassicEditorUI from './classiceditorui'; import ClassicEditorUIView from './classiceditoruiview'; import getDataFromElement from '@ckeditor/ckeditor5-utils/src/dom/getdatafromelement'; import mix from '@ckeditor/ckeditor5-utils/src/mix'; -import log from '@ckeditor/ckeditor5-utils/src/log'; import { isElement } from 'lodash-es'; /** @@ -75,14 +74,6 @@ export default class ClassicEditor extends Editor { attachToForm( this ); } - /** - * @inheritDoc - */ - get element() { - log.warn( 'deprecated-editor-element: The editor#element is deprecated.' ); - return this.ui.element; - } - /** * Destroys the editor instance, releasing all resources used by it. * diff --git a/src/classiceditorui.js b/src/classiceditorui.js index 680d793..47e7416 100644 --- a/src/classiceditorui.js +++ b/src/classiceditorui.js @@ -120,6 +120,8 @@ export default class ClassicEditorUI extends EditorUI { destroy() { this._elementReplacer.restore(); + this._view.destroy(); + super.destroy(); } } diff --git a/tests/classiceditor.js b/tests/classiceditor.js index 473d208..b1ce307 100644 --- a/tests/classiceditor.js +++ b/tests/classiceditor.js @@ -172,20 +172,6 @@ describe( 'ClassicEditor', () => { it( 'attaches editable UI as view\'s DOM root', () => { expect( editor.editing.view.getDomRoot() ).to.equal( editor.ui.view.editable.element ); } ); - - it( 'editor.element points to the editor\'s UI when editor was initialized on the DOM element', () => { - expect( editor.element ).to.equal( editor.ui.view.element ); - } ); - - it( 'editor.element points to the editor\'s UI when editor was initialized with data', () => { - return ClassicEditor.create( '

Hello world!

', { - plugins: [ Paragraph ] - } ).then( editor => { - expect( editor.element ).to.equal( editor.ui.view.element ); - - return editor.destroy(); - } ); - } ); } ); } ); @@ -205,7 +191,6 @@ describe( 'ClassicEditor', () => { 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 ); } @@ -216,7 +201,7 @@ describe( 'ClassicEditor', () => { plugins: [ EventWatcher ] } ) .then( newEditor => { - expect( fired ).to.deep.equal( [ 'pluginsReady', 'ready', 'uiReady', 'dataReady', 'ready' ] ); + expect( fired ).to.deep.equal( [ 'pluginsReady', 'ready', 'dataReady', 'ready' ] ); editor = newEditor; } ); @@ -244,28 +229,6 @@ describe( 'ClassicEditor', () => { } ); } ); - it( 'fires uiReady once UI is rendered', () => { - let isReady; - - class EventWatcher extends Plugin { - init() { - this.editor.on( 'uiReady', () => { - isReady = this.editor.ui.view.isRendered; - } ); - } - } - - return ClassicEditor - .create( editorElement, { - plugins: [ EventWatcher ] - } ) - .then( newEditor => { - expect( isReady ).to.be.true; - - editor = newEditor; - } ); - } ); - it( 'fires ready once UI is rendered', () => { let isReady; diff --git a/tests/classiceditorui.js b/tests/classiceditorui.js index 8b0a396..3d034c7 100644 --- a/tests/classiceditorui.js +++ b/tests/classiceditorui.js @@ -17,7 +17,7 @@ import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils'; import utils from '@ckeditor/ckeditor5-utils/tests/_utils/utils'; describe( 'ClassicEditorUI', () => { - let editor, view, ui; + let editor, view, ui, viewElement; testUtils.createSinonSandbox(); @@ -31,6 +31,7 @@ describe( 'ClassicEditorUI', () => { ui = editor.ui; view = ui.view; + viewElement = view.element; } ); } ); @@ -185,6 +186,12 @@ describe( 'ClassicEditorUI', () => { } ); } ); + describe( 'element()', () => { + it( 'returns correct element instance', () => { + expect( ui.element ).to.equal( viewElement ); + } ); + } ); + describe( 'getEditableElement()', () => { it( 'returns editable element (default)', () => { expect( ui.getEditableElement() ).to.equal( view.editable.element ); From 52f657b356af5a6603e9b57564c8cd8f328b90f5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krzysztof=20Krzto=C5=84?= Date: Tue, 22 Jan 2019 12:49:11 +0100 Subject: [PATCH 13/14] Docs: Fixed links [skip ci]. --- src/classiceditor.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/classiceditor.js b/src/classiceditor.js index b9a01e8..3a360e6 100644 --- a/src/classiceditor.js +++ b/src/classiceditor.js @@ -150,15 +150,15 @@ export default class ClassicEditor extends Editor { * * If a source element is passed, then its contents will be automatically * {@link module:editor-classic/classiceditor~ClassicEditor#setData loaded} to the editor on startup - * and the {@link module:core/editor/editorwithui~EditorWithUI#element editor element} will replace the passed element in the DOM + * and the {@link module:core/editor/editorui~EditorUI#getEditableElement editor element} will replace the passed element in the DOM * (the original one will be hidden and the editor will be injected next to it). * * Moreover, the data will be set back to the source element once the editor is destroyed and * (if the element is a `