From df00d52d8aa3a273badbe404851900a5e8f408cb Mon Sep 17 00:00:00 2001
From: strasmus1 <rasmus.strahlendorff@gmail.com>
Date: Mon, 27 Apr 2026 12:15:43 +0000
Subject: [PATCH] Fixed glossary popup html handling, removed glossary entry
 popups within glossary entries

---
 gradesa/src/app/admin/glossary/page.js        |  2 +-
 gradesa/src/app/glossary/page.js              |  2 +-
 .../ui/glossary/GlossaryTooltip.jsx           |  5 ++-
 .../components/ui/render-html/render-html.jsx | 32 +++++++++++--------
 .../ui/render-html/render-html.test.jsx       |  5 +++
 5 files changed, 30 insertions(+), 16 deletions(-)

diff --git a/gradesa/src/app/admin/glossary/page.js b/gradesa/src/app/admin/glossary/page.js
index d89dd53..dcf8df5 100644
--- a/gradesa/src/app/admin/glossary/page.js
+++ b/gradesa/src/app/admin/glossary/page.js
@@ -78,7 +78,7 @@ export default function GlossaryList() {
               <Container key={entry.id} className="glossary-card">
                 <Column gap="sm">
                   <h4 className="glossary-word">{entry.word}</h4>
-                  <RenderHTML data={entry.word_definition} />
+                  <RenderHTML data={entry.word_definition} disableGlossary />
                   <Row justify="space-between" className="glossary-meta">
                     <span>
                       Erstellt:{" "}
diff --git a/gradesa/src/app/glossary/page.js b/gradesa/src/app/glossary/page.js
index 83ef551..296d6ef 100644
--- a/gradesa/src/app/glossary/page.js
+++ b/gradesa/src/app/glossary/page.js
@@ -34,7 +34,7 @@ export default function GlossaryPage() {
               <Container key={entry.id} className="glossary-card">
                 <Column gap="sm">
                   <h4 className="glossary-word">{entry.word}</h4>
-                  <RenderHTML data={entry.word_definition} />
+                  <RenderHTML data={entry.word_definition} disableGlossary />
                 </Column>
               </Container>
             ))}
diff --git a/gradesa/src/components/ui/glossary/GlossaryTooltip.jsx b/gradesa/src/components/ui/glossary/GlossaryTooltip.jsx
index 25bde00..04da5a8 100644
--- a/gradesa/src/components/ui/glossary/GlossaryTooltip.jsx
+++ b/gradesa/src/components/ui/glossary/GlossaryTooltip.jsx
@@ -2,6 +2,7 @@
 import { useGlossary } from "@/context/glossary.context";
 import { useState, useRef, useEffect } from "react";
 import styles from "./GlossaryTooltip.module.css";
+import RenderHTML from "@/components/ui/render-html/render-html";
 import { createPortal } from "react-dom";
 
 export default function GlossaryTooltip({ word, children }) {
@@ -117,7 +118,9 @@ export default function GlossaryTooltip({ word, children }) {
             }}
           >
             <h4 className={styles.tooltipTitle}>{entry.word}</h4>
-            <p className={styles.tooltipDefinition}>{entry.word_definition}</p>
+            <div className={styles.tooltipDefinition}>
+              <RenderHTML data={entry.word_definition} disableGlossary />
+            </div>
           </div>,
           portalElement
         )}
diff --git a/gradesa/src/components/ui/render-html/render-html.jsx b/gradesa/src/components/ui/render-html/render-html.jsx
index 2e9602f..66e4b00 100644
--- a/gradesa/src/components/ui/render-html/render-html.jsx
+++ b/gradesa/src/components/ui/render-html/render-html.jsx
@@ -50,24 +50,30 @@ const normalizeAttribs = (attributes = {}) => {
  * @param {{data: string}} props - Component props containing raw HTML string.
  * @returns {JSX.Element|null} Parsed React nodes wrapped in a `div`, or `null`.
  */
-export default function RenderHTML({ data }) {
+export default function RenderHTML({ data, disableGlossary = false }) {
   if (!data) return null;
 
+  const renderParagraph = (attributes, children) =>
+    disableGlossary ? (
+      <p {...attributes}>{children}</p>
+    ) : (
+      <GlossaryParagraph {...attributes}>{children}</GlossaryParagraph>
+    );
+
+  const renderListItem = (attributes, children) =>
+    disableGlossary ? (
+      <li {...attributes}>{children}</li>
+    ) : (
+      <GlossaryListItem {...attributes}>{children}</GlossaryListItem>
+    );
+
   // Handlers for specific custom tags. Each handler receives normalized
   // attributes and the already-converted children (as React nodes).
   const handlers = {
-    p: (attributes, children) => (
-      <GlossaryParagraph {...attributes}>{children}</GlossaryParagraph>
-    ),
-    li: (attributes, children) => (
-      <GlossaryListItem {...attributes}>{children}</GlossaryListItem>
-    ),
-    glossaryparagraph: (attributes, children) => (
-      <GlossaryParagraph {...attributes}>{children}</GlossaryParagraph>
-    ),
-    glossarylistitem: (attributes, children) => (
-      <GlossaryListItem {...attributes}>{children}</GlossaryListItem>
-    ),
+    p: renderParagraph,
+    li: renderListItem,
+    glossaryparagraph: renderParagraph,
+    glossarylistitem: renderListItem,
     column: (attributes, children) => {
       const safeAttribs = { ...attributes };
       safeAttribs.className = [safeAttribs.className, "glossary-column"]
diff --git a/gradesa/src/components/ui/render-html/render-html.test.jsx b/gradesa/src/components/ui/render-html/render-html.test.jsx
index 3eda650..0e24761 100644
--- a/gradesa/src/components/ui/render-html/render-html.test.jsx
+++ b/gradesa/src/components/ui/render-html/render-html.test.jsx
@@ -36,6 +36,11 @@ vi.mock("@/components/ui/glossary/GlossaryText", () => ({
       </li>
     );
   },
+  GlossaryOccurrenceProvider: function GlossaryOccurrenceProvider({
+    children,
+  }) {
+    return <>{children}</>;
+  },
 }));
 
 describe("RenderHTML Component", () => {