Use the new CKEditor5 BBCode event API

diff --git a/ts/WoltLabSuite/Core/Media/Manager/Base.ts b/ts/WoltLabSuite/Core/Media/Manager/Base.ts
index 8b6989d588fa0d95b4cb961af2b6389ca1e293e8..03357f96e1c9da4c3c0a7bfd28f85313c8f61019 100644 (file)
--- a/ts/WoltLabSuite/Core/Media/Manager/Base.ts
+++ b/ts/WoltLabSuite/Core/Media/Manager/Base.ts
@@ -106,8 +106,8 @@ abstract class MediaManager<TOptions extends MediaManagerOptions = MediaManagerO
   /**
    * Handles clicks on the media manager button.
    */
-  protected _click(event: Event): void {
-    event.preventDefault();
+  protected _click(event?: Event): void {
+    event?.preventDefault();
 
     UiDialog.open(this);
   }

diff --git a/ts/WoltLabSuite/Core/Media/Manager/Editor.ts b/ts/WoltLabSuite/Core/Media/Manager/Editor.ts
index 539954414bec58e169854b99abc23d03bcb35010..1a350b797c4fb5f4092db3bb0f4f09f731694a1b 100644 (file)
--- a/ts/WoltLabSuite/Core/Media/Manager/Editor.ts
+++ b/ts/WoltLabSuite/Core/Media/Manager/Editor.ts
@@ -37,20 +37,18 @@ export class MediaManagerEditor extends MediaManager<MediaManagerEditorOptions>
 
     this._forceClipboard = true;
 
-    this._options.ckeditor?.sourceElement.addEventListener(
-      "ckeditor5:bbcode",
-      (event: CustomEvent<{ bbcode: string }>) => {
-        const { bbcode } = event.detail;
-        if (bbcode === "media") {
-          event.preventDefault();
-
-          this._click(event);
-        }
-      },
-    );
-
     if (this._options.ckeditor !== undefined) {
       const ckeditor = this._options.ckeditor;
+      listenToCkeditor(ckeditor.sourceElement).bbcode(({ bbcode }) => {
+        if (bbcode !== "media") {
+          return false;
+        }
+
+        this._click();
+
+        return true;
+      });
+
       if (!ckeditor.features.attachment) {
         listenToCkeditor(ckeditor.sourceElement).uploadMedia((payload) => {
           this._editorUpload(payload);

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Media/Manager/Base.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Media/Manager/Base.js
index 3649ebef334c03cfac229f8c1513044dd2e33f09..2ceb6f575e90dbcb01ed7be2ae1f97d46a568268 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Media/Manager/Base.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Media/Manager/Base.js
@@ -75,7 +75,7 @@ define(["require", "exports", "tslib", "../../Core", "../../Language", "../../Pe
          * Handles clicks on the media manager button.
          */
         _click(event) {
-            event.preventDefault();
+            event?.preventDefault();
             UiDialog.open(this);
         }
         /**

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Media/Manager/Editor.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Media/Manager/Editor.js
index 08e868cef6c2e4000e57a25dcf415b48bfbfb455..054801ee859f7262907bba32a095a5a5e4497bc1 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Media/Manager/Editor.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Media/Manager/Editor.js
@@ -29,15 +29,15 @@ define(["require", "exports", "tslib", "./Base", "../../Core", "../../Event/Hand
             }, options);
             super(options);
             this._forceClipboard = true;
-            this._options.ckeditor?.sourceElement.addEventListener("ckeditor5:bbcode", (event) => {
-                const { bbcode } = event.detail;
-                if (bbcode === "media") {
-                    event.preventDefault();
-                    this._click(event);
-                }
-            });
             if (this._options.ckeditor !== undefined) {
                 const ckeditor = this._options.ckeditor;
+                (0, Event_1.listenToCkeditor)(ckeditor.sourceElement).bbcode(({ bbcode }) => {
+                    if (bbcode !== "media") {
+                        return false;
+                    }
+                    this._click();
+                    return true;
+                });
                 if (!ckeditor.features.attachment) {
                     (0, Event_1.listenToCkeditor)(ckeditor.sourceElement).uploadMedia((payload) => {
                         this._editorUpload(payload);