Wait for the injected stylesheet to load

diff --git a/ts/WoltLabSuite/Core/Component/Ckeditor.ts b/ts/WoltLabSuite/Core/Component/Ckeditor.ts
index 622b75100a9bfc9c3af162f2cd5a695a44dc1862..458164b8347dc3fcd37079e18d3e1d93a4f42b3c 100644 (file)
--- a/ts/WoltLabSuite/Core/Component/Ckeditor.ts
+++ b/ts/WoltLabSuite/Core/Component/Ckeditor.ts
@@ -211,18 +211,21 @@ function initializeConfiguration(
 }
 
 const stylesheetId = "ckeditor5-stylesheet";
-function injectCss(): void {
-  if (document.getElementById(stylesheetId) !== null) {
-    return;
+function injectCss(): HTMLLinkElement | null {
+  let stylesheet = document.getElementById(stylesheetId) as HTMLLinkElement | null;
+  if (stylesheet !== null) {
+    return null;
   }
 
-  const stylesheet = document.createElement("link");
+  stylesheet = document.createElement("link");
   stylesheet.rel = "stylesheet";
   stylesheet.type = "text/css";
   stylesheet.href = `${window.WSC_API_URL}style/ckeditor5.css`;
   stylesheet.id = stylesheetId;
 
   document.head.append(stylesheet);
+
+  return stylesheet;
 }
 
 export async function setupCkeditor(
@@ -235,9 +238,20 @@ export async function setupCkeditor(
     throw new TypeError(`Cannot initialize the editor for '${element.id}' twice.`);
   }
 
-  injectCss();
+  const injectedStylesheet = injectCss();
 
-  await import("ckeditor5-bundle");
+  await Promise.all([
+    new Promise<void>((resolve) => {
+      if (injectedStylesheet === null) {
+        resolve();
+      } else {
+        injectedStylesheet.addEventListener("load", () => {
+          resolve();
+        });
+      }
+    }),
+    import("ckeditor5-bundle"),
+  ]);
 
   await new Promise((resolve) => {
     window.requestAnimationFrame(resolve);

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Ckeditor.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Ckeditor.js
index 60563104f3e295814cde5262f844bf1db52fe31d..6475583d10e77fdd3a375162fcf73acb00c1b5fc 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Ckeditor.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Ckeditor.js
@@ -154,22 +154,36 @@ define(["require", "exports", "tslib", "./Ckeditor/Attachment", "./Ckeditor/Medi
     }
     const stylesheetId = "ckeditor5-stylesheet";
     function injectCss() {
-        if (document.getElementById(stylesheetId) !== null) {
-            return;
+        let stylesheet = document.getElementById(stylesheetId);
+        if (stylesheet !== null) {
+            return null;
         }
-        const stylesheet = document.createElement("link");
+        stylesheet = document.createElement("link");
         stylesheet.rel = "stylesheet";
         stylesheet.type = "text/css";
         stylesheet.href = `${window.WSC_API_URL}style/ckeditor5.css`;
         stylesheet.id = stylesheetId;
         document.head.append(stylesheet);
+        return stylesheet;
     }
     async function setupCkeditor(element, features, bbcodes, codeBlockLanguages) {
         if (instances.has(element)) {
             throw new TypeError(`Cannot initialize the editor for '${element.id}' twice.`);
         }
-        injectCss();
-        await new Promise((resolve_1, reject_1) => { require(["ckeditor5-bundle"], resolve_1, reject_1); }).then(tslib_1.__importStar);
+        const injectedStylesheet = injectCss();
+        await Promise.all([
+            new Promise((resolve) => {
+                if (injectedStylesheet === null) {
+                    resolve();
+                }
+                else {
+                    injectedStylesheet.addEventListener("load", () => {
+                        resolve();
+                    });
+                }
+            }),
+            new Promise((resolve_1, reject_1) => { require(["ckeditor5-bundle"], resolve_1, reject_1); }).then(tslib_1.__importStar),
+        ]);
         await new Promise((resolve) => {
             window.requestAnimationFrame(resolve);
         });