monkeypatch tinymce isDirty and setDirty, fix HIX score instantly out…

…dated

integreat_cms/release_notes/current/unreleased/2300.yml

@@ -0,0 +1,2 @@
+en: HIX value is no longer instandly outdated, if only some text was selected
+de: HIX-Wert ist nicht mehr sofort veraltet, wenn Text lediglich ausgewählt wurde

integreat_cms/static/src/js/analytics/hix-widget.ts

@@ -16,6 +16,8 @@ import { getCsrfToken } from "../utils/csrf-token";
 // See https://www.chartjs.org/docs/latest/getting-started/integration.html#bundlers-webpack-rollup-etc for details
 Chart.register(DoughnutController, ArcElement, CategoryScale, LinearScale, Tooltip, Title);
 
+let initialContent: string = null;
+
 const updateChart = (chart: Chart, value: number) => {
     const hixMaxValue = 20;
     const hixThresholdGood = 15;
@@ -78,20 +80,24 @@ const setHixLabelState = (state: string) => {
 const getHixValue = async () => {
     const updateButton = document.getElementById("btn-update-hix-value");
     let result;
+    const sentContent = getContent().trim();
     await fetch(updateButton.dataset.url, {
         method: "POST",
         headers: {
             "X-CSRFToken": getCsrfToken(),
         },
         body: JSON.stringify({
-            text: getContent(),
+            text: sentContent,
         }),
     })
         .then((response) => response.json())
         .then((json) => {
             const labelState = json.error ? "error" : "updated";
             setHixLabelState(labelState);
             result = json.score;
+            if (!json.error) {
+                initialContent = sentContent;
+            }
         });
     return result;
 };
@@ -170,7 +176,9 @@ window.addEventListener("load", async () => {
     };
 
     const initHixValue = async () => {
-        if (!getContent().trim()) {
+        initialContent = getContent().trim();
+
+        if (!initialContent) {
             setHixLabelState("no-content");
             return;
         }
@@ -188,9 +196,19 @@ window.addEventListener("load", async () => {
     document.querySelectorAll("[data-content-changed]").forEach((element) => {
         // make sure initHixValue is called only after tinyMCE is initialized
         element.addEventListener("tinyMCEInitialized", initHixValue);
-        element.addEventListener("contentChanged", () =>
-            setHixLabelState(getContent().trim() ? "outdated" : "no-content")
-        );
+        element.addEventListener("contentChanged", () => {
+            const content = getContent().trim();
+            const labelState = (() => {
+                if (!content) {
+                    return "no-content";
+                }
+                if (content !== initialContent) {
+                    return "outdated";
+                }
+                return "updated";
+            })();
+            return setHixLabelState(labelState);
+        });
     });
 
     // Set listener for update button

integreat_cms/static/src/js/forms/autosave.ts

@@ -3,6 +3,7 @@ import { getCsrfToken } from "../utils/csrf-token";
 
 export const autosaveEditor = async () => {
     const form = document.getElementById("content_form") as HTMLFormElement;
+    const savedContent = tinymce.activeEditor.getContent({ format: "raw" });
     tinymce.triggerSave();
     const formData = new FormData(form);
     // Override status to "auto save"
@@ -19,6 +20,8 @@ export const autosaveEditor = async () => {
     // Set the form action to the url of the server response to make sure new pages aren't created multiple times
     form.action = data.url;
 
+    tinymce.activeEditor.startContent = savedContent;
+
     // mark the content as saved
     document.querySelectorAll("[data-unsaved-warning]").forEach((element) => {
         element.dispatchEvent(new Event("autosave"));

integreat_cms/static/src/js/forms/tinymce-init.ts

@@ -58,10 +58,25 @@ const toggleNoTranslate = (editor: Editor) => {
 
 export const getContent = (): string => tinymce.activeEditor.getContent();
 
+const monkeypatchEditor = () => {
+    function isActuallyDirty(this: Editor) {
+        return this.startContent !== this.getContent({ format: "raw" });
+    }
+    Editor.prototype.isDirty = isActuallyDirty;
+
+    const oldSetDirty = Editor.prototype.setDirty;
+    function newSetDirty(this: Editor, state: boolean) {
+        return oldSetDirty.call(this, state && this.isDirty() ? false : state);
+    }
+    Editor.prototype.setDirty = newSetDirty;
+};
+
 /**
  * This file initializes the tinymce editor.
  */
 window.addEventListener("load", () => {
+    monkeypatchEditor();
+
     const tinymceConfig = document.getElementById("tinymce-config-options");
 
     if (tinymceConfig) {