From 39597fd8e17fb34b2986f40fff243dab32f234f1 Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Fri, 13 Aug 2021 13:13:33 +0200 Subject: [PATCH] Moved the observable #viewportOffset property to EditorUI. --- .../ckeditor5-core/src/editor/editorui.js | 48 +++++++++++++++++-- .../src/classiceditorui.js | 32 +------------ .../tests/manual/tickets/9672/1.js | 3 +- .../src/inlineeditorui.js | 28 +---------- .../tests/manual/tickets/9672/1.js | 3 +- .../src/toolbar/normalizetoolbarconfig.js | 9 ---- 6 files changed, 52 insertions(+), 71 deletions(-) diff --git a/packages/ckeditor5-core/src/editor/editorui.js b/packages/ckeditor5-core/src/editor/editorui.js index 027f60442b1..874680c8976 100644 --- a/packages/ckeditor5-core/src/editor/editorui.js +++ b/packages/ckeditor5-core/src/editor/editorui.js @@ -12,8 +12,7 @@ import ComponentFactory from '@ckeditor/ckeditor5-ui/src/componentfactory'; import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker'; -import EmitterMixin from '@ckeditor/ckeditor5-utils/src/emittermixin'; -import mix from '@ckeditor/ckeditor5-utils/src/mix'; +import { ObservableMixin, mix } from '@ckeditor/ckeditor5-utils'; /** * A class providing the minimal interface that is required to successfully bootstrap any editor UI. @@ -53,6 +52,13 @@ export default class EditorUI { */ this.focusTracker = new FocusTracker(); + /** + * TODO + * + * @observable + */ + this.set( 'viewportOffset', this._viewportTopOffset ); + /** * Stores all editable elements used by the editor instance. * @@ -172,6 +178,42 @@ export default class EditorUI { return this._editableElementsMap; } + /** + * TODO + * + * @private + * @return Object + */ + get _viewportTopOffset() { + const editor = this.editor; + const viewportOffsetConfig = editor.config.get( 'ui.viewportOffset' ); + + if ( viewportOffsetConfig ) { + return viewportOffsetConfig; + } + + const legacyOffsetConfig = editor.config.get( 'toolbar.viewportTopOffset' ); + + // Fall back to deprecated toolbar config + if ( legacyOffsetConfig ) { + /** + * TODO + * + * @error todo-error-name + */ + console.warn( + 'todo-error-name: ' + + 'The `toolbar.vieportTopOffset` configuration option is deprecated. ' + + 'It will be removed from future CKEditor versions. Use `ui.viewportOffset.top` instead.' + ); + + return { top: legacyOffsetConfig }; + } + + // More keys to come in the future. + return { top: 0 }; + } + /** * Fired when the editor UI is ready. * @@ -190,4 +232,4 @@ export default class EditorUI { */ } -mix( EditorUI, EmitterMixin ); +mix( EditorUI, ObservableMixin ); diff --git a/packages/ckeditor5-editor-classic/src/classiceditorui.js b/packages/ckeditor5-editor-classic/src/classiceditorui.js index 75c8d6fcc42..7eaff9777f7 100644 --- a/packages/ckeditor5-editor-classic/src/classiceditorui.js +++ b/packages/ckeditor5-editor-classic/src/classiceditorui.js @@ -142,12 +142,7 @@ export default class ClassicEditorUI extends EditorUI { // Set–up the sticky panel with toolbar. view.stickyPanel.bind( 'isActive' ).to( this.focusTracker, 'isFocused' ); view.stickyPanel.limiterElement = view.element; - - if ( this._viewportTopOffset ) { - // TODO: Consider dropping `stickyPanel` from this, and leave just - // view.viewportTopOffset to keep consistency with InlineEditor - view.stickyPanel.viewportTopOffset = this._viewportTopOffset; - } + view.stickyPanel.bind( 'viewportTopOffset' ).to( this, 'viewportOffset', ( { top } ) => top ); view.toolbar.fillFromConfig( this._toolbarConfig, this.componentFactory ); @@ -183,28 +178,5 @@ export default class ClassicEditorUI extends EditorUI { } ); } } - - /** - * TODO: Find better place for this to not duplicate it with inline editor - * TODO: Also deprecation warning could be moved from toolbar config normalization function to here - * Get viewport top offset. - * - * @private - * @return Number|null - */ - get _viewportTopOffset() { - const editor = this.editor; - const viewportOffset = editor.config.get( 'ui.viewportOffset' ); - - if ( viewportOffset && viewportOffset.top ) { - return viewportOffset.top; - } - - // Fall back to deprecated toolbar config - if ( this._toolbarConfig.viewportTopOffset ) { - return this._toolbarConfig.viewportTopOffset; - } - - return null; - } } + diff --git a/packages/ckeditor5-editor-classic/tests/manual/tickets/9672/1.js b/packages/ckeditor5-editor-classic/tests/manual/tickets/9672/1.js index 74eb50b287a..ae2634f9e52 100644 --- a/packages/ckeditor5-editor-classic/tests/manual/tickets/9672/1.js +++ b/packages/ckeditor5-editor-classic/tests/manual/tickets/9672/1.js @@ -44,5 +44,6 @@ button.addEventListener( 'click', () => { const getRandomBetween = ( min, max ) => Math.random() * ( max - min ) + min; const random = getRandomBetween( 100, 200 ); document.documentElement.style.setProperty( '--top-offset', `${ random }px` ); - editor.ui.view.stickyPanel.viewportTopOffset = random; + editor.ui.viewportOffset = { top: random }; + editor.editing.view.focus(); } ); diff --git a/packages/ckeditor5-editor-inline/src/inlineeditorui.js b/packages/ckeditor5-editor-inline/src/inlineeditorui.js index 77dece5a078..da41e626f45 100644 --- a/packages/ckeditor5-editor-inline/src/inlineeditorui.js +++ b/packages/ckeditor5-editor-inline/src/inlineeditorui.js @@ -125,9 +125,7 @@ export default class InlineEditorUI extends EditorUI { // Set–up the view#panel. view.panel.bind( 'isVisible' ).to( this.focusTracker, 'isFocused' ); - if ( this._viewportTopOffset ) { - view.viewportTopOffset = this._viewportTopOffset; - } + view.bind( 'viewportTopOffset' ).to( this, 'viewportOffset', ( { top } ) => top ); // https://github.com/ckeditor/ckeditor5-editor-inline/issues/4 view.listenTo( editor.ui, 'update', () => { @@ -175,28 +173,4 @@ export default class InlineEditorUI extends EditorUI { } ); } } - - /** - * TODO: Find better place for this to not duplicate it with inline editor - * TODO: Also deprecation warning could be moved from toolbar config normalization function to here - * Get viewport top offset. - * - * @private - * @return Number|null - */ - get _viewportTopOffset() { - const editor = this.editor; - const viewportOffset = editor.config.get( 'ui.viewportOffset' ); - - if ( viewportOffset && viewportOffset.top ) { - return viewportOffset.top; - } - - // Fall back to deprecated toolbar config - if ( this._toolbarConfig.viewportTopOffset ) { - return this._toolbarConfig.viewportTopOffset; - } - - return null; - } } diff --git a/packages/ckeditor5-editor-inline/tests/manual/tickets/9672/1.js b/packages/ckeditor5-editor-inline/tests/manual/tickets/9672/1.js index d5e9f8c0d97..486f7e00e52 100644 --- a/packages/ckeditor5-editor-inline/tests/manual/tickets/9672/1.js +++ b/packages/ckeditor5-editor-inline/tests/manual/tickets/9672/1.js @@ -44,5 +44,6 @@ button.addEventListener( 'click', () => { const getRandomBetween = ( min, max ) => Math.random() * ( max - min ) + min; const random = getRandomBetween( 100, 200 ); document.documentElement.style.setProperty( '--top-offset', `${ random }px` ); - editor.ui.view.viewportTopOffset = random; + editor.ui.viewportOffset = { top: random }; + editor.editing.view.focus(); } ); diff --git a/packages/ckeditor5-ui/src/toolbar/normalizetoolbarconfig.js b/packages/ckeditor5-ui/src/toolbar/normalizetoolbarconfig.js index b8e17580ef3..56825526005 100644 --- a/packages/ckeditor5-ui/src/toolbar/normalizetoolbarconfig.js +++ b/packages/ckeditor5-ui/src/toolbar/normalizetoolbarconfig.js @@ -3,8 +3,6 @@ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license */ -/* global console */ - /** * @module ui/toolbar/normalizetoolbarconfig */ @@ -46,13 +44,6 @@ export default function normalizeToolbarConfig( config ) { }; } - if ( Object.prototype.hasOwnProperty.call( config, 'viewportTopOffset' ) ) { - console.warn( - 'The `toolbar.vieportTopOffset` configuration option is deprecated.' + - 'It will be removed from future CKEditor versions. Use `ui.viewportOffset.top` instead.' - ); - } - return Object.assign( { items: [], removeItems: []