Eagerly inject the CKEditor stylesheet in the template

diff --git a/com.woltlab.wcf/templates/wysiwyg.tpl b/com.woltlab.wcf/templates/wysiwyg.tpl
index b365d2f985383704c51a62f721d78f3add383920..e33b9e36e45b5e232cc81ae94445ff16d61cf902 100644 (file)
--- a/com.woltlab.wcf/templates/wysiwyg.tpl
+++ b/com.woltlab.wcf/templates/wysiwyg.tpl
@@ -2,6 +2,20 @@
 
 {event name='wysiwyg'}
 
+<script data-eager="true">
+{
+       let stylesheet = document.getElementById("ckeditor5-stylesheet");
+       if (stylesheet === null) {
+               stylesheet = document.createElement("link");
+               stylesheet.rel = "stylesheet";
+               stylesheet.type = "text/css";
+               stylesheet.href = "{$__wcf->getPath()}style/ckeditor5.css";
+               stylesheet.id = "ckeditor5-stylesheet";
+
+               document.head.append(stylesheet);
+       }
+}
+</script>
 <script data-relocate="true">
        require([
                "WoltLabSuite/Core/Component/Ckeditor",

diff --git a/ts/WoltLabSuite/Core/Component/Ckeditor.ts b/ts/WoltLabSuite/Core/Component/Ckeditor.ts
index f83b2cee9474eb2091d11d4631ab59d61eccac1f..2a65989e9c7db62a118f82e9a64f8454a4ba10ae 100644 (file)
--- a/ts/WoltLabSuite/Core/Component/Ckeditor.ts
+++ b/ts/WoltLabSuite/Core/Component/Ckeditor.ts
@@ -211,24 +211,6 @@ function initializeConfiguration(
   return configuration;
 }
 
-const stylesheetId = "ckeditor5-stylesheet";
-function injectCss(): HTMLLinkElement | null {
-  let stylesheet = document.getElementById(stylesheetId) as HTMLLinkElement | null;
-  if (stylesheet !== null) {
-    return null;
-  }
-
-  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(
   element: HTMLElement,
   features: Features,
@@ -241,20 +223,7 @@ export async function setupCkeditor(
 
   setupLayer();
 
-  const injectedStylesheet = injectCss();
-
-  await Promise.all([
-    new Promise<void>((resolve) => {
-      if (injectedStylesheet === null) {
-        resolve();
-      } else {
-        injectedStylesheet.addEventListener("load", () => {
-          resolve();
-        });
-      }
-    }),
-    import("ckeditor5-bundle"),
-  ]);
+  await import("ckeditor5-bundle");
 
   await new Promise((resolve) => {
     window.requestAnimationFrame(resolve);

diff --git a/wcfsetup/install/files/acp/templates/wysiwyg.tpl b/wcfsetup/install/files/acp/templates/wysiwyg.tpl
index b365d2f985383704c51a62f721d78f3add383920..e33b9e36e45b5e232cc81ae94445ff16d61cf902 100644 (file)
--- a/wcfsetup/install/files/acp/templates/wysiwyg.tpl
+++ b/wcfsetup/install/files/acp/templates/wysiwyg.tpl
@@ -2,6 +2,20 @@
 
 {event name='wysiwyg'}
 
+<script data-eager="true">
+{
+       let stylesheet = document.getElementById("ckeditor5-stylesheet");
+       if (stylesheet === null) {
+               stylesheet = document.createElement("link");
+               stylesheet.rel = "stylesheet";
+               stylesheet.type = "text/css";
+               stylesheet.href = "{$__wcf->getPath()}style/ckeditor5.css";
+               stylesheet.id = "ckeditor5-stylesheet";
+
+               document.head.append(stylesheet);
+       }
+}
+</script>
 <script data-relocate="true">
        require([
                "WoltLabSuite/Core/Component/Ckeditor",

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Ckeditor.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Ckeditor.js
index 3725c0c5b741e904cfbb92a2a42ed4e7939de499..dee83237cc3e69f96418392502d957a2421aa65a 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Ckeditor.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Ckeditor.js
@@ -152,39 +152,12 @@ define(["require", "exports", "tslib", "./Ckeditor/Attachment", "./Ckeditor/Medi
         }
         return configuration;
     }
-    const stylesheetId = "ckeditor5-stylesheet";
-    function injectCss() {
-        let stylesheet = document.getElementById(stylesheetId);
-        if (stylesheet !== null) {
-            return null;
-        }
-        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.`);
         }
         (0, Layer_1.setup)();
-        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_1, reject_1) => { require(["ckeditor5-bundle"], resolve_1, reject_1); }).then(tslib_1.__importStar);
         await new Promise((resolve) => {
             window.requestAnimationFrame(resolve);
         });