From 3286df32fe1c6a9d6e0bf4bbd2e0448cf09fc75c Mon Sep 17 00:00:00 2001
From: Peter Nerlich <peter.nerlich@tuerantuer.org>
Date: Mon, 23 Oct 2023 13:45:24 +0200
Subject: [PATCH] proper detection whether HIX is outdated by comparing to
 previous content used to get current value

---
 .../release_notes/current/unreleased/2300.yml |  2 ++
 .../static/src/js/analytics/hix-widget.ts     | 28 +++++++++++++++----
 2 files changed, 25 insertions(+), 5 deletions(-)
 create mode 100644 integreat_cms/release_notes/current/unreleased/2300.yml

diff --git a/integreat_cms/release_notes/current/unreleased/2300.yml b/integreat_cms/release_notes/current/unreleased/2300.yml
new file mode 100644
index 0000000000..2dcc663c5e
--- /dev/null
+++ b/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
diff --git a/integreat_cms/static/src/js/analytics/hix-widget.ts b/integreat_cms/static/src/js/analytics/hix-widget.ts
index f2bbd25490..9896945ad5 100644
--- a/integreat_cms/static/src/js/analytics/hix-widget.ts
+++ b/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,13 +80,14 @@ 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())
@@ -92,6 +95,9 @@ const getHixValue = async () => {
             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