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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-ui",
-  "version": "45.0.0-alpha.6",
+  "version": "45.0.0-alpha.7",
   "description": "The UI framework and standard UI library of CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -17,11 +17,11 @@
   "type": "module",
   "main": "src/index.js",
   "dependencies": {
-    "@ckeditor/ckeditor5-core": "45.0.0-alpha.6",
-    "@ckeditor/ckeditor5-editor-multi-root": "45.0.0-alpha.6",
-    "@ckeditor/ckeditor5-engine": "45.0.0-alpha.6",
-    "@ckeditor/ckeditor5-icons": "45.0.0-alpha.6",
-    "@ckeditor/ckeditor5-utils": "45.0.0-alpha.6",
+    "@ckeditor/ckeditor5-core": "45.0.0-alpha.7",
+    "@ckeditor/ckeditor5-editor-multi-root": "45.0.0-alpha.7",
+    "@ckeditor/ckeditor5-engine": "45.0.0-alpha.7",
+    "@ckeditor/ckeditor5-icons": "45.0.0-alpha.7",
+    "@ckeditor/ckeditor5-utils": "45.0.0-alpha.7",
     "@types/color-convert": "2.0.4",
     "color-convert": "2.0.1",
     "color-parse": "1.4.2",

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

@@ -153,4 +153,8 @@ export default class StickyPanelView extends View {
      * @private
      */
     private get _contentPanelRect();
+    /**
+     * Sets custom CSS properties to the panel element to make it aware of the visual viewport offset.
+     */
+    private _updateVisualViewport;
 }

package/src/panel/sticky/stickypanelview.js

@@ -113,6 +113,11 @@ export default class StickyPanelView extends View {
         this.listenTo(this, 'change:isActive', () => {
             this.checkIfShouldBeSticky();
         });
+        if (global.window.visualViewport) {
+            this.listenTo(global.window.visualViewport, 'scroll', () => this._updateVisualViewport());
+            this.listenTo(global.window.visualViewport, 'resize', () => this._updateVisualViewport());
+            this._updateVisualViewport();
+        }
     }
     /**
      * Analyzes the environment to decide whether the panel should be sticky or not.
@@ -166,7 +171,8 @@ export default class StickyPanelView extends View {
                 // @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 {
@@ -245,4 +251,11 @@ export default class StickyPanelView extends View {
     get _contentPanelRect() {
         return new Rect(this.contentPanelElement);
     }
+    /**
+     * Sets custom CSS properties to the panel element to make it aware of the visual viewport offset.
+     */
+    _updateVisualViewport() {
+        this.element.style.setProperty('--ck-visual-viewport-left', `${global.window.visualViewport.offsetLeft}px`);
+        this.element.style.setProperty('--ck-visual-viewport-top', `${global.window.visualViewport.offsetTop}px`);
+    }
 }

package/theme/components/panel/stickypanel.css

@@ -3,15 +3,22 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
 
+:root {
+	--ck-visual-viewport-left: 0px;
+	--ck-visual-viewport-top: 0px;
+}
+
 .ck.ck-sticky-panel {
 	& .ck-sticky-panel__content_sticky {
 		z-index: var(--ck-z-panel); /* #315 */
 		position: fixed;
 		top: 0;
+		transform: translate(var(--ck-visual-viewport-left, 0px), var(--ck-visual-viewport-top, 0px));
 	}
 
 	& .ck-sticky-panel__content_sticky_bottom-limit {
 		top: auto;
 		position: absolute;
+		transform: none;
 	}
 }