@ckeditor/ckeditor5-ckbox 0.0.0-nightly-20240522.0 → 0.0.0-nightly-20240523.0

package/dist/types/ckboximageedit/ckboximageeditcommand.d.ts

@@ -36,6 +36,14 @@ export default class CKBoxImageEditCommand extends Command {
      * A wrapper function to prepare mount options. Ensures that at most one preparation is in-flight.
      */
     private _prepareOptions;
+    /**
+    * CKBox's onClose function runs before the final cleanup, potentially causing
+    * page layout changes after it finishes. To address this, we use a setTimeout hack
+    * to ensure that floating elements on the page maintain their correct position.
+    *
+    * See: https://github.com/ckeditor/ckeditor5/issues/16153.
+    */
+    private _updateUiDelayed;
     /**
      * @inheritDoc
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-ckbox",
-  "version": "0.0.0-nightly-20240522.0",
+  "version": "0.0.0-nightly-20240523.0",
   "description": "CKBox integration for CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -13,7 +13,7 @@
   "type": "module",
   "main": "src/index.js",
   "dependencies": {
-    "ckeditor5": "0.0.0-nightly-20240522.0",
+    "ckeditor5": "0.0.0-nightly-20240523.0",
     "blurhash": "2.0.5",
     "lodash-es": "4.17.21"
   },

package/src/ckboximageedit/ckboximageeditcommand.d.ts

@@ -32,6 +32,14 @@ export default class CKBoxImageEditCommand extends Command {
      * A wrapper function to prepare mount options. Ensures that at most one preparation is in-flight.
      */
     private _prepareOptions;
+    /**
+    * CKBox's onClose function runs before the final cleanup, potentially causing
+    * page layout changes after it finishes. To address this, we use a setTimeout hack
+    * to ensure that floating elements on the page maintain their correct position.
+    *
+    * See: https://github.com/ckeditor/ckeditor5/issues/16153.
+    */
+    private _updateUiDelayed;
     /**
      * @inheritDoc
      */

package/src/ckboximageedit/ckboximageeditcommand.js

@@ -7,7 +7,7 @@
  * @module ckbox/ckboximageedit/ckboximageeditcommand
  */
 import { Command, PendingActions } from 'ckeditor5/src/core.js';
-import { CKEditorError, abortableDebounce, createElement, retry } from 'ckeditor5/src/utils.js';
+import { CKEditorError, abortableDebounce, createElement, retry, delay } from 'ckeditor5/src/utils.js';
 import { Notification } from 'ckeditor5/src/ui.js';
 import { isEqual } from 'lodash-es';
 import { sendHttpRequest } from '../utils.js';
@@ -33,6 +33,14 @@ export default class CKBoxImageEditCommand extends Command {
          * The states of image processing in progress.
          */
         this._processInProgress = new Set();
+        /**
+        * CKBox's onClose function runs before the final cleanup, potentially causing
+        * page layout changes after it finishes. To address this, we use a setTimeout hack
+        * to ensure that floating elements on the page maintain their correct position.
+        *
+        * See: https://github.com/ckeditor/ckeditor5/issues/16153.
+        */
+        this._updateUiDelayed = delay(() => this.editor.ui.update(), 0);
         this.value = false;
         this._canEdit = createEditabilityChecker(editor.config.get('ckbox.allowExternalImagesEditing'));
         this._prepareOptions = abortableDebounce((signal, state) => this._prepareOptionsAbortable(signal, state));
@@ -83,6 +91,7 @@ export default class CKBoxImageEditCommand extends Command {
     destroy() {
         this._handleImageEditorClose();
         this._prepareOptions.abort();
+        this._updateUiDelayed.cancel();
         for (const state of this._processInProgress.values()) {
             state.controller.abort();
         }
@@ -170,6 +179,7 @@ export default class CKBoxImageEditCommand extends Command {
         this._wrapper.remove();
         this._wrapper = null;
         this.editor.editing.view.focus();
+        this._updateUiDelayed();
         this.refresh();
     }
     /**