Apply review comment

Author: jonathanarnault

packages/react-tei/src/tags/Value.spec.tsx

@@ -87,3 +87,120 @@ describe("Value", () => {
 		await expect.element(screen.container).toBeEmptyDOMElement();
 	});
 });
+
+describe("MathML", () => {
+	it.each<DocumentJson["attributes"]>([
+		{
+			"@xmlns": "http://www.w3.org/1998/Math/MathML",
+		},
+		{},
+	])("should render MathML tags without prefix", async (attributes) => {
+		const jsonValue: DocumentJson = {
+			tag: "math",
+			attributes,
+			value: [
+				{
+					tag: "mi",
+					attributes: {},
+					value: [{ tag: "#text", value: "x" }],
+				},
+				{
+					tag: "mo",
+					attributes: {},
+					value: [{ tag: "#text", value: "+" }],
+				},
+				{
+					tag: "mi",
+					attributes: {},
+					value: [{ tag: "#text", value: "y" }],
+				},
+			],
+		};
+
+		const screen = await render(<Value data={jsonValue} />, {
+			wrapper: ({ children }) => (
+				<TagCatalogProvider tagCatalog={tagCatalog}>
+					{children}
+				</TagCatalogProvider>
+			),
+		});
+
+		await expect.element(screen.getByRole("math")).toHaveTextContent("x+y");
+	});
+
+	it.each<string>([
+		"m",
+		"mml",
+	])("should render MathML tags with '%s' namespace prefix and xmlns attribute", async (prefix) => {
+		const jsonValue: DocumentJson = {
+			tag: `${prefix}:math`,
+			attributes: {
+				[`@xmlns:${prefix}`]: "http://www.w3.org/1998/Math/MathML",
+			},
+			value: [
+				{
+					tag: `${prefix}:mi`,
+					attributes: {},
+					value: [{ tag: "#text", value: "a" }],
+				},
+				{
+					tag: `${prefix}:mo`,
+					attributes: {},
+					value: [{ tag: "#text", value: "=" }],
+				},
+				{
+					tag: `${prefix}:mi`,
+					attributes: {},
+					value: [{ tag: "#text", value: "b" }],
+				},
+			],
+		};
+
+		const screen = await render(<Value data={jsonValue} />, {
+			wrapper: ({ children }) => (
+				<TagCatalogProvider tagCatalog={tagCatalog}>
+					{children}
+				</TagCatalogProvider>
+			),
+		});
+
+		await expect.element(screen.getByRole("math")).toHaveTextContent("a=b");
+	});
+
+	it.each<string>([
+		"m",
+		"mml",
+	])("should render MathML tags without xmlns", async (prefix) => {
+		const jsonValue: DocumentJson = {
+			tag: `${prefix}:math`,
+			attributes: {},
+			value: [
+				{
+					tag: `${prefix}:mi`,
+					attributes: {},
+					value: [{ tag: "#text", value: "p" }],
+				},
+				{
+					tag: `${prefix}:mo`,
+					attributes: {},
+					value: [{ tag: "#text", value: ">" }],
+				},
+				{
+					tag: `${prefix}:mi`,
+					attributes: {},
+					value: [{ tag: "#text", value: "q" }],
+				},
+			],
+		};
+
+		const screen = await render(<Value data={jsonValue} />, {
+			wrapper: ({ children }) => (
+				<TagCatalogProvider tagCatalog={tagCatalog}>
+					{children}
+				</TagCatalogProvider>
+			),
+		});
+
+		await expect.element(screen.getByRole("math")).toHaveTextContent("p>q");
+	});
+});

packages/react-tei/src/tags/Value.tsx

@@ -1,16 +1,10 @@
 import { DebugTag } from "../debug/DebugTag";
 import { IS_DEBUG } from "../debug/debug.const";
 import type { DocumentJson, DocumentJsonValue } from "../parser/document";
-import { MathMLContextProvider } from "./formula/mathml/MathMLContext";
-import { MathMLTag } from "./formula/mathml/MathMLTag";
-import { useMathMLContext } from "./formula/mathml/useMathMLContext";
 import { useTagCatalog } from "./TagCatalogProvider";
 
-const MATHML_NAMESPACE_URL = "http://www.w3.org/1998/Math/MathML";
-
 export function Value({ data }: ValueProps) {
 	const tagCatalog = useTagCatalog();
-	const mathMLNsPrefix = useMathMLContext();
 
 	if (!data) {
 		return null;
@@ -24,28 +18,36 @@ export function Value({ data }: ValueProps) {
 		return data;
 	}
 
-	const { tag, attributes, value } = data as DocumentJson;
+	const { tag: completeTag, value } = data as DocumentJson;
 
-	const mathMLNS = attributes
-		? Object.keys(attributes).find(
-				(key) =>
-					key.startsWith("@xmlns:") && attributes[key] === MATHML_NAMESPACE_URL,
-			)
-		: null;
+	const tag = completeTag.includes(":")
+		? completeTag.split(":")[1]
+		: completeTag;
 
-	if (mathMLNS) {
+	if (!tag) {
 		return (
-			<MathMLContextProvider nsPrefix={mathMLNS.replace("@xmlns:", "")}>
-				<MathMLTag data={data} />
-			</MathMLContextProvider>
+			<DebugTag
+				tag={data.tag}
+				attributes={data.attributes}
+				message={`Tag with XML prefix and without name`}
+				payload={data}
+				type="error"
+			>
+				<Value data={data.value} />
+			</DebugTag>
 		);
-	} else if (tag.startsWith(`${mathMLNsPrefix}:`)) {
-		return <MathMLTag data={data} />;
 	}
 
 	const TagComponent = tagCatalog[tag];
 	if (TagComponent) {
-		return <TagComponent data={data} />;
+		return (
+			<TagComponent
+				data={{
+					...data,
+					tag,
+				}}
+			/>
+		);
 	}
 
 	if (!IS_DEBUG) {

packages/react-tei/src/tags/formula/mathml/MathMLContext.tsx

@@ -1,13 +1,8 @@
 import { createElement } from "react";
 import type { ComponentProps } from "../../type";
 import { Value } from "../../Value";
-import { useMathMLContext } from "./useMathMLContext";
 
 export function MathMLTag({ data }: ComponentProps) {
-	const nsPrefix = useMathMLContext();
-
-	const tag = nsPrefix ? `${data.tag.replace(`${nsPrefix}:`, "")}` : data.tag;
-
 	const attributes = data.attributes
 		? Object.fromEntries(
 				Object.entries(data.attributes).map(([key, value]) => [
@@ -18,7 +13,7 @@ export function MathMLTag({ data }: ComponentProps) {
 		: {};
 
 	return createElement(
-		tag,
+		data.tag,
 		attributes,
 		data.value ? <Value data={data.value} /> : null,
 	);