proper detection whether HIX is outdated by comparing to previous con…

…tent used to get current value

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