Move the CKEditor overlays into the page overlay container

See https://www.woltlab.com/community/thread/300815-ckeditor-link-menu-non-functional-in-ckeditor-instances-in-a-dialog/
See ckeditor/ckeditor#14747

ts/WoltLabSuite/Core/Component/Ckeditor.ts

@@ -26,6 +26,7 @@ import { element as scrollToElement } from "../Ui/Scroll";
 import Devtools from "../Devtools";
 import { ClassicEditor, CodeBlockConfig, EditorConfig, Element as CkeElement } from "./Ckeditor/Types";
 import { setupSubmitShortcut } from "./Ckeditor/Keyboard";
+import { setup as setupLayer } from "./Ckeditor/Layer";
 
 const instances = new WeakMap<HTMLElement, CKEditor>();
 
@@ -238,6 +239,8 @@ export async function setupCkeditor(
     throw new TypeError(`Cannot initialize the editor for '${element.id}' twice.`);
   }
 
+  setupLayer();
+
   const injectedStylesheet = injectCss();
 
   await Promise.all([

ts/WoltLabSuite/Core/Component/Ckeditor/Layer.ts

@@ -0,0 +1,50 @@
+/**
+ * Moves CKEditor’s overlay elements into the page overlay container. This
+ * preserves their functionality when the editor appears within a native
+ * `<dialog>` element.
+ * 
+ * See https://github.com/ckeditor/ckeditor5/issues/14747
+ *
+ * @author Alexander Ebert
+ * @copyright 2001-2023 WoltLab GmbH
+ * @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @since 6.0
+ * @woltlabExcludeBundle tiny
+ */
+
+import { getPageOverlayContainer } from "../../Helper/PageOverlay";
+
+const targetClassNames = ["ck-body-wrapper", "ck-inspector-wrapper", "ck-inspector-portal"];
+
+function setupWatcher(): void {
+  const observer = new MutationObserver((mutations) => {
+    for (const mutation of mutations) {
+      for (const node of mutation.addedNodes) {
+        if (!(node instanceof HTMLElement)) {
+          continue;
+        }
+
+        for (const className of targetClassNames) {
+          if (node.classList.contains(className)) {
+            getPageOverlayContainer().append(node);
+
+            continue;
+          }
+        }
+      }
+    }
+  });
+  observer.observe(document.body, {
+    childList: true,
+  });
+}
+
+let hasWatcher = false;
+export function setup(): void {
+  if (hasWatcher) {
+    return;
+  }
+
+  hasWatcher = true;
+  setupWatcher();
+}

ts/WoltLabSuite/Core/Ui/Dialog.ts

@@ -25,6 +25,7 @@ import * as EventHandler from "../Event/Handler";
 import { AjaxCallbackSetup } from "../Ajax/Data";
 import CloseOverlay from "./CloseOverlay";
 import { createFocusTrap } from "focus-trap";
+import { adoptPageOverlayContainer, releasePageOverlayContainer } from "../Helper/PageOverlay";
 
 let _activeDialog: string | null = null;
 let _container: HTMLElement;
@@ -285,6 +286,8 @@ const UiDialog = {
       }, 200);
     }
 
+    adoptPageOverlayContainer(data.dialog);
+
     return data;
   },
 
@@ -811,6 +814,7 @@ const UiDialog = {
       }
     }
 
+    releasePageOverlayContainer(data.dialog);
     UiScreen.pageOverlayClose();
 
     if (_activeDialog === null) {