Extract the CKEditor 5 styles into a static stylesheet

WoltLab · Aug 4, 2023 · 5300596 · 5300596
1 parent 33c9fc4
commit 5300596
Show file tree

Hide file tree

Showing 4 changed files with 110 additions and 1 deletion.
diff --git a/ts/WoltLabSuite/Core/Component/Ckeditor.ts b/ts/WoltLabSuite/Core/Component/Ckeditor.ts
@@ -210,6 +210,21 @@ function initializeConfiguration(
   return configuration;
 }
 
+const stylesheetId = "ckeditor5-stylesheet";
+function injectCss(): void {
+  if (document.getElementById(stylesheetId) !== null) {
+    return;
+  }
+
+  const 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);
+}
+
 export async function setupCkeditor(
   element: HTMLElement,
   features: Features,
@@ -220,6 +235,8 @@ export async function setupCkeditor(
     throw new TypeError(`Cannot initialize the editor for '${element.id}' twice.`);
   }
 
+  injectCss();
+
   await import("ckeditor5-bundle");
 
   await new Promise((resolve) => {

diff --git a/wcfsetup/install/files/js/3rdParty/ckeditor/ckeditor5.bundle.js b/wcfsetup/install/files/js/3rdParty/ckeditor/ckeditor5.bundle.js
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Ckeditor.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Ckeditor.js