chore(react/type_widget): port watchdog state change

This commit is contained in:
Elian Doran 2025-09-22 12:13:31 +03:00
parent f00f2ee5e4
commit 1e323de01b
No known key found for this signature in database
4 changed files with 26 additions and 19 deletions

View file

@ -7,9 +7,10 @@ interface CKEditorWithWatchdogProps extends Pick<HTMLProps<HTMLDivElement>, "cla
watchdogConfig?: WatchdogConfig; watchdogConfig?: WatchdogConfig;
buildEditorOpts: Omit<BuildEditorOptions, "isClassicEditor">; buildEditorOpts: Omit<BuildEditorOptions, "isClassicEditor">;
onNotificationWarning?: (evt: any, data: any) => void; 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); const containerRef = useRef<HTMLDivElement>(null);
useEffect(() => { useEffect(() => {
@ -29,6 +30,10 @@ export default function CKEditorWithWatchdog({ className, tabIndex, isClassicEdi
return editor; return editor;
}); });
if (onWatchdogStateChange) {
watchdog.on("stateChange", () => onWatchdogStateChange(watchdog));
}
watchdog.create(container); watchdog.create(container);
return () => watchdog.destroy(); return () => watchdog.destroy();

View file

@ -1,9 +1,11 @@
import dialog from "../../../services/dialog";
import toast from "../../../services/toast"; import toast from "../../../services/toast";
import { isMobile } from "../../../services/utils"; import { isMobile } from "../../../services/utils";
import { useNoteLabel, useTriliumOption } from "../../react/hooks"; import { useNoteLabel, useTriliumOption } from "../../react/hooks";
import { TypeWidgetProps } from "../type_widget"; import { TypeWidgetProps } from "../type_widget";
import CKEditorWithWatchdog from "./CKEditorWithWatchdog"; import CKEditorWithWatchdog from "./CKEditorWithWatchdog";
import "./EditableText.css"; import "./EditableText.css";
import type { EditorWatchdog } from "@triliumnext/ckeditor5";
/** /**
* The editor can operate into two distinct modes: * The editor can operate into two distinct modes:
@ -34,11 +36,28 @@ export default function EditableText({ note }: TypeWidgetProps) {
forceGplLicense: false, forceGplLicense: false,
}} }}
onNotificationWarning={onNotificationWarning} onNotificationWarning={onNotificationWarning}
onWatchdogStateChange={onWatchdogStateChange}
/> />
</div> </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) { function onNotificationWarning(data, evt) {
const title = data.title; const title = data.title;
const message = data.message.message; const message = data.message.message;

View file

@ -37,23 +37,6 @@ export default class EditableTextTypeWidget extends AbstractTextTypeWidget {
} }
async initEditor() { 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) => { this.watchdog.setCreator(async (_, editorConfig) => {
logInfo("Creating new CKEditor"); logInfo("Creating new CKEditor");

View file

@ -5,7 +5,7 @@ import { BalloonEditor, DecoupledEditor, FindAndReplaceEditing, FindCommand } fr
import "./translation_overrides.js"; import "./translation_overrides.js";
export { EditorWatchdog } from "ckeditor5"; export { EditorWatchdog } from "ckeditor5";
export { PREMIUM_PLUGINS } from "./plugins.js"; 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 type { TemplateDefinition } from "ckeditor5-premium-features";
export { default as buildExtraCommands } from "./extra_slash_commands.js"; export { default as buildExtraCommands } from "./extra_slash_commands.js";