From 3b60618d7906f0d2e545df75c74b88d445578001 Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Mon, 22 Jan 2024 13:15:15 +0100
Subject: [PATCH] Add an event when the editor data has changed

---
 ts/WoltLabSuite/Core/Component/Ckeditor.ts       |  7 +++++++
 ts/WoltLabSuite/Core/Component/Ckeditor/Event.ts | 13 +++++++++++++
 2 files changed, 20 insertions(+)

diff --git a/ts/WoltLabSuite/Core/Component/Ckeditor.ts b/ts/WoltLabSuite/Core/Component/Ckeditor.ts
index 45a55d3fbd..d48ebf4246 100644
--- 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 8761e8321e..fd31fa3b15 100644
--- 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);
-- 
2.20.1