@ckeditor/ckeditor5-ui 45.0.0-alpha.9 → 45.1.0-alpha.0

package/src/panel/sticky/stickypanelview.d.ts

@@ -153,8 +153,4 @@ export default class StickyPanelView extends View {
      * @private
      */
     private get _contentPanelRect();
-    /**
-     * Returns normalized visual viewport offsets (only for Safari and iOS).
-     */
-    private _getVisualViewportOffset;
 }

package/src/panel/sticky/stickypanelview.js

@@ -7,7 +7,11 @@
  */
 import View from '../../view.js';
 import Template from '../../template.js';
-import { Rect, toUnit, global, env } from '@ckeditor/ckeditor5-utils';
+import { Rect, toUnit, getVisualViewportOffset, global } from '@ckeditor/ckeditor5-utils';
+// @if CK_DEBUG_STICKYPANEL // const {
+// @if CK_DEBUG_STICKYPANEL // 	default: RectDrawer,
+// @if CK_DEBUG_STICKYPANEL // 	diagonalStylesBlack
+// @if CK_DEBUG_STICKYPANEL // } = require( '@ckeditor/ckeditor5-utils/tests/_utils/rectdrawer' );
 import '../../../theme/components/panel/stickypanel.css';
 const toPx = /* #__PURE__ */ toUnit('px');
 /**
@@ -109,7 +113,7 @@ export default class StickyPanelView extends View {
         this.listenTo(this, 'change:isActive', () => {
             this.checkIfShouldBeSticky();
         });
-        if ((env.isiOS || env.isSafari) && global.window.visualViewport) {
+        if (global.window.visualViewport) {
             this.listenTo(global.window.visualViewport, 'scroll', () => {
                 this.checkIfShouldBeSticky();
             });
@@ -123,24 +127,20 @@ export default class StickyPanelView extends View {
      * Then handles the positioning of the panel.
      */
     checkIfShouldBeSticky() {
+        // @if CK_DEBUG_STICKYPANEL // RectDrawer.clear();
         if (!this.limiterElement || !this.isActive) {
             this._unstick();
             return;
         }
-        const { left: visualViewportOffsetLeft, top: visualViewportOffsetTop } = this._getVisualViewportOffset();
         const limiterRect = new Rect(this.limiterElement);
         let visibleLimiterRect = limiterRect.getVisible();
         if (visibleLimiterRect) {
             const windowRect = new Rect(global.window);
-            let viewportTopOffset = this.viewportTopOffset;
-            if (env.isiOS || env.isSafari) {
-                // Adjust the viewport top offset to height visible in the visual viewport.
-                viewportTopOffset = visualViewportOffsetTop > this.viewportTopOffset ? 0 : this.viewportTopOffset - visualViewportOffsetTop;
-            }
-            windowRect.top += viewportTopOffset;
-            windowRect.height -= viewportTopOffset;
+            windowRect.top += this.viewportTopOffset;
+            windowRect.height -= this.viewportTopOffset;
             visibleLimiterRect = visibleLimiterRect.getIntersection(windowRect);
         }
+        const { left: visualViewportOffsetLeft, top: visualViewportOffsetTop } = getVisualViewportOffset();
         limiterRect.moveBy(visualViewportOffsetLeft, visualViewportOffsetTop);
         if (visibleLimiterRect) {
             visibleLimiterRect.moveBy(visualViewportOffsetLeft, visualViewportOffsetTop);
@@ -149,14 +149,23 @@ export default class StickyPanelView extends View {
         // * the limiter's ancestors are intersecting with each other so that some of their rects are visible,
         // * and the limiter's top edge is above the visible ancestors' top edge.
         if (visibleLimiterRect && limiterRect.top < visibleLimiterRect.top) {
-            const visibleLimiterTop = visibleLimiterRect.top;
             // Check if there's a change the panel can be sticky to the bottom of the limiter.
-            if (visibleLimiterTop + this._contentPanelRect.height + this.limiterBottomOffset > visibleLimiterRect.bottom) {
+            if (this._contentPanelRect.height + this.limiterBottomOffset > visibleLimiterRect.height) {
                 const stickyBottomOffset = Math.max(limiterRect.bottom - visibleLimiterRect.bottom, 0) + this.limiterBottomOffset;
+                // @if CK_DEBUG_STICKYPANEL // const stickyBottomOffsetRect = new Rect( {
+                // @if CK_DEBUG_STICKYPANEL // 	top: limiterRect.bottom - stickyBottomOffset, left: 0, right: 2000,
+                // @if CK_DEBUG_STICKYPANEL // 	bottom: limiterRect.bottom - stickyBottomOffset, width: 2000, height: 1
+                // @if CK_DEBUG_STICKYPANEL // } );
+                // @if CK_DEBUG_STICKYPANEL // RectDrawer.draw( stickyBottomOffsetRect,
+                // @if CK_DEBUG_STICKYPANEL // 	{ outlineWidth: '1px', opacity: '.8', outlineColor: 'black' },
+                // @if CK_DEBUG_STICKYPANEL // 	'Sticky bottom offset',
+                // @if CK_DEBUG_STICKYPANEL // 	{ visualViewportOrigin: true }
+                // @if CK_DEBUG_STICKYPANEL // );
                 // Check if sticking the panel to the bottom of the limiter does not cause it to suddenly
                 // move upwards if there's not enough space for it.
-                // Adding 1 avoids rounding problems and toolbar flickering when offset almost equals the height.
-                if (limiterRect.bottom - stickyBottomOffset > limiterRect.top + this._contentPanelRect.height + 1) {
+                // To avoid toolbar flickering we are adding 1 for potential style change (sticky has all borders set,
+                // non-sticky lacks bottom border).
+                if (this._contentPanelRect.height + stickyBottomOffset + 1 < limiterRect.height) {
                     this._stickToBottomOfLimiter(stickyBottomOffset);
                 }
                 else {
@@ -164,7 +173,7 @@ export default class StickyPanelView extends View {
                 }
             }
             else if (this._contentPanelRect.height + this.limiterBottomOffset < limiterRect.height) {
-                this._stickToTopOfAncestors(visibleLimiterTop);
+                this._stickToTopOfAncestors(visibleLimiterRect.top);
             }
             else {
                 this._unstick();
@@ -178,6 +187,15 @@ export default class StickyPanelView extends View {
         // @if CK_DEBUG_STICKYPANEL // console.log( '_isStickyToTheBottomOfLimiter', this._isStickyToTheBottomOfLimiter );
         // @if CK_DEBUG_STICKYPANEL // console.log( '_stickyTopOffset', this._stickyTopOffset );
         // @if CK_DEBUG_STICKYPANEL // console.log( '_stickyBottomOffset', this._stickyBottomOffset );
+        // @if CK_DEBUG_STICKYPANEL // if ( visibleLimiterRect ) {
+        // @if CK_DEBUG_STICKYPANEL // 	RectDrawer.draw( visibleLimiterRect,
+        // @if CK_DEBUG_STICKYPANEL // 		{ ...diagonalStylesBlack,
+        // @if CK_DEBUG_STICKYPANEL // 			outlineWidth: '3px', opacity: '.8', outlineColor: 'orange', outlineOffset: '-3px',
+        // @if CK_DEBUG_STICKYPANEL // 			backgroundColor: 'rgba(0, 0, 255, .2)', zIndex: 2000 },
+        // @if CK_DEBUG_STICKYPANEL // 		'visibleLimiterRect',
+        // @if CK_DEBUG_STICKYPANEL // 		{ visualViewportOrigin: true }
+        // @if CK_DEBUG_STICKYPANEL // 	);
+        // @if CK_DEBUG_STICKYPANEL // }
     }
     /**
      * Sticks the panel at the given CSS `top` offset.
@@ -190,7 +208,7 @@ export default class StickyPanelView extends View {
         this._isStickyToTheBottomOfLimiter = false;
         this._stickyTopOffset = topOffset;
         this._stickyBottomOffset = null;
-        this._marginLeft = toPx(-global.window.scrollX + this._getVisualViewportOffset().left);
+        this._marginLeft = toPx(-global.window.scrollX + getVisualViewportOffset().left);
     }
     /**
      * Sticks the panel at the bottom of the limiter with a given CSS `bottom` offset.
@@ -203,7 +221,7 @@ export default class StickyPanelView extends View {
         this._isStickyToTheBottomOfLimiter = true;
         this._stickyTopOffset = null;
         this._stickyBottomOffset = stickyBottomOffset;
-        this._marginLeft = toPx(-global.window.scrollX + this._getVisualViewportOffset().left);
+        this._marginLeft = toPx(-global.window.scrollX + getVisualViewportOffset().left);
     }
     /**
      * Unsticks the panel putting it back to its original position.
@@ -225,16 +243,4 @@ export default class StickyPanelView extends View {
     get _contentPanelRect() {
         return new Rect(this.contentPanelElement);
     }
-    /**
-     * Returns normalized visual viewport offsets (only for Safari and iOS).
-     */
-    _getVisualViewportOffset() {
-        const visualViewport = global.window.visualViewport;
-        if (!(env.isiOS || env.isSafari) || !visualViewport) {
-            return { left: 0, top: 0 };
-        }
-        const left = Math.max(Math.round(visualViewport.offsetLeft), 0);
-        const top = Math.max(Math.round(visualViewport.offsetTop), 0);
-        return { left, top };
-    }
 }

package/src/textarea/textareaview.js

@@ -161,9 +161,9 @@ export default class TextareaView extends InputBase {
              * The minimum number of rows is greater than the maximum number of rows.
              *
              * @error ui-textarea-view-min-rows-greater-than-max-rows
-             * @param textareaView The misconfigured textarea view instance.
-             * @param minRows The value of `minRows` property.
-             * @param maxRows The value of `maxRows` property.
+             * @param {module:ui/textarea/textareaview~TextareaView} textareaView The misconfigured textarea view instance.
+             * @param {number} minRows The value of `minRows` property.
+             * @param {number} maxRows The value of `maxRows` property.
              */
             throw new CKEditorError('ui-textarea-view-min-rows-greater-than-max-rows', {
                 textareaView: this,

package/src/toolbar/toolbarview.d.ts

@@ -91,7 +91,7 @@ export default class ToolbarView extends View implements DropdownPanelFocusable
      * An additional CSS class added to the {@link #element}.
      *
      * @observable
-     * @member {String} #class
+     * @type {String}
      */
     class: string | undefined;
     /**

package/src/toolbar/toolbarview.js

@@ -321,7 +321,7 @@ export default class ToolbarView extends View {
                  * ```
                  *
                  * @error toolbarview-item-unavailable
-                 * @param item The name of the component or nested toolbar definition.
+                 * @param {string} item The name of the component or nested toolbar definition.
                  */
                 logWarning('toolbarview-item-unavailable', { item });
                 return false;

package/src/tooltipmanager.d.ts

@@ -176,6 +176,8 @@ export default class TooltipManager extends /* #__PURE__ */ TooltipManager_base
     /**
      * Pins the tooltip to a specific DOM element.
      *
+     * @param targetDomElement Element to be pinned to.
+     * @param options Options for the tooltip.
      * @param options.text Text of the tooltip to display.
      * @param options.position The position of the tooltip.
      * @param options.cssClass Additional CSS class of the balloon with the tooltip.

package/src/tooltipmanager.js

@@ -347,6 +347,8 @@ class TooltipManager extends /* #__PURE__ */ DomEmitterMixin() {
     /**
      * Pins the tooltip to a specific DOM element.
      *
+     * @param targetDomElement Element to be pinned to.
+     * @param options Options for the tooltip.
      * @param options.text Text of the tooltip to display.
      * @param options.position The position of the tooltip.
      * @param options.cssClass Additional CSS class of the balloon with the tooltip.

package/src/viewcollection.d.ts

@@ -69,7 +69,7 @@ export default class ViewCollection<TView extends View = View> extends Collectio
      * {@link #remove removing} views in the collection synchronizes their
      * {@link module:ui/view~View#element elements} in the parent element.
      *
-     * @param element A new parent element.
+     * @param elementOrDocFragment A new parent element or document fragment.
      */
     setParent(elementOrDocFragment: DocumentFragment | HTMLElement): void;
     /**

package/src/viewcollection.js

@@ -86,7 +86,7 @@ export default class ViewCollection extends Collection {
      * {@link #remove removing} views in the collection synchronizes their
      * {@link module:ui/view~View#element elements} in the parent element.
      *
-     * @param element A new parent element.
+     * @param elementOrDocFragment A new parent element or document fragment.
      */
     setParent(elementOrDocFragment) {
         this._parentElement = elementOrDocFragment;