added fix and tests for console errors

gradesa/src/components/ui/render-html/render-html.jsx

@@ -1,39 +1,56 @@
-import parse, { domToReact } from "html-react-parser";
+import parse, { domToReact, Element } from "html-react-parser";
 import {
   GlossaryParagraph,
   GlossaryListItem,
 } from "@/components/ui/glossary/GlossaryText";
 
+// Korvataan allaolevat custom-tagit vastaavilla HTML-tageilla jotta console errorit saadaan pois:
+const tagMapToHtml = {
+  container: "div",
+  column: "div",
+  anchor: "a",
+};
+
 export default function RenderHTML({ data }) {
-  if (!data) {
-    return null;
-  }
+  if (!data) return null;
 
-  // Parse HTML and replace custom glossary tags with React components
   const parsedContent = parse(data, {
     replace: (domNode) => {
-      // Only process element nodes, not text or comment nodes
-      if (domNode.type !== "tag") {
-        return;
-      }
+      if (domNode.type !== "tag") return;
 
-      // Handle GlossaryParagraph custom tags
-      if (domNode.name === "glossaryparagraph") {
-        // Extract and convert child nodes to React, preserving HTML structure
+      const name = domNode.name?.toLowerCase();
+
+      if (name === "glossaryparagraph") {
         const children = domNode.children ? domToReact(domNode.children) : null;
         return (
           <GlossaryParagraph {...domNode.attribs}>{children}</GlossaryParagraph>
         );
       }
 
-      // Handle GlossaryListItem custom tags
-      if (domNode.name === "glossarylistitem") {
-        // Extract and convert child nodes to React, preserving HTML structure
+      if (name === "glossarylistitem") {
         const children = domNode.children ? domToReact(domNode.children) : null;
         return (
           <GlossaryListItem {...domNode.attribs}>{children}</GlossaryListItem>
         );
       }
+
+      // Muut custom-tagit -> standardi HTML
+      if (name in tagMapToHtml) {
+        const HtmlTag = tagMapToHtml[name];
+        const children = domNode.children ? domToReact(domNode.children) : null;
+        return <HtmlTag {...domNode.attribs}>{children}</HtmlTag>;
+      }
+
+      // Jos joku tuntematon tagi, normalisoidaan se diviksi
+      if (
+        !/^(div|span|p|li|ul|ol|a|strong|em|h[1-6]|img|br|hr|table|thead|tbody|tr|td|th|code|pre|blockquote)$/.test(
+          name
+        )
+      ) {
+        const children = domNode.children ? domToReact(domNode.children) : null;
+        return <div {...domNode.attribs}>{children}</div>;
+      }
+      return;
     },
   });
 

gradesa/src/components/ui/render-html/render-html.test.jsx

@@ -205,6 +205,41 @@ describe("RenderHTML Component", () => {
       expect(container.textContent).toContain("end");
       expect(container.textContent).toContain("finish");
     });
+
+    // Tests below are for the console errors regarding unknown tags:
+
+    it("should map <column> to <div>", () => {
+      const html = "<column>Column content</column>";
+      const { container } = render(<RenderHTML data={html} />);
+      const div = container.querySelector("div");
+      expect(div).toBeTruthy();
+      expect(div.textContent).toBe("Column content");
+    });
+
+    it("should map <container> to <div>", () => {
+      const html = '<container class="wrap"><p>Inside</p></container>';
+      const { container } = render(<RenderHTML data={html} />);
+      const div = container.querySelector("div.wrap");
+      expect(div).toBeTruthy();
+      expect(div.textContent).toContain("Inside");
+    });
+
+    it("should map <anchor> to <a>", () => {
+      const html = '<anchor href="/test">Go</anchor>';
+      const { container } = render(<RenderHTML data={html} />);
+      const a = container.querySelector("a");
+      expect(a).toBeTruthy();
+      expect(a.href).toContain("/test");
+      expect(a.textContent).toBe("Go");
+    });
+
+    it("should fallback unknown tags to <div>", () => {
+      const html = "<foo>Unknown</foo>";
+      const { container } = render(<RenderHTML data={html} />);
+      const div = container.querySelector("div");
+      expect(div).toBeTruthy();
+      expect(div.textContent).toBe("Unknown");
+    });
   });
 
   describe("Edge cases", () => {