From 1e323de01b3e03f656f1516073943abbf8a1d102 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Mon, 22 Sep 2025 12:13:31 +0300
Subject: [PATCH] chore(react/type_widget): port watchdog state change

---
 .../text/CKEditorWithWatchdog.tsx             |  7 ++++++-
 .../type_widgets/text/EditableText.tsx        | 19 +++++++++++++++++++
 .../widgets/type_widgets_old/editable_text.ts | 17 -----------------
 packages/ckeditor5/src/index.ts               |  2 +-
 4 files changed, 26 insertions(+), 19 deletions(-)

diff --git a/apps/client/src/widgets/type_widgets/text/CKEditorWithWatchdog.tsx b/apps/client/src/widgets/type_widgets/text/CKEditorWithWatchdog.tsx
index bd1cd2158..61fcd5d15 100644
--- a/apps/client/src/widgets/type_widgets/text/CKEditorWithWatchdog.tsx
+++ b/apps/client/src/widgets/type_widgets/text/CKEditorWithWatchdog.tsx
@@ -7,9 +7,10 @@ interface CKEditorWithWatchdogProps extends Pick<HTMLProps<HTMLDivElement>, "cla
     watchdogConfig?: WatchdogConfig;
     buildEditorOpts: Omit<BuildEditorOptions, "isClassicEditor">;
     onNotificationWarning?: (evt: any, data: any) => void;
+    onWatchdogStateChange?: (watchdog: EditorWatchdog<any>) => void;
 }
 
-export default function CKEditorWithWatchdog({ className, tabIndex, isClassicEditor, watchdogConfig, buildEditorOpts, onNotificationWarning }: CKEditorWithWatchdogProps) {
+export default function CKEditorWithWatchdog({ className, tabIndex, isClassicEditor, watchdogConfig, buildEditorOpts, onNotificationWarning, onWatchdogStateChange }: CKEditorWithWatchdogProps) {
     const containerRef = useRef<HTMLDivElement>(null);
 
     useEffect(() => {
@@ -29,6 +30,10 @@ export default function CKEditorWithWatchdog({ className, tabIndex, isClassicEdi
             return editor;
         });
 
+        if (onWatchdogStateChange) {
+            watchdog.on("stateChange", () => onWatchdogStateChange(watchdog));
+        }
+
         watchdog.create(container);
 
         return () => watchdog.destroy();
diff --git a/apps/client/src/widgets/type_widgets/text/EditableText.tsx b/apps/client/src/widgets/type_widgets/text/EditableText.tsx
index 185d05e17..e74c265bd 100644
--- a/apps/client/src/widgets/type_widgets/text/EditableText.tsx
+++ b/apps/client/src/widgets/type_widgets/text/EditableText.tsx
@@ -1,9 +1,11 @@
+import dialog from "../../../services/dialog";
 import toast from "../../../services/toast";
 import { isMobile } from "../../../services/utils";
 import { useNoteLabel, useTriliumOption } from "../../react/hooks";
 import { TypeWidgetProps } from "../type_widget";
 import CKEditorWithWatchdog from "./CKEditorWithWatchdog";
 import "./EditableText.css";
+import type { EditorWatchdog } from "@triliumnext/ckeditor5";
 
 /**
  * The editor can operate into two distinct modes:
@@ -34,11 +36,28 @@ export default function EditableText({ note }: TypeWidgetProps) {
                     forceGplLicense: false,
                 }}
                 onNotificationWarning={onNotificationWarning}
+                onWatchdogStateChange={onWatchdogStateChange}
             />
         </div>
     )
 }
 
+function onWatchdogStateChange(watchdog: EditorWatchdog) {
+    const currentState = watchdog.state;
+    logInfo(`CKEditor state changed to ${currentState}`);
+
+    if (!["crashed", "crashedPermanently"].includes(currentState)) {
+        return;
+    }
+
+    logError(`CKEditor crash logs: ${JSON.stringify(watchdog.crashes, null, 4)}`);
+
+    if (currentState === "crashedPermanently") {
+        dialog.info(`Editing component keeps crashing. Please try restarting Trilium. If problem persists, consider creating a bug report.`);
+        watchdog.editor?.enableReadOnlyMode("crashed-editor");
+    }
+}
+
 function onNotificationWarning(data, evt) {
     const title = data.title;
     const message = data.message.message;
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 5c33a3646..6c910a35a 100644
--- a/apps/client/src/widgets/type_widgets_old/editable_text.ts
+++ b/apps/client/src/widgets/type_widgets_old/editable_text.ts
@@ -37,23 +37,6 @@ export default class EditableTextTypeWidget extends AbstractTextTypeWidget {
     }
 
     async initEditor() {
-        this.watchdog.on("stateChange", () => {
-            const currentState = this.watchdog.state;
-            logInfo(`CKEditor state changed to ${currentState}`);
-
-            if (!["crashed", "crashedPermanently"].includes(currentState)) {
-                return;
-            }
-
-            logError(`CKEditor crash logs: ${JSON.stringify(this.watchdog.crashes, null, 4)}`);
-
-            if (currentState === "crashedPermanently") {
-                dialogService.info(`Editing component keeps crashing. Please try restarting Trilium. If problem persists, consider creating a bug report.`);
-
-                this.watchdog.editor?.enableReadOnlyMode("crashed-editor");
-            }
-        });
-
         this.watchdog.setCreator(async (_, editorConfig) => {
             logInfo("Creating new CKEditor");
 
diff --git a/packages/ckeditor5/src/index.ts b/packages/ckeditor5/src/index.ts
index b20fa0db5..1f7be24e4 100644
--- a/packages/ckeditor5/src/index.ts
+++ b/packages/ckeditor5/src/index.ts
@@ -5,7 +5,7 @@ import { BalloonEditor, DecoupledEditor, FindAndReplaceEditing, FindCommand } fr
 import "./translation_overrides.js";
 export { EditorWatchdog } from "ckeditor5";
 export { PREMIUM_PLUGINS } from "./plugins.js";
-export type { EditorConfig, MentionFeed, MentionFeedObjectItem, ModelNode, ModelPosition, ModelElement, WatchdogConfig } from "ckeditor5";
+export type { EditorConfig, MentionFeed, MentionFeedObjectItem, ModelNode, ModelPosition, ModelElement, WatchdogConfig, WatchdogState } from "ckeditor5";
 export type { TemplateDefinition } from "ckeditor5-premium-features";
 export { default as buildExtraCommands } from "./extra_slash_commands.js";