Use Vite to build CKEditor v48.0.0

Author: dtdesign

app.ts

@@ -1,35 +1,95 @@
 /**
  * @author Alexander Ebert
- * @copyright 2001-2023 WoltLab GmbH
+ * @copyright 2001-2026 WoltLab GmbH
  * @license LGPL-2.1-or-later
- * @since 6.0
  */
 
-import { ImageInsertConfig } from "@ckeditor/ckeditor5-image/src/imageconfig";
+// These are the core styles of CKEditor5 that must be imported first and in
+// this exact order.
+import "@ckeditor/ckeditor5-ui/dist/index.css";
+import "@ckeditor/ckeditor5-clipboard/dist/index.css";
+import "@ckeditor/ckeditor5-core/dist/index.css";
+import "@ckeditor/ckeditor5-engine/dist/index.css";
+import "@ckeditor/ckeditor5-enter/dist/index.css";
+import "@ckeditor/ckeditor5-paragraph/dist/index.css";
+import "@ckeditor/ckeditor5-select-all/dist/index.css";
+import "@ckeditor/ckeditor5-typing/dist/index.css";
+import "@ckeditor/ckeditor5-undo/dist/index.css";
+import "@ckeditor/ckeditor5-upload/dist/index.css";
+import "@ckeditor/ckeditor5-utils/dist/index.css";
+import "@ckeditor/ckeditor5-watchdog/dist/index.css";
+import "@ckeditor/ckeditor5-widget/dist/index.css";
+
+// CSS of plugins of CKEditor come first to allow us to customize them with out
+// own plugins that are imported through the `modules.ts`.
+import "@ckeditor/ckeditor5-alignment/dist/index.css";
+import "@ckeditor/ckeditor5-autosave/dist/index.css";
+import "@ckeditor/ckeditor5-basic-styles/dist/index.css";
+import "@ckeditor/ckeditor5-block-quote/dist/index.css";
+import "@ckeditor/ckeditor5-code-block/dist/index.css";
+import "@ckeditor/ckeditor5-editor-classic/dist/index.css";
+import "@ckeditor/ckeditor5-emoji/dist/index.css";
+import "@ckeditor/ckeditor5-essentials/dist/index.css";
+import "@ckeditor/ckeditor5-font/dist/index.css";
+import "@ckeditor/ckeditor5-heading/dist/index.css";
+import "@ckeditor/ckeditor5-highlight/dist/index.css";
+import "@ckeditor/ckeditor5-horizontal-line/dist/index.css";
+import "@ckeditor/ckeditor5-html-embed/dist/index.css";
+import "@ckeditor/ckeditor5-icons/dist/index.css";
+import "@ckeditor/ckeditor5-image/dist/index.css";
+import "@ckeditor/ckeditor5-link/dist/index.css";
+import "@ckeditor/ckeditor5-list/dist/index.css";
+import "@ckeditor/ckeditor5-markdown-gfm/dist/index.css";
+import "@ckeditor/ckeditor5-mention/dist/index.css";
+import "@ckeditor/ckeditor5-paste-from-office/dist/index.css";
+import "@ckeditor/ckeditor5-remove-format/dist/index.css";
+import "@ckeditor/ckeditor5-restricted-editing/dist/index.css";
+import "@ckeditor/ckeditor5-style/dist/index.css";
+import "@ckeditor/ckeditor5-table/dist/index.css";
+
 import {
   Alignment,
   Autosave,
-  BasicStyles,
   BlockQuote,
+  Bold,
   ClassicEditor,
+  Code,
   CodeBlock,
-  Core,
+  EditorConfig,
   Essentials,
-  Font,
+  FontColor,
+  FontFamily,
+  FontSize,
   Heading,
   Highlight,
   HorizontalLine,
   HtmlEmbed,
-  Icons,
+  IconObjectLeft,
   Image,
+  ImageInsertConfig,
+  ImageInsertUI,
+  ImageInsertViaUrl,
+  ImageResizeEditing,
+  ImageResizeHandles,
+  ImageStyle,
+  ImageToolbar,
+  ImageUpload,
+  ImageUploadUI,
   Indent,
+  Italic,
   Link,
+  LinkImage,
   List,
   Mention,
   Paragraph,
   PasteFromOffice,
   RemoveFormat,
+  Strikethrough,
+  Subscript,
+  Superscript,
   Table,
+  TableToolbar,
+  Underline,
   Undo,
   WoltlabAttachment,
   WoltlabAutoLink,
@@ -52,52 +112,52 @@ import {
   WoltlabUpload,
 } from "./modules";
 
-const defaultConfig: Core.EditorConfig = {
+const defaultConfig: EditorConfig = {
   plugins: [
     // Internals
-    Autosave.Autosave,
-    Essentials.Essentials,
-    Indent.Indent,
-    Mention.Mention,
-    Paragraph.Paragraph,
-    PasteFromOffice.PasteFromOffice,
-    Undo.Undo,
+    Autosave,
+    Essentials,
+    Indent,
+    Mention,
+    Paragraph,
+    PasteFromOffice,
+    Undo,
 
     // Formatting
-    Alignment.Alignment,
-    BasicStyles.Bold,
-    BasicStyles.Code,
-    Font.FontColor,
-    Font.FontFamily,
-    Font.FontSize,
-    Heading.Heading,
-    Highlight.Highlight,
-    BasicStyles.Italic,
-    RemoveFormat.RemoveFormat,
-    BasicStyles.Strikethrough,
-    BasicStyles.Subscript,
-    BasicStyles.Superscript,
-    BasicStyles.Underline,
+    Alignment,
+    Bold,
+    Code,
+    FontColor,
+    FontFamily,
+    FontSize,
+    Heading,
+    Highlight,
+    Italic,
+    RemoveFormat,
+    Strikethrough,
+    Subscript,
+    Superscript,
+    Underline,
 
     // Components
-    BlockQuote.BlockQuote,
-    CodeBlock.CodeBlock,
-    HtmlEmbed.HtmlEmbed,
-    HorizontalLine.HorizontalLine,
-    Image.Image,
-    Image.ImageInsertUI,
-    Image.ImageInsertViaUrl,
-    Image.ImageToolbar,
-    Image.ImageResizeEditing,
-    Image.ImageResizeHandles,
-    Image.ImageStyle,
-    Image.ImageUpload,
-    Image.ImageUploadUI,
-    Link.Link,
-    Link.LinkImage,
-    List.List,
-    Table.Table,
-    Table.TableToolbar,
+    BlockQuote,
+    CodeBlock,
+    HtmlEmbed,
+    HorizontalLine,
+    Image,
+    ImageInsertUI,
+    ImageInsertViaUrl,
+    ImageToolbar,
+    ImageResizeEditing,
+    ImageResizeHandles,
+    ImageStyle,
+    ImageUpload,
+    ImageUploadUI,
+    Link,
+    LinkImage,
+    List,
+    Table,
+    TableToolbar,
 
     // WoltLab
     WoltlabAttachment.WoltlabAttachment,
@@ -124,9 +184,10 @@ const defaultConfig: Core.EditorConfig = {
 
 export async function create(
   element: HTMLElement,
-  configuration: Core.EditorConfig,
-): Promise<ClassicEditor.ClassicEditor> {
+  configuration: EditorConfig,
+): Promise<ClassicEditor> {
   configuration = Object.assign(configuration, defaultConfig);
+  configuration.attachTo = element;
 
   const removePlugins = configuration.removePlugins || [];
   if (!removePlugins.includes("Image")) {
@@ -153,7 +214,7 @@ export async function create(
           {
             name: "sideLeft",
             title: "Left aligned image",
-            icon: Icons.IconObjectLeft,
+            icon: IconObjectLeft,
             modelElements: ["imageBlock"],
             className: "image-style-side-left",
           },
@@ -174,10 +235,7 @@ export async function create(
     };
   }
 
-  const editor = await ClassicEditor.ClassicEditor.create(
-    element,
-    configuration,
-  );
+  const editor = await ClassicEditor.create(configuration);
 
   return editor;
 }

modules.ts

@@ -1,38 +1,4 @@
-export * as Alignment from "@ckeditor/ckeditor5-alignment";
-export * as Autosave from "@ckeditor/ckeditor5-autosave";
-export * as BasicStyles from "@ckeditor/ckeditor5-basic-styles";
-export * as BlockQuote from "@ckeditor/ckeditor5-block-quote";
-export * as ClassicEditor from "@ckeditor/ckeditor5-editor-classic";
-export * as Clipboard from "@ckeditor/ckeditor5-clipboard";
-export * as CodeBlock from "@ckeditor/ckeditor5-code-block";
-export * as Core from "@ckeditor/ckeditor5-core";
-export * as Editor from "@ckeditor/ckeditor5-editor-classic";
-export * as Engine from "@ckeditor/ckeditor5-engine";
-export * as Enter from "@ckeditor/ckeditor5-enter";
-export * as Essentials from "@ckeditor/ckeditor5-essentials";
-export * as Font from "@ckeditor/ckeditor5-font";
-export * as Heading from "@ckeditor/ckeditor5-heading";
-export * as Highlight from "@ckeditor/ckeditor5-highlight";
-export * as HorizontalLine from "@ckeditor/ckeditor5-horizontal-line";
-export * as HtmlEmbed from "@ckeditor/ckeditor5-html-embed";
-export * as Icons from "@ckeditor/ckeditor5-icons";
-export * as Image from "@ckeditor/ckeditor5-image";
-export * as Indent from "@ckeditor/ckeditor5-indent";
-export * as Language from "@ckeditor/ckeditor5-language";
-export * as Link from "@ckeditor/ckeditor5-link";
-export * as List from "@ckeditor/ckeditor5-list";
-export * as Mention from "@ckeditor/ckeditor5-mention";
-export * as Paragraph from "@ckeditor/ckeditor5-paragraph";
-export * as PasteFromOffice from "@ckeditor/ckeditor5-paste-from-office";
-export * as RemoveFormat from "@ckeditor/ckeditor5-remove-format";
-export * as SelectAll from "@ckeditor/ckeditor5-select-all";
-export * as Table from "@ckeditor/ckeditor5-table";
-export * as Typing from "@ckeditor/ckeditor5-typing";
-export * as Ui from "@ckeditor/ckeditor5-ui";
-export * as Undo from "@ckeditor/ckeditor5-undo";
-export * as Upload from "@ckeditor/ckeditor5-upload";
-export * as Utils from "@ckeditor/ckeditor5-utils";
-export * as Widget from "@ckeditor/ckeditor5-widget";
+export * from "ckeditor5";
 
 export * as WoltlabAttachment from "./plugins/ckeditor5-woltlab-attachment/src";
 export * as WoltlabAutoLink from "./plugins/ckeditor5-woltlab-autolink/src";