Skip to content

Commit

Permalink
Moved the observable #viewportOffset property to EditorUI.
Browse files Browse the repository at this point in the history
  • Loading branch information
oleq committed Aug 13, 2021
1 parent d114b6b commit 6e76b5a
Show file tree
Hide file tree
Showing 6 changed files with 52 additions and 71 deletions.
48 changes: 45 additions & 3 deletions packages/ckeditor5-core/src/editor/editorui.js
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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.
*
Expand Down Expand Up @@ -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.
*
Expand All @@ -190,4 +232,4 @@ export default class EditorUI {
*/
}

mix( EditorUI, EmitterMixin );
mix( EditorUI, ObservableMixin );
32 changes: 2 additions & 30 deletions packages/ckeditor5-editor-classic/src/classiceditorui.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 );

Expand Down Expand Up @@ -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;
}
}

Original file line number Diff line number Diff line change
Expand Up @@ -40,5 +40,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();
} );
28 changes: 1 addition & 27 deletions packages/ckeditor5-editor-inline/src/inlineeditorui.js
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Expand Down Expand Up @@ -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;
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -40,5 +40,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();
} );
9 changes: 0 additions & 9 deletions packages/ckeditor5-ui/src/toolbar/normalizetoolbarconfig.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,6 @@
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
*/

/* global console */

/**
* @module ui/toolbar/normalizetoolbarconfig
*/
Expand Down Expand Up @@ -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: []
Expand Down

0 comments on commit 6e76b5a

Please sign in to comment.