mirror of
https://github.com/OHTU-German-learning-website/OHTU-German-learning-website.git
synced 2026-10-12 19:13:51 +03:00
Revert "added fix and tests for console errors"
This reverts commit 9f89e552d4.
This commit is contained in:
@@ -1,56 +1,39 @@
|
||||
import parse, { domToReact, Element } from "html-react-parser";
|
||||
import parse, { domToReact } 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) => {
|
||||
if (domNode.type !== "tag") return;
|
||||
// Only process element nodes, not text or comment nodes
|
||||
if (domNode.type !== "tag") {
|
||||
return;
|
||||
}
|
||||
|
||||
const name = domNode.name?.toLowerCase();
|
||||
|
||||
if (name === "glossaryparagraph") {
|
||||
// Handle GlossaryParagraph custom tags
|
||||
if (domNode.name === "glossaryparagraph") {
|
||||
// Extract and convert child nodes to React, preserving HTML structure
|
||||
const children = domNode.children ? domToReact(domNode.children) : null;
|
||||
return (
|
||||
<GlossaryParagraph {...domNode.attribs}>{children}</GlossaryParagraph>
|
||||
);
|
||||
}
|
||||
|
||||
if (name === "glossarylistitem") {
|
||||
// Handle GlossaryListItem custom tags
|
||||
if (domNode.name === "glossarylistitem") {
|
||||
// Extract and convert child nodes to React, preserving HTML structure
|
||||
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;
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
@@ -205,41 +205,6 @@ 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", () => {
|
||||
|
||||
Reference in New Issue
Block a user