Add an event when the editor data has changed

diff --git a/ts/WoltLabSuite/Core/Component/Ckeditor.ts b/ts/WoltLabSuite/Core/Component/Ckeditor.ts
index 45a55d3fbdf676ae57dafab66cf550e2b67931d7..d48ebf42460728a25213cc8a303fc3beb6dcf560 100644 (file)
--- a/ts/WoltLabSuite/Core/Component/Ckeditor.ts
+++ b/ts/WoltLabSuite/Core/Component/Ckeditor.ts
@@ -259,6 +259,12 @@ function hasToolbarButton(items: CKEditor5.Core.ToolbarConfigItem[], name: strin
   return false;
 }
 
+function notifyOfDataChanges(editor: CKEditor5.ClassicEditor.ClassicEditor, element: HTMLElement): void {
+  editor.model.document.on("change:data", () => {
+    dispatchToCkeditor(element).changeData();
+  });
+}
+
 export async function setupCkeditor(
   element: HTMLElement,
   features: Features,
@@ -320,6 +326,7 @@ export async function setupCkeditor(
   }
 
   setupSubmitShortcut(ckeditor);
+  notifyOfDataChanges(cke, element);
 
   const enableDebug = window.ENABLE_DEBUG_MODE && window.ENABLE_DEVELOPER_TOOLS;
   if (enableDebug && Devtools._internal_.editorInspector()) {

diff --git a/ts/WoltLabSuite/Core/Component/Ckeditor/Event.ts b/ts/WoltLabSuite/Core/Component/Ckeditor/Event.ts
index 8761e8321e2cf9adaaba8b45b9ff4ad1416e7802..fd31fa3b150447be703f2ef127384dabb430e0b4 100644 (file)
--- a/ts/WoltLabSuite/Core/Component/Ckeditor/Event.ts
+++ b/ts/WoltLabSuite/Core/Component/Ckeditor/Event.ts
@@ -19,6 +19,7 @@ import type { CKEditor5 } from "@woltlab/editor";
 const enum EventNames {
   Autosave = "ckeditor5:autosave",
   Bbcode = "ckeditor5:bbcode",
+  ChangeData = "ckeditor5:change-data",
   CollectMetaData = "ckeditor5:collect-meta-data",
   Destroy = "ckeditor5:destroy",
   DiscardRecoveredData = "ckeditor5:discard-recovered-data",
@@ -73,6 +74,10 @@ class EventDispatcher {
     );
   }
 
+  changeData(): void {
+    this.#element.dispatchEvent(new CustomEvent<void>(EventNames.ChangeData));
+  }
+
   destroy(): void {
     this.#element.dispatchEvent(new CustomEvent<void>(EventNames.Destroy));
   }
@@ -192,6 +197,14 @@ class EventListener {
     return this;
   }
 
+  changeData(callback: () => void): this {
+    this.#element.addEventListener(EventNames.ChangeData, () => {
+      callback();
+    });
+
+    return this;
+  }
+
   collectMetaData(callback: (payload: CollectMetaDataEventPayload) => void): this {
     this.#element.addEventListener(EventNames.CollectMetaData, (event: CustomEvent<CollectMetaDataEventPayload>) => {
       callback(event.detail);