chore(react/type_widget): react to content language changes

apps/client/src/widgets/type_widgets/text/CKEditorWithWatchdog.tsx

@@ -1,20 +1,19 @@
 import { HTMLProps, RefObject, useEffect, useRef, useState } from "preact/compat";
 import { PopupEditor, ClassicEditor, EditorWatchdog, type WatchdogConfig, CKTextEditor } from "@triliumnext/ckeditor5";
 import { buildConfig, BuildEditorOptions } from "./config";
-import { Editor } from "tabulator-tables";
 
 interface CKEditorWithWatchdogProps extends Pick<HTMLProps<HTMLDivElement>, "className" | "tabIndex"> {
-    content?: string;
+    content: string | undefined;
+    contentLanguage: string | null | undefined;
     isClassicEditor?: boolean;
     watchdogRef: RefObject<EditorWatchdog>;
     watchdogConfig?: WatchdogConfig;
-    buildEditorOpts: Omit<BuildEditorOptions, "isClassicEditor">;
     onNotificationWarning?: (evt: any, data: any) => void;
     onWatchdogStateChange?: (watchdog: EditorWatchdog<any>) => void;
     onChange: () => void;
 }
 
-export default function CKEditorWithWatchdog({ content, className, tabIndex, isClassicEditor, watchdogRef: externalWatchdogRef, watchdogConfig, buildEditorOpts, onNotificationWarning, onWatchdogStateChange, onChange }: CKEditorWithWatchdogProps) {
+export default function CKEditorWithWatchdog({ content, contentLanguage, className, tabIndex, isClassicEditor, watchdogRef: externalWatchdogRef, watchdogConfig, buildEditorOpts, onNotificationWarning, onWatchdogStateChange, onChange }: CKEditorWithWatchdogProps) {
     const containerRef = useRef<HTMLDivElement>(null);
     const watchdogRef = useRef<EditorWatchdog>(null);
     const [ editor, setEditor ] = useState<CKTextEditor>();
@@ -27,8 +26,9 @@ export default function CKEditorWithWatchdog({ content, className, tabIndex, isC
         externalWatchdogRef.current = watchdog;
         watchdog.setCreator(async () => {
             const editor = await buildEditor(container, !!isClassicEditor, {
-                ...buildEditorOpts,
+                forceGplLicense: false,
-                isClassicEditor: !!isClassicEditor
+                isClassicEditor: !!isClassicEditor,
+                contentLanguage: contentLanguage ?? null
             });
 
             setEditor(editor);
@@ -43,7 +43,7 @@ export default function CKEditorWithWatchdog({ content, className, tabIndex, isC
         watchdog.create(container);
 
         return () => watchdog.destroy();
-    }, []);
+    }, [ contentLanguage ]);
 
     // React to content changes.
     useEffect(() => editor?.setData(content ?? ""), [ editor, content ]);

apps/client/src/widgets/type_widgets/text/EditableText.tsx

@@ -47,6 +47,7 @@ export default function EditableText({ note }: TypeWidgetProps) {
             {note && <CKEditorWithWatchdog
                 className="note-detail-editable-text-editor use-tn-links" tabIndex={300}
                 content={content}
+                contentLanguage={language}
                 isClassicEditor={isClassicEditor}
                 watchdogRef={watchdogRef}
                 watchdogConfig={{
@@ -57,10 +58,6 @@ export default function EditableText({ note }: TypeWidgetProps) {
                     // A minimum number of milliseconds between saving the editor data internally (defaults to 5000). Note that for large documents, this might impact the editor performance.
                     saveInterval: 5000
                 }}
-                buildEditorOpts={{
-                    contentLanguage: language ?? null,
-                    forceGplLicense: false,
-                }}
                 onNotificationWarning={onNotificationWarning}
                 onWatchdogStateChange={onWatchdogStateChange}
                 onChange={() => spacedUpdate.scheduleUpdate()}

apps/client/src/widgets/type_widgets_old/editable_text.ts

@@ -92,18 +92,6 @@ export default class EditableTextTypeWidget extends AbstractTextTypeWidget {
         await this.createEditor();
     }
 
-    async doRefresh(note: FNote) {
-        const blob = await note.getBlob();
-
-        await this.spacedUpdate.allowUpdateWithoutChange(async () => {
-            const data = blob?.content || "";
-            const newContentLanguage = this.note?.getLabelValue("language");
-            if (this.contentLanguage !== newContentLanguage) {
-                await this.reinitializeWithData(data);
-            }
-        });
-    }
-
     focus() {
         const editor = this.watchdog.editor;
         if (editor) {
@@ -130,14 +118,6 @@ export default class EditableTextTypeWidget extends AbstractTextTypeWidget {
         return this.watchdog?.editor;
     }
 
-    cleanup() {
-        if (this.watchdog?.editor) {
-            this.spacedUpdate.allowUpdateWithoutChange(() => {
-                this.watchdog.editor?.setData("");
-            });
-        }
-    }
-
     insertDateTimeToTextCommand() {
         const date = new Date();
         const customDateTimeFormat = options.get("customDateTimeFormat");
@@ -323,16 +303,6 @@ export default class EditableTextTypeWidget extends AbstractTextTypeWidget {
         this.refreshIncludedNote(this.$editor, noteId);
     }
 
-    async reinitializeWithData(data: string) {
-        if (!this.watchdog) {
-            return;
-        }
-
-        this.watchdog.destroy();
-        await this.createEditor();
-        this.watchdog.editor?.setData(data);
-    }
-
     async reinitialize() {
         const data = this.watchdog.editor?.getData();
         await this.reinitializeWithData(data ?? "");
@@ -342,10 +312,6 @@ export default class EditableTextTypeWidget extends AbstractTextTypeWidget {
         await this.reinitialize();
     }
 
-    async onLanguageChanged() {
-        await this.reinitialize();
-    }
-
     async entitiesReloadedEvent(e: EventData<"entitiesReloaded">) {
         await super.entitiesReloadedEvent(e);