@ckeditor/ckeditor5-ui 45.0.0-alpha.6 → 45.0.0-alpha.8

package/dist/index.js

@@ -15660,69 +15660,61 @@ const toPx$3 = /* #__PURE__ */ toUnit('px');
         this.listenTo(this, 'change:isActive', ()=>{
             this.checkIfShouldBeSticky();
         });
+        if ((env.isiOS || env.isSafari) && global.window.visualViewport) {
+            this.listenTo(global.window.visualViewport, 'scroll', ()=>{
+                this.checkIfShouldBeSticky();
+            });
+            this.listenTo(global.window.visualViewport, 'resize', ()=>{
+                this.checkIfShouldBeSticky();
+            });
+        }
     }
     /**
 	 * Analyzes the environment to decide whether the panel should be sticky or not.
 	 * 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);
-            windowRect.top += this.viewportTopOffset;
-            windowRect.height -= this.viewportTopOffset;
+            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;
             visibleLimiterRect = visibleLimiterRect.getIntersection(windowRect);
         }
-        // @if CK_DEBUG_STICKYPANEL // if ( visibleLimiterRect ) {
-        // @if CK_DEBUG_STICKYPANEL // 	RectDrawer.draw( visibleLimiterRect,
-        // @if CK_DEBUG_STICKYPANEL // 		{ outlineWidth: '3px', opacity: '.8', outlineColor: 'red', outlineOffset: '-3px' },
-        // @if CK_DEBUG_STICKYPANEL // 		'Visible anc'
-        // @if CK_DEBUG_STICKYPANEL // 	);
-        // @if CK_DEBUG_STICKYPANEL // }
-        // @if CK_DEBUG_STICKYPANEL //
-        // @if CK_DEBUG_STICKYPANEL // RectDrawer.draw( limiterRect,
-        // @if CK_DEBUG_STICKYPANEL // 	{ outlineWidth: '3px', opacity: '.8', outlineColor: 'green', outlineOffset: '-3px' },
-        // @if CK_DEBUG_STICKYPANEL // 	'Limiter'
-        // @if CK_DEBUG_STICKYPANEL // );
+        limiterRect.moveBy(visualViewportOffsetLeft, visualViewportOffsetTop);
+        if (visibleLimiterRect) {
+            visibleLimiterRect.moveBy(visualViewportOffsetLeft, visualViewportOffsetTop);
+        }
         // Stick the panel only if
         // * 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) {
-            // @if CK_DEBUG_STICKYPANEL // RectDrawer.draw( visibleLimiterRect,
-            // @if CK_DEBUG_STICKYPANEL // 	{ outlineWidth: '3px', opacity: '.8', outlineColor: 'fuchsia', outlineOffset: '-3px',
-            // @if CK_DEBUG_STICKYPANEL // 		backgroundColor: 'rgba(255, 0, 255, .3)' },
-            // @if CK_DEBUG_STICKYPANEL // 	'Visible limiter'
-            // @if CK_DEBUG_STICKYPANEL // );
             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) {
                 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 // );
                 // 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.
-                if (limiterRect.bottom - stickyBottomOffset > limiterRect.top + this._contentPanelRect.height) {
+                // Adding 1 avoids rounding problems and toolbar flickering when offset almost equals the height.
+                if (limiterRect.bottom - stickyBottomOffset > limiterRect.top + this._contentPanelRect.height + 1) {
                     this._stickToBottomOfLimiter(stickyBottomOffset);
                 } else {
                     this._unstick();
                 }
+            } else if (this._contentPanelRect.height + this.limiterBottomOffset < limiterRect.height) {
+                this._stickToTopOfAncestors(visibleLimiterTop);
             } else {
-                if (this._contentPanelRect.height + this.limiterBottomOffset < limiterRect.height) {
-                    this._stickToTopOfAncestors(visibleLimiterTop);
-                } else {
-                    this._unstick();
-                }
+                this._unstick();
             }
         } else {
             this._unstick();
@@ -15732,14 +15724,6 @@ const toPx$3 = /* #__PURE__ */ toUnit('px');
     // @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)' },
-    // @if CK_DEBUG_STICKYPANEL // 		'visibleLimiterRect'
-    // @if CK_DEBUG_STICKYPANEL // 	);
-    // @if CK_DEBUG_STICKYPANEL // }
     }
     /**
 	 * Sticks the panel at the given CSS `top` offset.
@@ -15751,7 +15735,7 @@ const toPx$3 = /* #__PURE__ */ toUnit('px');
         this._isStickyToTheBottomOfLimiter = false;
         this._stickyTopOffset = topOffset;
         this._stickyBottomOffset = null;
-        this._marginLeft = toPx$3(-global.window.scrollX);
+        this._marginLeft = toPx$3(-global.window.scrollX + this._getVisualViewportOffset().left);
     }
     /**
 	 * Sticks the panel at the bottom of the limiter with a given CSS `bottom` offset.
@@ -15763,7 +15747,7 @@ const toPx$3 = /* #__PURE__ */ toUnit('px');
         this._isStickyToTheBottomOfLimiter = true;
         this._stickyTopOffset = null;
         this._stickyBottomOffset = stickyBottomOffset;
-        this._marginLeft = toPx$3(-global.window.scrollX);
+        this._marginLeft = toPx$3(-global.window.scrollX + this._getVisualViewportOffset().left);
     }
     /**
 	 * Unsticks the panel putting it back to its original position.
@@ -15783,6 +15767,23 @@ const toPx$3 = /* #__PURE__ */ toUnit('px');
 	 */ 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
+        };
+    }
 }
 
 /**