Merge pull request #7 from OHTU-German-learning-website/master

merge

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:{" "}

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>
             ))}

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
         )}

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"]

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", () => {