Fix: correctly access TinyMCE instance inside dirty handler.

     Clean up type of the global tinymce object.

Author: bjones1

client/src/CodeChatEditor.mts

@@ -62,7 +62,8 @@ import "./graphviz-webcomponent-setup.mts";
 // This must be imported *after* the previous setup import, so it's placed here,
 // instead of in the third-party category above.
 import "./third-party/graphviz-webcomponent/graph.js";
-import { tinymce, init, Editor } from "./tinymce-config.mjs";
+import { init, tinymce } from "./tinymce-config.mjs";
+import { Editor, EditorEvent, Events } from "tinymce";
 import {
     CodeChatForWeb,
     CodeMirrorDiffable,
@@ -247,11 +248,17 @@ const _open_lp = async (
                 // [handling editor events](https://www.tiny.cloud/docs/tinymce/6/events/#handling-editor-events),
                 // this is how to create a TinyMCE event handler.
                 setup: (editor: Editor) => {
-                    editor.on("dirty", () => {
-                        tinymce.activeEditor!.setDirty(false);
-                        is_dirty = true;
-                        startAutosaveTimer();
-                    });
+                    editor.on(
+                        "dirty",
+                        (
+                            event: EditorEvent<Events.EditorEventMap["dirty"]>,
+                        ) => {
+                            // Sometimes, `tinymce.activeEditor` is null (perhaps when it's not focused). Use the `event` data instead.
+                            event.target.setDirty(false);
+                            is_dirty = true;
+                            startAutosaveTimer();
+                        },
+                    );
                 },
             });
             tinymce.activeEditor!.focus();

client/src/CodeMirror-integration.mts

@@ -82,8 +82,8 @@ import { python } from "@codemirror/lang-python";
 import { rust } from "@codemirror/lang-rust";
 import { sql } from "@codemirror/lang-sql";
 import { yaml } from "@codemirror/lang-yaml";
-import { Editor, init, tinymce } from "./tinymce-config.mjs";
-import { EditorEvent, Events } from "tinymce";
+import { tinymce, init } from "./tinymce-config.mjs";
+import { Editor, EditorEvent, Events } from "tinymce";
 
 // ### Local
 import {
@@ -1035,10 +1035,10 @@ export const CodeMirror_load = async (
                 editor.on(
                     "Dirty",
                     (event: EditorEvent<Events.EditorEventMap["dirty"]>) => {
-                        // Get the div TinyMCE stores edits in. TODO: find
-                        // documentation for `event.target.bodyElement`.
-                        tinymce.activeEditor!.setDirty(false);
-                        const target_or_false = event.target?.bodyElement;
+                        // Sometimes, `tinymce.activeEditor` is null (perhaps when it's not focused). Use the `event` data instead.
+                        event.target.setDirty(false);
+                        // Get the div TinyMCE stores edits in.
+                        const target_or_false = event.target.bodyElement;
                         if (target_or_false == null) {
                             return;
                         }

client/src/tinymce-config.mts

@@ -25,9 +25,10 @@ import {
     RawEditorOptions,
     TinyMCE,
 } from "tinymce";
-// TODO: The type of tinymce is broken; I don't know why. Here's a workaround.
+// This is taken from the [TinyMCE example code](https://github.com/tinymce/tinymce/blob/main/modules/tinymce/src/core/demo/ts/demo/TinyMceDemo.ts). However, esbuild doesn't accept it.
+//export declare const tinymce: TinyMCE;
+// Here's a workaround.
 export const tinymce = tinymce_ as unknown as TinyMCE;
-export { Editor };
 
 // Default icons are required for TinyMCE 5.3 or above.
 import "tinymce/icons/default/index.js";