From f00f2ee5e4e6f68903257b106647e3cb60e4f2ba Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Mon, 22 Sep 2025 12:07:44 +0300
Subject: [PATCH] chore(react/type_widget): port notification warning

---
 .../type_widgets/text/CKEditorWithWatchdog.tsx    | 13 +++++++++++--
 .../widgets/type_widgets/text/EditableText.tsx    | 15 +++++++++++++++
 .../src/widgets/type_widgets_old/editable_text.ts | 14 --------------
 3 files changed, 26 insertions(+), 16 deletions(-)

diff --git a/apps/client/src/widgets/type_widgets/text/CKEditorWithWatchdog.tsx b/apps/client/src/widgets/type_widgets/text/CKEditorWithWatchdog.tsx
index 3773c121b..bd1cd2158 100644
--- a/apps/client/src/widgets/type_widgets/text/CKEditorWithWatchdog.tsx
+++ b/apps/client/src/widgets/type_widgets/text/CKEditorWithWatchdog.tsx
@@ -6,9 +6,10 @@ interface CKEditorWithWatchdogProps extends Pick<HTMLProps<HTMLDivElement>, "cla
     isClassicEditor?: boolean;
     watchdogConfig?: WatchdogConfig;
     buildEditorOpts: Omit<BuildEditorOptions, "isClassicEditor">;
+    onNotificationWarning?: (evt: any, data: any) => void;
 }
 
-export default function CKEditorWithWatchdog({ className, tabIndex, isClassicEditor, watchdogConfig, buildEditorOpts }: CKEditorWithWatchdogProps) {
+export default function CKEditorWithWatchdog({ className, tabIndex, isClassicEditor, watchdogConfig, buildEditorOpts, onNotificationWarning }: CKEditorWithWatchdogProps) {
     const containerRef = useRef<HTMLDivElement>(null);
 
     useEffect(() => {
@@ -16,13 +17,21 @@ export default function CKEditorWithWatchdog({ className, tabIndex, isClassicEdi
         if (!container) return;
         const watchdog = buildWatchdog(!!isClassicEditor, watchdogConfig);
         watchdog.setCreator(async () => {
-            const editor = buildEditor(container, !!isClassicEditor, {
+            const editor = await buildEditor(container, !!isClassicEditor, {
                 ...buildEditorOpts,
                 isClassicEditor: !!isClassicEditor
             });
+
+            if (onNotificationWarning) {
+                editor.plugins.get("Notification").on("show:warning", onNotificationWarning);
+            }
+
             return editor;
         });
+
         watchdog.create(container);
+
+        return () => watchdog.destroy();
     }, []);
 
     return (
diff --git a/apps/client/src/widgets/type_widgets/text/EditableText.tsx b/apps/client/src/widgets/type_widgets/text/EditableText.tsx
index d995cceb5..185d05e17 100644
--- a/apps/client/src/widgets/type_widgets/text/EditableText.tsx
+++ b/apps/client/src/widgets/type_widgets/text/EditableText.tsx
@@ -1,3 +1,4 @@
+import toast from "../../../services/toast";
 import { isMobile } from "../../../services/utils";
 import { useNoteLabel, useTriliumOption } from "../../react/hooks";
 import { TypeWidgetProps } from "../type_widget";
@@ -32,7 +33,21 @@ export default function EditableText({ note }: TypeWidgetProps) {
                     contentLanguage: language ?? null,
                     forceGplLicense: false,
                 }}
+                onNotificationWarning={onNotificationWarning}
             />
         </div>
     )
 }
+
+function onNotificationWarning(data, evt) {
+    const title = data.title;
+    const message = data.message.message;
+
+    if (title && message) {
+        toast.showErrorTitleAndMessage(data.title, data.message.message);
+    } else if (title) {
+        toast.showError(title || message);
+    }
+
+    evt.stop();
+}
diff --git a/apps/client/src/widgets/type_widgets_old/editable_text.ts b/apps/client/src/widgets/type_widgets_old/editable_text.ts
index 921aa1897..5c33a3646 100644
--- a/apps/client/src/widgets/type_widgets_old/editable_text.ts
+++ b/apps/client/src/widgets/type_widgets_old/editable_text.ts
@@ -57,20 +57,6 @@ export default class EditableTextTypeWidget extends AbstractTextTypeWidget {
         this.watchdog.setCreator(async (_, editorConfig) => {
             logInfo("Creating new CKEditor");
 
-            const notificationsPlugin = editor.plugins.get("Notification");
-            notificationsPlugin.on("show:warning", (evt, data) => {
-                const title = data.title;
-                const message = data.message.message;
-
-                if (title && message) {
-                    toast.showErrorTitleAndMessage(data.title, data.message.message);
-                } else if (title) {
-                    toast.showError(title || message);
-                }
-
-                evt.stop();
-            });
-
             if (isClassicEditor) {
                 const $classicToolbarWidget = this.findClassicToolbar();